downloads page

frontend/src/pages/Downloads.tsx

@@ -0,0 +1,49 @@
+import React, {FC} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Page} from '../components/Page';
+import {observer} from 'mobx-react-lite';
+import commonStore from '../stores/commonStore';
+import {Divider, Field, ProgressBar} from '@fluentui/react-components';
+import {bytesToGb, bytesToMb} from '../utils';
+import {ToolTipButton} from '../components/ToolTipButton';
+import {Folder20Regular, Pause20Regular, Play20Regular} from '@fluentui/react-icons';
+import {ContinueDownload, OpenFileFolder, PauseDownload} from '../../wailsjs/go/backend_golang/App';
+
+export const Downloads: FC = observer(() => {
+  const {t} = useTranslation();
+
+  return (
+    <Page title={t('Downloads')} content={
+      <div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden p-1">
+        {commonStore.downloadList.map((status, index) => (
+          <div className="flex flex-col gap-1">
+            <Field
+              key={index}
+              label={`${status.downloading ? (t('Downloading') + ': ') : ''}${status.name}`}
+              validationMessage={`${status.progress.toFixed(2)}% - ${bytesToGb(status.transferred) + 'GB'}/${bytesToGb(status.size) + 'GB'} - ${status.downloading ? bytesToMb(status.speed) : 0}MB/s - ${status.url}`}
+              validationState={status.done ? 'success' : 'none'}
+            >
+              <div className="flex items-center gap-2">
+                <ProgressBar className="grow" value={status.progress} max={100}/>
+                {!status.done &&
+                  <ToolTipButton desc={status.downloading ? t('Pause') : t('Continue')}
+                                 icon={status.downloading ? <Pause20Regular/> : <Play20Regular/>}
+                                 onClick={() => {
+                                   if (status.downloading)
+                                     PauseDownload(status.url);
+                                   else
+                                     ContinueDownload(status.url);
+                                 }}/>}
+                <ToolTipButton desc={t('Open Folder')} icon={<Folder20Regular/>} onClick={() => {
+                  OpenFileFolder(status.path);
+                }}/>
+              </div>
+            </Field>
+            <Divider style={{flexGrow: 0}}/>
+          </div>
+        ))
+        }
+      </div>
+    }/>
+  );
+});

frontend/src/pages/Models.tsx

@@ -21,7 +21,7 @@ import {AddToDownloadList, OpenFileFolder} from '../../wailsjs/go/backend_golang
 import manifest from '../../../manifest.json';
 import {toast} from 'react-toastify';
 import {Page} from '../components/Page';
-import {refreshModels, saveConfigs} from '../utils';
+import {bytesToGb, refreshModels, saveConfigs} from '../utils';
 import {useTranslation} from 'react-i18next';
 
 const columns: TableColumnDefinition<ModelSourceItem>[] = [
@@ -86,7 +86,7 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
     renderCell: (item) => {
       return (
         <TableCellLayout>
-          {(item.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'}
+          {bytesToGb(item.size) + 'GB'}
         </TableCellLayout>
       );
     }

frontend/src/pages/index.tsx

@@ -1,10 +1,14 @@
-import { ReactElement } from "react";
-import { Configs } from "./Configs";
+import {ReactElement} from 'react';
+import {Configs} from './Configs';
 import {
-    Chat20Regular,
-    DataUsageSettings20Regular,
-    DocumentSettings20Regular,
-    Home20Regular, Info20Regular, Settings20Regular, Storage20Regular
+  ArrowDownload20Regular,
+  Chat20Regular,
+  DataUsageSettings20Regular,
+  DocumentSettings20Regular,
+  Home20Regular,
+  Info20Regular,
+  Settings20Regular,
+  Storage20Regular
 } from '@fluentui/react-icons';
 import {Home} from './Home';
 import {Chat} from './Chat';
@@ -12,63 +16,71 @@ import {Models} from './Models';
 import {Train} from './Train';
 import {Settings} from './Settings';
 import {About} from './About';
+import {Downloads} from './Downloads';
 
 type NavigationItem = {
-    label: string;
-    path: string;
-    icon: ReactElement;
-    element: ReactElement;
-    top: boolean;
+  label: string;
+  path: string;
+  icon: ReactElement;
+  element: ReactElement;
+  top: boolean;
 };
 
 export const pages: NavigationItem[] = [
-    {
-        label: "Home",
-        path: "/",
-        icon:<Home20Regular />,
-        element: <Home />,
-        top: true,
-    },
-    {
-        label: "Chat",
-        path: "/chat",
-        icon:<Chat20Regular />,
-        element: <Chat />,
-        top:true
-    },
-    {
-        label: "Configs",
-        path: "/configs",
-        icon:<DocumentSettings20Regular />,
-        element: <Configs />,
-        top:true
-    },
-    {
-        label: "Models",
-        path: "/models",
-        icon:<DataUsageSettings20Regular />,
-        element: <Models />,
-        top:true
-    },
-    {
-        label: "Train",
-        path: "/train",
-        icon:<Storage20Regular />,
-        element: <Train />,
-        top:true
-    },
-    {
-        label: "Settings",
-        path: "/settings",
-        icon:<Settings20Regular />,
-        element: <Settings />,
-        top:false
-    },
-    {
-        label: "About",
-        path: "/about",
-        icon:<Info20Regular />,
-        element: <About />,
-        top:false
-    }
+  {
+    label: 'Home',
+    path: '/',
+    icon: <Home20Regular/>,
+    element: <Home/>,
+    top: true
+  },
+  {
+    label: 'Chat',
+    path: '/chat',
+    icon: <Chat20Regular/>,
+    element: <Chat/>,
+    top: true
+  },
+  {
+    label: 'Configs',
+    path: '/configs',
+    icon: <DocumentSettings20Regular/>,
+    element: <Configs/>,
+    top: true
+  },
+  {
+    label: 'Models',
+    path: '/models',
+    icon: <DataUsageSettings20Regular/>,
+    element: <Models/>,
+    top: true
+  },
+  {
+    label: 'Downloads',
+    path: '/downloads',
+    icon: <ArrowDownload20Regular/>,
+    element: <Downloads/>,
+    top: true
+  },
+  {
+    label: 'Train',
+    path: '/train',
+    icon: <Storage20Regular/>,
+    element: <Train/>,
+    top: true
+  },
+  {
+    label: 'Settings',
+    path: '/settings',
+    icon: <Settings20Regular/>,
+    element: <Settings/>,
+    top: false
+  },
+  {
+    label: 'About',
+    path: '/about',
+    icon: <Info20Regular/>,
+    element: <About/>,
+    top: false
+  }
 ];