From ad6f365fea82befcdf3149a5e25e8ae63ca841bd Mon Sep 17 00:00:00 2001
From: da730 <sduchd@gmail.com>
Date: Fri, 29 Dec 2023 15:51:15 +0800
Subject: [PATCH] feat: update vmind playground

---
 .vscode/settings.json                         |   5 +-
 .../vmind/__tests__/browser/src/Layout.tsx    |  11 +-
 .../browser/src/pages/ChartPreview.tsx        |  15 ++-
 .../__tests__/browser/src/pages/DataInput.tsx | 120 ++++++++++++------
 .../__tests__/browser/src/pages/Home.tsx      |   7 +-
 packages/vmind/src/gpt/utils.ts               |   1 +
 6 files changed, 105 insertions(+), 54 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1bb26a9584..bc4c763a3d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,5 +22,8 @@
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
   // Typescript
-  "typescript.preferences.importModuleSpecifier": "project-relative"
+  "typescript.preferences.importModuleSpecifier": "project-relative",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/packages/vmind/__tests__/browser/src/Layout.tsx b/packages/vmind/__tests__/browser/src/Layout.tsx
index 23c3caac11..b967f3226b 100644
--- a/packages/vmind/__tests__/browser/src/Layout.tsx
+++ b/packages/vmind/__tests__/browser/src/Layout.tsx
@@ -6,15 +6,8 @@ export function LayoutWrap(props: any) {
     <Layout style={{ height: '100%' }}>
       <PageHeader
         style={{ background: 'var(--color-bg-2)', borderBottom: '1px solid #eee' }}
-        title="VChart Video"
-        subTitle="every word, every story"
-        extra={
-          <div>
-            <Button shape="round" type="primary">
-              sign in with google
-            </Button>
-          </div>
-        }
+        title="VMind Playground"
+        subTitle="make visualization easier"
       />
       {props.children}
     </Layout>
diff --git a/packages/vmind/__tests__/browser/src/pages/ChartPreview.tsx b/packages/vmind/__tests__/browser/src/pages/ChartPreview.tsx
index 5c68e4944f..a764c91faa 100644
--- a/packages/vmind/__tests__/browser/src/pages/ChartPreview.tsx
+++ b/packages/vmind/__tests__/browser/src/pages/ChartPreview.tsx
@@ -13,6 +13,7 @@ type IPropsType = {
         frameArr: any[];
       }
     | undefined;
+  costTime: number;
 };
 
 function downloadGif(link: string, filename = 'out') {
@@ -56,7 +57,7 @@ export function ChartPreview(props: IPropsType) {
     setSrc(src);
     setOutType('video');
     setGenerating(false);
-  }, [props.spec, props.time]);
+  }, [props, vmind]);
 
   const generateGif = useCallback(async () => {
     const { spec, time } = props;
@@ -69,7 +70,7 @@ export function ChartPreview(props: IPropsType) {
     setOutType('gif');
     setGenerating(false);
     // downloadVideo(src);
-  }, [props.spec, props.time]);
+  }, [props, vmind]);
 
   useEffect(() => {
     //defaultTicker.mode = 'raf';
@@ -90,7 +91,7 @@ export function ChartPreview(props: IPropsType) {
       cs.updateSpec(props.spec);
     }
     cs.renderAsync();
-  }, [props.spec, props.time]);
+  }, [chartSpace, props, props.spec, props.time]);
 
   return (
     <div className="right-chart">
@@ -142,6 +143,14 @@ export function ChartPreview(props: IPropsType) {
           <div className="right-chart-content">
             <div id="chart"></div>
           </div>
+          {props.spec ? (
+            <div>
+              <p>Total Time: {props.costTime / 1000} ms</p>
+              <p>spec:</p>
+              <TextArea value={JSON.stringify(props.spec, null, 4)} style={{ height: 300 }}></TextArea>
+              {/*<pre style={{ whiteSpace: 'pre' }}>{JSON.stringify(props.spec, null, 4)}</pre>*/}
+            </div>
+          ) : null}
         </Card>
       </Spin>
     </div>
diff --git a/packages/vmind/__tests__/browser/src/pages/DataInput.tsx b/packages/vmind/__tests__/browser/src/pages/DataInput.tsx
index 2a336582b1..58316b1e0e 100644
--- a/packages/vmind/__tests__/browser/src/pages/DataInput.tsx
+++ b/packages/vmind/__tests__/browser/src/pages/DataInput.tsx
@@ -1,6 +1,17 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import './index.scss';
-import { Avatar, Input, Divider, Button, InputNumber, Upload, Message, Select } from '@arco-design/web-react';
+import {
+  Avatar,
+  Input,
+  Divider,
+  Button,
+  InputNumber,
+  Upload,
+  Message,
+  Select,
+  Radio,
+  Checkbox
+} from '@arco-design/web-react';
 import {
   mockUserInput10,
   mockUserInput2,
@@ -28,6 +39,7 @@ import { Model } from '../../../../src/typings';
 
 const TextArea = Input.TextArea;
 const Option = Select.Option;
+const RadioGroup = Radio.Group;
 
 type IPropsType = {
   onSpecGenerate: (
@@ -35,7 +47,8 @@ type IPropsType = {
     time: {
       totalTime: number;
       frameArr: any[];
-    }
+    },
+    costTime: number
   ) => void;
 };
 const demoDataList: { [key: string]: any } = {
@@ -60,57 +73,77 @@ const demoDataList: { [key: string]: any } = {
   'Global GDP': mockUserInput6Eng,
   'Sales of different drinkings': mockUserInput3Eng
 };
+
+const globalVariables = (import.meta as any).env;
+const ModelConfigMap = {
+  [Model.SKYLARK]: { url: globalVariables.VITE_SKYLARK_URL, key: globalVariables.VITE_SKYLARK_KEY },
+  [Model.GPT3_5]: { url: globalVariables.VITE_GPT_URL, key: globalVariables.VITE_GPT_KEY },
+  [Model.GPT4]: { url: globalVariables.VITE_GPT_URL, key: globalVariables.VITE_GPT_KEY }
+};
+
 export function DataInput(props: IPropsType) {
   const defaultDataKey = Object.keys(demoDataList)[3];
   const [describe, setDescribe] = useState<string>(demoDataList[defaultDataKey].input);
   const [csv, setCsv] = useState<string>(demoDataList[defaultDataKey].csv);
   const [spec, setSpec] = useState<string>('');
   const [time, setTime] = useState<number>(1000);
-  const [loading, setLoading] = useState<boolean>(false);
-  const vmind = new VMind({
-    url: import.meta.env.VITE_GPT_URL ?? undefined,
-    model: Model.GPT3_5,
-    headers: {
-      'api-key': import.meta.env.VITE_GPT_KEY
-    }
-  });
+  const [model, setModel] = useState<Model>(Model.SKYLARK);
+  const [cache, setCache] = useState<boolean>(false);
 
-  //const vmind = new VMind({
-  //  url: import.meta.env.VITE_SKYLARK_URL ?? undefined,
-  //  model: Model.SKYLARK,
-  //  headers: {
-  //    'api-key': import.meta.env.VITE_SKYLARK_KEY
-  //  }
-  //});
+  const [loading, setLoading] = useState<boolean>(false);
+  const vmind = useMemo(
+    () =>
+      new VMind({
+        url: ModelConfigMap[model].url ?? undefined,
+        model,
+        cache,
+        headers: {
+          'api-key': ModelConfigMap[model].key
+        }
+      }),
+    [cache, model]
+  );
 
   const askGPT = useCallback(async () => {
     setLoading(true);
     const { fieldInfo, dataset } = vmind.parseCSVData(csv);
     //const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, describe);
+    const startTime = new Date().getTime();
     const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
-    props.onSpecGenerate(spec, time as any);
+    const endTime = new Date().getTime();
+    const costTime = endTime - startTime;
+    props.onSpecGenerate(spec, time as any, costTime);
     setLoading(false);
   }, [vmind, csv, describe, props]);
 
   return (
     <div className="left-sider">
-      <Select
-        style={{
-          width: '100%'
-        }}
-        defaultValue={defaultDataKey}
-        onChange={v => {
-          const dataObj = demoDataList[v];
-          setDescribe(dataObj.input);
-          setCsv(dataObj.csv);
-        }}
-      >
-        {Object.keys(demoDataList).map(name => (
-          <Option key={name} value={name}>
-            {name}
-          </Option>
-        ))}
-      </Select>
+      <div style={{ width: '90%', marginBottom: 20 }}>
+        <p>
+          <Avatar size={18} style={{ backgroundColor: '#3370ff' }}>
+            0
+          </Avatar>
+          <span style={{ marginLeft: 10 }}>Select Demo Data (optional)</span>
+        </p>
+        <Select
+          style={{
+            width: '100%'
+          }}
+          defaultValue={defaultDataKey}
+          onChange={v => {
+            const dataObj = demoDataList[v];
+            setDescribe(dataObj.input);
+            setCsv(dataObj.csv);
+          }}
+        >
+          {Object.keys(demoDataList).map(name => (
+            <Option key={name} value={name}>
+              {name}
+            </Option>
+          ))}
+        </Select>
+      </div>
+
       <div>
         <p>
           <Avatar size={18} style={{ backgroundColor: '#3370ff' }}>
@@ -169,7 +202,7 @@ export function DataInput(props: IPropsType) {
       </div>
 
       <Divider style={{ marginTop: 60 }} />
-
+      {/*
       <div>
         <p>
           <Avatar size={18} style={{ backgroundColor: '#3370ff' }}>
@@ -191,8 +224,19 @@ export function DataInput(props: IPropsType) {
           }}
         />
         <InputNumber defaultValue={time} onChange={v => setTime(v)}></InputNumber>
+      </div>*/}
+      <div style={{ width: '90%', marginBottom: 10 }}>
+        <RadioGroup value={model} onChange={v => setModel(v)}>
+          <Radio value={Model.GPT3_5}>GPT-3.5</Radio>
+          <Radio value={Model.GPT4}>GPT-4</Radio>
+          <Radio value={Model.SKYLARK}>skylark pro</Radio>
+        </RadioGroup>
+      </div>
+      <div style={{ width: '90%', marginBottom: 10 }}>
+        <Checkbox checked={cache} onChange={v => setCache(v)}>
+          Enable Cache
+        </Checkbox>
       </div>
-
       <div className="generate-botton">
         <Button
           loading={loading}
diff --git a/packages/vmind/__tests__/browser/src/pages/Home.tsx b/packages/vmind/__tests__/browser/src/pages/Home.tsx
index 291cbd8295..9d1b4166a6 100644
--- a/packages/vmind/__tests__/browser/src/pages/Home.tsx
+++ b/packages/vmind/__tests__/browser/src/pages/Home.tsx
@@ -11,24 +11,25 @@ export function Home() {
     totalTime: number;
     frameArr: any[];
   }>();
+  const [costTime, setCostTime] = useState<number>(0);
   return (
     <Layout>
       <Sider
-        resizeDirections={['right']}
         style={{
           height: '100%',
           minWidth: 300
         }}
       >
         <DataInput
-          onSpecGenerate={(spec, time) => {
+          onSpecGenerate={(spec, time, costTime) => {
             setSpec(spec);
             setTime(time);
+            setCostTime(costTime);
           }}
         />
       </Sider>
       <Content>
-        <ChartPreview spec={spec} time={time} />
+        <ChartPreview spec={spec} time={time} costTime={costTime} />
       </Content>
     </Layout>
   );
diff --git a/packages/vmind/src/gpt/utils.ts b/packages/vmind/src/gpt/utils.ts
index 6fb2ed8ca7..e1b25c54fa 100644
--- a/packages/vmind/src/gpt/utils.ts
+++ b/packages/vmind/src/gpt/utils.ts
@@ -27,6 +27,7 @@ export const requestGPT = async (prompt: string, userMessage: string, options: I
         ],
         max_tokens: options?.max_tokens ?? 2000,
         temperature: options?.temperature ?? 0
+        //response_format: { type: 'json_object' } //Only models after gpt-3.5-turbo-1106 support this parameter.
       }
     })
       .then(response => response.data)