feat: 模型部署添加使用指南

react-ui/src/pages/ModelDeployment/Info/index.less

@@ -1,6 +1,16 @@
 .model-deployment-info {
   height: 100%;
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 60px);
+    margin-top: 10px;
+    padding: 30px 30px 0;
+    background-color: white;
+    border-radius: 10px;
+  }
+
   &__basic {
     &__item {
       display: flex;
@@ -23,34 +33,13 @@
     }
   }
 
-  &__content {
-    height: calc(100% - 60px);
+  &__guide {
+    flex: 1;
     margin-top: 10px;
-    padding: 30px 30px 0;
-    background-color: white;
-    border-radius: 10px;
-
-    &__title {
-      display: flex;
-      align-items: center;
-    }
-
-    &__table {
-      :global {
-        .ant-table-wrapper {
-          height: 100%;
-          .ant-spin-nested-loading {
-            height: 100%;
-          }
-          .ant-spin-container {
-            height: 100%;
-          }
-          .ant-table {
-            height: calc(100% - 74px);
-            overflow: auto;
-          }
-        }
-      }
-    }
+    padding: 10px;
+    overflow-y: auto;
+    color: white;
+    white-space: pre-wrap;
+    background-color: rgba(0, 0, 0, 0.85);
   }
 }

react-ui/src/pages/ModelDeployment/Info/index.tsx

@@ -8,48 +8,70 @@ import PageTitle from '@/components/PageTitle';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { useComputingResource } from '@/hooks/resource';
 import { useSessionStorage } from '@/hooks/sessionStorage';
+import { getModelDeploymentDocsReq } from '@/services/modelDeployment';
 import { formatDate } from '@/utils/date';
+import { to } from '@/utils/promise';
 import { modelDeploymentInfoKey } from '@/utils/sessionStorage';
 import { Col, Row, Tabs, type TabsProps } from 'antd';
+import { pick } from 'lodash';
 import { useEffect, useState } from 'react';
 import ModelDeploymentStatusCell from '../components/ModelDeployStatusCell';
 import { ModelDeploymentData } from '../types';
 import styles from './index.less';
 
+export enum ModelDeploymentTabKey {
+  Predict = 'Predict',
+  Guide = 'Guide',
+  Log = 'Log',
+}
+
 const tabItems = [
   {
-    key: '1',
+    key: ModelDeploymentTabKey.Predict,
     label: '预测',
     icon: <KFIcon type="icon-yuce" />,
   },
   {
-    key: '2',
+    key: ModelDeploymentTabKey.Guide,
     label: '调用指南',
     icon: <KFIcon type="icon-tiaoyongzhinan" />,
   },
   {
-    key: '3',
+    key: ModelDeploymentTabKey.Log,
     label: '服务日志',
     icon: <KFIcon type="icon-fuwurizhi" />,
   },
 ];
 
 function ModelDeploymentInfo() {
-  const [activeTab, setActiveTab] = useState<string>('1');
+  const [activeTab, setActiveTab] = useState<string>(ModelDeploymentTabKey.Predict);
   const [modelDeployementInfo] = useSessionStorage<ModelDeploymentData | undefined>(
     modelDeploymentInfoKey,
     true,
     undefined,
   );
   const getResourceDescription = useComputingResource()[2];
+  const [docs, setDocs] = useState('');
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    getModelDeploymentDocs();
+  }, [modelDeployementInfo]);
+
+  // 获取模型部署文档
+  const getModelDeploymentDocs = async () => {
+    const params = pick(modelDeployementInfo, ['service_id', 'service_ins_id']);
+    const [res] = await to(getModelDeploymentDocsReq(params));
+    if (res && res.data && res.data.docs) {
+      setDocs(JSON.stringify(res.data.docs, null, 2));
+    }
+  };
 
   // 切换 Tab，重置数据
   const hanleTabChange: TabsProps['onChange'] = (value) => {
     setActiveTab(value);
   };
 
+  // 格式化环境变量
   const formatEnvText = () => {
     if (!modelDeployementInfo?.env) {
       return '--';
@@ -64,128 +86,130 @@ function ModelDeploymentInfo() {
     <div className={styles['model-deployment-info']}>
       <PageTitle title="服务详情"></PageTitle>
       <div className={styles['model-deployment-info__content']}>
-        <div>
-          <SubAreaTitle
-            title="基本信息"
-            image={require('@/assets/img/mirror-basic.png')}
-            style={{ marginBottom: '26px' }}
-          ></SubAreaTitle>
-          <div className={styles['model-deployment-info__basic']}>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>服务名称：</div>
-                  <div className={styles['value']}>
-                    {modelDeployementInfo?.service_name ?? '--'}
-                  </div>
-                </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>镜　　像：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.image ?? '--'}</div>
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>状　　态：</div>
-                  <div className={styles['value']}>
-                    {ModelDeploymentStatusCell(modelDeployementInfo?.status)}
-                  </div>
-                </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>模　　型：</div>
-                  <div className={styles['value']}>
-                    {modelDeployementInfo?.model?.show_value ?? '--'}
-                  </div>
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>创建人：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.created_by ?? '--'}</div>
-                </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>挂载路径：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.model_path ?? '--'}</div>
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>API URL：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.url ?? '--'}</div>
-                </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>副本数量：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.replicas ?? '--'}</div>
-                </div>
-              </Col>
-            </Row>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>创建时间：</div>
-                  <div className={styles['value']}>
-                    {modelDeployementInfo?.create_time
-                      ? formatDate(modelDeployementInfo.create_time)
-                      : '--'}
-                  </div>
+        <SubAreaTitle
+          title="基本信息"
+          image={require('@/assets/img/mirror-basic.png')}
+          style={{ marginBottom: '26px' }}
+        ></SubAreaTitle>
+        <div className={styles['model-deployment-info__basic']}>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>服务名称：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.service_name ?? '--'}</div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>镜　　像：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.image ?? '--'}</div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>状　　态：</div>
+                <div className={styles['value']}>
+                  {ModelDeploymentStatusCell(modelDeployementInfo?.status)}
                 </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>更新时间：</div>
-                  <div className={styles['value']}>
-                    {modelDeployementInfo?.update_time
-                      ? formatDate(modelDeployementInfo.update_time)
-                      : '--'}
-                  </div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>模　　型：</div>
+                <div className={styles['value']}>
+                  {modelDeployementInfo?.model?.show_value ?? '--'}
                 </div>
-              </Col>
-            </Row>
-            <Row gutter={40} style={{ marginBottom: '20px' }}>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>环境变量：</div>
-                  <div className={styles['value']}>{formatEnvText()}</div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>创建人：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.created_by ?? '--'}</div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>挂载路径：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.model_path ?? '--'}</div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>API URL：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.url ?? '--'}</div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>副本数量：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.replicas ?? '--'}</div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>创建时间：</div>
+                <div className={styles['value']}>
+                  {modelDeployementInfo?.create_time
+                    ? formatDate(modelDeployementInfo.create_time)
+                    : '--'}
                 </div>
-              </Col>
-              <Col span={10}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>资源规格：</div>
-                  <div className={styles['value']}>
-                    {modelDeployementInfo?.resource
-                      ? getResourceDescription(modelDeployementInfo.resource)
-                      : '--'}
-                  </div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>更新时间：</div>
+                <div className={styles['value']}>
+                  {modelDeployementInfo?.update_time
+                    ? formatDate(modelDeployementInfo.update_time)
+                    : '--'}
                 </div>
-              </Col>
-            </Row>
-            <Row gutter={40}>
-              <Col span={18}>
-                <div className={styles['model-deployment-info__basic__item']}>
-                  <div className={styles['label']}>描　　述：</div>
-                  <div className={styles['value']}>{modelDeployementInfo?.description ?? '--'}</div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40} style={{ marginBottom: '20px' }}>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>环境变量：</div>
+                <div className={styles['value']}>{formatEnvText()}</div>
+              </div>
+            </Col>
+            <Col span={10}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>资源规格：</div>
+                <div className={styles['value']}>
+                  {modelDeployementInfo?.resource
+                    ? getResourceDescription(modelDeployementInfo.resource)
+                    : '--'}
                 </div>
-              </Col>
-            </Row>
-          </div>
-          <div style={{ marginTop: '20px' }}>
-            <Tabs activeKey={activeTab} items={tabItems} onChange={hanleTabChange} />
-          </div>
+              </div>
+            </Col>
+          </Row>
+          <Row gutter={40}>
+            <Col span={18}>
+              <div className={styles['model-deployment-info__basic__item']}>
+                <div className={styles['label']}>描　　述：</div>
+                <div className={styles['value']}>{modelDeployementInfo?.description ?? '--'}</div>
+              </div>
+            </Col>
+          </Row>
         </div>
+        <Tabs
+          activeKey={activeTab}
+          style={{ marginTop: '20px' }}
+          items={tabItems}
+          onChange={hanleTabChange}
+        />
+        {activeTab === ModelDeploymentTabKey.Guide && (
+          <div className={styles['model-deployment-info__guide']}>{docs}</div>
+        )}
       </div>
     </div>
   );

react-ui/src/services/modelDeployment/index.ts

@@ -59,3 +59,11 @@ export function updateModelDeploymentReq(data: any) {
     data,
   });
 }
+
+// 获取模型部署操作指南
+export function getModelDeploymentDocsReq(data: any) {
+  return request(`/api/v1/model/getDocs`, {
+    method: 'POST',
+    data,
+  });
+}