add mask tab

web_app/src/lib/api.ts

@@ -135,7 +135,7 @@ export async function runPlugin(
     body: JSON.stringify({
       name,
       image: imageBase64,
-      scale:upscale,
+      scale: upscale,
       clicks,
     }),
   })
@@ -167,6 +167,23 @@ export async function getMediaFile(tab: string, filename: string) {
   throw new Error(errMsg.errors)
 }
 
+export async function getMediaBlob(tab: string, filename: string) {
+  const res = await fetch(
+    `${API_ENDPOINT}/media_file?tab=${tab}&filename=${encodeURIComponent(
+      filename
+    )}`,
+    {
+      method: "GET",
+    }
+  )
+  if (res.ok) {
+    const blob = await res.blob()
+    return blob
+  }
+  const errMsg = await res.json()
+  throw new Error(errMsg.errors)
+}
+
 export async function getMedias(tab: string): Promise<Filename[]> {
   const res = await api.get(`medias`, { params: { tab } })
   return res.data

web_app/src/lib/states.ts

@@ -207,6 +207,7 @@ type AppAction = {
   updateInteractiveSegState: (newState: Partial<InteractiveSegState>) => void
   resetInteractiveSegState: () => void
   handleInteractiveSegAccept: () => void
+  handleFileManagerMaskSelect: (blob: Blob) => Promise<void>
   showPromptInput: () => boolean
 
   runInpainting: () => Promise<void>
@@ -903,6 +904,16 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
         })
       },
 
+      handleFileManagerMaskSelect: async (blob: Blob) => {
+        const newMask = new Image()
+
+        await loadImage(newMask, URL.createObjectURL(blob))
+        set((state) => {
+          state.editorState.extraMasks.push(castDraft(newMask))
+        })
+        get().runInpainting()
+      },
+
       setIsInpainting: (newValue: boolean) =>
         set((state) => {
           state.isInpainting = newValue