From 5c2503b2a8b832dd991cc8a54a666f9a88b88d67 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Sun, 29 Sep 2024 11:52:05 +0800
Subject: [PATCH] chore: add no available models notes

---
 src/components/auto-tooltip/index.tsx         |  7 +++-
 src/locales/en-US/models.ts                   |  4 +-
 src/locales/en-US/playground.ts               |  5 ++-
 src/locales/zh-CN/models.ts                   |  4 +-
 src/locales/zh-CN/playground.ts               |  5 ++-
 .../llmodels/components/instance-item.tsx     | 10 ++---
 src/pages/llmodels/components/model-card.tsx  | 14 +++++--
 .../llmodels/components/search-model.tsx      | 21 ++++++++--
 .../playground/components/empty-models.tsx    | 42 +++++++++++++++++++
 .../components/multiple-chat/model-item.tsx   | 14 +++++++
 src/pages/playground/index.tsx                | 36 ++++++++++------
 11 files changed, 131 insertions(+), 31 deletions(-)
 create mode 100644 src/pages/playground/components/empty-models.tsx

diff --git a/src/components/auto-tooltip/index.tsx b/src/components/auto-tooltip/index.tsx
index b801ecea..41c03228 100644
--- a/src/components/auto-tooltip/index.tsx
+++ b/src/components/auto-tooltip/index.tsx
@@ -18,6 +18,7 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   ghost?: boolean;
   title?: React.ReactNode;
   showTitle?: boolean;
+  tooltipProps?: React.ComponentProps<typeof Tooltip>;
 }
 
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
@@ -26,6 +27,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   ghost = false,
   title,
   showTitle = false,
+  tooltipProps,
   ...tagProps
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
@@ -68,7 +70,10 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip title={isOverflowing || showTitle ? title || children : ''}>
+    <Tooltip
+      title={isOverflowing || showTitle ? title || children : ''}
+      {...tooltipProps}
+    >
       {ghost ? (
         <div ref={contentRef} style={tagStyle}>
           {children}
diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts
index a49f0f86..24aa405f 100644
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@@ -57,5 +57,7 @@ export default {
   'models.table.cpuoffload': 'CPU Offload',
   'models.table.layers': 'Layers',
   'models.form.backend': 'Backend',
-  'models.form.backend_parameters': 'Backend Parameters'
+  'models.form.backend_parameters': 'Backend Parameters',
+  'models.search.gguf.tips': '1. GGUF model backend is llama-box(llama.cpp).',
+  'models.search.vllm.tips': '2. Non-GGUF model backend is vLLM.'
 };
diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index b8fc4ce7..5ae260a9 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -43,5 +43,8 @@ export default {
   'playground.toolbar.compare6Model': '6-Model Compare',
   'playground.input.holder': 'Type <kbd>/</kbd> to input message',
   'playground.compare.apply': 'Apply',
-  'playground.compare.applytoall': 'Apply to all models'
+  'playground.compare.applytoall': 'Apply to all models',
+  'playground.model.noavailable': 'No available models.',
+  'playground.model.noavailable.tips':
+    'Please deploy a model first, and it is not an Embedding Only model.'
 };
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 0b403d29..da8f92bb 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -56,5 +56,7 @@ export default {
   'models.table.cpuoffload': 'CPU 卸载',
   'models.table.layers': '层',
   'models.form.backend': '后端',
-  'models.form.backend_parameters': '后端参数'
+  'models.form.backend_parameters': '后端参数',
+  'models.search.gguf.tips': '1. GGUF 模型后端为 llama-box(llama.cpp)',
+  'models.search.vllm.tips': '2. 非 GGUF 模型后端为 vLLM'
 };
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index 9fb5c6d2..7ca8269f 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -43,5 +43,8 @@ export default {
   'playground.toolbar.compare6Model': '6 模型对比',
   'playground.input.holder': '按 <kbd>/</kbd> 开始输入',
   'playground.compare.apply': '应用',
-  'playground.compare.applytoall': '应用到所有模型'
+  'playground.compare.applytoall': '应用到所有模型',
+  'playground.model.noavailable': '无可用模型',
+  'playground.model.noavailable.tips':
+    '请先部署模型，且不是 Embedding Only 模型'
 };
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index 15fc1e08..bdc14a4b 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -161,14 +161,12 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                   }}
                 >
                   <span className="flex-center">
-                    <AutoTooltip
-                      title={renderWorkerInfo(item)}
-                      ghost
-                      showTitle={true}
-                    >
+                    <AutoTooltip title={item.name} ghost>
                       <span className="m-r-5">{item.name}</span>
                     </AutoTooltip>
-                    <InfoCircleOutlined />
+                    <Tooltip title={renderWorkerInfo(item)}>
+                      <InfoCircleOutlined />
+                    </Tooltip>
                   </span>
                 </Col>
                 <Col span={6}>
diff --git a/src/pages/llmodels/components/model-card.tsx b/src/pages/llmodels/components/model-card.tsx
index 9aad4c5c..811625c3 100644
--- a/src/pages/llmodels/components/model-card.tsx
+++ b/src/pages/llmodels/components/model-card.tsx
@@ -8,6 +8,7 @@ import {
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Empty, Spin, Tag, Tooltip } from 'antd';
+import { some } from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import SimpleBar from 'simplebar-react';
@@ -74,8 +75,9 @@ const ModelCard: React.FC<{
 
       setModelData(modelcard);
       setReadmeText(readme);
-      setIsGGUF(modelcard.tags?.includes('gguf'));
-      setIsGGUFModel(modelcard.tags?.includes('gguf'));
+      const isGGUF = modelcard.tags?.includes('gguf');
+      setIsGGUF(isGGUF);
+      setIsGGUFModel(isGGUF);
     } catch (error) {
       setModelData(null);
       setReadmeText(null);
@@ -99,8 +101,12 @@ const ModelCard: React.FC<{
         name: `${data.Data?.Path}/${data.Data?.Name}`
       });
       setReadmeText(data?.Data?.ReadMeContent);
-      setIsGGUF(data.Data?.Tags?.includes('gguf'));
-      setIsGGUFModel(data.Data?.Tags?.includes('gguf'));
+      const isGGUF = some(
+        data?.Data?.Tags,
+        (tag: string) => tag?.indexOf('gguf') > -1
+      );
+      setIsGGUF(isGGUF);
+      setIsGGUFModel(isGGUF);
     } catch (error) {
       setModelData(null);
       setReadmeText(null);
diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx
index 8d49eef0..a2823434 100644
--- a/src/pages/llmodels/components/search-model.tsx
+++ b/src/pages/llmodels/components/search-model.tsx
@@ -1,6 +1,6 @@
-import { BulbOutlined } from '@ant-design/icons';
+import { BulbOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Select } from 'antd';
+import { Checkbox, Select, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { queryHuggingfaceModels, queryModelScopeModels } from '../apis';
@@ -234,7 +234,22 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
               className="m-r-5"
               checked={filterGGUFRef.current}
             >
-              GGUF
+              <Tooltip
+                overlayInnerStyle={{ width: 'max-content' }}
+                title={
+                  <div>
+                    <div>
+                      {intl.formatMessage({ id: 'models.search.gguf.tips' })}
+                    </div>
+                    <div>
+                      {intl.formatMessage({ id: 'models.search.vllm.tips' })}
+                    </div>
+                  </div>
+                }
+              >
+                GGUF
+                <InfoCircleOutlined className="m-l-4" />
+              </Tooltip>
             </Checkbox>
             <Select
               allowClear
diff --git a/src/pages/playground/components/empty-models.tsx b/src/pages/playground/components/empty-models.tsx
new file mode 100644
index 00000000..06bc33ee
--- /dev/null
+++ b/src/pages/playground/components/empty-models.tsx
@@ -0,0 +1,42 @@
+import { useIntl, useNavigate } from '@umijs/max';
+import { Button, Empty, Typography } from 'antd';
+import React from 'react';
+
+const EmptyModels: React.FC<{
+  style?: React.CSSProperties;
+}> = ({ style }) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const handleDeployModel = () => {
+    navigate('/models');
+  };
+  return (
+    <div
+      className="flex-center justify-center"
+      style={{
+        ...style
+      }}
+    >
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={
+          <div className="flex-column">
+            <Typography.Text type="secondary">
+              {intl.formatMessage({ id: 'playground.model.noavailable' })}
+            </Typography.Text>
+            <Typography.Text type="secondary">
+              {intl.formatMessage({ id: 'playground.model.noavailable.tips' })}
+            </Typography.Text>
+          </div>
+        }
+      >
+        <Button type="primary" onClick={handleDeployModel}>
+          {intl.formatMessage({ id: 'models.button.deploy' })}
+        </Button>
+      </Empty>
+    </div>
+  );
+};
+
+export default EmptyModels;
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index 41c3b8b1..a1aa9d32 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
@@ -369,6 +370,19 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               options={modelFullList}
               onChange={handleModelChange}
               value={params.model}
+              optionRender={(data) => {
+                return (
+                  <AutoTooltip
+                    title={data.label}
+                    ghost
+                    tooltipProps={{
+                      placement: 'right'
+                    }}
+                  >
+                    {data.label}
+                  </AutoTooltip>
+                );
+              }}
             ></Select>
           </span>
           <ReferenceParams usage={tokenResult}></ReferenceParams>
diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx
index 0eaf706d..648e49ed 100644
--- a/src/pages/playground/index.tsx
+++ b/src/pages/playground/index.tsx
@@ -2,26 +2,24 @@ import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl, useSearchParams } from '@umijs/max';
+import { useIntl } from '@umijs/max';
 import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { queryModelsList } from './apis';
+import EmptyModels from './components/empty-models';
 import GroundLeft from './components/ground-left';
 import MultipleChat from './components/multiple-chat';
 import './style/play-ground.less';
 
 const Playground: React.FC = () => {
   const intl = useIntl();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [params, setParams] = useState({});
-  const [collapse, setCollapse] = useState(false);
   const [activeKey, setActiveKey] = useState('chat');
   const groundLeftRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
+  const [loaded, setLoaded] = useState(false);
   const optionsList = [
     {
       label: intl.formatMessage({ id: 'menu.chat' }),
@@ -74,13 +72,15 @@ const Playground: React.FC = () => {
         setModelList(list);
       } catch (error) {
         console.error(error);
+      } finally {
+        setLoaded(true);
       }
     };
     getModelList();
   }, []);
 
   const renderExtra = () => {
-    if (activeKey === 'compare') {
+    if (activeKey === 'compare' || modelList.length === 0) {
       return false;
     }
     return (
@@ -123,12 +123,14 @@ const Playground: React.FC = () => {
         title: (
           <div className="flex items-center">
             {intl.formatMessage({ id: 'menu.playground' })}
-            <Segmented
-              options={optionsList}
-              size="middle"
-              className="m-l-40"
-              onChange={(key) => setActiveKey(key)}
-            ></Segmented>
+            {modelList.length > 0 && (
+              <Segmented
+                options={optionsList}
+                size="middle"
+                className="m-l-40"
+                onChange={(key) => setActiveKey(key)}
+              ></Segmented>
+            )}
           </div>
         )
       }}
@@ -140,7 +142,15 @@ const Playground: React.FC = () => {
     >
       <div className="play-ground">
         <div className="chat">
-          <Tabs items={items} activeKey={activeKey}></Tabs>
+          {modelList.length > 0 ? (
+            <Tabs items={items} activeKey={activeKey}></Tabs>
+          ) : (
+            loaded && (
+              <EmptyModels
+                style={{ height: 'calc(100vh - 72px)', paddingBottom: 100 }}
+              ></EmptyModels>
+            )
+          )}
         </div>
       </div>
     </PageContainer>