fix: playground view code

src/components/seal-form/components/wrapper.less

@@ -251,6 +251,12 @@
     }
   }
 
+  :global(.ant-input-number.ant-input-number-disabled) {
+    &:hover {
+      background-color: inherit;
+    }
+  }
+
   :global(.ant-input-outlined) {
     display: flex;
     align-items: center;

src/components/seal-form/seal-select.tsx

@@ -87,7 +87,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
       <Select
         {...rest}
         ref={inputRef}
-        options={_options}
+        options={children ? null : _options}
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onChange={handleChange}

src/pages/llmodels/components/data-form.tsx

@@ -88,6 +88,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         value: `${item.worker_name}-${item.name}-${item.index}`
       };
     });
+    console.log('queryGPUList========', list);
     setGpuOptions(list);
   };
 

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

@@ -2,6 +2,7 @@ import AlertInfo from '@/components/alert-info';
 import ScatterChart from '@/components/echarts/scatter';
 import HighlightCode from '@/components/highlight-code';
 import IconFont from '@/components/icon-font';
+import HotKeys, { KeyMap } from '@/config/hotkeys';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useRequestToken from '@/hooks/use-request-token';
 import {
@@ -28,6 +29,7 @@ import {
   useRef,
   useState
 } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { handleEmbedding } from '../apis';
 import { OpenAIViewCode } from '../config';
 import { ParamsSchema } from '../config/types';
@@ -100,6 +102,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   ]);
 
   const [scatterData, setScatterData] = useState<any[]>([]);
+  const resizeRef = useRef<any>(null);
   const resizeMaxHeight = 400;
 
   const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
@@ -264,6 +267,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
 
+  const handleScaleResize = () => {
+    console.log('handleScaleResize', resizeRef.current);
+    const height = resizeRef.current?.state?.height;
+    if (height) {
+      setOutputHeight(height);
+    }
+  };
+
   const handleDeleteFile = (uid: number | string) => {
     setFileList((preList) => {
       return preList.filter((item) => item.uid !== uid);
@@ -374,6 +385,18 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     setTokenResult(null);
   }, [parameters.model]);
 
+  useHotkeys(
+    HotKeys.SUBMIT,
+    (e: any) => {
+      e.preventDefault();
+      handleSendMessage();
+    },
+    {
+      enabled: !loading,
+      preventDefault: true
+    }
+  );
+
   useEffect(() => {
     if (scroller.current) {
       initialize(scroller.current);
@@ -427,6 +450,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                     {intl.formatMessage({
                       id: 'playground.input.multiplePaste'
                     })}
+                    <InfoCircleOutlined className="m-l-4" />
                   </Checkbox>
                 </Tooltip>
 
@@ -442,14 +466,25 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                   {intl.formatMessage({ id: 'common.button.clear' })}
                 </Button>
                 {!loading ? (
-                  <Button
+                  <Tooltip
-                    size="middle"
+                    title={
-                    type="primary"
+                      <span>
-                    disabled={inputEmpty}
+                        [{KeyMap.SUBMIT.textKeybinding}]{' '}
-                    onClick={handleSendMessage}
+                        {intl.formatMessage({ id: 'common.button.submit' })}
-                    icon={<SendOutlined rotate={0} className="font-size-14" />}
+                      </span>
-                    style={{ width: 60 }}
+                    }
-                  ></Button>
+                  >
+                    <Button
+                      size="middle"
+                      type="primary"
+                      disabled={inputEmpty}
+                      onClick={handleSendMessage}
+                      icon={
+                        <SendOutlined rotate={0} className="font-size-14" />
+                      }
+                      style={{ width: 60 }}
+                    ></Button>
+                  </Tooltip>
                 ) : (
                   <Tooltip
                     title={intl.formatMessage({ id: 'common.button.stop' })}
@@ -547,6 +582,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
           </h3>
           <div className="embed-chart">
             <Resizable
+              ref={resizeRef}
               enable={{
                 top: true
               }}
@@ -577,13 +613,13 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
               }}
               maxHeight={resizeMaxHeight}
               minHeight={180}
+              onResize={handleScaleResize}
               onResizeStop={handleScaleOutputSize}
             >
               <div
                 style={{
                   border: '1px solid var(--ant-color-border)',
                   borderRadius: 'var(--border-radius-base)',
-                  overflow: 'hidden',
                   width: '100%'
                 }}
                 className="scatter "
@@ -622,7 +658,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
       <ViewCodeModal
         {...OpenAIViewCode.embeddings}
         open={show}
-        payLoad={{
+        payload={{
           input: [
             ...textList.map((item) => item.text).filter((item) => item),
             ...fileList.map((item) => item.text).filter((item) => item)

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

@@ -39,6 +39,7 @@ import '../style/system-message-wrap.less';
 import DynamicParams from './dynamic-params';
 import MessageInput from './message-input';
 import ViewCodeModal from './view-code-modal';
+import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -73,45 +74,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       loading?: boolean;
       progress?: number;
     }[]
-  >([
+  >([]);
-    // {
-    //   dataUrl:
-    //     'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-    //   height: 'auto',
-    //   width: 'auto',
-    //   uid: 0,
-    //   span: 12,
-    //   loading: false,
-    //   progress: 60
-    // },
-    // {
-    //   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();
   const [searchParams] = useSearchParams();
@@ -221,6 +184,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
       const size: any = setImageSize();
       setLoading(true);
       setMessageId();
+      setTokenResult(null);
       setCurrentPrompt(current?.content || '');
 
       let newImageList = Array(parameters.n)
@@ -309,9 +273,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
   const handleClear = () => {
-    if (!imageList.length) {
-      return;
-    }
     setMessageId();
     setImageList([]);
     setTokenResult(null);
@@ -628,18 +589,33 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
       </div>
 
-      <ViewCodeModal
+      {isOpenaiCompatible ? (
-        {...OpenAIViewCode.images}
+        <ViewCodeModal
-        open={show}
+          {...OpenAIViewCode.images}
-        payLoad={{
+          open={show}
-          prompt: currentPrompt
+          payload={{
-        }}
+            prompt: currentPrompt
-        parameters={{
+          }}
-          ...finalParameters
+          parameters={{
-        }}
+            ...finalParameters
-        onCancel={handleCloseViewCode}
+          }}
-        title={intl.formatMessage({ id: 'playground.viewcode' })}
+          onCancel={handleCloseViewCode}
-      ></ViewCodeModal>
+          title={intl.formatMessage({ id: 'playground.viewcode' })}
+        ></ViewCodeModal>
+      ) : (
+        <ViewCommonCode
+          {...OpenAIViewCode.imageAdvanced}
+          open={show}
+          payload={{
+            prompt: currentPrompt
+          }}
+          parameters={{
+            ...finalParameters
+          }}
+          onCancel={handleCloseViewCode}
+          title={intl.formatMessage({ id: 'playground.viewcode' })}
+        ></ViewCommonCode>
+      )}
     </div>
   );
 });

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

@@ -329,7 +329,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       <ViewCodeModal
         {...OpenAIViewCode.chat}
         open={show}
-        payLoad={{
+        payload={{
           messages: viewCodeMessage
         }}
         parameters={parameters}

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

@@ -1,6 +1,12 @@
+import HotKeys, { KeyMap } from '@/config/hotkeys';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import useRequestToken from '@/hooks/use-request-token';
-import { ClearOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons';
+import {
+  ClearOutlined,
+  InfoCircleOutlined,
+  PlusOutlined,
+  SendOutlined
+} from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Button, Checkbox, Input, Spin, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
@@ -15,14 +21,16 @@ import {
   useRef,
   useState
 } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { rerankerQuery } from '../apis';
+import { OpenAIViewCode } from '../config';
 import { MessageItem, ParamsSchema } from '../config/types';
 import '../style/ground-left.less';
 import '../style/rerank.less';
 import '../style/system-message-wrap.less';
 import DynamicParams from './dynamic-params';
 import InputList from './input-list';
-import ViewRerankCode from './view-rerank-code';
+import ViewCommonCode from './view-common-code';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -113,6 +121,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   ]);
   const [sortIndexMap, setSortIndexMap] = useState<number[]>([]);
+  const queryValueRef = useRef<string>('');
 
   const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
     useOverlayScroller();
@@ -305,10 +314,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const handleSearch = (val: string) => {
-    console.log('val:', val);
+    if (!val) {
+      return;
+    }
     submitMessage({ content: val });
   };
 
+  const handleQueryChange = (e: any) => {
+    queryValueRef.current = e.target.value;
+  };
+
   const handleCloseViewCode = () => {
     setShow(false);
   };
@@ -409,6 +424,18 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     setTokenResult(null);
   };
 
+  useHotkeys(
+    HotKeys.SUBMIT,
+    (e: any) => {
+      e.preventDefault();
+      handleSearch(queryValueRef.current);
+    },
+    {
+      enabled: !loading,
+      preventDefault: true
+    }
+  );
+
   useEffect(() => {
     setMessageId();
     setMessageList([]);
@@ -450,8 +477,21 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
           </h3>
           <div style={{ margin: '16px 32px 10px' }}>
             <Input.Search
+              allowClear
               onSearch={handleSearch}
-              enterButton={<SendOutlined rotate={0} className="font-size-14" />}
+              onChange={handleQueryChange}
+              enterButton={
+                <Tooltip
+                  title={
+                    <span>
+                      [{KeyMap.SUBMIT.textKeybinding}]{' '}
+                      {intl.formatMessage({ id: 'common.button.submit' })}
+                    </span>
+                  }
+                >
+                  <SendOutlined rotate={0} className="font-size-14" />
+                </Tooltip>
+              }
               placeholder={intl.formatMessage({
                 id: 'playground.rerank.query.holder'
               })}
@@ -490,6 +530,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
                     {intl.formatMessage({
                       id: 'playground.input.multiplePaste'
                     })}
+                    <InfoCircleOutlined className="m-l-4" />
                   </Checkbox>
                 </Tooltip>
                 <Button size="middle" onClick={handleAddText}>
@@ -557,7 +598,8 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
       </div>
 
-      <ViewRerankCode
+      <ViewCommonCode
+        {...OpenAIViewCode.rerank}
         open={show}
         payload={{
           documents: [...textList, ...fileList]
@@ -570,7 +612,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
         }}
         onCancel={handleCloseViewCode}
         title={intl.formatMessage({ id: 'playground.viewcode' })}
-      ></ViewRerankCode>
+      ></ViewCommonCode>
     </div>
   );
 });

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

@@ -390,7 +390,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       <ViewCodeModal
         open={show}
-        payLoad={{}}
+        payload={{}}
         api="audio/transcriptions"
         clientType="audio.transcriptions"
         parameters={parameters}

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

@@ -342,7 +342,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       <ViewCodeModal
         open={show}
-        payLoad={{
+        payload={{
           input: currentPrompt
         }}
         api="audio/speech"

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -466,7 +466,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <ViewCodeModal
           {...OpenAIViewCode.chat}
           open={show}
-          payLoad={{
+          payload={{
             messages: viewCodeMessage
           }}
           parameters={params}

src/pages/playground/components/test.txt

@@ -12,4 +12,35 @@ Cuidado de la piel orgánico para piel sensible con aloe vera y manzanilla: Desc
 
 新的化妆趋势注重鲜艳的颜色和创新的技巧：进入化妆艺术的新纪元，本季的化妆趋势以大胆的颜色和创新的技巧为主。无论是霓虹眼线还是全息高光，每一款妆容都能让您脱颖而出，展现独特魅力。
 
-新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
+新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
+
+asdfas
+dfaf
+defsdf
+aloe
+fd
+Farbensdf
+asdfasdf
+asdfasdfas
+dfafas
+dfafasdf
+saludadf
+1
+2
+
+2
+2
+2
+2
+222
+2
+
+2
+2
+2
+2
+2
+
+2
+2
+2

src/pages/playground/components/view-code-modal.tsx

@@ -9,7 +9,7 @@ import React, { useMemo, useState } from 'react';
 type ViewModalProps = {
   systemMessage?: string;
   messageList?: any[];
-  payLoad: Record<string, any>;
+  payload: Record<string, any>;
   parameters: any;
   title: string;
   api: string;
@@ -39,7 +39,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     clientType,
     logcommand,
     onCancel,
-    payLoad,
+    payload,
     parameters = {}
   } = props || {};
 
@@ -72,7 +72,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
           ...parameters,
-          ...payLoad
+          ...payload
         },
         null,
         2
@@ -83,7 +83,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n  "apiKey": "YOUR_GPUSTACK_API_KEY",\n  "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n  const params = ${JSON.stringify(
         {
           ...parameters,
-          ...payLoad
+          ...payload
         },
         null,
         4
@@ -105,12 +105,12 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         },
         ''
       );
-      const params = formatPyParams(payLoad);
+      const params = formatPyParams(payload);
       const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${clientType}(\n${formattedParams}${params})\n${printLog}`;
       return code;
     }
     return '';
-  }, [lang, payLoad, parameters, api, clientType, logcommand]);
+  }, [lang, payload, parameters, api, clientType, logcommand]);
 
   const handleOnChangeLang = (value: string) => {
     setLang(value);

src/pages/playground/components/view-common-code.tsx

@@ -9,8 +9,9 @@ type ViewModalProps = {
   parameters: any;
   title: string;
   open: boolean;
-  apiType?: string;
+  api: string;
   payload?: Record<string, any>;
+  logcommand: Record<string, any>;
   onCancel: () => void;
 };
 
@@ -27,17 +28,25 @@ const langOptions = [
 ];
 
 const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
-  const { title, open, onCancel, payload, parameters = {} } = props || {};
+  const {
+    title,
+    open,
+    onCancel,
+    payload,
+    parameters = {},
+    api,
+    logcommand
+  } = props || {};
 
   const intl = useIntl();
   const [codeValue, setCodeValue] = useState('');
   const [lang, setLang] = useState(langMap.shell);
 
-  const BaseURL = `${window.location.origin}/v1/rerank`;
+  const BaseURL = `${window.location.origin}${api}`;
 
   const generateCode = () => {
     if (lang === langMap.shell) {
-      const code = `curl ${window.location.origin}/v1/rerank \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+      const code = `curl ${window.location.origin}${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
           ...parameters,
           ...payload
@@ -55,7 +64,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         'Content-type': 'application/json',
         Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
       };
-      const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n  console.log(response.data);\n});`;
+      const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n  console.log(response.${logcommand.node});\n});`;
       setCodeValue(code);
     } else if (lang === langMap.python) {
       const data = {
@@ -66,7 +75,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         'Content-type': 'application/json',
         Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
       };
-      const code = `import requests\n\nurl="${BaseURL}"\n\nheaders = ${JSON.stringify(headers, null, 2)}\n\ndata=${JSON.stringify(data, null, 2)}\n\nresponse = requests.post(url, headers=headers, json=data)\n\nprint(response.json())`;
+      const code = `import requests\n\nurl="${BaseURL}"\n\nheaders = ${JSON.stringify(headers, null, 2)}\n\ndata=${JSON.stringify(data, null, 2)}\n\nresponse = requests.post(url, headers=headers, json=data)\n\nprint(response.${logcommand.python})`;
       setCodeValue(code);
     }
   };

src/pages/playground/config/index.ts

@@ -119,6 +119,21 @@ export const OpenAIViewCode = {
     api: 'images/generations',
     clientType: 'images.generate',
     logcommand: 'data[0].b64_json'
+  },
+  imageAdvanced: {
+    api: '/v1/images/generations',
+    clientType: 'images.generate',
+    logcommand: {
+      python: 'json().data[0].b64_json',
+      node: 'data[0].b64_json'
+    }
+  },
+  rerank: {
+    api: '/v1/rerank',
+    logcommand: {
+      python: 'json()',
+      node: 'data'
+    }
   }
 };
 

src/pages/playground/config/test-image.ts

@@ -0,0 +1,39 @@
+export default [
+  {
+    dataUrl:
+      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    height: 'auto',
+    width: 'auto',
+    uid: 0,
+    span: 12,
+    loading: false,
+    progress: 60
+  },
+  {
+    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
+  }
+];