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();
-        handler(error?.message);
+        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,20 +64,36 @@ export default function useDownloadStream() {
     method?: string;
     headers?: any;
     filename?: string;
+    downloadNotification?: (data: any) => void;
   }) => {
-    clearScreen.current = true;
+    try {
-    filename.current = props.filename || 'log';
+      clearScreen.current = true;
-    const { params, url } = props;
+      filename.current = props.filename || 'log';
+      downloadNotificationRef.current = props.downloadNotification;
+      const { params, url } = props;
 
-    chunkRequedtRef.current?.current?.abort?.();
+      downloadNotificationRef.current?.({
+        filename: filename.current
+      });
 
-    chunkRequedtRef.current = setChunkFetch({
+      chunkRequedtRef.current?.current?.abort?.();
-      url,
+
-      params,
+      chunkRequedtRef.current = setChunkFetch({
-      watch: false,
+        url,
-      contentType: 'text',
+        params,
-      handler: updateContent
+        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,49 +75,87 @@ const childActionList = [
   }
 ];
 
-const setChildActionList = (item: ModelInstanceListItem) => {
+const distributeCols = [
-  return _.filter(childActionList, (action: any) => {
+  {
-    if (action.key === 'viewlog' || action.key === 'download') {
+    title: 'Worker',
-      return action.status.includes(item.state);
+    key: 'worker_name'
+  },
+  {
+    title: 'IP',
+    key: 'worker_ip',
+    render: ({ row }: { row: ModelInstanceListItem }) => {
+      return row.port ? `${row.worker_ip}:${row.port}` : row.worker_ip;
     }
-    return true;
+  },
-  });
+  {
+    title: 'models.table.gpuindex',
+    locale: true,
+    key: 'gpu_index'
+  }
+];
+
+const renderMessage = (title: string) => {
+  return (
+    <div
+      style={{
+        width: 300,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      }}
+    >
+      {title}
+    </div>
+  );
 };
 
 const InstanceItem: React.FC<InstanceItemProps> = ({
-  list,
+  instanceData,
   workerList,
   modelData,
   handleChildSelect
 }) => {
+  const [api, contextHolder] = notification.useNotification();
+  const { downloadStream } = useDownloadStream();
   const intl = useIntl();
 
-  const distributeCols = [
+  const actionItems = useMemo(() => {
-    {
+    return _.filter(childActionList, (action: any) => {
-      title: 'Worker',
+      if (action.key === 'viewlog' || action.key === 'download') {
-      key: 'worker_name'
+        return action.status.includes(instanceData.state);
-    },
-    {
-      title: 'IP',
-      key: 'worker_ip',
-      render: ({ row }: { row: ModelInstanceListItem }) => {
-        return row.port ? `${row.worker_ip}:${row.port}` : row.worker_ip;
       }
-    },
+      return true;
-    {
+    });
-      title: intl.formatMessage({ id: 'models.table.gpuindex' }),
+  }, [instanceData]);
-      key: 'gpu_index'
-    }
-  ];
 
-  const renderWorkerInfo = (item: ModelInstanceListItem) => {
+  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,194 +207,202 @@ 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}`}
+          <Row style={{ width: '100%' }} align="middle">
-            style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}
+            <Col
-          >
+              span={5}
-            <RowChildren key={`${item.id}_row`}>
+              style={{
-              <Row style={{ width: '100%' }} align="middle">
+                paddingInline: 'var(--ant-table-cell-padding-inline)'
-                <Col
+              }}
-                  span={5}
+            >
-                  style={{
+              <span className="flex-center instance-name">
-                    paddingInline: 'var(--ant-table-cell-padding-inline)'
+                <AutoTooltip title={instanceData.name} ghost>
-                  }}
+                  <span className="m-r-5">{instanceData.name}</span>
-                >
+                </AutoTooltip>
-                  <span className="flex-center instance-name">
+                <Tooltip title={renderWorkerInfo}>
-                    <AutoTooltip title={item.name} ghost>
+                  <span className="server-info">
-                      <span className="m-r-5">{item.name}</span>
+                    <InfoCircleOutlined />
-                    </AutoTooltip>
+                  </span>
-                    <Tooltip title={renderWorkerInfo(item)}>
+                </Tooltip>
-                      <span className="server-info">
+              </span>
-                        <InfoCircleOutlined />
+            </Col>
+            <Col span={6}>
+              <span
+                style={{
+                  paddingLeft: '58px',
+                  flexWrap: 'wrap',
+                  gap: '5px'
+                }}
+                className="flex align-center"
+              >
+                {instanceData.computed_resource_claim?.total_layers !==
+                  instanceData.computed_resource_claim?.offload_layers && (
+                  <Tooltip
+                    title={
+                      <span className="flex flex-center">
+                        <span>
+                          CPU:{' '}
+                          {_.subtract(
+                            instanceData.computed_resource_claim?.total_layers,
+                            instanceData.computed_resource_claim?.offload_layers
+                          ) || 0}{' '}
+                          {intl.formatMessage({
+                            id: 'models.table.layers'
+                          })}
+                        </span>
+                        <Divider
+                          type="vertical"
+                          style={{
+                            borderColor: '#fff',
+                            opacity: 0.5
+                          }}
+                        ></Divider>
+                        <span>
+                          GPU:{' '}
+                          {instanceData.computed_resource_claim?.offload_layers}{' '}
+                          {intl.formatMessage({
+                            id: 'models.table.layers'
+                          })}
+                        </span>
                       </span>
-                    </Tooltip>
+                    }
-                  </span>
+                  >
-                </Col>
+                    <Tag
-                <Col span={6}>
+                      color="cyan"
-                  <span
+                      style={{
-                    style={{
+                        display: 'flex',
-                      paddingLeft: '58px',
+                        alignItems: 'center',
-                      flexWrap: 'wrap',
+                        maxWidth: '100%',
-                      gap: '5px'
+                        minWidth: 50,
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        opacity: 0.75,
+                        borderRadius: 12
+                      }}
+                    >
+                      <InfoCircleOutlined className="m-r-5" />
+                      {intl.formatMessage({
+                        id: 'models.table.cpuoffload'
+                      })}
+                    </Tag>
+                  </Tooltip>
+                )}
+                {instanceData?.distributed_servers?.rpc_servers?.length && (
+                  <Tooltip
+                    overlayInnerStyle={{
+                      width: '400px'
                     }}
-                    className="flex align-center"
+                    title={renderDistributionInfo}
                   >
-                    {item.computed_resource_claim?.total_layers !==
+                    <Tag
-                      item.computed_resource_claim?.offload_layers && (
+                      color="processing"
-                      <Tooltip
+                      style={{
-                        title={
+                        display: 'flex',
-                          <span className="flex flex-center">
+                        alignItems: 'center',
-                            <span>
+                        maxWidth: '100%',
-                              CPU:{' '}
+                        minWidth: 50,
-                              {_.subtract(
+                        textOverflow: 'ellipsis',
-                                item.computed_resource_claim?.total_layers,
+                        whiteSpace: 'nowrap',
-                                item.computed_resource_claim?.offload_layers
+                        overflow: 'hidden',
-                              ) || 0}{' '}
+                        opacity: 0.75,
-                              {intl.formatMessage({
+                        borderRadius: 12
-                                id: 'models.table.layers'
+                      }}
-                              })}
+                    >
-                            </span>
+                      <InfoCircleOutlined className="m-r-5" />
-                            <Divider
+                      {intl.formatMessage({
-                              type="vertical"
+                        id: 'models.table.acrossworker'
-                              style={{
+                      })}
-                                borderColor: '#fff',
+                    </Tag>
-                                opacity: 0.5
+                  </Tooltip>
-                              }}
+                )}
-                            ></Divider>
+              </span>
-                            <span>
+            </Col>
-                              GPU:{' '}
+            <Col span={4}>
-                              {item.computed_resource_claim?.offload_layers}{' '}
+              <span
-                              {intl.formatMessage({
+                style={{ paddingLeft: '62px' }}
-                                id: 'models.table.layers'
+                className="flex justify-center"
-                              })}
+              >
-                            </span>
+                {instanceData.state && (
-                          </span>
+                  <StatusTag
-                        }
+                    download={
-                      >
+                      instanceData.state === InstanceStatusMap.Downloading
-                        <Tag
+                        ? { percent: instanceData.download_progress }
-                          color="cyan"
+                        : undefined
-                          style={{
+                    }
-                            display: 'flex',
+                    extra={
-                            alignItems: 'center',
+                      instanceData.state === InstanceStatusMap.Error &&
-                            maxWidth: '100%',
+                      instanceData.worker_id ? (
-                            minWidth: 50,
+                        <Button
-                            textOverflow: 'ellipsis',
+                          type="link"
-                            whiteSpace: 'nowrap',
+                          size="small"
-                            overflow: 'hidden',
+                          style={{ paddingLeft: 0 }}
-                            opacity: 0.75,
+                          onClick={() =>
-                            borderRadius: 12
+                            handleChildSelect('viewlog', instanceData)
-                          }}
+                          }
                         >
-                          <InfoCircleOutlined className="m-r-5" />
                           {intl.formatMessage({
-                            id: 'models.table.cpuoffload'
+                            id: 'models.list.more.logs'
                           })}
-                        </Tag>
+                        </Button>
-                      </Tooltip>
+                      ) : null
-                    )}
+                    }
-                    {item?.distributed_servers?.rpc_servers?.length && (
+                    statusValue={{
-                      <Tooltip
+                      status:
-                        overlayInnerStyle={{
+                        instanceData.state === InstanceStatusMap.Downloading &&
-                          width: '400px'
+                        instanceData.download_progress === 100
-                        }}
+                          ? status[InstanceStatusMap.Running]
-                        title={renderDistributionInfo(item)}
+                          : (status[instanceData.state] as any),
-                      >
+                      text: InstanceStatusMapValue[instanceData.state],
-                        <Tag
+                      message:
-                          color="processing"
+                        instanceData.state === InstanceStatusMap.Downloading &&
-                          style={{
+                        instanceData.download_progress === 100
-                            display: 'flex',
+                          ? ''
-                            alignItems: 'center',
+                          : instanceData.state_message
-                            maxWidth: '100%',
+                    }}
-                            minWidth: 50,
+                  ></StatusTag>
-                            textOverflow: 'ellipsis',
+                )}
-                            whiteSpace: 'nowrap',
+              </span>
-                            overflow: 'hidden',
+            </Col>
-                            opacity: 0.75,
+            <Col span={5}>
-                            borderRadius: 12
+              <span style={{ paddingLeft: 45 }} className="flex">
-                          }}
+                {dayjs(instanceData.created_at).format('YYYY-MM-DD HH:mm:ss')}
-                        >
+              </span>
-                          <InfoCircleOutlined className="m-r-5" />
+            </Col>
-                          {intl.formatMessage({
+            <Col span={4}>
-                            id: 'models.table.acrossworker'
+              <div style={{ paddingLeft: 39 }}>
-                          })}
+                <DropdownButtons
-                        </Tag>
+                  items={actionItems}
-                      </Tooltip>
+                  onSelect={handleOnSelect}
-                    )}
+                ></DropdownButtons>
-                  </span>
+              </div>
-                </Col>
+            </Col>
-                <Col span={4}>
+          </Row>
-                  <span
+        </RowChildren>
-                    style={{ paddingLeft: '62px' }}
+      </div>
-                    className="flex justify-center"
+    </>
-                  >
-                    {item.state && (
-                      <StatusTag
-                        download={
-                          item.state === InstanceStatusMap.Downloading
-                            ? { percent: item.download_progress }
-                            : undefined
-                        }
-                        extra={
-                          item.state === InstanceStatusMap.Error &&
-                          item.worker_id ? (
-                            <Button
-                              type="link"
-                              size="small"
-                              style={{ paddingLeft: 0 }}
-                              onClick={() =>
-                                handleChildSelect('viewlog', item, list)
-                              }
-                            >
-                              {intl.formatMessage({
-                                id: 'models.list.more.logs'
-                              })}
-                            </Button>
-                          ) : null
-                        }
-                        statusValue={{
-                          status:
-                            item.state === InstanceStatusMap.Downloading &&
-                            item.download_progress === 100
-                              ? status[InstanceStatusMap.Running]
-                              : (status[item.state] as any),
-                          text: InstanceStatusMapValue[item.state],
-                          message:
-                            item.state === InstanceStatusMap.Downloading &&
-                            item.download_progress === 100
-                              ? ''
-                              : item.state_message
-                        }}
-                      ></StatusTag>
-                    )}
-                  </span>
-                </Col>
-                <Col span={5}>
-                  <span style={{ paddingLeft: 45 }} className="flex">
-                    {dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
-                  </span>
-                </Col>
-                <Col span={4}>
-                  <div style={{ paddingLeft: 39 }}>
-                    <DropdownButtons
-                      items={setChildActionList(item)}
-                      onSelect={(val: string) =>
-                        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() {