add diffusion progress

web_app/src/components/DiffusionProgress.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import io from "socket.io-client"
+import { Progress } from "./ui/progress"
+import { useStore } from "@/lib/states"
+import { MODEL_TYPE_INPAINT } from "@/lib/const"
+
+export const API_ENDPOINT = import.meta.env.VITE_BACKEND
+  ? import.meta.env.VITE_BACKEND
+  : ""
+const socket = io(API_ENDPOINT)
+
+const DiffusionProgress = () => {
+  const [settings, isInpainting] = useStore((state) => [
+    state.settings,
+    state.isInpainting,
+  ])
+
+  const [isConnected, setIsConnected] = React.useState(false)
+  const [step, setStep] = React.useState(0)
+
+  const progress = Math.min(Math.round((step / settings.sdSteps) * 100), 100)
+  const isSD = settings.model.model_type !== MODEL_TYPE_INPAINT
+
+  React.useEffect(() => {
+    if (!isSD) {
+      return
+    }
+    socket.on("connect", () => {
+      setIsConnected(true)
+    })
+
+    socket.on("disconnect", () => {
+      setIsConnected(false)
+    })
+
+    socket.on("diffusion_progress", (data) => {
+      if (data) {
+        setStep(data.step + 1)
+      }
+    })
+
+    socket.on("diffusion_finish", (data) => {
+      setStep(0)
+    })
+
+    return () => {
+      socket.off("connect")
+      socket.off("disconnect")
+      socket.off("diffusion_progress")
+      socket.off("diffusion_finish")
+    }
+  }, [isSD])
+
+  return (
+    <div
+      className="fixed w-[220px] left-1/2 -translate-x-1/2 top-[68px] h-[32px] flex justify-center items-center gap-[18px] border-[1px] border-[solid] rounded-[14px] pl-[8px] pr-[8px]"
+      style={{
+        visibility: isInpainting && isConnected && isSD ? "visible" : "hidden",
+      }}
+    >
+      <Progress value={progress} />
+      <div className="w-[45px] flex justify-center font-nums">{progress}%</div>
+    </div>
+  )
+}
+
+export default DiffusionProgress

web_app/src/components/Workspace.tsx

@@ -6,6 +6,7 @@ import ImageSize from "./ImageSize"
 import Plugins from "./Plugins"
 import { InteractiveSeg } from "./InteractiveSeg"
 import SidePanel from "./SidePanel"
+import DiffusionProgress from "./DiffusionProgress"
 
 const Workspace = () => {
   const [file, updateSettings] = useStore((state) => [
@@ -28,6 +29,7 @@ const Workspace = () => {
         <ImageSize />
       </div>
       <InteractiveSeg />
+      <DiffusionProgress />
       <SidePanel />
       {file ? <Editor file={file} /> : <></>}
     </>

web_app/src/components/ui/progress.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

web_app/src/lib/api.ts

@@ -11,7 +11,7 @@ import { convertToBase64, srcToFile } from "@/lib/utils"
 import axios from "axios"
 
 export const API_ENDPOINT = import.meta.env.VITE_BACKEND
-  ? import.meta.env.VITE_BACKEND
+  ? import.meta.env.VITE_BACKEND + "/api/v1"
   : "/api/v1"
 
 const api = axios.create({

web_app/src/lib/states.ts

@@ -312,7 +312,7 @@ const defaultValues: AppState = {
     sdGuidanceScale: 7.5,
     sdSampler: "DPM++ 2M",
     sdMatchHistograms: false,
-    sdScale: 100,
+    sdScale: 1.0,
     p2pImageGuidanceScale: 1.5,
     controlnetConditioningScale: 0.4,
     controlnetMethod: "lllyasviel/control_v11p_sd15_canny",