style: playround params collapse

src/pages/llmodels/components/instance-item.tsx

@@ -11,7 +11,7 @@ import { Col, Row, Space, Tooltip } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import React from 'react';
-import { InstanceStatusMap, status } from '../config';
+import { InstanceStatusMap, InstanceStatusMapValue, status } from '../config';
 import { ModelInstanceListItem } from '../config/types';
 
 interface InstanceItemProps {
@@ -23,11 +23,6 @@ interface InstanceItemProps {
   ) => void;
 }
 
-const testStatus = {
-  state: InstanceStatusMap.Downloading,
-  text: 'Downloading'
-};
-
 const InstanceItem: React.FC<InstanceItemProps> = ({
   list,
   handleChildSelect
@@ -112,7 +107,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         }
                         statusValue={{
                           status: status[item.state] as any,
-                          text: item.state,
+                          text: InstanceStatusMapValue[item.state],
                           message: item.state_message
                         }}
                       ></StatusTag>

src/pages/llmodels/config/index.ts

@@ -22,14 +22,25 @@ export const modelSourceMap: Record<string, string> = {
 };
 
 export const InstanceStatusMap = {
-  Initializing: 'Initializing',
+  Initializing: 'initializing',
-  Pending: 'Pending',
+  Pending: 'pending',
-  Running: 'Running',
+  Running: 'running',
-  Scheduled: 'Scheduled',
+  Scheduled: 'scheduled',
-  Error: 'Error',
+  Error: 'error',
-  Downloading: 'Downloading',
+  Downloading: 'downloading',
-  Unknown: 'Unknown',
+  Unknown: 'unknown',
-  Analyzing: 'Analyzing'
+  Analyzing: 'analyzing'
+};
+
+export const InstanceStatusMapValue = {
+  [InstanceStatusMap.Initializing]: 'Initializing',
+  [InstanceStatusMap.Pending]: 'Pending',
+  [InstanceStatusMap.Running]: 'Running',
+  [InstanceStatusMap.Scheduled]: 'Scheduled',
+  [InstanceStatusMap.Error]: 'Error',
+  [InstanceStatusMap.Downloading]: 'Downloading',
+  [InstanceStatusMap.Unknown]: 'Unknown',
+  [InstanceStatusMap.Analyzing]: 'Analyzing'
 };
 
 export const status: any = {

src/pages/playground/components/params-settings.tsx

@@ -150,7 +150,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="model"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealSelect
             options={ModelList}
@@ -162,7 +162,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="temperature"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -188,7 +188,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="max_tokens"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -214,7 +214,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="top_p"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <FieldWrapper
             label={renderLabel({
@@ -240,7 +240,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="seed"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealInput.Number
             label="Seed"
@@ -253,7 +253,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="stop"
-          rules={[{ required: true }]}
+          rules={[{ required: false }]}
         >
           <SealInput.Input
             label="Stop Sequence"

src/pages/playground/index.tsx

@@ -1,6 +1,8 @@
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
-import { Divider } from 'antd';
+import { Button, Divider } from 'antd';
+import classNames from 'classnames';
 import { useState } from 'react';
 import GroundLeft from './components/ground-left';
 import ParamsSettings from './components/params-settings';
@@ -10,24 +12,49 @@ const Playground: React.FC = () => {
   const [searchParams] = useSearchParams();
   const selectModel = searchParams.get('model') || '';
   const [params, setParams] = useState({});
+  const [collapse, setCollapse] = useState(false);
 
   return (
-    <>
+    <PageContainer ghost extra={[]} className="playground-container">
-      <PageContainer ghost extra={[]}>
+      <div className="play-ground">
-        <div className="play-ground">
+        <div className="chat">
-          <div className="chat">
+          <GroundLeft parameters={params}></GroundLeft>
-            <GroundLeft parameters={params}></GroundLeft>
+        </div>
-          </div>
+        <div
-          <div className="divider-line">
+          className={classNames('left', {
+            collapse: collapse
+          })}
+        >
+          <Button
+            onClick={() => setCollapse(!collapse)}
+            icon={collapse ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
+            style={{ color: 'var(--ant-color-text-tertiary)' }}
+            size="small"
+            type="text"
+            className="collapse-btn"
+          ></Button>
+          <div
+            className={classNames('divider-line', {
+              collapse: collapse
+            })}
+          >
             <Divider type="vertical" />
           </div>
-
+          <div className={classNames('params')}>
-          <div className="params">
+            <div
-            <ParamsSettings setParams={setParams} selectedModel={selectModel} />
+              className={classNames('params-box', {
+                collapse: collapse
+              })}
+            >
+              <ParamsSettings
+                setParams={setParams}
+                selectedModel={selectModel}
+              />
+            </div>
           </div>
         </div>
-      </PageContainer>
+      </div>
-    </>
+    </PageContainer>
   );
 };
 

src/pages/playground/style/play-ground.less

@@ -2,6 +2,28 @@
   display: flex;
   align-items: flex-start;
 
+  .left {
+    position: relative;
+    display: flex;
+    justify-content: flex-start;
+    width: 391px;
+
+    .collapse-btn {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    transition: width 0.3s ease;
+
+    &.collapse {
+      width: 0;
+      padding-left: 32px;
+      transition: width 0.3s ease;
+    }
+  }
+
   .chat {
     flex: 1;
     display: flex;
@@ -9,16 +31,38 @@
   }
 
   .params {
-    padding: 20px;
+    overflow: hidden;
-    padding-top: 0;
+    height: calc(100vh - 136px);
+
+    .collapse {
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .params-box {
+    padding-inline: 32px;
+    height: 100%;
+    overflow-y: auto;
   }
 
   .divider-line {
     width: 1px;
 
+    &.collapse {
+      width: 0;
+      transition: width 0.3s;
+    }
+
     .ant-divider {
       margin: 0;
-      min-height: calc(100vh - 136px);
+      height: calc(100vh - 136px);
     }
   }
 }
+
+.playground-container {
+  .ant-pro-page-container-children-container {
+    padding-right: 0;
+  }
+}

src/pages/resources/components/workers.tsx

@@ -10,6 +10,7 @@ import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
 import _ from 'lodash';
 import { memo, useEffect, useState } from 'react';
 import { deleteWorker, queryWorkersList } from '../apis';
+import { WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 const { Column } = Table;
 
@@ -218,10 +219,9 @@ const Resources: React.FC = () => {
             return (
               <StatusTag
                 statusValue={{
-                  status: ['Inactive', 'Unknown'].includes(record.state)
+                  status: status[record.state] as any,
-                    ? 'inactive'
+                  text: WorkerStatusMapValue[record.state],
-                    : 'success',
+                  message: record.state_message
-                  text: record.state
                 }}
               ></StatusTag>
             );

src/pages/resources/config/index.ts

@@ -0,0 +1,16 @@
+import { StatusMaps } from '@/config';
+
+export const WorkerStatusMap = {
+  ready: 'ready',
+  not_ready: 'not_ready'
+};
+
+export const WorkerStatusMapValue = {
+  [WorkerStatusMap.ready]: 'Ready',
+  [WorkerStatusMap.not_ready]: 'Not Ready'
+};
+
+export const status: any = {
+  [WorkerStatusMap.ready]: StatusMaps.success,
+  [WorkerStatusMap.not_ready]: StatusMaps.error
+};

src/pages/resources/config/types.ts

@@ -64,6 +64,7 @@ export interface ListItem {
   labels: object;
   state: string;
   ip: string;
+  state_message: string;
   status: {
     cpu: {
       total: number;