switch to FastAPI

web_app/src/components/FileManager.tsx

@@ -48,7 +48,7 @@ const SORT_BY_NAME = "Name"
 const SORT_BY_CREATED_TIME = "Created time"
 const SORT_BY_MODIFIED_TIME = "Modified time"
 
-const IMAGE_TAB = "image"
+const IMAGE_TAB = "input"
 const OUTPUT_TAB = "output"
 
 const SortByMap = {
@@ -158,7 +158,9 @@ export default function FileManager(props: Props) {
         const newPhotos = filteredFilenames.map((filename: Filename) => {
           const width = photoWidth
           const height = filename.height * (width / filename.width)
-          const src = `${API_ENDPOINT}/media_thumbnail/${tab}/${filename.name}?width=${width}&height=${height}`
+          const src = `${API_ENDPOINT}/media_thumbnail_file?tab=${tab}&filename=${encodeURIComponent(
+            filename.name
+          )}&width=${Math.ceil(width)}&height=${Math.ceil(height)}`
           return { src, height, width, name: filename.name }
         })
         setPhotos(newPhotos)

web_app/src/components/Header.tsx

@@ -71,8 +71,16 @@ const Header = () => {
           <FileManager
             photoWidth={512}
             onPhotoClick={async (tab: string, filename: string) => {
-              const newFile = await getMediaFile(tab, filename)
-              setFile(newFile)
+              try {
+                const newFile = await getMediaFile(tab, filename)
+                setFile(newFile)
+              } catch (e: any) {
+                toast({
+                  variant: "destructive",
+                  description: e.message ? e.message : e.toString(),
+                })
+                return
+              }
             }}
           />
         ) : (

web_app/src/components/Settings.tsx

@@ -115,19 +115,15 @@ export function SettingsDialog() {
       updateAppState({ disableShortCuts: true })
       switchModel(model.name)
         .then((res) => {
-          if (res.ok) {
-            toast({
-              title: `Switch to ${model.name} success`,
-            })
-            setAppModel(model)
-          } else {
-            throw new Error("Server error")
-          }
+          toast({
+            title: `Switch to ${model.name} success`,
+          })
+          setAppModel(model)
         })
-        .catch(() => {
+        .catch((error: any) => {
           toast({
             variant: "destructive",
-            title: `Switch to ${model.name} failed`,
+            title: `Switch to ${model.name} failed: ${error}`,
           })
           setModel(settings.model)
         })
@@ -168,17 +164,21 @@ export function SettingsDialog() {
       .filter((info) => model_types.includes(info.model_type))
       .map((info: ModelInfo) => {
         return (
-          <div key={info.name} onClick={() => onModelSelect(info)}>
+          <div
+            key={info.name}
+            onClick={() => onModelSelect(info)}
+            className="px-2"
+          >
             <div
               className={cn([
                 info.name === model.name ? "bg-muted" : "hover:bg-muted",
-                "rounded-md px-2 py-1 my-1",
+                "rounded-md px-2 py-2",
                 "cursor-default",
               ])}
             >
               <div className="text-base">{info.name}</div>
             </div>
-            <Separator />
+            <Separator className="my-1" />
           </div>
         )
       })