chore: images style

config/proxy.ts

@@ -19,6 +19,21 @@ export default function createProxyTable(target?: string) {
         secure: false,
         ws: true,
         pathRewrite: (pth: string) => pth.replace(`/^/${api}`, `/${api}`),
+        // onProxyRes: (proxyRes: any, req: any, res: any) => {
+        //   proxyRes.on('data', (chunk: any) => {
+        //     console.log('chunk=====', chunk);
+        //     res.write(chunk);
+        //   });
+
+        //   proxyRes.on('end', () => {
+        //     res.end();
+        //   });
+
+        //   proxyRes.on('error', (err: any) => {
+        //     console.error('Proxy stream error:', err);
+        //     res.status(500).end('Stream error');
+        //   });
+        // },
         headers: {
           origin: newTarget,
           Connection: 'keep-alive'

src/locales/en-US/models.ts

@@ -71,7 +71,7 @@ export default {
   'models.logs.pagination.next': 'Next {lines} Lines',
   'models.form.localPath': 'Local Path',
   'models.form.filePath': 'Model Path',
-  'model.form.backendVersion': 'Backend Version',
+  'models.form.backendVersion': 'Backend Version',
   'models.form.backendVersion.tips':
     'Pin a specific version to keep the backend stable across GPUStack upgrades.'
 };

src/locales/zh-CN/models.ts

@@ -69,7 +69,7 @@ export default {
   'models.logs.pagination.next': '下一 {lines} 行',
   'models.form.localPath': '本地路径',
   'models.form.filePath': '模型路径',
-  'model.form.backendVersion': '后端版本',
+  'models.form.backendVersion': '后端版本',
-  'model.form.backendVersion.tips':
+  'models.form.backendVersion.tips':
     '固定指定版本以保持后端在 GPUStack 升级过程中的稳定性'
 };

src/pages/llmodels/components/advance-config.tsx

@@ -279,9 +279,9 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
         </Form.Item>
         <Form.Item name="backend_version">
           <SealInput.Input
-            label={intl.formatMessage({ id: 'model.form.backendVersion' })}
+            label={intl.formatMessage({ id: 'models.form.backendVersion' })}
             description={intl.formatMessage({
-              id: 'model.form.backendVersion.tips'
+              id: 'models.form.backendVersion.tips'
             })}
           ></SealInput.Input>
         </Form.Item>

src/pages/llmodels/components/view-logs-modal.tsx

@@ -34,7 +34,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   }, [onCancel]);
 
   const updateHandler = (list: any) => {
-    const data = list?.find((item: any) => item.data.id === props.id);
+    const data = list?.find((item: any) => item.data?.id === props.id);
     if (data) {
       setEnableScorllLoad(!InstanceRealLogStatus.includes(data?.data?.state));
     }
@@ -45,7 +45,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     if (open) {
       requestRef.current?.current?.cancel?.();
       requestRef.current = setChunkRequest({
-        url: `${MODELS_API}/${props.id}/instances`,
+        url: `${MODELS_API}/${props.modelId}/instances`,
         handler: updateHandler
       });
     }

src/pages/playground/apis/index.ts

@@ -90,7 +90,7 @@ export const createImages = async (
 export const textToSpeech = async (params: any, options?: any) => {
   const res = await fetch(AUDIO_TEXT_TO_SPEECH_API, {
     method: 'POST',
-    body: JSON.stringify(params),
+    body: JSON.stringify(params.data),
     signal: params.signal
   });
   if (!res.ok) {
@@ -102,7 +102,7 @@ export const textToSpeech = async (params: any, options?: any) => {
 export const speechToText = async (params: any, options?: any) => {
   const res = await fetch(AUDIO_SPEECH_TO_TEXT_API, {
     method: 'POST',
-    body: JSON.stringify(params),
+    body: JSON.stringify(params.data),
     signal: params.signal
   });
   if (!res.ok) {

src/pages/playground/components/ground-images.tsx

@@ -92,8 +92,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       dataUrl: string;
       height: number | string;
       width: string | number;
+      maxHeight: string | number;
+      maxWidth: string | number;
       uid: number;
       span?: number;
+      loading?: boolean;
       progress?: number;
     }[]
   >([
@@ -234,11 +237,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         .fill({})
         .map((item, index: number) => {
           return {
-            dataUr: '',
+            dataUrl: 'data:image/png;base64,',
             ...size,
             progress: 0,
-            height: 'auto',
+            height: '100%',
-            width: 'auto',
+            width: '100%',
+            loading: true,
             uid: index
           };
         });
@@ -249,32 +253,21 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       const params = {
         stream: true,
+        stream_options: {
+          chunk_result: true
+        },
         prompt: current?.content || currentPrompt || '',
         ..._.omitBy(finalParameters, (value: string) => !value)
       };
 
       const result: any = await fetchChunkedData({
         data: params,
-        // url: 'http://192.168.1.3:40487/v1/images/generations',
         url: CREAT_IMAGE_API,
-        signal: requestToken.current.signal,
+        signal: requestToken.current.signal
-        headers: {
-          'Cache-Control': 'no-cache',
-          Accept: 'text/event-stream',
-          Connection: 'keep-alive'
-        }
       });
 
-      if (result?.error) {
-        setTokenResult({
-          error: true,
-          errorMessage:
-            result?.data?.error?.message || result?.data?.message || ''
-        });
-        return;
-      }
-
       const { reader, decoder } = result;
+      const imgSize = _.split(finalParameters.size, 'x');
 
       await readStreamData(reader, decoder, (chunk: any) => {
         if (chunk?.error) {
@@ -284,23 +277,28 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           });
           return;
         }
-        console.log('data:================', chunk);
+
         chunk?.data?.forEach((item: any) => {
           const imgItem = newImageList[item.index];
+          if (item.b64_json) {
+            imgItem.dataUrl += item.b64_json;
+          }
           newImageList[item.index] = {
-            dataUrl: `data:image/png;base64,${item.b64_json}`,
+            dataUrl: imgItem.dataUrl,
             height: '100%',
             width: '100%',
+            maxHeight: `${imgSize[1]}px`,
+            maxWidth: `${imgSize[0]}px`,
             uid: imgItem.uid,
             span: imgItem.span,
+            loading: _.round(item.progress, 0) < 100,
             progress: _.round(item.progress, 0)
           };
         });
         setImageList([...newImageList]);
       });
-      console.log('result:', newImageList);
     } catch (error) {
-      console.log('error:', error);
+      // console.log('error:', error);
       requestToken.current?.abort?.();
       setImageList([]);
     } finally {

src/pages/playground/components/ground-stt.tsx

@@ -3,13 +3,11 @@ import AudioPlayer from '@/components/audio-player';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { readAudioFile } from '@/utils/load-audio-file';
 import { AudioOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
-import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
@@ -17,12 +15,10 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState
 } from 'react';
-import { CHAT_API } from '../apis';
+import { CHAT_API, speechToText } from '../apis';
-import { Roles, generateMessages } from '../config';
 import { RealtimeParamsConfig as paramsConfig } from '../config/params-config';
 import { MessageItem } from '../config/types';
 import '../style/ground-left.less';
@@ -46,21 +42,24 @@ const initialValues = {
 const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const messageId = useRef<number>(0);
-  const [messageList, setMessageList] = useState<MessageItem[]>([]);
+  const [messageList, setMessageList] = useState<MessageItem[]>([
-
+    {
+      content: 'Generating text content...',
+      title: '',
+      role: '',
+      uid: messageId.current
+    }
+  ]);
   const intl = useIntl();
   const [searchParams] = useSearchParams();
   const selectModel = searchParams.get('model') || '';
   const [parameters, setParams] = useState<any>({});
-  const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [collapse, setCollapse] = useState(false);
-  const contentRef = useRef<any>('');
   const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
-  const currentMessageRef = useRef<any>(null);
   const paramsRef = useRef<any>(null);
   const messageListLengthCache = useRef<number>(0);
   const [audioPermissionOn, setAudioPermissionOn] = useState(true);
@@ -87,37 +86,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
-  const viewCodeMessage = useMemo(() => {
-    return generateMessages([
-      { role: Roles.System, content: systemMessage },
-      ...messageList
-    ]);
-  }, [messageList, systemMessage]);
-
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
 
-  const joinMessage = (chunk: any) => {
-    setTokenResult({
-      ...(chunk?.usage ?? {})
-    });
-
-    if (!chunk || !_.get(chunk, 'choices', []).length) {
-      return;
-    }
-    contentRef.current =
-      contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
-    setMessageList([
-      ...messageList,
-      ...currentMessageRef.current,
-      {
-        role: Roles.Assistant,
-        content: contentRef.current,
-        uid: messageId.current
-      }
-    ]);
-  };
   const handleStopConversation = () => {
     controllerRef.current?.abort?.();
     setLoading(false);
@@ -133,37 +105,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       controllerRef.current?.abort?.();
       controllerRef.current = new AbortController();
       const signal = controllerRef.current.signal;
-      currentMessageRef.current = current
-        ? [
-            {
-              ...current,
-              uid: messageId.current
-            }
-          ]
-        : [];
-
-      contentRef.current = '';
-      setMessageList((pre) => {
-        return [...pre, ...currentMessageRef.current];
-      });
-
-      const messageParams = [
-        { role: Roles.System, content: systemMessage },
-        ...messageList,
-        ...currentMessageRef.current
-      ];
-
-      const messages = generateMessages(messageParams);
 
       const chatParams = {
-        messages: messages,
         ...parameters,
         stream: true,
         stream_options: {
           include_usage: true
         }
       };
-      const result: any = await fetchChunkedData({
+      const result: any = await speechToText({
         data: chatParams,
         url: CHAT_API,
         signal
@@ -177,18 +127,14 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         });
         return;
       }
-      setMessageId();
+      setMessageList([
-      const { reader, decoder } = result;
+        {
-      await readStreamData(reader, decoder, (chunk: any) => {
+          content: 'Generating text content...',
-        if (chunk?.error) {
+          title: '',
-          setTokenResult({
+          role: '',
-            error: true,
+          uid: messageId.current
-            errorMessage: chunk?.error?.message || chunk?.message || ''
-          });
-          return;
         }
-        joinMessage(chunk);
+      ]);
-      });
     } catch (error) {
       // console.log('error:', error);
     } finally {
@@ -204,41 +150,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setTokenResult(null);
   };
 
-  const renderTitle = useCallback((role: string) => {
-    return (
-      <span>
-        {intl.formatMessage({ id: `playground.${role}` })}
-        <span className="text-tertiary m-l-5">00:10</span>
-      </span>
-    );
-  }, []);
-
-  const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
-    setLoading(true);
-    setMessageList([
-      ...messageList,
-      {
-        role: Roles.User,
-        title: renderTitle(Roles.User),
-        content: 'test data test data',
-        uid: messageId.current
-      }
-    ]);
-
-    setTimeout(() => {
-      setMessageList([
-        ...messageList,
-        {
-          role: Roles.Assistant,
-          title: renderTitle(Roles.Assistant),
-          content: 'generate by assistant',
-          uid: messageId.current
-        }
-      ]);
-      setLoading(false);
-    }, 1000);
-  };
-
   const handleCloseViewCode = () => {
     setShow(false);
   };
@@ -498,10 +409,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
                 <MessageContent
                   actions={[]}
                   messageList={messageList[0] ? [messageList[0]] : []}
-                  setMessageList={setMessageList}
                   editable={false}
                   showTitle={false}
-                  loading={loading}
+                  loading={true}
                 />
                 {loading && (
                   <Spin size="small">
@@ -543,10 +453,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       <ViewCodeModal
         open={show}
-        payLoad={{
+        payLoad={{}}
-          messages: viewCodeMessage
-        }}
         api="audio/transcriptions"
+        clientType="audio.transcriptions"
         parameters={parameters}
         onCancel={handleCloseViewCode}
         title={intl.formatMessage({ id: 'playground.viewcode' })}

src/pages/playground/components/ground-tts.tsx

@@ -1,7 +1,6 @@
 import IconFont from '@/components/icon-font';
 import SpeechContent from '@/components/speech-content';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import { fetchChunkedData } from '@/utils/fetch-chunk-data';
 import { ThunderboltOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Spin } from 'antd';
@@ -15,7 +14,7 @@ import {
   useRef,
   useState
 } from 'react';
-import { CHAT_API } from '../apis';
+import { CHAT_API, textToSpeech } from '../apis';
 import { TTSParamsConfig as paramsConfig } from '../config/params-config';
 import { MessageItem } from '../config/types';
 import '../style/ground-left.less';
@@ -109,7 +108,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         ...parameters,
         prompt: current?.content || currentPrompt
       };
-      const result: any = await fetchChunkedData({
+      const result: any = await textToSpeech({
         data: chatParams,
         url: CHAT_API,
         signal
@@ -265,6 +264,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           prompt: currentPrompt
         }}
         api="audio/speech"
+        clientType="audio.speech"
         parameters={parameters}
         onCancel={handleCloseViewCode}
         title={intl.formatMessage({ id: 'playground.viewcode' })}

src/pages/playground/components/thumb-img.tsx

@@ -47,7 +47,7 @@ const ThumbImg: React.FC<{
         }}
       >
         <>
-          {loading ? (
+          {item.loading ? (
             <span
               className="progress-wrap"
               style={{
@@ -65,7 +65,13 @@ const ThumbImg: React.FC<{
               <Progress percent={item.progress} type="circle" />
             </span>
           ) : (
-            <span className="img">
+            <span
+              className="img"
+              style={{
+                maxHeight: `min(${item.maxHeight}, 100%)`,
+                maxWidth: `min(${item.maxWidth}, 100%)`
+              }}
+            >
               <AutoImage
                 autoSize={autoSize}
                 src={item.dataUrl}

src/pages/playground/style/thumb-img.less

@@ -4,6 +4,9 @@
   max-width: 100%;
   max-height: 100%;
   justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius-base);
+  overflow: hidden;
 
   .img {
     display: flex;

src/utils/fetch-chunk-data.ts

@@ -72,17 +72,14 @@ export const readStreamData = async (
   callback: (data: any) => void
 ) => {
   const { done, value } = await reader.read();
-  console.log('done====', done, value);
   if (done) {
     return;
   }
 
   let chunk = decoder.decode(value, { stream: true });
   extractJSON(chunk).forEach((data) => {
-    console.log('data====', data);
     callback?.(data);
   });
-  // callback(chunk);
   await readStreamData(reader, decoder, callback);
 };