chore: embedding view code modal

src/locales/en-US/common.ts

@@ -10,6 +10,7 @@ export default {
   'common.button.save': 'Save',
   'common.button.saverun': 'Save and Run',
   'common.button.run': 'Run',
+  'common.button.viewcode': 'View Code',
   'common.button.copy': 'Copy',
   'common.button.collapse': 'Collapse',
   'common.button.expand': 'Expand',

src/locales/zh-CN/common.ts

@@ -10,6 +10,7 @@ export default {
   'common.button.save': '保存',
   'common.button.saverun': '保存并运行',
   'common.button.run': '运行',
+  'common.button.viewcode': '查看代码',
   'common.button.copy': '复制',
   'common.button.collapse': '折叠',
   'common.button.expand': '展开',

src/pages/llmodels/components/table-list.tsx

@@ -1,5 +1,6 @@
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
 import PageTools from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
 import SealColumn from '@/components/seal-table/components/seal-column';
@@ -8,6 +9,7 @@ import type { PageActionType } from '@/config/types';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import ViewCodeModal from '@/pages/playground/components/view-code-modal';
 import { handleBatchRequest } from '@/utils';
 import {
   DeleteOutlined,
@@ -71,6 +73,11 @@ const Models: React.FC<ModelsProps> = ({
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
+  const [embeddingParams, setEmbeddingParams] = useState<any>({
+    params: {},
+    show: false
+  });
+  const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
   const [openLogModal, setOpenLogModal] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -92,6 +99,11 @@ const Models: React.FC<ModelsProps> = ({
       key: 'chat',
       icon: <WechatWorkOutlined />
     },
+    {
+      label: 'common.button.viewcode',
+      key: 'embedding',
+      icon: <IconFont type="icon-code" />
+    },
     {
       label: 'common.button.delete',
       key: 'delete',
@@ -107,6 +119,9 @@ const Models: React.FC<ModelsProps> = ({
       if (action.key === 'chat') {
         return record.ready_replicas > 0 && !record.embedding_only;
       }
+      if (action.key === 'embedding') {
+        return record.embedding_only;
+      }
       return true;
     });
   }, []);
@@ -225,6 +240,15 @@ const Models: React.FC<ModelsProps> = ({
     if (val === 'delete') {
       handleDelete(row);
     }
+    if (val === 'embedding') {
+      setEmbeddingParams({
+        params: {
+          input: 'Your text string goes here',
+          model: row.name
+        },
+        show: true
+      });
+    }
   }, []);
 
   const handleChildSelect = useCallback(
@@ -248,6 +272,13 @@ const Models: React.FC<ModelsProps> = ({
     );
   }, []);
 
+  const handleCloseViewCode = useCallback(() => {
+    setEmbeddingParams({
+      params: {},
+      show: false
+    });
+  }, []);
+
   return (
     <>
       <PageContainer
@@ -416,6 +447,14 @@ const Models: React.FC<ModelsProps> = ({
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>
       <DeleteModal ref={modalRef}></DeleteModal>
+      <ViewCodeModal
+        apiType="embedding"
+        open={embeddingParams.show}
+        messageList={[]}
+        parameters={embeddingParams.params}
+        onCancel={handleCloseViewCode}
+        title={intl.formatMessage({ id: 'playground.viewcode' })}
+      ></ViewCodeModal>
     </>
   );
 };

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

@@ -12,6 +12,7 @@ type ViewModalProps = {
   parameters: any;
   title: string;
   open: boolean;
+  apiType?: string;
   onCancel: () => void;
 };
 
@@ -22,7 +23,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     onCancel,
     systemMessage,
     messageList,
-    parameters = {}
+    parameters = {},
+    apiType = 'chat'
   } = props || {};
 
   const intl = useIntl();
@@ -32,6 +34,10 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const [lang, setLang] = useState('shell');
 
   const BaseURL = `${window.location.origin}/v1-openai`;
+  const ClientType = apiType === 'chat' ? 'chat.completions' : 'embeddings';
+  const api = apiType === 'chat' ? 'chat/completions' : 'embeddings';
+  const logcommand =
+    apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding';
 
   const langOptions = [
     { label: 'Curl', value: 'shell' },
@@ -56,15 +62,16 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `curl ${window.location.origin}/v1-openai/chat/completions \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+      const messages = [
+        ...systemList,
+        ..._.map(messageList, (item: any) => {
+          return { role: item.role, content: item.content };
+        })
+      ];
+      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,
-          messages: [
+          ...(messages.length > 0 ? { messages } : {})
-            ...systemList,
-            ..._.map(messageList, (item: any) => {
-              return { role: item.role, content: item.content };
-            })
-          ]
         },
         null,
         2
@@ -74,19 +81,20 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
+      const messages = [
+        ...systemList,
+        ..._.map(messageList, (item: any) => {
+          return { role: item.role, content: item.content };
+        })
+      ];
       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,
-          messages: [
+          ...(messages.length > 0 ? { messages } : {})
-            ...systemList,
-            ..._.map(messageList, (item: any) => {
-              return { role: item.role, content: item.content };
-            })
-          ]
         },
         null,
         4
-      )};\nconst chatCompletion = await openai.chat.completions.create(params);\n  console.log(chatCompletion.choices[0].message.content);\n}\nmain();`;
+      )};\nconst response = await openai.${ClientType}.create(params);\n  console.log(response.${logcommand});\n}\nmain();`;
       setCodeValue(code);
     } else if (lang === 'python') {
       const formattedParams = _.keys(parameters).reduce(
@@ -105,16 +113,20 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const systemList = systemMessage
         ? [{ role: 'system', content: systemMessage }]
         : [];
-      const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify(
+      const messages =
-        [
+        apiType === 'chat'
-          ...systemList,
+          ? `messages=${JSON.stringify(
-          ..._.map(messageList, (item: any) => {
+              [
-            return { role: item.role, content: item.content };
+                ...systemList,
-          })
+                ..._.map(messageList, (item: any) => {
-        ],
+                  return { role: item.role, content: item.content };
-        null,
+                })
-        2
+              ],
-      )})\nprint(completion.choices[0].message.content)`;
+              null,
+              2
+            )}`
+          : '';
+      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}.create(\n${formattedParams}  ${messages})\nprint(response.${logcommand})`;
       setCodeValue(code);
     }
     formatCode();