update

frontend/src/pages/Configs.tsx

@@ -1,4 +1,4 @@
-import {Button, Dropdown, Input, Label, Option, Slider, Switch} from '@fluentui/react-components';
+import {Button, Dropdown, Input, Label, Option, Select, Slider, Switch} from '@fluentui/react-components';
 import {AddCircle20Regular, DataUsageSettings20Regular, Delete20Regular, Save20Regular} from '@fluentui/react-icons';
 import React, {FC} from 'react';
 import {Section} from '../components/Section';
@@ -10,11 +10,14 @@ import {toast} from 'react-toastify';
 import {ValuedSlider} from '../components/ValuedSlider';
 import {NumberInput} from '../components/NumberInput';
 import {Page} from '../components/Page';
+import {useNavigate} from 'react-router';
 
 export const Configs: FC = observer(() => {
   const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);
   const [selectedConfig, setSelectedConfig] = React.useState(commonStore.modelConfigs[selectedIndex]);
 
+  const navigate = useNavigate();
+
   const updateSelectedIndex = (newIndex: number) => {
     setSelectedIndex(newIndex);
     setSelectedConfig(commonStore.modelConfigs[newIndex]);
@@ -143,19 +146,27 @@ export const Configs: FC = observer(() => {
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 <Labeled label="Model" content={
                   <div className="flex gap-2 grow">
-                    <Dropdown style={{minWidth: 0}} className="grow">
+                    <Select style={{minWidth: 0}} className="grow"
+                            value={selectedConfig.modelParameters.modelName}
+                            onChange={(e, data) => {
+                              setSelectedConfigModelParams({
+                                modelName: data.value
+                              });
+                            }}>
                       {commonStore.modelSourceList.map((modelItem, index) =>
-                        <Option key={index} value={index.toString()}>{modelItem.name}</Option>
+                        modelItem.isLocal && <option key={index} value={modelItem.name}>{modelItem.name}</option>
                       )}
-                    </Dropdown>
-                    <ToolTipButton desc="Manage Models" icon={<DataUsageSettings20Regular/>}/>
+                    </Select>
+                    <ToolTipButton desc="Manage Models" icon={<DataUsageSettings20Regular/>} onClick={() => {
+                      navigate({pathname: '/models'});
+                    }}/>
                   </div>
                 }/>
                 <ToolTipButton text="Convert" desc="Convert model with these configs"/>
                 <Labeled label="Device" content={
                   <Dropdown style={{minWidth: 0}} className="grow">
                     <Option>CPU</Option>
-                    <Option>CUDA: 0</Option>
+                    <Option>CUDA</Option>
                   </Dropdown>
                 }/>
                 <Labeled label="Precision" content={

frontend/src/startup.ts

@@ -62,12 +62,14 @@ async function initCache() {
       if (!cache.models[j].lastUpdatedMs)
         cache.models[j].lastUpdatedMs = Date.parse(cache.models[j].lastUpdated);
 
-      if (cache.models[i].name === cache.models[j].name && cache.models[i].size === cache.models[j].size) {
+      if (cache.models[i].name === cache.models[j].name) {
+        if (cache.models[i].size === cache.models[j].size) {
           if (cache.models[i].lastUpdatedMs! < cache.models[j].lastUpdatedMs!) {
             cache.models[i] = Object.assign({}, cache.models[i], cache.models[j]);
           } else {
             cache.models[i] = Object.assign({}, cache.models[j], cache.models[i]);
           }
+        } // else is bad local file
         cache.models.splice(j, 1);
         j--;
       }
@@ -93,7 +95,9 @@ async function initCache() {
     .catch(() => {
     });
   cache.models = cache.models.filter((model, index, self) => {
-    return model.name.endsWith('.pth') && index === self.findIndex(m => m.SHA256 === model.SHA256 && m.size === model.size);
+    return model.name.endsWith('.pth')
+      && index === self.findIndex(
+        m => m.name === model.name || (m.SHA256 === model.SHA256 && m.size === model.size));
   });
   // remote files
   commonStore.setModelSourceList(cache.models);

frontend/src/stores/commonStore.ts

@@ -31,6 +31,7 @@ export type ApiParameters = {
 }
 
 export type ModelParameters = {
+  // different models can not have the same name
   modelName: string;
   device: string;
   precision: string;
@@ -39,6 +40,7 @@ export type ModelParameters = {
 }
 
 export type ModelConfig = {
+  // different configs can have the same name
   name: string;
   apiParameters: ApiParameters
   modelParameters: ModelParameters

frontend/src/style.css

@@ -5,6 +5,7 @@
 body {
   margin: 0;
   overflow: hidden;
+  width: 100%;
   height: 100%;
 }