feat: add basic live painting UI (#58)

## Motivation

adds basic UI interaction for live painting

## Issues closed

<!-- List closed issues here -->

resources/python/live-painting/main.py

@@ -149,9 +149,9 @@ def load_image_with_retry(file_path, max_retries=25, delay=0.003):
     return None
 
 
-def calculate_min_inference_steps(strength):
+def calculate_min_inference_steps(steps, strength):
     # Calculate the minimal number of inference steps
-    return math.ceil(1.0 / strength)
+    return math.ceil(steps / strength)
 
 
 def prepare_pipeline(model_path, vae_path, disable_stablefast=False):
@@ -234,10 +234,11 @@ def warmup(pipe, input_image_path):
 
 def main(pipe, input_image_path, output_image_path, shutdown_event):
     # Initial/default values for parameters
-    prompt = "a person, incredible watercolor paining"
+    prompt = "a person, incredible watercolor painting, high quality"
     seed = 1
-    strength = 0.99
-    guidance_scale = None
+    strength = 0.95
+    steps = 3
+    guidance_scale = 1.5
 
     # When was the input image last modified
     last_modified_time = None
@@ -260,6 +261,8 @@ def main(pipe, input_image_path, output_image_path, shutdown_event):
                 seed = parameters.get("seed", seed)
                 strength = parameters.get("strength", strength)
                 guidance_scale = parameters.get("guidance_scale", guidance_scale)
+                steps = parameters.get("steps", steps)
+                print(f"Updated parameters {parameters}")
         except queue.Empty:
             pass  # No new parameters, proceed with the existing ones
 
@@ -283,18 +286,18 @@ def main(pipe, input_image_path, output_image_path, shutdown_event):
                 continue
 
             strength_ = float(strength)
-            # guidance_scale_ = float(guidance_scale)
-            # denoise_steps_ = calculate_min_inference_steps(strength_)
+            guidance_scale_ = float(guidance_scale)
+            denoise_steps_ = calculate_min_inference_steps(steps, strength_)
 
             image = pipe(
                 prompt,
                 image=init_image,
                 height=512,
                 width=512,
-                num_inference_steps=3,
+                num_inference_steps=denoise_steps_,
                 num_images_per_prompt=1,
                 strength=strength_,
-                guidance_scale=1.5,
+                guidance_scale=guidance_scale_,
             ).images[0]
 
             # Save file

src/client/ions/swr/fetcher.ts

@@ -1,3 +1,3 @@
 export async function fetcher(key: string) {
-	return window.ipc.fetch(key);
+	console.log(key);
 }

src/client/organisms/layout/index.tsx

@@ -27,7 +27,7 @@ export function Layout({ children }: { children?: ReactNode }) {
 				overflow: "hidden",
 				display: "grid",
 				gridTemplateColumns: {
-					xs: "36px 1fr",
+					xs: "44px 1fr",
 					xl: "228px 1fr",
 				},
 				gridTemplateRows: "36px 1fr",

src/client/organisms/sidebar-button/index.tsx

@@ -42,6 +42,9 @@ export function SidebarButton({
 							size="lg"
 							component="a"
 							color={isActive ? "primary" : "neutral"}
+							slotProps={{
+								startDecorator: { sx: { "--Icon-margin": "0 0 0 -2px" } },
+							}}
 							sx={{
 								justifyContent: "flex-start",
 								pl: 1.5,
@@ -61,12 +64,18 @@ export function SidebarButton({
 						component={href ? "a" : "button"}
 						href={href}
 						target={target}
+						slotProps={{
+							startDecorator: { sx: { "--Icon-margin": "0 0 0 -2px" } },
+						}}
 						sx={{
 							justifyContent: "flex-start",
 							pl: 1.5,
 							flex: 1,
 							whiteSpace: "nowrap",
 							overflow: "hidden",
+							".JoyButton-startDecorator": {
+								"--Icon-margin": "0 0 0 -1px",
+							},
 						}}
 					>
 						{children}

src/client/organisms/title-bar/index.tsx

@@ -87,13 +87,19 @@ export function TitleBar({ disableMaximize = true }) {
 						p: 1,
 						display: "flex",
 						alignItems: "center",
+						justifyContent: "center",
+						width: 44,
+						bgcolor: "primary.500",
+						"--Icon-color": "common.white",
 					}}
 				>
 					<Logo sx={{ height: 20, width: 20 }} />
 				</Box>
 			</Box>
 
-			<Typography level="body-xs">v{package_.version}</Typography>
+			<Typography level="body-xs" sx={{ pl: 1 }}>
+				v{package_.version}
+			</Typography>
 			<Box sx={{ flex: 1 }} />
 			<WindowControls disableMaximize={disableMaximize} />
 		</Sheet>

src/client/pages/[locale]/dashboard.tsx

@@ -25,7 +25,7 @@ export default function Page(_properties: InferGetStaticPropsType<typeof getStat
 						display: "flex",
 						alignItems: "center",
 						height: 44,
-						px: 2,
+						px: 1,
 						zIndex: 1,
 					}}
 				>