From 3bc86a0863b5142904b7b93275a2cd188d63e863 Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 5 Aug 2024 18:13:52 +0800 Subject: [PATCH] chore: embedding view code modal --- src/locales/en-US/common.ts | 1 + src/locales/zh-CN/common.ts | 1 + src/pages/llmodels/components/table-list.tsx | 39 ++++++++++++ .../playground/components/view-code-modal.tsx | 62 +++++++++++-------- 4 files changed, 78 insertions(+), 25 deletions(-) diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 0f1c1011..f6374632 100644 --- a/src/locales/en-US/common.ts +++ b/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', diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 59620ac5..04d4a47a 100644 --- a/src/locales/zh-CN/common.ts +++ b/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': '展开', diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 5e82ec54..b96948f7 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/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 = ({ const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); + const [embeddingParams, setEmbeddingParams] = useState({ + params: {}, + show: false + }); + const [openViewCodeModal, setOpenViewCodeModal] = useState(false); const [openLogModal, setOpenLogModal] = useState(false); const [openAddModal, setOpenAddModal] = useState(false); const [action, setAction] = useState(PageAction.CREATE); @@ -92,6 +99,11 @@ const Models: React.FC = ({ key: 'chat', icon: }, + { + label: 'common.button.viewcode', + key: 'embedding', + icon: + }, { label: 'common.button.delete', key: 'delete', @@ -107,6 +119,9 @@ const Models: React.FC = ({ 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 = ({ 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 = ({ ); }, []); + const handleCloseViewCode = useCallback(() => { + setEmbeddingParams({ + params: {}, + show: false + }); + }, []); + return ( <> = ({ onCancel={handleLogModalCancel} > + ); }; diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index 3ca4ac5f..9a1b7aca 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/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 = (props) => { onCancel, systemMessage, messageList, - parameters = {} + parameters = {}, + apiType = 'chat' } = props || {}; const intl = useIntl(); @@ -32,6 +34,10 @@ const ViewCodeModal: React.FC = (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 = (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: [ - ...systemList, - ..._.map(messageList, (item: any) => { - return { role: item.role, content: item.content }; - }) - ] + ...(messages.length > 0 ? { messages } : {}) }, null, 2 @@ -74,19 +81,20 @@ const ViewCodeModal: React.FC = (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: [ - ...systemList, - ..._.map(messageList, (item: any) => { - return { role: item.role, content: item.content }; - }) - ] + ...(messages.length > 0 ? { messages } : {}) }, 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 = (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( - [ - ...systemList, - ..._.map(messageList, (item: any) => { - return { role: item.role, content: item.content }; - }) - ], - null, - 2 - )})\nprint(completion.choices[0].message.content)`; + const messages = + apiType === 'chat' + ? `messages=${JSON.stringify( + [ + ...systemList, + ..._.map(messageList, (item: any) => { + return { role: item.role, content: item.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();