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>
         )
       })

web_app/src/lib/api.ts

@@ -1,7 +1,7 @@
 import { Filename, ModelInfo, PowerPaintTask, Rect } from "@/lib/types"
 import { Settings } from "@/lib/states"
 import { convertToBase64, srcToFile } from "@/lib/utils"
-import axios, { AxiosError } from "axios"
+import axios from "axios"
 
 export const API_ENDPOINT = import.meta.env.VITE_BACKEND
   ? import.meta.env.VITE_BACKEND
@@ -93,12 +93,7 @@ export function getServerConfig() {
 }
 
 export function switchModel(name: string) {
-  const fd = new FormData()
-  fd.append("name", name)
-  return fetch(`${API_ENDPOINT}/model`, {
-    method: "POST",
-    body: fd,
-  })
+  return axios.post(`${API_ENDPOINT}/model`, { name })
 }
 
 export function currentModel() {
@@ -151,14 +146,18 @@ export async function runPlugin(
 
 export async function getMediaFile(tab: string, filename: string) {
   const res = await fetch(
-    `${API_ENDPOINT}/media/${tab}/${encodeURIComponent(filename)}`,
+    `${API_ENDPOINT}/media_file?tab=${tab}&filename=${encodeURIComponent(
+      filename
+    )}`,
     {
       method: "GET",
     }
   )
   if (res.ok) {
     const blob = await res.blob()
-    const file = new File([blob], filename)
+    const file = new File([blob], filename, {
+      type: res.headers.get("Content-Type") ?? "image/png",
+    })
     return file
   }
   const errMsg = await res.text()
@@ -166,15 +165,8 @@ export async function getMediaFile(tab: string, filename: string) {
 }
 
 export async function getMedias(tab: string): Promise<Filename[]> {
-  const res = await fetch(`${API_ENDPOINT}/medias/${tab}`, {
-    method: "GET",
-  })
-  if (res.ok) {
-    const filenames = await res.json()
-    return filenames
-  }
-  const errMsg = await res.text()
-  throw new Error(errMsg)
+  const res = await axios.get(`${API_ENDPOINT}/medias`, { params: { tab } })
+  return res.data
 }
 
 export async function downloadToOutput(
@@ -192,7 +184,6 @@ export async function downloadToOutput(
       method: "POST",
       body: fd,
     })
-    console.log(res.ok)
     if (!res.ok) {
       const errMsg = await res.text()
       throw new Error(errMsg)