DB-GPT/web/pages/construct/models/index.tsx

import { apiInterceptors, getModelList } from '@/client/api';
import ModelForm from '@/components/model/model-form';
import BlurredCard from '@/new-components/common/blurredCard';
import ConstructLayout from '@/new-components/layout/Construct';
import { IModelData } from '@/types/model';
import { MODEL_ICON_DICT } from '@/utils/constants';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Modal, Tag } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

function Models() {
  const { t } = useTranslation();
  const [models, setModels] = useState<Array<IModelData>>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  // const [loading, setLoading] = useState<boolean>(false);

  async function getModels() {
    const [, res] = await apiInterceptors(getModelList());
    setModels(res ?? []);
  }

  // TODO: delete unuesed function
  // async function stopTheModel(info: IModelData) {
  //   if (loading) {
  //     return;
  //   }
  //   setLoading(true);
  //   const [, res] = await apiInterceptors(
  //     stopModel({
  //       host: info.host,
  //       port: info.port,
  //       model: info.model_name,
  //       worker_type: info.model_type,
  //       params: {},
  //     }),
  //   );
  //   setLoading(false);
  //   if (res === true) {
  //     message.success(t('stop_model_success'));
  //   }
  // }

  useEffect(() => {
    getModels();
  }, []);

  // TODO: unuesed function
  // const onSearch = useDebounceFn(
  //   async (e: any) => {
  //     const v = e.target.value;
  //     await modelSearch({ model_name: v });
  //   },
  //   { wait: 500 },
  // ).run;

  const returnLogo = (name: string) => {
    const formatterModal = name?.replaceAll('-', '_').split('_')[0];
    const dict = Object.keys(MODEL_ICON_DICT);
    for (let i = 0; i < dict.length; i++) {
      const element = dict[i];
      if (formatterModal?.includes(element)) {
        return MODEL_ICON_DICT[element];
      }
    }
    return '/pictures/model.png';
  };

  return (
    <ConstructLayout>
      <div className='px-6 overflow-y-auto'>
        <div className='flex justify-between items-center mb-6'>
          <div className='flex items-center gap-4'>
            {/* <Input
              variant="filled"
              prefix={<SearchOutlined />}
              placeholder={t('please_enter_the_keywords')}
              onChange={onSearch}
              onPressEnter={onSearch}
              allowClear
              className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
            /> */}
          </div>

          <div className='flex items-center gap-4'>
            <Button
              className='border-none text-white bg-button-gradient'
              icon={<PlusOutlined />}
              onClick={() => {
                setIsModalOpen(true);
              }}
            >
              {t('create_model')}
            </Button>
          </div>
        </div>

        <div className='flex flex-wrap mx-[-8px] '>
          {models.map(item => (
            <BlurredCard
              logo={returnLogo(item.model_name)}
              description={
                <div className='flex flex-col gap-1 relative text-xs bottom-4'>
                  <div className='flex overflow-hidden'>
                    <p className='w-28 text-gray-500 mr-2'>Host:</p>
                    <p className='flex-1 text-ellipsis'>{item.host}</p>
                  </div>
                  <div className='flex overflow-hidden'>
                    <p className='w-28 text-gray-500 mr-2'>Manage Host:</p>
                    <p className='flex-1 text-ellipsis'>
                      {item.manager_host}:{item.manager_port}
                    </p>
                  </div>
                  <div className='flex overflow-hidden'>
                    <p className='w-28 text-gray-500 mr-2'>Last Heart Beat:</p>
                    <p className='flex-1 text-ellipsis'>{moment(item.last_heartbeat).format('YYYY-MM-DD')}</p>
                  </div>
                </div>
              }
              name={item.model_name}
              key={item.model_name}
              rightTopHover={false}
              Tags={
                <div>
                  <Tag color={item.healthy ? 'green' : 'red'}>{item.healthy ? 'Healthy' : 'Unhealthy'}</Tag>
                  <Tag>{item.model_type}</Tag>
                </div>
              }
            />
          ))}
        </div>
        <Modal
          width={800}
          open={isModalOpen}
          title={t('create_model')}
          onCancel={() => {
            setIsModalOpen(false);
          }}
          footer={null}
        >
          <ModelForm
            onCancel={() => {
              setIsModalOpen(false);
            }}
            onSuccess={() => {
              setIsModalOpen(false);
              getModels();
            }}
          />
        </Modal>
      </div>
    </ConstructLayout>
  );
}

export default Models;