From 60c92b8a983ed31721d9fcf5658a25041f1691c0 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 27 Nov 2024 19:34:34 +0800
Subject: [PATCH] chore: audio api adjust

---
 src/components/speech-content/speech-item.tsx | 12 +++------
 src/pages/llmodels/components/table-list.tsx  | 14 ++++++++++
 src/pages/llmodels/config/types.ts            |  1 +
 src/pages/playground/apis/index.ts            |  6 ++---
 .../components/ground-embedding.tsx           | 17 +++++++-----
 .../playground/components/ground-images.tsx   | 19 +++++---------
 .../playground/components/ground-reranker.tsx | 18 ++++++++-----
 .../playground/components/ground-stt.tsx      |  4 ++-
 .../playground/components/ground-tts.tsx      |  6 ++---
 src/pages/playground/components/test.txt      | 15 +++++++++++
 src/pages/playground/images.tsx               |  2 +-
 src/pages/playground/speech.tsx               | 26 +++----------------
 12 files changed, 73 insertions(+), 67 deletions(-)
 create mode 100644 src/pages/playground/components/test.txt

diff --git a/src/components/speech-content/speech-item.tsx b/src/components/speech-content/speech-item.tsx
index f06460a7..247a99cf 100644
--- a/src/components/speech-content/speech-item.tsx
+++ b/src/components/speech-content/speech-item.tsx
@@ -1,9 +1,5 @@
 import IconFont from '@/components/icon-font';
-import {
-  DownloadOutlined,
-  FileTextOutlined,
-  PlayCircleOutlined
-} from '@ant-design/icons';
+import { DownloadOutlined, PlayCircleOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import React, { useRef, useState } from 'react';
 import AudioPlayer from './audio-player';
@@ -37,7 +33,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
       <div className="speech-item">
         <div className="voice">
           <IconFont type="icon-user_voice" className="font-size-16" />
-          <span className="text">{props.voice}</span>
+          {/* <span className="text">{props.voice}</span> */}
         </div>
         <div className="wrapper">
           <AudioPlayer
@@ -69,14 +65,14 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
               size="small"
             ></Button>
           </Tooltip>
-          <Tooltip title="Show Prompt">
+          {/* <Tooltip title="Show Prompt">
             <Button
               icon={<FileTextOutlined />}
               type="text"
               size="small"
               onClick={handleCollapse}
             ></Button>
-          </Tooltip>
+          </Tooltip> */}
         </div>
       </div>
       {/* {collapsed && (
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 6834e67d..8ccff5a8 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/src/pages/llmodels/components/table-list.tsx
@@ -481,6 +481,20 @@ const Models: React.FC<ModelsProps> = ({
         </Tag>
       );
     }
+    if (record.image_only) {
+      return (
+        <Tag
+          style={{
+            margin: 0,
+            opacity: 0.8,
+            transform: 'scale(0.9)'
+          }}
+          color="geekblue"
+        >
+          Image Only
+        </Tag>
+      );
+    }
     return null;
   }, []);
   const renderChildren = useCallback(
diff --git a/src/pages/llmodels/config/types.ts b/src/pages/llmodels/config/types.ts
index 477f35b6..46a74f20 100644
--- a/src/pages/llmodels/config/types.ts
+++ b/src/pages/llmodels/config/types.ts
@@ -2,6 +2,7 @@ export interface ListItem {
   source: string;
   backend: string;
   reranker: boolean;
+  image_only?: boolean;
   huggingface_repo_id: string;
   huggingface_file_name: string;
   backend_version?: string;
diff --git a/src/pages/playground/apis/index.ts b/src/pages/playground/apis/index.ts
index 77ec32c6..254f2b3a 100644
--- a/src/pages/playground/apis/index.ts
+++ b/src/pages/playground/apis/index.ts
@@ -1,4 +1,3 @@
-import { MODELS_API } from '@/pages/llmodels/apis';
 import { request } from '@umijs/max';
 
 export const CHAT_API = '/v1-openai/chat/completions';
@@ -125,9 +124,10 @@ export const speechToText = async (params: any, options?: any) => {
   });
 };
 
-export const queryModelVoices = async (params: { name: string }) => {
-  return request(`${MODELS_API}/${params.name}/voices`, {
+export const queryModelVoices = async (params: { model: string }) => {
+  return request(`/voices`, {
     method: 'GET',
+    params,
     skipErrorHandler: true
   });
 };
diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx
index 76629f6c..90082601 100644
--- a/src/pages/playground/components/ground-embedding.tsx
+++ b/src/pages/playground/components/ground-embedding.tsx
@@ -278,13 +278,16 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
       const text = e.clipboardData.getData('text');
       if (text) {
         console.log('text:', text);
-        const dataLlist = text.split('\n').map((item: string) => {
-          return {
-            text: item,
-            uid: inputListRef.current?.setMessageId(),
-            name: ''
-          };
-        });
+        const dataLlist = text
+          .split('\n')
+          .map((item: string) => {
+            return {
+              text: item,
+              uid: inputListRef.current?.setMessageId(),
+              name: ''
+            };
+          })
+          .filter((item: any) => item.text);
         setTextList([...textList.slice(0, index), ...dataLlist]);
       }
     },
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index a5ab181b..0029ba1a 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/src/pages/playground/components/ground-images.tsx
@@ -72,8 +72,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     //   width: 'auto',
     //   uid: 0,
     //   span: 12,
-    //   progress: 10
-    // },
+    //   loading: true,
+    //   progress: 60
+    // }
     // {
     //   dataUrl:
     //     'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
@@ -137,28 +138,18 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const setImageSize = useCallback(() => {
     let size: Record<string, string | number> = {
-      with: 256,
-      height: 256,
       span: 12
     };
     if (parameters.n === 1) {
-      size.width = '100%';
-      size.height = '100%';
       size.span = 24;
     }
     if (parameters.n === 2) {
-      size.width = '50%';
-      size.height = 256;
       size.span = 12;
     }
     if (parameters.n === 3) {
-      size.width = '33%';
-      size.height = 256;
       size.span = 12;
     }
     if (parameters.n === 4) {
-      size.width = '25%';
-      size.height = 256;
       size.span = 12;
     }
     return size;
@@ -249,6 +240,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           const imgItem = newImageList[item.index];
           if (item.b64_json) {
             imgItem.dataUrl += item.b64_json;
+            // imgItem.cache.push(item.b64_json);
           }
           const progress = _.round(item.progress, 0);
           newImageList[item.index] = {
@@ -264,9 +256,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           };
         });
         setImageList([...newImageList]);
+        console.log('newImageList:', newImageList);
       });
     } catch (error) {
-      // console.log('error:', error);
+      console.log('error:', error);
       requestToken.current?.abort?.();
       setImageList([]);
     } finally {
diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx
index 6e2ec6a6..bb69ab3f 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/src/pages/playground/components/ground-reranker.tsx
@@ -350,13 +350,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       const text = e.clipboardData.getData('text');
       if (text) {
         console.log('text:', text);
-        const dataLlist = text.split('\n').map((item: string) => {
-          return {
-            text: item,
-            uid: inputListRef.current?.setMessageId(),
-            name: ''
-          };
-        });
+        const dataLlist = text
+          .split('\n')
+          .map((item: string) => {
+            return {
+              text: item,
+              uid: inputListRef.current?.setMessageId(),
+              name: ''
+            };
+          })
+          .filter((item: any) => item.text);
         setTextList([...textList.slice(0, index), ...dataLlist]);
       }
     },
@@ -390,6 +393,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       }
     ]);
     setFileList([]);
+    setTokenResult(null);
   };
 
   useEffect(() => {
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx
index 4f746f1c..f71de84e 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/src/pages/playground/components/ground-stt.tsx
@@ -109,7 +109,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       const params = {
         ...parameters,
-        file: new File([audioData.data], audioData.name)
+        file: new File([audioData.data], audioData.name, {
+          type: audioData.type
+        })
       };
       const result: any = await speechToText({
         data: params
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index 84ee9fb5..a0831699 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/src/pages/playground/components/ground-tts.tsx
@@ -157,11 +157,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
   const handleSelectModel = useCallback(
     async (value: string) => {
-      const data: any = modelList.find((item) => item.value === value);
-      if (!data) return;
+      if (!value) return;
       try {
         const res = await queryModelVoices({
-          name: data?.modelId as string
+          model: value
         });
         const voiceList = _.map(res.voices || [], (item: any) => {
           return {
@@ -300,7 +299,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             clearAll={handleClear}
             shouldResetMessage={false}
             submitIcon={<SendOutlined></SendOutlined>}
-            modelList={modelList}
           />
         </div>
       </div>
diff --git a/src/pages/playground/components/test.txt b/src/pages/playground/components/test.txt
new file mode 100644
index 00000000..48dfcbe6
--- /dev/null
+++ b/src/pages/playground/components/test.txt
@@ -0,0 +1,15 @@
+Organic skincare for sensitive skin with aloe vera and chamomile: Imagine the soothing embrace of nature with our organic skincare range, crafted specifically for sensitive skin. Infused with the calming properties of aloe vera and chamomile, each product provides gentle nourishment and protection. Say goodbye to irritation and hello to a glowing, healthy complexion.
+
+New makeup trends focus on bold colors and innovative techniques: Step into the world of cutting-edge beauty with this seasons makeup trends. Bold, vibrant colors and groundbreaking techniques are redefining the art of makeup. From neon eyeliners to holographic highlighters, unleash your creativity and make a statement with every look.
+
+Bio-Hautpflege für empfindliche Haut mit Aloe Vera und Kamille: Erleben Sie die wohltuende Wirkung unserer Bio-Hautpflege, speziell für empfindliche Haut entwickelt. Mit den beruhigenden Eigenschaften von Aloe Vera und Kamille pflegen und schützen unsere Produkte Ihre Haut auf natürliche Weise. Verabschieden Sie sich von Hautirritationen und genießen Sie einen strahlenden Teint.
+
+Neue Make-up-Trends setzen auf kräftige Farben und innovative Techniken: Tauchen Sie ein in die Welt der modernen Schönheit mit den neuesten Make-up-Trends. Kräftige, lebendige Farben und innovative Techniken setzen neue Maßstäbe. Von auffälligen Eyelinern bis hin zu holografischen Highlightern – lassen Sie Ihrer Kreativität freien Lauf und setzen Sie jedes Mal ein Statement.
+
+Cuidado de la piel orgánico para piel sensible con aloe vera y manzanilla: Descubre el poder de la naturaleza con nuestra línea de cuidado de la piel orgánico, diseñada especialmente para pieles sensibles. Enriquecidos con aloe vera y manzanilla, estos productos ofrecen una hidratación y protección suave. Despídete de las irritaciones y saluda a una piel radiante y saludable.
+
+针对敏感肌专门设计的天然有机护肤产品：体验由芦荟和洋甘菊提取物带来的自然呵护。我们的护肤产品特别为敏感肌设计，温和滋润，保护您的肌肤不受刺激。让您的肌肤告别不适，迎来健康光彩。
+
+新的化妆趋势注重鲜艳的颜色和创新的技巧：进入化妆艺术的新纪元，本季的化妆趋势以大胆的颜色和创新的技巧为主。无论是霓虹眼线还是全息高光，每一款妆容都能让您脱颖而出，展现独特魅力。
+
+新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
\ No newline at end of file
diff --git a/src/pages/playground/images.tsx b/src/pages/playground/images.tsx
index cf723a5e..e26499cf 100644
--- a/src/pages/playground/images.tsx
+++ b/src/pages/playground/images.tsx
@@ -40,7 +40,7 @@ const TextToImages: React.FC = () => {
     const getModelList = async () => {
       try {
         const params = {
-          embedding_only: false
+          image_only: true
         };
         const res = await queryModelsList(params);
         const list = _.map(res.data || [], (item: any) => {
diff --git a/src/pages/playground/speech.tsx b/src/pages/playground/speech.tsx
index 3bc83561..a4f06ee5 100644
--- a/src/pages/playground/speech.tsx
+++ b/src/pages/playground/speech.tsx
@@ -2,7 +2,6 @@ import IconFont from '@/components/icon-font';
 import breakpoints from '@/config/breakpoints';
 import HotKeys from '@/config/hotkeys';
 import useWindowResize from '@/hooks/use-window-resize';
-import { queryModelsList as queryGPUStackModels } from '@/pages/llmodels/apis';
 import { AudioOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
@@ -103,30 +102,11 @@ const Playground: React.FC = () => {
       }
     };
 
-    const getGpuStackModels = async () => {
-      try {
-        const res: any = await queryGPUStackModels({ page: 1, perPage: 100 });
-        return res.items || [];
-      } catch (error) {
-        return [];
-      }
-    };
-
     const fetchData = async () => {
       try {
-        const [modelist, list] = await Promise.all([
-          getModelList(),
-          getGpuStackModels()
-        ]);
-        const dataMap = list.reduce((acc: any, cur: any) => {
-          acc[cur.name] = cur;
-          return acc;
-        }, {});
-        const dataList = modelist.map((item: any) => {
-          item.modelId = dataMap[item.value]?.id;
-          return item;
-        });
-        setModelList(dataList);
+        const modelist = await getModelList();
+
+        setModelList(modelist);
       } catch (error) {
         setLoaded(true);
       }