chore: download progress

src/components/drop-down-buttons/index.tsx

@@ -3,7 +3,6 @@ import { useIntl } from '@umijs/max';
 import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import { memo } from 'react';
 import './index.less';
 
 type Trigger = 'click' | 'hover';
@@ -106,4 +105,4 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
   );
 };
 
-export default memo(DropdownButtons);
+export default DropdownButtons;

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

@@ -324,6 +324,14 @@
         top: 50%;
       }
     }
+
+    :global(.ant-select-selector) {
+      padding-block-start: 0 !important;
+    }
+
+    :global(.ant-select .ant-select-selection-search) {
+      top: 10px !important;
+    }
   }
 
   :global(

src/components/simple-table/header.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import React from 'react';
 
 interface TableHeaderProps {
@@ -7,12 +8,17 @@ interface TableHeaderProps {
   columns: any[];
 }
 const TableHeader = ({ columns }: TableHeaderProps) => {
+  const intl = useIntl();
   return (
     <tr>
       {columns.map((column: any, index: number) => {
         return (
           <th key={index}>
-            <span className="cell-span">{column.title}</span>
+            <span className="cell-span">
+              {column.locale
+                ? intl.formatMessage({ id: column.title })
+                : column.title}
+            </span>
           </th>
         );
       })}

src/components/simple-table/index.tsx

@@ -6,8 +6,15 @@ import TableHeader from './header';
 import './index.less';
 import TableRow from './row';
 
+interface ColumnProps {
+  title: string;
+  key: string;
+  render?: (data: { dataIndex: string; row: any }) => any;
+  locale?: boolean;
+}
+
 interface SimpleTableProps {
-  columns: any[];
+  columns: ColumnProps[];
   dataSource: any[];
   bordered?: boolean;
   rowKey?: string;

src/hooks/use-chunk-fetch.ts

@@ -13,6 +13,7 @@ type HandlerFunction = (data: any, options?: HandlerOptions) => any;
 interface RequestConfig {
   url: string;
   handler: HandlerFunction;
+  errorHandler?: (error: any) => void;
   beforeReconnect?: () => void;
   params?: object;
   watch?: boolean;
@@ -59,7 +60,7 @@ const useSetChunkFetch = () => {
           currentBuffer.forEach((item, i) => {
             const isComplete = i === currentBuffer.length - 1 && done;
             callback(item, {
-              isComplete,
+              isComplete: isComplete || this.percent === 100,
               percent: this.percent,
               progress: this.progress,
               contentLength: this.contentLength
@@ -110,6 +111,7 @@ const useSetChunkFetch = () => {
   const fetchChunkRequest = async ({
     url,
     handler,
+    errorHandler,
     watch,
     params = {}
   }: RequestConfig) => {
@@ -133,7 +135,11 @@ const useSetChunkFetch = () => {
 
       if (!response.ok) {
         const error = await response.json();
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
           handler(error?.message);
+        }
         return;
       }
 
@@ -141,8 +147,7 @@ const useSetChunkFetch = () => {
 
       console.log('chunkDataRef.current===1', chunkDataRef.current);
     } catch (error) {
-      // handle error
+      // handle error: catched in request interceptor
-      console.log('error============', error);
     }
 
     return axiosToken.current;

src/hooks/use-download-stream.ts

@@ -1,5 +1,5 @@
 import useSetChunkFetch, { HandlerOptions } from '@/hooks/use-chunk-fetch';
-import dayjs from 'dayjs';
+import { message } from 'antd';
 import { useEffect, useRef } from 'react';
 
 export default function useDownloadStream() {
@@ -7,18 +7,17 @@ export default function useDownloadStream() {
   const logParseWorker = useRef<any>(null);
   const clearScreen = useRef(false);
   const filename = useRef('log');
+  const downloadNotificationRef = useRef<any>(null);
+
   const { setChunkFetch } = useSetChunkFetch();
 
   const downloadFile = (content: string) => {
-    const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
-    const fileName = `${filename.current}_${timestamp}.txt`;
-
     const blob = new Blob([content], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
 
     const a = document.createElement('a');
     a.href = url;
-    a.download = fileName;
+    a.download = filename.current;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
@@ -28,6 +27,13 @@ export default function useDownloadStream() {
 
   const updateContent = (data: string, options?: HandlerOptions) => {
     const { isComplete } = options || {};
+
+    downloadNotificationRef.current?.({
+      ...options,
+      duration: isComplete ? 1 : null,
+      filename: filename.current
+    });
+
     logParseWorker.current?.postMessage({
       inputStr: data,
       page: 1,
@@ -38,6 +44,18 @@ export default function useDownloadStream() {
     clearScreen.current = false;
   };
 
+  const handleError = (error: any) => {
+    const errorMsg = error?.message || error;
+    const msg =
+      typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg);
+    message.error(msg);
+    downloadNotificationRef.current?.({
+      duration: 1,
+      percent: 0,
+      filename: filename.current
+    });
+  };
+
   const downloadStream = async (props: {
     data?: any;
     url: string;
@@ -46,11 +64,18 @@ export default function useDownloadStream() {
     method?: string;
     headers?: any;
     filename?: string;
+    downloadNotification?: (data: any) => void;
   }) => {
+    try {
       clearScreen.current = true;
       filename.current = props.filename || 'log';
+      downloadNotificationRef.current = props.downloadNotification;
       const { params, url } = props;
 
+      downloadNotificationRef.current?.({
+        filename: filename.current
+      });
+
       chunkRequedtRef.current?.current?.abort?.();
 
       chunkRequedtRef.current = setChunkFetch({
@@ -58,8 +83,17 @@ export default function useDownloadStream() {
         params,
         watch: false,
         contentType: 'text',
+        errorHandler: handleError,
         handler: updateContent
       });
+    } catch (error) {
+      //
+      downloadNotificationRef.current?.({
+        duration: 1,
+        percent: 0,
+        filename: filename.current
+      });
+    }
   };
 
   useEffect(() => {

src/pages/llmodels/components/instance-item.tsx

@@ -4,10 +4,9 @@ import IconFont from '@/components/icon-font';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SimpleTabel from '@/components/simple-table';
 import StatusTag from '@/components/status-tag';
-import {
+import { HandlerOptions } from '@/hooks/use-chunk-fetch';
-  GPUDeviceItem,
+import useDownloadStream from '@/hooks/use-download-stream';
-  ListItem as WorkerListItem
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-} from '@/pages/resources/config/types';
 import {
   DeleteOutlined,
   DownloadOutlined,
@@ -16,24 +15,29 @@ import {
   ThunderboltFilled
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, Divider, Row, Space, Tag, Tooltip } from 'antd';
+import {
+  Button,
+  Col,
+  Divider,
+  Progress,
+  Row,
+  Tag,
+  Tooltip,
+  notification
+} from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { MODEL_INSTANCE_API } from '../apis';
 import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
 import '../style/instance-item.less';
 
 interface InstanceItemProps {
-  list: ModelInstanceListItem[];
+  instanceData: ModelInstanceListItem;
-  gpuDeviceList: GPUDeviceItem[];
   workerList: WorkerListItem[];
   modelData?: any;
-  handleChildSelect: (
+  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
-    val: string,
-    item: ModelInstanceListItem,
-    list: ModelInstanceListItem[]
-  ) => void;
 }
 
 const childActionList = [
@@ -71,24 +75,7 @@ const childActionList = [
   }
 ];
 
-const setChildActionList = (item: ModelInstanceListItem) => {
+const distributeCols = [
-  return _.filter(childActionList, (action: any) => {
-    if (action.key === 'viewlog' || action.key === 'download') {
-      return action.status.includes(item.state);
-    }
-    return true;
-  });
-};
-
-const InstanceItem: React.FC<InstanceItemProps> = ({
-  list,
-  workerList,
-  modelData,
-  handleChildSelect
-}) => {
-  const intl = useIntl();
-
-  const distributeCols = [
   {
     title: 'Worker',
     key: 'worker_name'
@@ -101,19 +88,74 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
     }
   },
   {
-      title: intl.formatMessage({ id: 'models.table.gpuindex' }),
+    title: 'models.table.gpuindex',
+    locale: true,
     key: 'gpu_index'
   }
-  ];
+];
 
-  const renderWorkerInfo = (item: ModelInstanceListItem) => {
+const renderMessage = (title: string) => {
+  return (
+    <div
+      style={{
+        width: 300,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }}
+    >
+      {title}
+    </div>
+  );
+};
+
+const InstanceItem: React.FC<InstanceItemProps> = ({
+  instanceData,
+  workerList,
+  modelData,
+  handleChildSelect
+}) => {
+  const [api, contextHolder] = notification.useNotification();
+  const { downloadStream } = useDownloadStream();
+  const intl = useIntl();
+
+  const actionItems = useMemo(() => {
+    return _.filter(childActionList, (action: any) => {
+      if (action.key === 'viewlog' || action.key === 'download') {
+        return action.status.includes(instanceData.state);
+      }
+      return true;
+    });
+  }, [instanceData]);
+
+  const createFileName = (name: string) => {
+    const timestamp = dayjs().format('YYYY-MM-DD_HH-mm-ss');
+    const fileName = `${name}_${timestamp}.txt`;
+    return fileName;
+  };
+
+  const downloadNotification = useCallback(
+    (data: HandlerOptions & { filename: string; duration?: number }) => {
+      api.open({
+        duration: data.duration,
+        message: renderMessage(data.filename),
+        key: data.filename,
+        description: <Progress percent={data.percent} size="small"></Progress>
+      });
+    },
+    []
+  );
+
+  const renderWorkerInfo = useMemo(() => {
     let workerIp = '-';
-    if (item.worker_ip) {
+    if (instanceData.worker_ip) {
-      workerIp = item.port ? `${item.worker_ip}:${item.port}` : item.worker_ip;
+      workerIp = instanceData.port
+        ? `${instanceData.worker_ip}:${instanceData.port}`
+        : instanceData.worker_ip;
     }
     return (
       <div>
-        <div>{item.worker_name}</div>
+        <div>{instanceData.worker_name}</div>
         <div className="flex-center">
           <HddFilled className="m-r-5" />
           {workerIp}
@@ -121,7 +163,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
         <div className="flex-center">
           <IconFont type="icon-filled-gpu" className="m-r-5" />
           {intl.formatMessage({ id: 'models.table.gpuindex' })}: [
-          {_.join(item.gpu_indexes?.sort?.(), ',')}]
+          {_.join(instanceData.gpu_indexes?.sort?.(), ',')}]
         </div>
         <div className="flex-center">
           <ThunderboltFilled className="m-r-5" />
@@ -131,10 +173,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
         </div>
       </div>
     );
-  };
+  }, [modelData, instanceData, intl]);
 
-  const renderDistributionInfo = (row: ModelInstanceListItem) => {
+  const renderDistributionInfo = useMemo(() => {
-    const rpcServerList = row.distributed_servers?.rpc_servers || [];
+    const rpcServerList = instanceData.distributed_servers?.rpc_servers || [];
     const list = _.map(rpcServerList, (item: any) => {
       const data = _.find(workerList, { id: item.worker_id });
       return {
@@ -147,10 +189,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
 
     const mainWorker = [
       {
-        worker_name: `${row.worker_name}`,
+        worker_name: `${instanceData.worker_name}`,
-        worker_ip: `${row.worker_ip}`,
+        worker_ip: `${instanceData.worker_ip}`,
         port: '',
-        gpu_index: `${row.gpu_indexes?.sort?.()} (main)`
+        gpu_index: `${instanceData.gpu_indexes?.sort?.()} (main)`
       }
     ];
 
@@ -165,17 +207,29 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
         ></SimpleTabel>
       </div>
     );
-  };
+  }, [workerList, instanceData, intl]);
+
+  const handleOnSelect = useCallback(
+    (val: string) => {
+      console.log('handleOnSelect', val);
+      if (val === 'download') {
+        downloadStream({
+          url: `${MODEL_INSTANCE_API}/${instanceData.id}/logs`,
+          filename: createFileName(instanceData.name),
+          downloadNotification
+        });
+      } else {
+        handleChildSelect(val, instanceData);
+      }
+    },
+    [handleChildSelect, instanceData]
+  );
 
   return (
-    <Space size={16} direction="vertical" style={{ width: '100%' }}>
+    <>
-      {_.map(list, (item: ModelInstanceListItem, index: number) => {
+      {contextHolder}
-        return (
+      <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
-          <div
+        <RowChildren>
-            key={`${item.id}`}
-            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
-          >
-            <RowChildren key={`${item.id}_row`}>
           <Row style={{ width: '100%' }} align="middle">
             <Col
               span={5}
@@ -184,10 +238,10 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
               }}
             >
               <span className="flex-center instance-name">
-                    <AutoTooltip title={item.name} ghost>
+                <AutoTooltip title={instanceData.name} ghost>
-                      <span className="m-r-5">{item.name}</span>
+                  <span className="m-r-5">{instanceData.name}</span>
                 </AutoTooltip>
-                    <Tooltip title={renderWorkerInfo(item)}>
+                <Tooltip title={renderWorkerInfo}>
                   <span className="server-info">
                     <InfoCircleOutlined />
                   </span>
@@ -203,16 +257,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 }}
                 className="flex align-center"
               >
-                    {item.computed_resource_claim?.total_layers !==
+                {instanceData.computed_resource_claim?.total_layers !==
-                      item.computed_resource_claim?.offload_layers && (
+                  instanceData.computed_resource_claim?.offload_layers && (
                   <Tooltip
                     title={
                       <span className="flex flex-center">
                         <span>
                           CPU:{' '}
                           {_.subtract(
-                                item.computed_resource_claim?.total_layers,
+                            instanceData.computed_resource_claim?.total_layers,
-                                item.computed_resource_claim?.offload_layers
+                            instanceData.computed_resource_claim?.offload_layers
                           ) || 0}{' '}
                           {intl.formatMessage({
                             id: 'models.table.layers'
@@ -227,7 +281,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         ></Divider>
                         <span>
                           GPU:{' '}
-                              {item.computed_resource_claim?.offload_layers}{' '}
+                          {instanceData.computed_resource_claim?.offload_layers}{' '}
                           {intl.formatMessage({
                             id: 'models.table.layers'
                           })}
@@ -256,12 +310,12 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     </Tag>
                   </Tooltip>
                 )}
-                    {item?.distributed_servers?.rpc_servers?.length && (
+                {instanceData?.distributed_servers?.rpc_servers?.length && (
                   <Tooltip
                     overlayInnerStyle={{
                       width: '400px'
                     }}
-                        title={renderDistributionInfo(item)}
+                    title={renderDistributionInfo}
                   >
                     <Tag
                       color="processing"
@@ -291,22 +345,22 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 style={{ paddingLeft: '62px' }}
                 className="flex justify-center"
               >
-                    {item.state && (
+                {instanceData.state && (
                   <StatusTag
                     download={
-                          item.state === InstanceStatusMap.Downloading
+                      instanceData.state === InstanceStatusMap.Downloading
-                            ? { percent: item.download_progress }
+                        ? { percent: instanceData.download_progress }
                         : undefined
                     }
                     extra={
-                          item.state === InstanceStatusMap.Error &&
+                      instanceData.state === InstanceStatusMap.Error &&
-                          item.worker_id ? (
+                      instanceData.worker_id ? (
                         <Button
                           type="link"
                           size="small"
                           style={{ paddingLeft: 0 }}
                           onClick={() =>
-                                handleChildSelect('viewlog', item, list)
+                            handleChildSelect('viewlog', instanceData)
                           }
                         >
                           {intl.formatMessage({
@@ -317,16 +371,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     }
                     statusValue={{
                       status:
-                            item.state === InstanceStatusMap.Downloading &&
+                        instanceData.state === InstanceStatusMap.Downloading &&
-                            item.download_progress === 100
+                        instanceData.download_progress === 100
                           ? status[InstanceStatusMap.Running]
-                              : (status[item.state] as any),
+                          : (status[instanceData.state] as any),
-                          text: InstanceStatusMapValue[item.state],
+                      text: InstanceStatusMapValue[instanceData.state],
                       message:
-                            item.state === InstanceStatusMap.Downloading &&
+                        instanceData.state === InstanceStatusMap.Downloading &&
-                            item.download_progress === 100
+                        instanceData.download_progress === 100
                           ? ''
-                              : item.state_message
+                          : instanceData.state_message
                     }}
                   ></StatusTag>
                 )}
@@ -334,25 +388,21 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
             </Col>
             <Col span={5}>
               <span style={{ paddingLeft: 45 }} className="flex">
-                    {dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
+                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
               </span>
             </Col>
             <Col span={4}>
               <div style={{ paddingLeft: 39 }}>
                 <DropdownButtons
-                      items={setChildActionList(item)}
+                  items={actionItems}
-                      onSelect={(val: string) =>
+                  onSelect={handleOnSelect}
-                        handleChildSelect(val, item, list)
-                      }
                 ></DropdownButtons>
               </div>
             </Col>
           </Row>
         </RowChildren>
       </div>
-        );
+    </>
-      })}
-    </Space>
   );
 };
 export default React.memo(InstanceItem);

src/pages/llmodels/components/instances.tsx

@@ -0,0 +1,38 @@
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
+import { Space } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { ModelInstanceListItem } from '../config/types';
+import '../style/instance-item.less';
+import InstanceItem from './instance-item';
+
+interface InstanceItemProps {
+  list: ModelInstanceListItem[];
+  workerList: WorkerListItem[];
+  modelData?: any;
+  handleChildSelect: (val: string, item: ModelInstanceListItem) => void;
+}
+
+const Instances: React.FC<InstanceItemProps> = ({
+  list,
+  workerList,
+  modelData,
+  handleChildSelect
+}) => {
+  return (
+    <Space size={16} direction="vertical" style={{ width: '100%' }}>
+      {_.map(list, (item: ModelInstanceListItem, index: number) => {
+        return (
+          <InstanceItem
+            key={item.name}
+            modelData={modelData}
+            workerList={workerList}
+            instanceData={item}
+            handleChildSelect={handleChildSelect}
+          ></InstanceItem>
+        );
+      })}
+    </Space>
+  );
+};
+export default Instances;

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

@@ -10,7 +10,6 @@ import { SealColumnProps } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
 import HotKeys from '@/config/hotkeys';
 import useBodyScroll from '@/hooks/use-body-scroll';
-import useDownloadStream from '@/hooks/use-download-stream';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
@@ -71,7 +70,7 @@ import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
 import { useGenerateFormEditInitialValues } from '../hooks';
 import DeployDropdown from './deploy-dropdown';
 import DeployModal from './deploy-modal';
-import InstanceItem from './instance-item';
+import Instances from './instances';
 import ModelTag from './model-tag';
 import UpdateModel from './update-modal';
 import ViewLogsModal from './view-logs-modal';
@@ -182,7 +181,6 @@ const Models: React.FC<ModelsProps> = ({
   loadend,
   total
 }) => {
-  const { downloadStream } = useDownloadStream();
   const { getGPUList, generateFormValues, gpuDeviceList } =
     useGenerateFormEditInitialValues();
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
@@ -566,7 +564,7 @@ const Models: React.FC<ModelsProps> = ({
     [onViewLogs]
   );
   const handleDeleteInstace = useCallback(
-    (row: any, list: ModelInstanceListItem[]) => {
+    (row: any) => {
       modalRef.current.show({
         content: 'models.instances',
         okText: 'common.button.delrecreate',
@@ -643,23 +641,17 @@ const Models: React.FC<ModelsProps> = ({
         });
       }
     },
-    [handleEdit, handleOpenPlayGround, handleDelete]
+    [handleEdit, handleOpenPlayGround, handleDelete, expandedRowKeys]
   );
 
   const handleChildSelect = useCallback(
-    (val: any, row: ModelInstanceListItem, list: ModelInstanceListItem[]) => {
+    (val: any, row: ModelInstanceListItem) => {
       if (val === 'delete') {
-        handleDeleteInstace(row, list);
+        handleDeleteInstace(row);
       }
       if (val === 'viewlog') {
         handleViewLogs(row);
       }
-      if (val === 'download') {
-        downloadStream({
-          url: `${MODEL_INSTANCE_API}/${row.id}/logs`,
-          filename: row.name
-        });
-      }
     },
     [handleViewLogs, handleDeleteInstace]
   );
@@ -667,13 +659,12 @@ const Models: React.FC<ModelsProps> = ({
   const renderChildren = useCallback(
     (list: any, parent?: any) => {
       return (
-        <InstanceItem
+        <Instances
           list={list}
           modelData={parent}
-          gpuDeviceList={[]}
           workerList={workerList}
           handleChildSelect={handleChildSelect}
-        ></InstanceItem>
+        ></Instances>
       );
     },
     [workerList]

src/pages/playground/apis/index.ts

@@ -1,6 +1,8 @@
 import { request } from '@umijs/max';
 
-export const OPENAI_COMPATIBLE = 'v1';
+export const OPENAI_COMPATIBLE = 'v1-openai';
+
+export const GPUSTACK_API = 'v1';
 
 export const CHAT_API = `/${OPENAI_COMPATIBLE}/chat/completions`;
 
@@ -9,7 +11,7 @@ export const EDIT_IMAGE_API = `/${OPENAI_COMPATIBLE}/images/edits`;
 
 export const EMBEDDING_API = `/${OPENAI_COMPATIBLE}/embeddings`;
 
-export const OPENAI_MODELS = `/v1-openai/models`;
+export const OPENAI_MODELS = `/${OPENAI_COMPATIBLE}/models`;
 
 export const RERANKER_API = '/rerank';
 

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

@@ -5,7 +5,7 @@ import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import _ from 'lodash';
 import React, { useMemo, useState } from 'react';
-import { OPENAI_COMPATIBLE } from '../apis';
+import { GPUSTACK_API } from '../apis';
 
 type ViewModalProps = {
   systemMessage?: string;
@@ -47,7 +47,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const intl = useIntl();
   const [lang, setLang] = useState(langMap.shell);
 
-  const BaseURL = `${window.location.origin}/${OPENAI_COMPATIBLE}`;
+  const BaseURL = `${window.location.origin}/${GPUSTACK_API}`;
 
   const formatPyParams = (params: any) => {
     return _.keys(params).reduce((acc: string, key: string) => {
@@ -70,7 +70,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
     const printLog = logcommand ? `print(response.${logcommand})` : '';
 
     if (lang === langMap.shell) {
-      const code = `curl ${window.location.origin}/${OPENAI_COMPATIBLE}/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
+      const code = `curl ${window.location.origin}/${GPUSTACK_API}/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
           ...parameters,
           ...payload

src/pages/playground/view-code/audio.ts

@@ -1,8 +1,13 @@
-import { OPENAI_COMPATIBLE } from '../apis';
+import { GPUSTACK_API, OPENAI_COMPATIBLE } from '../apis';
 import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
 
-export const speechToTextCode = ({ api, parameters }: Record<string, any>) => {
+export const speechToTextCode = ({
+  api: url,
+  parameters
+}: Record<string, any>) => {
   const host = window.location.origin;
+  // replace url OPENAI_COMPATIBLE with GPUSTACK
+  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
 
   // ========================= Curl =========================
   const curlCode = `
@@ -19,7 +24,7 @@ ${formatCurlArgs(parameters, true)}`
 from openai import OpenAI\n
 audio_file = open("audio.mp3", "rb")
 client = OpenAI(
-  base_url="${host}/${OPENAI_COMPATIBLE}", 
+  base_url="${host}/${GPUSTACK_API}", 
   api_key="YOUR_GPUSTACK_API_KEY"
 )
 
@@ -44,7 +49,7 @@ const OpenAI = require("openai");
 
 const openai = new OpenAI({
   "apiKey": "YOUR_GPUSTACK_API_KEY",
-  "baseURL": "${host}/${OPENAI_COMPATIBLE}"
+  "baseURL": "${host}/${GPUSTACK_API}"
 });
 
 async function main() {
@@ -62,8 +67,12 @@ main();`.trim();
   };
 };
 
-export const TextToSpeechCode = ({ api, parameters }: Record<string, any>) => {
+export const TextToSpeechCode = ({
+  api: url,
+  parameters
+}: Record<string, any>) => {
   const host = window.location.origin;
+  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
 
   // ========================= Curl =========================
   const curlCode = `
@@ -78,7 +87,7 @@ from pathlib import Path
 from openai import OpenAI\n
 output_file_path = Path(__file__).parent / "output.mp3"
 client = OpenAI(
-  base_url="${host}/${OPENAI_COMPATIBLE}", 
+  base_url="${host}/${GPUSTACK_API}", 
   api_key="YOUR_GPUSTACK_API_KEY"
 )
 
@@ -103,7 +112,7 @@ const ouptFile = path.resolve("./output.mp3");
 
 const openai = new OpenAI({
   "apiKey": "YOUR_GPUSTACK_API_KEY",
-  "baseURL": "${host}/${OPENAI_COMPATIBLE}"
+  "baseURL": "${host}/${GPUSTACK_API}"
 });
 
 async function main() {

src/pages/playground/view-code/embedding.ts

@@ -1,11 +1,12 @@
-import { OPENAI_COMPATIBLE } from '../apis';
+import { GPUSTACK_API, OPENAI_COMPATIBLE } from '../apis';
 import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
 
 export const generateEmbeddingCode = ({
-  api,
+  api: url,
   parameters
 }: Record<string, any>) => {
   const host = window.location.origin;
+  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
 
   // ========================= Curl =========================
   const curlCode = `
@@ -18,7 +19,7 @@ ${formatCurlArgs(parameters, false)}`.trim();
   const pythonCode = `
 from openai import OpenAI\n
 client = OpenAI(
-  base_url="${host}/${OPENAI_COMPATIBLE}", 
+  base_url="${host}/${GPUSTACK_API}", 
   api_key="YOUR_GPUSTACK_API_KEY"
 )
 
@@ -35,7 +36,7 @@ const OpenAI = require("openai");
 
 const openai = new OpenAI({
   "apiKey": "YOUR_GPUSTACK_API_KEY",
-  "baseURL": "${host}/${OPENAI_COMPATIBLE}"
+  "baseURL": "${host}/${GPUSTACK_API}"
 });
 
 async function main() {

src/pages/playground/view-code/image.ts

@@ -1,14 +1,15 @@
 import _ from 'lodash';
-import { OPENAI_COMPATIBLE } from '../apis';
+import { GPUSTACK_API, OPENAI_COMPATIBLE } from '../apis';
 import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
 
 export const generateImageCode = ({
-  api,
+  api: url,
   parameters,
   isFormdata = false,
   edit = false
 }: Record<string, any>) => {
   const host = window.location.origin;
+  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
 
   // ========================= Curl =========================
   let curlCode = `
@@ -45,7 +46,7 @@ print(response.json()['data'][0]['b64_json'])`.trim();
   const nodeJsCode = `
 const axios = require('axios');
 
-const url = "${host}/${OPENAI_COMPATIBLE}/images/generations";
+const url = "${host}/${GPUSTACK_API}/images/generations";
 const headers = {
   "Content-type": "application/json",
   "Authorization": "Bearer $\{YOUR_GPUSTACK_API_KEY}"
@@ -64,12 +65,13 @@ axios.post(url, data, { headers }).then((response) => {
 };
 
 export const generateOpenaiImageCode = ({
-  api,
+  api: url,
   parameters,
   isFormdata = false,
   edit = false
 }: Record<string, any>) => {
   const host = window.location.origin;
+  const api = url.replace(OPENAI_COMPATIBLE, GPUSTACK_API);
 
   // ========================= Curl =========================
   let curlCode = `
@@ -93,7 +95,7 @@ ${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
   const pythonCode = `
 from openai import OpenAI\n
 client = OpenAI(
-  base_url="${host}/${OPENAI_COMPATIBLE}", 
+  base_url="${host}/${GPUSTACK_API}", 
   api_key="YOUR_GPUSTACK_API_KEY"
 )
 
@@ -110,7 +112,7 @@ const OpenAI = require("openai");
 
 const openai = new OpenAI({
   "apiKey": "YOUR_GPUSTACK_API_KEY",
-  "baseURL": "${host}/${OPENAI_COMPATIBLE}"
+  "baseURL": "${host}/${GPUSTACK_API}"
 });
 
 async function main() {