root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: embedding view code modal

Browse Source
This commit is contained in:
jialin
2024-08-05 18:14:43 +08:00
parent a5ca79739b
commit 3bc86a0863
4 changed files with 78 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en-US/common.ts
+1
View File
@@ -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
+1
View File
@@ -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
+39
View File
@@ -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
+37 -25
View File
@@ -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: [
...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<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: [
...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<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(
[
...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();