chore: model list ux

2024-06-13 19:39:39 +08:00
parent c9ea96e078
commit 73c68dee1b
26 changed files with 589 additions and 204 deletions
@@ -1,5 +1,10 @@
 import { request } from '@umijs/max';
-import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
+import {
+  FormData,
+  ListItem,
+  ModelInstanceFormData,
+  ModelInstanceListItem
+} from '../config/types';

 export const MODELS_API = '/models';

@@ -55,7 +60,9 @@ export async function queryModelInstancesList(
  );
 }

-export async function createModelInstance(params: { data: FormData }) {
+export async function createModelInstance(params: {
+  data: ModelInstanceFormData;
+}) {
  return request(`${MODEL_INSTANCE_API}`, {
    method: 'POST',
    data: params.data
@@ -91,3 +98,17 @@ export async function queryModelInstanceLogs(id: number) {
 }

 // ===================== Model Instances end =====================
+
+// ===================== call huggingface quicksearch api =====================
+
+export async function callHuggingfaceQuickSearch(params: any) {
+  return request<{
+    models: Array<{
+      id: string;
+      _id: string;
+    }>;
+  }>(`https://huggingface.co/api/quicksearch`, {
+    method: 'GET',
+    params
+  });
+}
@@ -1,10 +1,13 @@
 import ModalFooter from '@/components/modal-footer';
+import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { Form, Modal } from 'antd';
-import { useEffect } from 'react';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { callHuggingfaceQuickSearch } from '../apis';
 import { FormData } from '../config/types';

 type AddModalProps = {
@@ -17,16 +20,20 @@ type AddModalProps = {

 const sourceOptions = [
  { label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
+  { label: 'Ollama', value: 'ollama_library', key: 'ollama_library' },
  { label: 'S3', value: 's3', key: 's3' }
 ];

 const AddModal: React.FC<AddModalProps> = (props) => {
  const { title, action, open, onOk, onCancel } = props || {};
-  if (!open) {
-    return null;
-  }
  const [form] = Form.useForm();
  const modelSource = Form.useWatch('source', form);
+  const [repoOptions, setRepoOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  const [fileOptions, setFileOptions] = useState<
+    { label: string; value: string }[]
+  >([]);

  const initFormValue = () => {
    if (action === PageAction.CREATE && open) {
@@ -40,6 +47,33 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    initFormValue();
  }, [open]);

+  const handleInputRepoChange = (value: string) => {
+    console.log('repo change', value);
+  };
+
+  const debounceSearch = _.debounce((text: string) => {
+    handleOnSearchRepo(text);
+  }, 300);
+
+  const handleOnSearchRepo = async (text: string) => {
+    try {
+      const params = {
+        q: text,
+        type: 'model'
+      };
+      const res = await callHuggingfaceQuickSearch(params);
+      const list = _.map(res.models || [], (item: any) => {
+        return {
+          value: item.id,
+          label: item.id
+        };
+      });
+      setRepoOptions(list);
+    } catch (error) {
+      setRepoOptions([]);
+    }
+  };
+
  const renderHuggingfaceFields = () => {
    return (
      <>
@@ -47,11 +81,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
          name="huggingface_repo_id"
          rules={[{ required: true }]}
        >
-          <SealInput.Input label="Repo ID" required></SealInput.Input>
+          <SealAutoComplete
+            label="Repo ID"
+            required
+            showSearch
+            onChange={handleInputRepoChange}
+            onSearch={debounceSearch}
+            options={repoOptions}
+          ></SealAutoComplete>
        </Form.Item>
        <Form.Item<FormData>
          name="huggingface_filename"
-          rules={[{ required: false }]}
+          rules={[{ required: true }]}
        >
          <SealInput.Input label="File Name" required></SealInput.Input>
        </Form.Item>
@@ -69,6 +110,32 @@ const AddModal: React.FC<AddModalProps> = (props) => {
    );
  };

+  const renderOllamaModelFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="ollama_library_model_name"
+          rules={[{ required: true }]}
+        >
+          <SealInput.Input label="Model Name" required></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderFieldsBySource = () => {
+    switch (modelSource) {
+      case 'huggingface':
+        return renderHuggingfaceFields();
+      case 'ollama_library':
+        return renderOllamaModelFields();
+      case 's3':
+        return renderS3Fields();
+      default:
+        return null;
+    }
+  };
+
  const handleSourceChange = (value: string) => {
    console.log('source change', value);
  };
@@ -111,7 +178,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
            onChange={handleSourceChange}
          ></SealSelect>
        </Form.Item>
-        {modelSource === 's3' ? renderS3Fields() : renderHuggingfaceFields()}
+        {renderFieldsBySource()}
+        <Form.Item<FormData> name="replicas" rules={[{ required: true }]}>
+          <SealInput.Number
+            style={{ width: '100%' }}
+            label="Replicas"
+            required
+            min={1}
+          ></SealInput.Number>
+        </Form.Item>
        <Form.Item<FormData> name="description">
          <SealInput.TextArea label="Description"></SealInput.TextArea>
        </Form.Item>
@@ -0,0 +1,35 @@
+import { Modal } from 'antd';
+import React from 'react';
+
+type ViewModalProps = {
+  content?: string;
+  title: string;
+  open: boolean;
+  onCancel: () => void;
+};
+
+const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
+  const { title, open, onCancel, content } = props || {};
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      style={{ top: '80px' }}
+      footer={null}
+    >
+      <div>{content}</div>
+    </Modal>
+  );
+};
+
+export default ViewCodeModal;
@@ -15,7 +15,9 @@ export interface FormData {
  huggingface_repo_id: string;
  huggingface_filename: string;
  s3_address: string;
+  ollama_library_model_name: 'string';
  name: string;
+  replicas: number;
  description: string;
 }

@@ -36,3 +38,11 @@ export interface ModelInstanceListItem {
  created_at: string;
  updated_at: string;
 }
+
+export interface ModelInstanceFormData {
+  model_id: number;
+  model_name: string;
+  source: string;
+  huggingface_repo_id: 'string';
+  huggingface_filename: 'string';
+}
@@ -1,4 +1,5 @@
 import PageTools from '@/components/page-tools';
+import ProgressBar from '@/components/progress-bar';
 import SealTable from '@/components/seal-table';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SealColumn from '@/components/seal-table/components/seal-column';
@@ -33,12 +34,15 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import {
  createModel,
+  createModelInstance,
  deleteModel,
  deleteModelInstance,
+  queryModelInstanceLogs,
  queryModelInstancesList,
  queryModelsList
 } from './apis';
 import AddModal from './components/add-modal';
+import ViewLogsModal from './components/view-logs-modal';
 import { status } from './config';
 import { FormData, ListItem, ModelInstanceListItem } from './config/types';

@@ -51,6 +55,9 @@ const Models: React.FC = () => {
  const { sortOrder, setSortOrder } = useTableSort({
    defaultSortOrder: 'descend'
  });
+  const [logContent, setLogContent] = useState('');
+  const [openLogModal, setOpenLogModal] = useState(false);
+  const [hoverChildIndex, setHoverChildIndex] = useState(-1);
  const [total, setTotal] = useState(100);
  const [openAddModal, setOpenAddModal] = useState(false);
  const [loading, setLoading] = useState(false);
@@ -132,6 +139,10 @@ const Models: React.FC = () => {
    console.log('handleModalCancel');
    setOpenAddModal(false);
  };
+
+  const handleLogModalCancel = () => {
+    setOpenLogModal(false);
+  };
  const handleDelete = async (row: any) => {
    Modal.confirm({
      title: '',
@@ -165,8 +176,26 @@ const Models: React.FC = () => {
    navigate(`/playground?model=${row.name}`);
  };

-  const handleViewLogs = (row: any) => {
-    console.log('handleViewLogs', row);
+  const handleDeployInstance = async (row: any) => {
+    try {
+      const data = {
+        model_id: row.id,
+        model_name: row.name,
+        huggingface_repo_id: row.huggingface_repo_id,
+        huggingface_filename: row.huggingface_filename,
+        source: row.source
+      };
+      await createModelInstance({ data });
+      message.success('successfully!');
+    } catch (error) {}
+  };
+
+  const handleViewLogs = async (row: any) => {
+    try {
+      const data = await queryModelInstanceLogs(row.id);
+      setLogContent(data);
+      setOpenLogModal(true);
+    } catch (error) {}
  };
  const handleDeleteInstace = (row: any) => {
    Modal.confirm({
@@ -184,6 +213,14 @@ const Models: React.FC = () => {
    });
  };

+  const handleOnMouseEnter = (index: number) => {
+    setHoverChildIndex(index);
+  };
+
+  const handleOnMouseLeave = () => {
+    setHoverChildIndex(-1);
+  };
+
  const getModelInstances = async (row: any) => {
    const params = {
      id: row.id,
@@ -196,50 +233,69 @@ const Models: React.FC = () => {

  const renderChildren = (list: any) => {
    return (
-      <>
-        {_.map(list, (item: ModelInstanceListItem) => {
+      <Space size={16} direction="vertical" style={{ width: '100%' }}>
+        {_.map(list, (item: ModelInstanceListItem, index: number) => {
          return (
-            <RowChildren key={item.id}>
-              <Row style={{ width: '100%' }} align="middle">
-                <Col span={4}>
-                  {item.node_ip}:{item.port}
-                </Col>
-                <Col span={5}>{item.huggingface_repo_id}</Col>
-                <Col span={4}>
-                  {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
-                </Col>
-                <Col span={4}>
-                  <StatusTag
-                    statusValue={{
-                      status: status[item.state] as any,
-                      text: item.state
-                    }}
-                  ></StatusTag>
-                </Col>
-                <Col span={7}>
-                  <Space>
-                    <Tooltip title="Delete">
-                      <Button
-                        size="small"
-                        danger
-                        onClick={() => handleDeleteInstace(item)}
-                        icon={<DeleteOutlined></DeleteOutlined>}
-                      ></Button>
-                    </Tooltip>
-                    <Tooltip title="View Logs">
-                      <Button
-                        size="small"
-                        onClick={() => handleViewLogs(item)}
-                        icon={<FieldTimeOutlined />}
-                      ></Button>
-                    </Tooltip>
-                  </Space>
-                </Col>
-              </Row>
-            </RowChildren>
+            <div
+              key={`${item.id}`}
+              onMouseEnter={() => handleOnMouseEnter(index)}
+              onMouseLeave={handleOnMouseLeave}
+            >
+              <RowChildren>
+                <Row style={{ width: '100%' }} align="middle">
+                  <Col span={4}>
+                    {item.node_ip}:{item.port}
+                  </Col>
+                  <Col span={5}>
+                    <span>{item.huggingface_repo_id}</span>
+                    <div style={{ marginTop: '4px' }}>
+                      <ProgressBar
+                        download
+                        percent={item.download_progress || 0}
+                      ></ProgressBar>
+                    </div>
+                  </Col>
+                  <Col span={4}>
+                    {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
+                  </Col>
+                  <Col span={4}>
+                    {item.state && (
+                      <StatusTag
+                        download={{ percent: 10 }}
+                        statusValue={{
+                          status: status[item.state] as any,
+                          text: item.state
+                        }}
+                      ></StatusTag>
+                    )}
+                  </Col>
+                  <Col span={7}>
+                    {hoverChildIndex === index && (
+                      <Space size={20}>
+                        <Tooltip title="Delete">
+                          <Button
+                            size="small"
+                            danger
+                            onClick={() => handleDeleteInstace(item)}
+                            icon={<DeleteOutlined></DeleteOutlined>}
+                          ></Button>
+                        </Tooltip>
+                        <Tooltip title="View Logs">
+                          <Button
+                            size="small"
+                            onClick={() => handleViewLogs(item)}
+                            icon={<FieldTimeOutlined />}
+                          ></Button>
+                        </Tooltip>
+                      </Space>
+                    )}
+                  </Col>
+                </Row>
+              </RowChildren>
+            </div>
          );
        })}
-      </>
+      </Space>
    );
  };

@@ -356,7 +412,7 @@ const Models: React.FC = () => {
            key="operation"
            render={(text, record) => {
              return !record.transition ? (
-                <Space>
+                <Space size={20}>
                  <Tooltip title="Open in PlayGround">
                    <Button
                      size="small"
@@ -387,6 +443,11 @@ const Models: React.FC = () => {
        onCancel={handleModalCancel}
        onOk={handleModalOk}
      ></AddModal>
+      <ViewLogsModal
+        title="View Logs"
+        open={openLogModal}
+        onCancel={handleLogModalCancel}
+      ></ViewLogsModal>
    </>
  );
 };