fix: build image

config/config.ts

@@ -45,24 +45,24 @@ export default defineConfig({
                 minRatio: 0.8
               }
             ]);
-          config.module
-            .rule('images')
-            .test(/\.(png|jpe?g|gif|svg|ico)(\?.*)?$/)
-            .use('url-loader')
-            .loader(require.resolve('url-loader'))
-            .tap((options: any) => {
-              console.log('iamges==options========', options);
-              return {
-                ...options,
-                limit: 8192, // 小于8KB的图片会被转为base64
-                fallback: {
-                  loader: require.resolve('file-loader'),
-                  options: {
-                    name: 'static/[name].[hash:8].[ext]' // 将所有图片输出到 static 目录
-                  }
-                }
-              };
-            });
+          // config.module
+          //   .rule('images')
+          //   .test(/\.(png|jpe?g|gif|svg|ico)(\?.*)?$/)
+          //   .use('url-loader')
+          //   .loader(require.resolve('url-loader'))
+          //   .tap((options: any) => {
+          //     console.log('iamges==options========', options);
+          //     return {
+          //       ...options,
+          //       limit: 8192, // 小于8KB的图片会被转为base64
+          //       fallback: {
+          //         loader: require.resolve('file-loader'),
+          //         options: {
+          //           name: 'static/[name].[hash:8].[ext]' // 将所有图片输出到 static 目录
+          //         }
+          //       }
+          //     };
+          //   });
         }
       }
     : {}),

src/locales/en-US/users.ts

@@ -24,5 +24,6 @@ export default {
     "For your account's security, please change your initial password.",
   'users.password.confirm': 'Confirm New Password',
   'users.password.confirm.empty': 'Please confirm the new password.',
-  'users.password.confirm.error': 'The two passwords entered do not match.'
+  'users.password.confirm.error': 'The two passwords entered do not match.',
+  'users.login.title': 'Login GPUStack'
 };

src/locales/zh-CN/users.ts

@@ -23,5 +23,6 @@ export default {
   'users.password.modify.description': '为了确保您的账户安全，请修改初始密码',
   'users.password.confirm': '确认新密码',
   'users.password.confirm.empty': '请确认新密码',
-  'users.password.confirm.error': '两次输入的密码不一致'
+  'users.password.confirm.error': '两次输入的密码不一致',
+  'users.login.title': '登录 GPUStack'
 };

src/pages/dashboard/components/usage.tsx

@@ -5,7 +5,6 @@ import LineChart from '@/components/echarts/line-chart';
 import PageTools from '@/components/page-tools';
 import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
-import { generateRandomArray } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Col, DatePicker, Row } from 'antd';
 import dayjs from 'dayjs';
@@ -21,83 +20,6 @@ const baseColorMap = {
   baseR2: 'rgba(48,0,255,0.8)',
   baseR3: 'rgba(85,167,255,0.8)'
 };
-const times = [
-  'june 1',
-  'june 2',
-  'june 3',
-  'june 4',
-  'june 5',
-  'june 6',
-  'june 7'
-];
-
-const users = ['Jim', 'Lucy', 'Lily', 'Tom', 'Jack', 'Rose', 'Jerry'];
-const projects = [
-  'copilot-dev',
-  'rag-wiki',
-  'smart-auto-agent',
-  'office-auto-docs',
-  'smart-customer-service'
-];
-
-const APIRequestData = generateRandomArray({
-  length: times.length,
-  max: 1000,
-  min: 10,
-  offset: 0
-});
-
-const TokensData = generateRandomArray({
-  length: times.length,
-  max: 2000,
-  min: 0,
-  offset: 500
-});
-
-const usersData = generateRandomArray({
-  length: users.length,
-  max: 100,
-  min: 0,
-  offset: 10
-});
-
-const projectsData = generateRandomArray({
-  length: projects.length,
-  max: 100,
-  min: 0,
-  offset: 10
-});
-
-const userDataList = usersData
-  .map((val, i) => {
-    return {
-      time: users[i],
-      value: val
-    };
-  })
-  .sort((a, b) => b.value - a.value);
-
-const projectDataList = projectsData
-  .map((val, i) => {
-    return {
-      time: projects[i],
-      value: val
-    };
-  })
-  .sort((a, b) => b.value - a.value);
-
-const dataList = APIRequestData.map((val, i) => {
-  return {
-    time: times[i],
-    value: val
-  };
-});
-const tokenUsage = TokensData.map((val, i) => {
-  return {
-    time: times[i],
-    value: val
-  };
-});
 
 const getCurrentMonthDays = () => {
   const now = dayjs();
@@ -133,7 +55,6 @@ const Usage = () => {
     []
   );
   const [xAxisData, setXAxisData] = useState<string[]>(currentMonthDays);
-  const [dateRange, setDateRange] = useState<string[]>(currentMonthDays);
   const [topUserList, setTopUseList] = useState<string[]>([]);
 
   const data = useContext(DashboardContext)?.model_usage || {};
@@ -176,7 +97,7 @@ const Usage = () => {
     };
     const users: string[] = [];
 
-    _.each(dateRange, (date: string) => {
+    _.each(xAxisData, (date: string) => {
       // tokens data
       const item = _.find(data.completion_token_history, (item: any) => {
         return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
@@ -295,10 +216,7 @@ const Usage = () => {
                   title={intl.formatMessage({ id: 'dashboard.apirequest' })}
                   seriesData={requestData}
                   xAxisData={xAxisData}
-                  xField="time"
-                  yField="value"
                   height={360}
-                  color={baseColorMap.baseR3}
                   labelFormatter={labelFormatter}
                 ></LineChart>
               </Col>

src/pages/login/components/login-form.tsx

@@ -1,4 +1,4 @@
-import LogoIcon from '@/assets/images/logo.png';
+import LogoIcon from '@/assets/images/gpustack-logo.png';
 import { initialPasswordAtom, userAtom } from '@/atoms/user';
 import SealInput from '@/components/seal-form/seal-input';
 import {
@@ -22,15 +22,30 @@ const renderLogo = () => {
   return (
     <div
       style={{
-        width: '400px',
         display: 'flex',
-        marginBottom: 24,
+        marginBottom: 0,
+        padding: '15px 0',
         justifyContent: 'center',
         alignItems: 'center'
       }}
     >
-      <img src={LogoIcon} alt="logo" style={{ width: '44px' }} />
-      <span style={{ fontSize: 34, marginLeft: 12 }}>SEAL</span>
+      <img src={LogoIcon} alt="logo" style={{ height: '26px' }} />
+    </div>
+  );
+};
+
+const renderWelCome = (intl: any) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        marginBottom: 32,
+        fontSize: 24,
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <div>{intl?.formatMessage({ id: 'users.login.title' })}</div>
     </div>
   );
 };
@@ -121,15 +136,29 @@ const LoginForm = () => {
 
   return (
     <div>
-      <div style={{ position: 'fixed', right: 0, top: 0, padding: '0 20px' }}>
+      <div
+        style={{
+          position: 'fixed',
+          right: 0,
+          top: 0,
+          left: 0,
+          width: '100%',
+          padding: '0 20px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <div>{renderLogo()}</div>
         <SelectLang icon={<GlobalOutlined />} reload={false} />
       </div>
+
       <Form
         form={form}
         style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
         onFinish={handleLogin}
       >
-        <div>{renderLogo()}</div>
+        {renderWelCome(intl)}
         <Form.Item
           name="username"
           rules={[

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

@@ -41,7 +41,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
 
       <span>
         {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
-        {usage.time_per_output_token_ms} token/s
+        {usage.time_per_output_token_ms} token/ms
       </span>
     </div>
   );