From cd1d3005e94035064a395012764e92a3c1d6b525 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 29 Nov 2024 15:20:51 +0800
Subject: [PATCH] fix: playground view code

---
 .../seal-form/components/wrapper.less         |  6 ++
 src/components/seal-form/seal-select.tsx      |  2 +-
 src/pages/llmodels/components/data-form.tsx   |  1 +
 .../components/ground-embedding.tsx           | 56 ++++++++++---
 .../playground/components/ground-images.tsx   | 84 +++++++------------
 .../playground/components/ground-left.tsx     |  2 +-
 .../playground/components/ground-reranker.tsx | 54 ++++++++++--
 .../playground/components/ground-stt.tsx      |  2 +-
 .../playground/components/ground-tts.tsx      |  2 +-
 .../components/multiple-chat/model-item.tsx   |  2 +-
 src/pages/playground/components/test.txt      | 33 +++++++-
 .../playground/components/view-code-modal.tsx | 12 +--
 ...w-rerank-code.tsx => view-common-code.tsx} | 21 +++--
 src/pages/playground/config/index.ts          | 15 ++++
 src/pages/playground/config/test-image.ts     | 39 +++++++++
 15 files changed, 243 insertions(+), 88 deletions(-)
 rename src/pages/playground/components/{view-rerank-code.tsx => view-common-code.tsx} (89%)
 create mode 100644 src/pages/playground/config/test-image.ts

diff --git a/src/components/seal-form/components/wrapper.less b/src/components/seal-form/components/wrapper.less
index c0295f24..3c8dc148 100644
--- a/src/components/seal-form/components/wrapper.less
+++ b/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;
diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx
index be2faf39..1e8ff5ba 100644
--- a/src/components/seal-form/seal-select.tsx
+++ b/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}
diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx
index 341e6d48..110a468d 100644
--- a/src/pages/llmodels/components/data-form.tsx
+++ b/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);
   };
 
diff --git a/src/pages/playground/components/ground-embedding.tsx b/src/pages/playground/components/ground-embedding.tsx
index 1f485880..fc0c821e 100644
--- a/src/pages/playground/components/ground-embedding.tsx
+++ b/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
-                    size="middle"
-                    type="primary"
-                    disabled={inputEmpty}
-                    onClick={handleSendMessage}
-                    icon={<SendOutlined rotate={0} className="font-size-14" />}
-                    style={{ width: 60 }}
-                  ></Button>
+                  <Tooltip
+                    title={
+                      <span>
+                        [{KeyMap.SUBMIT.textKeybinding}]{' '}
+                        {intl.formatMessage({ id: 'common.button.submit' })}
+                      </span>
+                    }
+                  >
+                    <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)
diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx
index 0cae3ec5..9538a616 100644
--- a/src/pages/playground/components/ground-images.tsx
+++ b/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
-        {...OpenAIViewCode.images}
-        open={show}
-        payLoad={{
-          prompt: currentPrompt
-        }}
-        parameters={{
-          ...finalParameters
-        }}
-        onCancel={handleCloseViewCode}
-        title={intl.formatMessage({ id: 'playground.viewcode' })}
-      ></ViewCodeModal>
+      {isOpenaiCompatible ? (
+        <ViewCodeModal
+          {...OpenAIViewCode.images}
+          open={show}
+          payload={{
+            prompt: currentPrompt
+          }}
+          parameters={{
+            ...finalParameters
+          }}
+          onCancel={handleCloseViewCode}
+          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>
   );
 });
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index fad6f900..92843dea 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/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}
diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx
index 9a8f1522..1ba2a316 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/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>
   );
 });
diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx
index f5d485b2..0c0b3624 100644
--- a/src/pages/playground/components/ground-stt.tsx
+++ b/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}
diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx
index c2cb206b..8a998839 100644
--- a/src/pages/playground/components/ground-tts.tsx
+++ b/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"
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index b2fba263..227d21fb 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/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}
diff --git a/src/pages/playground/components/test.txt b/src/pages/playground/components/test.txt
index 48dfcbe6..47d15d48 100644
--- a/src/pages/playground/components/test.txt
+++ b/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
 
 新的化妆趋势注重鲜艳的颜色和创新的技巧：进入化妆艺术的新纪元，本季的化妆趋势以大胆的颜色和创新的技巧为主。无论是霓虹眼线还是全息高光，每一款妆容都能让您脱颖而出，展现独特魅力。
 
-新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
\ No newline at end of file
+新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
+
+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
diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx
index 4036af46..7c5cabb7 100644
--- a/src/pages/playground/components/view-code-modal.tsx
+++ b/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);
diff --git a/src/pages/playground/components/view-rerank-code.tsx b/src/pages/playground/components/view-common-code.tsx
similarity index 89%
rename from src/pages/playground/components/view-rerank-code.tsx
rename to src/pages/playground/components/view-common-code.tsx
index 5ef6e088..05acc9a2 100644
--- a/src/pages/playground/components/view-rerank-code.tsx
+++ b/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);
     }
   };
diff --git a/src/pages/playground/config/index.ts b/src/pages/playground/config/index.ts
index 990a3bcf..d0075735 100644
--- a/src/pages/playground/config/index.ts
+++ b/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'
+    }
   }
 };
 
diff --git a/src/pages/playground/config/test-image.ts b/src/pages/playground/config/test-image.ts
new file mode 100644
index 00000000..40201f7c
--- /dev/null
+++ b/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
+  }
+];