From 67febd3e256b547181b089b93ca16694d5117129 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 22 Nov 2024 09:58:56 +0800
Subject: [PATCH] style: create images ux

---
 config/config.ts                              |  2 +-
 config/proxy.ts                               | 27 +++++-
 config/routes.ts                              |  2 +-
 src/components/echarts/scatter.tsx            | 12 +--
 src/components/markdown-viewer/index.tsx      | 19 ++--
 src/locales/en-US/playground.ts               |  5 +
 src/locales/zh-CN/menu.ts                     |  2 +-
 src/locales/zh-CN/playground.ts               |  5 +
 src/pages/api-keys/components/add-apikey.tsx  | 13 +--
 src/pages/api-keys/config/index.ts            | 28 +++++-
 src/pages/llmodels/components/model-card.tsx  |  1 +
 .../playground/components/ground-images.tsx   | 93 ++++++++++---------
 src/utils/fetch-chunk-data.ts                 |  4 +-
 src/utils/index.ts                            | 10 ++
 14 files changed, 150 insertions(+), 73 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index e93cb0b9..6b51745c 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -14,7 +14,7 @@ const isProduction = env === 'production';
 const t = Date.now();
 export default defineConfig({
   proxy: {
-    ...proxy('http://csvhs44p420c73bdb41g-80.agent.damodel.com')
+    ...proxy()
   },
   history: {
     type: 'hash'
diff --git a/config/proxy.ts b/config/proxy.ts
index 1013d6a6..1915b1c4 100644
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -18,10 +18,35 @@ export default function createProxyTable(target?: string) {
         changeOrigin: true,
         secure: false,
         ws: true,
+        buffer: false,
+        selfHandleResponse: false,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}`, `/${api}`),
         headers: {
           origin: newTarget,
-          Connection: 'keep-alive'
+          Connection: 'keep-alive',
+          'Cache-Control': 'no-cache'
+        },
+        onProxyRes: (proxyRes: any, req: any, res: any) => {
+          // let body = '';
+          // proxyRes.on('data', (chunk) => {
+          //   body += chunk;
+          //   console.log('Received data from target server::::::::::', chunk);
+          // });
+
+          // proxyRes.on('end', () => {
+          //   console.log('Received data from target server=================end');
+          //   console.log(body);
+          // });
+          if (req.headers.accept === 'text/event-stream') {
+            res.writeHead(res.statusCode, {
+              'Content-Type': 'text/event-stream',
+              'Cache-Control': 'no-cache',
+              Connection: 'keep-alive',
+              'X-Accel-Buffering': 'no',
+              'Access-Control-Allow-Origin': '*'
+            });
+            proxyRes.pipe(res);
+          }
         }
       };
       return obj;
diff --git a/config/routes.ts b/config/routes.ts
index 35cd2bd2..6e7f45a2 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -36,7 +36,7 @@ export default [
       {
         name: 'text2images',
         title: 'Text2Images',
-        path: '/playground/text-to-images',
+        path: '/playground/text-to-image',
         key: 'text2images',
         icon: 'Comment',
         component: './playground/images'
diff --git a/src/components/echarts/scatter.tsx b/src/components/echarts/scatter.tsx
index 774fe767..a59309fb 100644
--- a/src/components/echarts/scatter.tsx
+++ b/src/components/echarts/scatter.tsx
@@ -28,16 +28,16 @@ const options: any = {
       }
     },
     axisLine: {
-      show: false,
+      show: true,
       lineStyle: {
-        color: '#F2F2F2'
+        color: '#DCDCDC'
       }
     },
     axisTick: {
       show: false
     },
     axisLabel: {
-      show: false
+      show: true
     },
     boundaryGap: [0.05, 0.05]
   },
@@ -54,16 +54,16 @@ const options: any = {
       }
     },
     axisLine: {
-      show: false,
+      show: true,
       lineStyle: {
-        color: '#F2F2F2'
+        color: '#DCDCDC'
       }
     },
     axisTick: {
       show: false
     },
     axisLabel: {
-      show: false
+      show: true
     }
   },
 
diff --git a/src/components/markdown-viewer/index.tsx b/src/components/markdown-viewer/index.tsx
index 42dd5b00..6b50c4b7 100644
--- a/src/components/markdown-viewer/index.tsx
+++ b/src/components/markdown-viewer/index.tsx
@@ -1,3 +1,4 @@
+import { isHTMLDocumentString } from '@/utils';
 import { EyeOutlined } from '@ant-design/icons';
 import { Checkbox, Image, Typography } from 'antd';
 import { unescape } from 'lodash';
@@ -198,12 +199,18 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
   }, [content, generateImgSrc]);
 
   return (
-    <div
-      style={{ height }}
-      className="markdown-viewer custom-scrollbar-horizontal"
-    >
-      {renderTokens(tokens)}
-    </div>
+    <>
+      {isHTMLDocumentString(content) ? (
+        <div dangerouslySetInnerHTML={{ __html: content }} style={{ height }} />
+      ) : (
+        <div
+          style={{ height }}
+          className="markdown-viewer custom-scrollbar-horizontal"
+        >
+          {renderTokens(tokens)}
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index a3ff0690..2cfed088 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -43,6 +43,7 @@ export default {
   'playground.toolbar.compare4Model': '4-Model Comparison',
   'playground.toolbar.compare6Model': '6-Model Comparison',
   'playground.input.holder': 'Type <kbd>/</kbd> to input message',
+  'playground.input.prompt.holder': 'Type <kbd>/</kbd> to input prompt',
   'playground.input.keyword.holder': 'Type <kbd>/</kbd> to input your query',
   'playground.compare.apply': 'Apply',
   'playground.compare.applytoall': 'Apply to all models',
@@ -61,6 +62,10 @@ export default {
   'playground.params.height': 'Height',
   'playground.params.custom': 'Custom',
   'playground.params.empty.tips': 'Generated images will appear here',
+  'playground.params.standard': 'Standard',
+  'playground.params.hd': 'HD',
+  'playground.params.style.vivid': 'Vivid',
+  'playground.params.style.natural': 'Natural',
   'playground.embedding.documents': 'Documents',
   'playground.embedding.addtext': 'Add Text',
   'playground.embedding.inputyourtext': 'Input your text',
diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts
index 70d573ba..735195d7 100644
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@@ -5,7 +5,7 @@ export default {
   'menu.playground.embedding': '文本嵌入',
   'menu.playground.chat': '对话',
   'menu.playground.speech': '语音',
-  'menu.playground.text2images': '图片',
+  'menu.playground.text2images': '文生图',
   'menu.compare': '多模型对比',
   'menu.models': '模型',
   'menu.resources': '资源',
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index 157e92d9..ffff46ef 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -44,6 +44,7 @@ export default {
   'playground.toolbar.compare6Model': '6 模型对比',
   'playground.input.holder': '按 <kbd>/</kbd> 开始输入',
   'playground.input.keyword.holder': '按 <kbd>/</kbd> 输入你的查询',
+  'playground.input.prompt.holder': '按 <kbd>/</kbd> 输入提示',
   'playground.compare.apply': '应用',
   'playground.compare.applytoall': '应用到所有模型',
   'playground.model.noavailable': '无可用模型',
@@ -60,6 +61,10 @@ export default {
   'playground.params.width': '宽度',
   'playground.params.height': '高度',
   'playground.params.custom': '自定义',
+  'playground.params.standard': '标准',
+  'playground.params.hd': '高清',
+  'playground.params.style.vivid': '生动',
+  'playground.params.style.natural': '自然',
   'playground.params.empty.tips': '生成的图片将出现在这里',
   'playground.embedding.documents': '文档',
   'playground.embedding.addtext': '添加文本',
diff --git a/src/pages/api-keys/components/add-apikey.tsx b/src/pages/api-keys/components/add-apikey.tsx
index 430fbaed..e2223b28 100644
--- a/src/pages/api-keys/components/add-apikey.tsx
+++ b/src/pages/api-keys/components/add-apikey.tsx
@@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Button, Form, Modal, Select, Tag } from 'antd';
+import { Button, Form, Modal, Tag } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { createApisKey } from '../apis';
@@ -160,17 +160,10 @@ const AddModal: React.FC<AddModalProps> = ({
               ]}
             >
               <SealSelect
+                options={expirationOptions}
                 label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
                 required
-              >
-                {expirationOptions.map((option) => {
-                  return (
-                    <Select.Option key={option.value} value={option.value}>
-                      {intl.formatMessage({ id: option.label })}
-                    </Select.Option>
-                  );
-                })}
-              </SealSelect>
+              ></SealSelect>
             </Form.Item>
             <Form.Item<FormData>
               name="description"
diff --git a/src/pages/api-keys/config/index.ts b/src/pages/api-keys/config/index.ts
index 99f1ae30..db0a2c9a 100644
--- a/src/pages/api-keys/config/index.ts
+++ b/src/pages/api-keys/config/index.ts
@@ -1,6 +1,26 @@
 export const expirationOptions = [
-  { label: 'apikeys.form.expiration.7days', type: 'day', value: 7 },
-  { label: 'apikeys.form.expiration.1month', type: 'month', value: 1 },
-  { label: 'apikeys.form.expiration.6months', type: 'month', value: 6 },
-  { label: 'apikeys.form.expiration.never', type: 'never', value: -1 }
+  {
+    label: 'apikeys.form.expiration.7days',
+    type: 'day',
+    value: 7,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.1month',
+    type: 'month',
+    value: 1,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.6months',
+    type: 'month',
+    value: 6,
+    locale: true
+  },
+  {
+    label: 'apikeys.form.expiration.never',
+    type: 'never',
+    value: -1,
+    locale: true
+  }
 ];
diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx
index 4cd7b962..a695f690 100644
--- a/src/pages/llmodels/components/model-card.tsx
+++ b/src/pages/llmodels/components/model-card.tsx
@@ -54,6 +54,7 @@ const ModelCard: React.FC<{
           signal: axiosTokenRef.current.signal
         }
       );
+      console.log('readme++++++++', res);
       return res || '';
     } catch (error) {
       return '';
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index 31182e10..b2017f1a 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/src/pages/playground/components/ground-images.tsx
@@ -48,8 +48,8 @@ const extraConfig: ParamsSchema[] = [
     type: 'Select',
     name: 'quality',
     options: [
-      { label: 'standard', value: 'standard' },
-      { label: 'hd', value: 'hd' }
+      { label: 'playground.params.standard', value: 'standard', locale: true },
+      { label: 'playground.params.hd', value: 'hd', locale: true }
     ],
     label: {
       text: 'playground.params.quality',
@@ -65,8 +65,12 @@ const extraConfig: ParamsSchema[] = [
     type: 'Select',
     name: 'style',
     options: [
-      { label: 'vivid', value: 'vivid' },
-      { label: 'natural', value: 'natural' }
+      { label: 'playground.params.style.vivid', value: 'vivid', locale: true },
+      {
+        label: 'playground.params.style.natural',
+        value: 'natural',
+        locale: true
+      }
     ],
     label: {
       text: 'playground.params.style',
@@ -93,42 +97,42 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       progress?: number;
     }[]
   >([
-    {
-      dataUrl:
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      height: 'auto',
-      width: 'auto',
-      uid: 0,
-      span: 12,
-      progress: 10
-    },
-    {
-      dataUrl:
-        'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
-      height: 'auto',
-      width: 'auto',
-      uid: 1,
-      span: 12,
-      progress: 15
-    },
-    {
-      dataUrl:
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      height: 'auto',
-      width: 'auto',
-      uid: 3,
-      span: 12,
-      progress: 10
-    },
-    {
-      dataUrl:
-        'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
-      height: 'auto',
-      width: 'auto',
-      uid: 4,
-      span: 12,
-      progress: 15
-    }
+    // {
+    //   dataUrl:
+    //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    //   height: 'auto',
+    //   width: 'auto',
+    //   uid: 0,
+    //   span: 12,
+    //   progress: 10
+    // },
+    // {
+    //   dataUrl:
+    //     'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
+    //   height: 'auto',
+    //   width: 'auto',
+    //   uid: 1,
+    //   span: 12,
+    //   progress: 15
+    // },
+    // {
+    //   dataUrl:
+    //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    //   height: 'auto',
+    //   width: 'auto',
+    //   uid: 3,
+    //   span: 12,
+    //   progress: 10
+    // },
+    // {
+    //   dataUrl:
+    //     'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
+    //   height: 'auto',
+    //   width: 'auto',
+    //   uid: 4,
+    //   span: 12,
+    //   progress: 15
+    // }
   ]);
 
   const intl = useIntl();
@@ -252,7 +256,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       const result: any = await fetchChunkedData({
         data: params,
         url: CREAT_IMAGE_API,
-        signal: requestToken.current.signal
+        signal: requestToken.current.signal,
+        headers: {
+          accept: 'text/event-stream'
+        }
       });
 
       if (result?.error) {
@@ -462,7 +469,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         )}
         <div className="ground-left-footer">
           <MessageInput
-            placeholer="Type <kbd>/</kbd> to input prompt"
+            placeholer={intl.formatMessage({
+              id: 'playground.input.prompt.holder'
+            })}
             actions={[]}
             loading={loading}
             disabled={!parameters.model}
diff --git a/src/utils/fetch-chunk-data.ts b/src/utils/fetch-chunk-data.ts
index 99024676..dbfbc5cc 100644
--- a/src/utils/fetch-chunk-data.ts
+++ b/src/utils/fetch-chunk-data.ts
@@ -32,6 +32,7 @@ export const fetchChunkedData = async (params: {
   params?: any;
   signal?: AbortSignal;
   method?: string;
+  headers?: any;
 }) => {
   const method = params.method || 'POST';
   let url = params.url;
@@ -43,7 +44,8 @@ export const fetchChunkedData = async (params: {
     body: method === 'POST' ? JSON.stringify(params.data) : null,
     signal: params.signal,
     headers: {
-      'Content-Type': 'application/json'
+      'Content-Type': 'application/json',
+      ...params.headers
     }
   });
   if (!response.ok) {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 70aefe28..8171b543 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -127,3 +127,13 @@ export const cosineSimilarity = (vec1: number[], vec2: number[]) => {
 
   return dotProduct / (magnitudeA * magnitudeB);
 };
+
+export const isHTMLDocumentString = (str: string) => {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(str, 'text/html');
+    return doc.documentElement.tagName.toLowerCase() === 'html';
+  } catch (e) {
+    return false;
+  }
+};