style: worker vram value

src/components/seal-table/index.tsx

@@ -10,7 +10,7 @@ import {
   type PaginationProps
 } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import TableHeader from './components/table-header';
 import TableRow from './components/table-row';
 import './styles/index.less';
@@ -153,7 +153,7 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
     );
   };
 
-  const renderContent = () => {
+  const renderContent = useCallback(() => {
     if (!props.dataSource.length) {
       return (
         <div className="empty-wrapper">
@@ -186,18 +186,20 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
         })}
       </div>
     );
-  };
+  }, [props.dataSource, expandedRowKeys, rowSelection, children]);
   return (
     <>
       <div className="seal-table-container">
         {renderHeader()}
-        {loading ? (
+        {/* {loading ? (
           <div className="spin">
             <Spin></Spin>
           </div>
         ) : (
           renderContent()
-        )}
+        )} */}
+
+        <Spin spinning={loading}>{renderContent()}</Spin>
       </div>
       {pagination && (
         <div className="pagination-wrapper">

src/components/seal-table/styles/row-children.less

@@ -3,7 +3,6 @@
   display: flex;
   align-items: center;
   height: 54px;
-  padding: 0 16px;
   border-radius: var(--ant-table-header-border-radius);
   transition: all 0.2s ease;
 

src/global.less

@@ -2,7 +2,13 @@
 @import url('src/assets/styles/menu.less');
 
 html {
+  --ant-color-text-secondary: rgba(0, 0, 0, 65%);
+  --ant-color-text-tertiary: rgba(0, 0, 0, 45%);
+  --ant-color-text-quaternary: rgba(0, 0, 0, 25%);
+  --ant-color-fill: rgba(0, 0, 0, 15%);
+  --ant-color-fill-secondary: rgba(0, 0, 0, 6%);
   --ant-color-fill-tertiary: rgba(0, 0, 0, 4%);
+  --ant-color-fill-quaternary: rgba(0, 0, 0, 2%);
   --color-fill-1: var(--ant-color-fill-tertiary);
   // --color-fill-1: #fff;
   --ant-color-text: #000;
@@ -29,7 +35,6 @@ html {
   --font-size-base: 12px;
   --font-size-large: 16px;
   --font-size-middle: 14px;
-  --ant-color-fill-secondary: rgba(0, 0, 0, 6%);
   --table-td-radius: 8px;
   --checkbox-border-radius: 4px;
   --ant-table-cell-padding-inline: 16px;

src/locales/en-US/resources.ts

@@ -17,5 +17,6 @@ export default {
   'resources.table.vramutilization': 'VRAM Utilization',
   'resources.table.total': 'Total',
   'resources.table.used': 'Used',
-  'resources.table.wokers': 'workers'
+  'resources.table.wokers': 'workers',
+  'resources.table.unified': 'Unified Memory'
 };

src/locales/zh-CN/resources.ts

@@ -17,5 +17,6 @@ export default {
   'resources.table.vramutilization': '显存利用率',
   'resources.table.total': '总量',
   'resources.table.used': '已用',
-  'resources.table.wokers': 'workers'
+  'resources.table.wokers': 'workers',
+  'resources.table.unified': '统一内存'
 };

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

@@ -95,7 +95,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                 <Col span={6}></Col>
                 <Col span={4}>
                   <span
-                    style={{ paddingLeft: '56px' }}
+                    style={{ paddingLeft: '68px' }}
                     className="flex justify-center"
                   >
                     {item.state && (
@@ -115,7 +115,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                   </span>
                 </Col>
                 <Col span={5}>
-                  <span style={{ paddingLeft: 38 }}>
+                  <span style={{ paddingLeft: 45 }}>
                     {dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}
                   </span>
                 </Col>

src/pages/llmodels/index.tsx

@@ -10,7 +10,6 @@ import TableList from './components/table-list';
 import { ListItem } from './config/types';
 
 const Models: React.FC = () => {
-  // const { modal } = App.useApp();
   console.log('model list====1');
 
   const { setChunkRequest } = useSetChunkRequest();
@@ -30,9 +29,8 @@ const Models: React.FC = () => {
     perPage: 10,
     search: ''
   });
-  // request data
 
-  dataSourceRef.current = dataSource;
+  // dataSourceRef.current = dataSource;
 
   const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
     dataList: dataSource,
@@ -50,7 +48,10 @@ const Models: React.FC = () => {
       const res: any = await queryModelsList(params, {
         cancelToken: axiosToken.token
       });
-      setDataSource(res.items);
+      if (!firstLoad) {
+        setDataSource(res.items);
+      }
+      // setDataSource(res.items);
       setTotal(res.pagination.total);
     } catch (error) {
       setDataSource([]);
@@ -74,7 +75,7 @@ const Models: React.FC = () => {
 
   const updateHandler = (list: any) => {
     _.each(list, (data: any) => {
-      updateChunkedList(data, dataSourceRef.current);
+      updateChunkedList(data);
     });
   };
 

src/pages/playground/components/chat-footer.tsx

@@ -59,20 +59,8 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
   return (
     <div className="chat-footer">
       <Row style={{ width: '100%' }}>
-        <Col span={hasTokenResult ? 8 : 12}>
+        <Col lg={hasTokenResult ? 8 : 12} xs={24} sm={24} md={12}>
           <Space size={20}>
-            {/* <Dropdown
-              menu={{ items: MessageRoles, onClick: onNewMessage }}
-              placement="topLeft"
-            >
-              <Button
-                disabled={disabled}
-                icon={<PlusOutlined />}
-                onClick={onNewMessage}
-              >
-                {intl.formatMessage({ id: 'playground.newMessage' })}
-              </Button>
-            </Dropdown> */}
             <Button
               disabled={disabled}
               icon={<PlusOutlined />}
@@ -120,18 +108,12 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
                 </span>
               </Button>
             ) : (
-              <Button type="primary" onClick={onStop}>
+              <Button
-                <div className="flex flex-center">
+                type="primary"
-                  <span>
+                onClick={onStop}
-                    {intl.formatMessage({ id: 'common.button.stop' })}
+                icon={<IconFont type="icon-stop1"></IconFont>}
-                  </span>
+              >
-                  <span className="m-l-5 flex flex-center">
+                <span>{intl.formatMessage({ id: 'common.button.stop' })}</span>
-                    <IconFont
-                      type="icon-stop1"
-                      className="font-size-14"
-                    ></IconFont>
-                  </span>
-                </div>
               </Button>
             )}
           </Space>

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

@@ -150,9 +150,20 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         </h3>
         <Form.Item<ParamsSettingsFormProps>
           name="model"
-          rules={[{ required: false }]}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.select'
+                },
+                { name: intl.formatMessage({ id: 'playground.model' }) }
+              )
+            }
+          ]}
         >
           <SealSelect
+            showSearch
             options={ModelList}
             label={intl.formatMessage({ id: 'playground.model' })}
           ></SealSelect>

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

@@ -18,8 +18,9 @@
     transition: width 0.3s ease;
 
     &.collapse {
-      width: 0;
+      width: 33px;
       padding-left: 32px;
+      overflow: hidden;
       transition: width 0.3s ease;
     }
   }
@@ -43,7 +44,13 @@
   .params-box {
     padding-inline: 32px;
     height: 100%;
+    width: 390px;
     overflow-y: auto;
+    overflow-x: hidden;
+
+    &.collapse {
+      padding-inline: 0;
+    }
   }
 
   .divider-line {
@@ -51,7 +58,7 @@
 
     &.collapse {
       width: 0;
-      transition: width 0.3s;
+      transition: width 0.3s ease;
     }
 
     .ant-divider {

src/pages/resources/components/workers.tsx

@@ -4,7 +4,11 @@ import StatusTag from '@/components/status-tag';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import { convertFileSize, handleBatchRequest } from '@/utils';
-import { DeleteOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  DeleteOutlined,
+  InfoCircleOutlined,
+  SyncOutlined
+} from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Modal, Space, Table, Tooltip, message } from 'antd';
 import _ from 'lodash';
@@ -306,38 +310,43 @@ const Resources: React.FC = () => {
                   (item: GPUDeviceItem, index) => {
                     return (
                       <span key={index}>
-                        {item.memory.is_unified_memory ? (
+                        <span className="flex-center">
-                          'Unified Memory'
+                          <span
-                        ) : (
+                            className="m-r-5"
-                          <span className="flex-center">
+                            style={{ display: 'flex', width: 25 }}
-                            <span
+                          >
-                              className="m-r-5"
+                            [{index}]
-                              style={{ display: 'flex', width: 25 }}
-                            >
-                              [{index}]
-                            </span>
-                            <ProgressBar
-                              key={index}
-                              percent={_.round(item.memory.utilization_rate, 0)}
-                              label={
-                                <span className="flex-column">
-                                  <span>
-                                    {intl.formatMessage({
-                                      id: 'resources.table.total'
-                                    })}
-                                    : {convertFileSize(item.memory?.total, 0)}
-                                  </span>
-                                  <span>
-                                    {intl.formatMessage({
-                                      id: 'resources.table.used'
-                                    })}
-                                    : {convertFileSize(item.memory?.used, 0)}
-                                  </span>
-                                </span>
-                              }
-                            ></ProgressBar>
                           </span>
-                        )}
+                          <ProgressBar
+                            key={index}
+                            percent={_.round(item.memory.utilization_rate, 0)}
+                            label={
+                              <span className="flex-column">
+                                <span>
+                                  {intl.formatMessage({
+                                    id: 'resources.table.total'
+                                  })}
+                                  : {convertFileSize(item.memory?.total, 0)}
+                                </span>
+                                <span>
+                                  {intl.formatMessage({
+                                    id: 'resources.table.used'
+                                  })}
+                                  : {convertFileSize(item.memory?.used, 0)}
+                                </span>
+                              </span>
+                            }
+                          ></ProgressBar>
+                          {item.memory.is_unified_memory && (
+                            <Tooltip
+                              title={intl.formatMessage({
+                                id: 'resources.table.unified'
+                              })}
+                            >
+                              <InfoCircleOutlined className="m-l-5" />
+                            </Tooltip>
+                          )}
+                        </span>
                       </span>
                     );
                   }