add stable diffusion progress bar

lama_cleaner/app/src/App.tsx

@@ -9,6 +9,7 @@ import { keepGUIAlive } from './utils'
 import Header from './components/Header/Header'
 import useHotKey from './hooks/useHotkey'
 import { getServerConfig, isDesktop } from './adapters/inpainting'
+import SDProgress from './components/SDProgress/SDProgress'
 
 const SUPPORTED_FILE_TYPE = [
   'image/jpeg',
@@ -178,6 +179,7 @@ function App() {
   return (
     <div className="lama-cleaner">
       <Header />
+      <SDProgress />
       <Workspace key={workspaceId} />
     </div>
   )

lama_cleaner/app/src/components/SDProgress/SDProgress.scss

@@ -0,0 +1,35 @@
+.ProgressWrapper {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 68px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.ProgressRoot {
+  position: relative;
+  overflow: hidden;
+  background: var(--page-bg);
+  border-radius: 99999px;
+  width: 130px;
+  height: 10px;
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+}
+
+.ProgressIndicator {
+  background-color: var(--yellow-accent);
+  width: 100%;
+  height: 100%;
+  transition: transform 60ms cubic-bezier(0.65, 0, 0.35, 1);
+}

lama_cleaner/app/src/components/SDProgress/SDProgress.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import * as Progress from '@radix-ui/react-progress'
+import { useRecoilValue } from 'recoil'
+import io from 'socket.io-client'
+import { isInpaintingState, isSDState, settingState } from '../../store/Atoms'
+
+const isDev = process.env.NODE_ENV === 'development'
+const socket = isDev ? io(`http://localhost:8080`) : io()
+
+const SDProgress = () => {
+  const isSD = useRecoilValue(isSDState)
+  const isInpainting = useRecoilValue(isInpaintingState)
+  const [isConnected, setIsConnected] = React.useState(false)
+  const [step, setStep] = React.useState(0)
+  const setting = useRecoilValue(settingState)
+  const maxStep = Math.max(setting.sdSteps, 1)
+
+  const progress = Math.min(Math.round((step / maxStep) * 100), 100)
+
+  React.useEffect(() => {
+    if (!isSD) return
+
+    socket.on('connect', () => {
+      setIsConnected(true)
+    })
+
+    socket.on('disconnect', () => {
+      setIsConnected(false)
+    })
+
+    socket.on('diffusion_progress', data => {
+      console.log(`step: ${data.step + 1}`)
+      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="ProgressWrapper"
+      style={{
+        visibility: isInpainting && isConnected && isSD ? 'visible' : 'hidden',
+      }}
+    >
+      <Progress.Root value={progress} className="ProgressRoot">
+        <Progress.Indicator
+          className="ProgressIndicator"
+          style={{ transform: `translateX(-${100 - progress}%)` }}
+        />
+      </Progress.Root>
+      <div
+        style={{
+          width: 45,
+          display: 'flex',
+          justifyContent: 'center',
+          fontVariantNumeric: 'tabular-nums',
+        }}
+      >
+        {progress}%
+      </div>
+    </div>
+  )
+}
+
+export default SDProgress

lama_cleaner/app/src/styles/_index.scss

@@ -19,6 +19,7 @@
 @use '../components/Plugins/Plugins.scss';
 @use '../components/Croper/Croper.scss';
 @use '../components/InteractiveSeg/InteractiveSeg.scss';
+@use '../components/SDProgress/SDProgress.scss';
 
 // Shared
 @use '../components/FileSelect/FileSelect';