feat(text): fit antd darkAlgorithm (#26)

* feat(text): fit antd darkAlgorithm * chore: run format script to fix ci lint error * Create flat-camels-matter.md * chore: filter big files * chore: ci --------- Co-authored-by: lvisei <[email protected]>
antvis · Nov 21, 2024 · e6b4475 · e6b4475
1 parent c2633b8
commit e6b4475
Show file tree

Hide file tree

Showing 30 changed files with 575 additions and 231 deletions.
diff --git a/.changeset/flat-camels-matter.md b/.changeset/flat-camels-matter.md
@@ -0,0 +1,5 @@
+---
+'@antv/gpt-vis': patch
+---
+
+feat(text): fit antd darkAlgorithm
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [master]
+    branches: [main]
     paths:
       - 'src/**'
       - '__tests__/**'

diff --git a/evaluations/.prettierignore b/evaluations/.prettierignore
@@ -0,0 +1,12 @@
+.DS_Store
+.gitignore
+.prettierignore
+node_modules
+yarn.lock
+yarn-error.log
+npm-debug.log
+
+datastes/recommend/gpt_vis_train.json
+datastes/recommend/evalResult.json
+datastes/recommend/eval-result.json
+datastes/recommend/eval_result.json
diff --git a/evaluations/datastes/chart/histogram/eval.json b/evaluations/datastes/chart/histogram/eval.json
@@ -15,10 +15,7 @@
     "question": "用直方图展示某城市一个月内的日平均气温（单位：摄氏度），气温在 -5 到 25 度之间，将其划分为 6 个区间，数据如下：`[-2, 5, 10, 15, 20, 25, 0, 12]`。",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":-2},{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":0},{\"value\":12}],\"binNumber\":6}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":-2},{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":0},{\"value\":12}],\"binNumber\":6}",
-    "reference": [
-      "热力地图 - HeatMap 使用示例",
-      "直方图 - Histogram Chart 图表用法 数据要求"
-    ]
+    "reference": ["热力地图 - HeatMap 使用示例", "直方图 - Histogram Chart 图表用法 数据要求"]
   },
   {
     "type": "text2chart",
@@ -47,10 +44,7 @@
     "question": "用直方图展示某健身房会员每月的锻炼次数，锻炼次数在 0-30 次之间，将其划分为 6 个区间，数据如下：`[5, 10, 15, 20, 25, 30, 7, 13]`。",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":30},{\"value\":7},{\"value\":13}],\"binNumber\":6}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":30},{\"value\":7},{\"value\":13}],\"binNumber\":6}",
-    "reference": [
-      "散点图 - Scatter Chart 使用示例",
-      "直方图 - Histogram Chart 图表用法 数据要求"
-    ]
+    "reference": ["散点图 - Scatter Chart 使用示例", "直方图 - Histogram Chart 图表用法 数据要求"]
   },
   {
     "type": "text2chart",
@@ -93,10 +87,7 @@
     "question": "用直方图展示商品价格的分布，价格在 0-1000 之间,数据如下：`[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]`：",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":100},{\"value\":200},{\"value\":300},{\"value\":400},{\"value\":500},{\"value\":600},{\"value\":700},{\"value\":800},{\"value\":900},{\"value\":1000}],\"binNumber\":10}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":100},{\"value\":200},{\"value\":300},{\"value\":400},{\"value\":500},{\"value\":600},{\"value\":700},{\"value\":800},{\"value\":900},{\"value\":1000}]}",
-    "reference": [
-      "矩阵树图 -Treemap Chart 使用示例",
-      "直方图 - Histogram Chart 基础概念"
-    ]
+    "reference": ["矩阵树图 -Treemap Chart 使用示例", "直方图 - Histogram Chart 基础概念"]
   },
   {
     "type": "data2chart",

diff --git a/evaluations/datastes/chart/histogram/metrics.json b/evaluations/datastes/chart/histogram/metrics.json
@@ -16,10 +16,7 @@
     "question": "用直方图展示某城市一个月内的日平均气温（单位：摄氏度），气温在 -5 到 25 度之间，将其划分为 6 个区间，数据如下：`[-2, 5, 10, 15, 20, 25, 0, 12]`。",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":-2},{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":0},{\"value\":12}],\"binNumber\":6}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":-2},{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":0},{\"value\":12}],\"binNumber\":6}",
-    "reference": [
-      "热力地图 - HeatMap 使用示例",
-      "直方图 - Histogram Chart 图表用法 数据要求"
-    ],
+    "reference": ["热力地图 - HeatMap 使用示例", "直方图 - Histogram Chart 图表用法 数据要求"],
     "correctness": 1
   },
   {
@@ -51,10 +48,7 @@
     "question": "用直方图展示某健身房会员每月的锻炼次数，锻炼次数在 0-30 次之间，将其划分为 6 个区间，数据如下：`[5, 10, 15, 20, 25, 30, 7, 13]`。",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":30},{\"value\":7},{\"value\":13}],\"binNumber\":6}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":5},{\"value\":10},{\"value\":15},{\"value\":20},{\"value\":25},{\"value\":30},{\"value\":7},{\"value\":13}],\"binNumber\":6}",
-    "reference": [
-      "散点图 - Scatter Chart 使用示例",
-      "直方图 - Histogram Chart 图表用法 数据要求"
-    ],
+    "reference": ["散点图 - Scatter Chart 使用示例", "直方图 - Histogram Chart 图表用法 数据要求"],
     "correctness": 1
   },
   {
@@ -102,10 +96,7 @@
     "question": "用直方图展示商品价格的分布，价格在 0-1000 之间,数据如下：`[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]`：",
     "response": "{\"type\":\"histogram\",\"data\":[{\"value\":100},{\"value\":200},{\"value\":300},{\"value\":400},{\"value\":500},{\"value\":600},{\"value\":700},{\"value\":800},{\"value\":900},{\"value\":1000}],\"binNumber\":10}",
     "answer": "{\"type\":\"histogram\",\"data\":[{\"value\":100},{\"value\":200},{\"value\":300},{\"value\":400},{\"value\":500},{\"value\":600},{\"value\":700},{\"value\":800},{\"value\":900},{\"value\":1000}]}",
-    "reference": [
-      "矩阵树图 -Treemap Chart 使用示例",
-      "直方图 - Histogram Chart 基础概念"
-    ],
+    "reference": ["矩阵树图 -Treemap Chart 使用示例", "直方图 - Histogram Chart 基础概念"],
     "correctness": 1
   },
   {

diff --git a/evaluations/datastes/chart/histogram/test.json b/evaluations/datastes/chart/histogram/test.json
@@ -4,13 +4,7 @@
     "question": "用直方图展示某学校学生每周阅读时间（单位：小时），阅读时间在 0-10 小时之间，将其划分为 5 个区间，数据如下：`[3, 7, 2, 8, 5]`。",
     "answer": {
       "type": "histogram",
-      "data": [
-        { "value": 3 },
-        { "value": 7 },
-        { "value": 2 },
-        { "value": 8 },
-        { "value": 5 }
-      ],
+      "data": [{ "value": 3 }, { "value": 7 }, { "value": 2 }, { "value": 8 }, { "value": 5 }],
       "binNumber": 5
     }
   },
@@ -180,12 +174,7 @@
     "question": "用直方图可视化我的数据：`[{ \"value\": 15 }, { \"value\": 20 }, { \"value\": 25 }, { \"value\": 30 }]`",
     "answer": {
       "type": "histogram",
-      "data": [
-        { "value": 15 },
-        { "value": 20 },
-        { "value": 25 },
-        { "value": 30 }
-      ],
+      "data": [{ "value": 15 }, { "value": 20 }, { "value": 25 }, { "value": 30 }],
       "binNumber": 4
     }
   },
@@ -194,13 +183,7 @@
     "question": "请帮我把这组数据用直方图展示出来：`[{ \"value\": 10 }, { \"value\": 15 }, { \"value\": 20 }, { \"value\": 25 }, { \"value\": 30 }]`，并且我希望有5个区间。",
     "answer": {
       "type": "histogram",
-      "data": [
-        { "value": 10 },
-        { "value": 15 },
-        { "value": 20 },
-        { "value": 25 },
-        { "value": 30 }
-      ],
+      "data": [{ "value": 10 }, { "value": 15 }, { "value": 20 }, { "value": 25 }, { "value": 30 }],
       "binNumber": 5
     }
   },

diff --git a/evaluations/datastes/chart/treemap/eval.json b/evaluations/datastes/chart/treemap/eval.json
@@ -40,20 +40,14 @@
     "question": "用矩阵树图展示一个软件开发公司的项目情况及其投入的开发人员数量，如公司有三个主要项目：移动应用开发、Web 开发和嵌入式系统开发。移动应用开发有 150 人，Web 开发有 100 人，嵌入式系统开发有 200 人。移动应用开发分为 Android 开发 80 人和 iOS 开发 70 人；Web 开发分为前端开发 60 人和后端开发 40 人；嵌入式系统开发分为驱动开发 120 人和应用开发 80 人：",
     "response": "{\"type\":\"treemap\",\"data\":[{\"name\":\"移动应用开发\",\"value\":150,\"children\":[{\"name\":\"Android 开发\",\"value\":80},{\"name\":\"iOS 开发\",\"value\":70}]},{\"name\":\"Web 开发\",\"value\":100,\"children\":[{\"name\":\"前端开发\",\"value\":60},{\"name\":\"后端开发\",\"value\":40}]},{\"name\":\"嵌入式系统开发\",\"value\":200,\"children\":[{\"name\":\"驱动开发\",\"value\":120},{\"name\":\"应用开发\",\"value\":80}]}]}",
     "answer": "{\"type\":\"treemap\",\"data\":[{\"name\":\"移动应用开发\",\"value\":150,\"children\":[{\"name\":\"Android 开发\",\"value\":80},{\"name\":\"iOS 开发\",\"value\":70}]},{\"name\":\"Web 开发\",\"value\":100,\"children\":[{\"name\":\"前端开发\",\"value\":60},{\"name\":\"后端开发\",\"value\":40}]},{\"name\":\"嵌入式系统开发\",\"value\":200,\"children\":[{\"name\":\"驱动开发\",\"value\":120},{\"name\":\"应用开发\",\"value\":80}]}]}",
-    "reference": [
-      "矩阵树图 -Treemap Chart 使用示例",
-      "思维导图 - Mind Map 使用示例"
-    ]
+    "reference": ["矩阵树图 -Treemap Chart 使用示例", "思维导图 - Mind Map 使用示例"]
   },
   {
     "type": "data2chart",
     "question": "用矩阵树图展示不同地区能源消耗情况的数据 `[{ \"name\": \"北美洲\", \"consumption\": 3000, \"children\": [{ \"name\": \"美国\", \"consumption\": 2500 }, { \"name\": \"加拿大\", \"consumption\": 500 }]}, { \"name\": \"亚洲\", \"consumption\": 4000 }]`：",
     "response": "{\"type\":\"treemap\",\"data\":[{\"name\":\"北美洲\",\"value\":3000,\"children\":[{\"name\":\"美国\",\"value\":2500},{\"name\":\"加拿大\",\"value\":500}]},{\"name\":\"亚洲\",\"value\":4000}]}",
     "answer": "{\"type\":\"treemap\",\"data\":[{\"name\":\"北美洲\",\"value\":3000,\"children\":[{\"name\":\"美国\",\"value\":2500},{\"name\":\"加拿大\",\"value\":500}]},{\"name\":\"亚洲\",\"value\":4000}]}",
-    "reference": [
-      "矩阵树图 -Treemap Chart 基础概念",
-      "面积图 - Area Chart 使用示例"
-    ]
+    "reference": ["矩阵树图 -Treemap Chart 基础概念", "面积图 - Area Chart 使用示例"]
   },
   {
     "type": "data2chart",
@@ -92,20 +86,14 @@
     "question": "用矩阵树图展示不同地区能源消耗情况的数据 `[{ \"亚洲\": 1500, \"children\": [{ \"中国\": 800 }, { \"印度\": 700 }]}, { \"欧洲\": 1200, \"children\": [{ \"德国\": 400 }, { \"法国\": 300 }, { \"英国\": 500 }]}]`：",
     "response": "{\"type\":\"treemap\",\"data\":[{\"name\":\"亚洲\",\"value\":1500,\"children\":[{\"name\":\"中国\",\"value\":800},{\"name\":\"印度\",\"value\":700}]},{\"name\":\"欧洲\",\"value\":1200,\"children\":[{\"name\":\"德国\",\"value\":400},{\"name\":\"法国\",\"value\":300},{\"name\":\"英国\",\"value\":500}]}]}",
     "answer": "{\"type\":\"treemap\",\"data\":[{\"name\":\"亚洲\",\"value\":1500,\"children\":[{\"name\":\"中国\",\"value\":800},{\"name\":\"印度\",\"value\":700}]},{\"name\":\"欧洲\",\"value\":1200,\"children\":[{\"name\":\"德国\",\"value\":400},{\"name\":\"法国\",\"value\":300},{\"name\":\"英国\",\"value\":500}]}]}",
-    "reference": [
-      "矩阵树图 -Treemap Chart 基础概念",
-      "面积图 - Area Chart 使用示例"
-    ]
+    "reference": ["矩阵树图 -Treemap Chart 基础概念", "面积图 - Area Chart 使用示例"]
   },
   {
     "type": "data2chart",
     "question": "用矩阵树图来表示各年龄段人口分布数据 `[{ \"0-18岁\": 3000 }, { \"19-60岁\": 12000 }, { \"60岁以上\": 5000 }]`：",
     "response": "{\"type\":\"treemap\",\"data\":[{\"name\":\"0-18岁\",\"value\":3000},{\"name\":\"19-60岁\",\"value\":12000},{\"name\":\"60岁以上\",\"value\":5000}]}",
     "answer": "{\"type\":\"treemap\",\"data\":[{\"name\":\"0-18岁\",\"value\":3000},{\"name\":\"19-60岁\",\"value\":12000},{\"name\":\"60岁以上\",\"value\":5000}]}",
-    "reference": [
-      "散点图 - Scatter Chart 使用示例",
-      "矩阵树图 -Treemap Chart 基础概念"
-    ]
+    "reference": ["散点图 - Scatter Chart 使用示例", "矩阵树图 -Treemap Chart 基础概念"]
   },
   {
     "type": "data2chart",
@@ -119,10 +107,7 @@
     "question": "以矩阵树图形式呈现各个部门的预算分配 `[{ \"研发部\": 20000, \"children\": [{ \"硬件组\": 10000 }, { \"软件组\": 10000 }]}, { \"市场部\": 15000 }, { \"行政部\": 5000 }]`：",
     "response": "{\"type\":\"treemap\",\"data\":[{\"name\":\"研发部\",\"value\":20000,\"children\":[{\"name\":\"硬件组\",\"value\":10000},{\"name\":\"软件组\",\"value\":10000}]},{\"name\":\"市场部\",\"value\":15000},{\"name\":\"行政部\",\"value\":5000}]}",
     "answer": "{\"type\":\"treemap\",\"data\":[{\"name\":\"研发部\",\"value\":20000,\"children\":[{\"name\":\"硬件组\",\"value\":10000},{\"name\":\"软件组\",\"value\":10000}]},{\"name\":\"市场部\",\"value\":15000},{\"name\":\"行政部\",\"value\":5000}]}",
-    "reference": [
-      "组织架构图 - Organization Chart 使用示例",
-      "矩阵树图 -Treemap Chart 使用示例"
-    ]
+    "reference": ["组织架构图 - Organization Chart 使用示例", "矩阵树图 -Treemap Chart 使用示例"]
   },
   {
     "type": "data2chart",

diff --git a/evaluations/datastes/chart/treemap/metrics.json b/evaluations/datastes/chart/treemap/metrics.json
diff --git a/evaluations/prompts/histogram-chart/data2chart.md b/evaluations/prompts/histogram-chart/data2chart.md
@@ -1,4 +1,3 @@
-
 ## 角色
 
 你是一个 mock 图表数据生成器，生成直方图相关的可视化问答对数据。
@@ -12,38 +11,45 @@
 ## 直方图图表知识库
 
 ### 图表属性
+
 ```typescript
 type Histogram = {
-  type: "histogram";
+  type: 'histogram';
   data: { value: number }[];
   binNumber?: number;
-}
+};
 ```
 
 ### 图表 spec
+
 ```json
 {
   "type": "histogram",
-  "data": [
-    { "value": 2 },
-    { "value": 5 },
-    { "value": 8 },
-    { "value": 3 }
-  ],
+  "data": [{ "value": 2 }, { "value": 5 }, { "value": 8 }, { "value": 3 }],
   "binNumber": 4
 }
 ```
 
 ### 数据要求
-+ type：图表的类型，必填，文本类型，值必须为 "histogram"。
-+ data：图表的数据，必填，数组对象类型；
-    - value：数据频率，必填，数值类型；
-+ binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
+
+- type：图表的类型，必填，文本类型，值必须为 "histogram"。
+- data：图表的数据，必填，数组对象类型；
+  - value：数据频率，必填，数值类型；
+- binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
 
 ## 参考例子
 
 ```json
-[{"type":"data2chart","question":"用直方图可视化我的数据：`[{ \"value\": 20 }, { \"value\": 25 }, { \"value\": 30 }, { \"value\": 35 }]`","answer":{"type":"histogram","data":[{"value":20},{"value":25},{"value":30},{"value":35}]}}]
+[
+  {
+    "type": "data2chart",
+    "question": "用直方图可视化我的数据：`[{ \"value\": 20 }, { \"value\": 25 }, { \"value\": 30 }, { \"value\": 35 }]`",
+    "answer": {
+      "type": "histogram",
+      "data": [{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }]
+    }
+  }
+]
 ```
 
 ## 要求

diff --git a/evaluations/prompts/histogram-chart/text2chart.md b/evaluations/prompts/histogram-chart/text2chart.md
@@ -1,4 +1,3 @@
-
 ## 角色
 
 你是一个 mock 图表数据生成器，生成直方图相关的可视化问答对数据。
@@ -12,38 +11,52 @@
 ## 直方图图表知识库
 
 ### 图表属性
+
 ```typescript
 type Histogram = {
-  type: "histogram";
+  type: 'histogram';
   data: { value: number }[];
   binNumber?: number;
-}
+};
 ```
 
 ### 图表 spec
+
 ```json
 {
   "type": "histogram",
-  "data": [
-    { "value": 2 },
-    { "value": 5 },
-    { "value": 8 },
-    { "value": 3 }
-  ],
+  "data": [{ "value": 2 }, { "value": 5 }, { "value": 8 }, { "value": 3 }],
   "binNumber": 4
 }
 ```
 
 ### 数据要求
-+ type：图表的类型，必填，文本类型，值必须为 "histogram"。
-+ data：图表的数据，必填，数组对象类型；
-    - value：数据频率，必填，数值类型；
-+ binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
+
+- type：图表的类型，必填，文本类型，值必须为 "histogram"。
+- data：图表的数据，必填，数组对象类型；
+  - value：数据频率，必填，数值类型；
+- binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
 
 ## 参考例子
 
 ```json
-[{"type":"text2chart","question":"用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：`[78 , 88, 60, 100, 95]`：","answer":{"type":"histogram","data":[{"value":78},{"value":88},{"value":60},{"value":100},{"value":95}],"binNumber":5}}]
+[
+  {
+    "type": "text2chart",
+    "question": "用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：`[78 , 88, 60, 100, 95]`：",
+    "answer": {
+      "type": "histogram",
+      "data": [
+        { "value": 78 },
+        { "value": 88 },
+        { "value": 60 },
+        { "value": 100 },
+        { "value": 95 }
+      ],
+      "binNumber": 5
+    }
+  }
+]
 ```
 
 ## 要求