Merge branch 'main' into feature/generatemode

Cargo.lock

@@ -672,6 +672,7 @@ dependencies = [
  "log",
  "memory_caching",
  "ml_models",
+ "ml_weights_registry",
  "once_cell",
  "primitives",
  "rand 0.8.5",
@@ -6819,6 +6820,7 @@ dependencies = [
  "libloading 0.8.6",
  "log",
  "memory_caching",
+ "ml_weights_registry",
  "ndarray",
  "nvidia-checker",
  "once_cell",
@@ -6839,6 +6841,14 @@ dependencies = [
  "tokio-util",
 ]
 
+[[package]]
+name = "ml_weights_registry"
+version = "0.0.1"
+dependencies = [
+ "anyhow",
+ "const_format",
+]
+
 [[package]]
 name = "mockall"
 version = "0.12.1"

Cargo.toml

@@ -23,6 +23,8 @@ members = [
 
   # Desktop apps
   "crates/desktop/src-tauri",
+  "crates/desktop/ml_models",
+  "crates/desktop/ml_weights_registry",
 
   # Shared libraries
   "crates/lib/actix_cors_configs",

crates/desktop/ml_models/Cargo.toml

@@ -21,6 +21,7 @@ normal = ["my-workspace-hack"]
 # Internal
 filesys = { path = "../../lib/files/filesys" }
 memory_caching = { path = "../../lib/caching/memory_caching" }
+ml_weights_registry = { path = "../ml_weights_registry" }
 primitives = { path = "../../lib/data/primitives" }
 
 # Bypass cudarc issues on Windows https://github.com/coreylowman/cudarc/issues/332

crates/desktop/ml_models/src/ml/mod.rs

@@ -4,5 +4,4 @@ pub mod model_cache;
 pub mod model_config;
 pub mod model_file;
 pub mod prompt_cache;
-pub mod stable_diffusion;
-pub mod weights_registry;
+pub mod stable_diffusion;

crates/desktop/ml_models/src/ml/stable_diffusion/infer_clip_text_embeddings.rs

@@ -7,7 +7,7 @@ use candle_transformers::models::stable_diffusion;
 use std::path::{Path, PathBuf};
 
 use crate::ml::model_file::{ModelFile, StableDiffusionVersion};
-use crate::ml::weights_registry::weights::{CLIP_JSON, SDXL_TURBO_CLIP_TEXT_ENCODER, SDXL_TURBO_CLIP_TEXT_ENCODER_2};
+use ml_weights_registry::weights_registry::weights::{CLIP_JSON, SDXL_TURBO_CLIP_TEXT_ENCODER, SDXL_TURBO_CLIP_TEXT_ENCODER_2};
 use anyhow::Error as E;
 use candle_core::{DType, Device, Module, Tensor, D};
 use log::info;

crates/desktop/ml_models/src/ml/stable_diffusion/lcm_pipeline.rs

@@ -1,6 +1,15 @@
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, RwLock, RwLockReadGuard, RwLockWriteGuard};
 
+use anyhow::{anyhow, Error as E, Result};
+use candle_core::{DType, Device, IndexOp, Tensor, D};
+use candle_nn::VarBuilder;
+use candle_transformers::models::stable_diffusion::StableDiffusionConfig;
+use candle_transformers::models::stable_diffusion::lcm::{LCMScheduler, LCMSchedulerConfig};
+use candle_transformers::models::stable_diffusion::unet_2d::BlockConfig;
+use candle_transformers::models::stable_diffusion::unet_2d::UNet2DConditionModel;
+use candle_transformers::models::stable_diffusion::unet_2d::UNet2DConditionModelConfig;
+use candle_transformers::models::stable_diffusion::vae::{AutoEncoderKL, DiagonalGaussianDistribution};
 use crate::ml::image::dynamic_image_to_tensor::dynamic_image_to_tensor;
 use crate::ml::image::tensor_to_image_buffer::{tensor_to_image_buffer, RgbImage};
 use crate::ml::model_cache::ModelCache;
@@ -10,18 +19,9 @@ use crate::ml::prompt_cache::PromptCache;
 use crate::ml::stable_diffusion::get_vae_scale::get_vae_scale;
 use crate::ml::stable_diffusion::infer_clip_text_embeddings::{infer_clip_text_embeddings, ClipArgs};
 use crate::ml::stable_diffusion::remap_lcm_strength_range::remap_lcm_strength_range;
-use crate::ml::weights_registry::weights::{LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
-use anyhow::{anyhow, Error as E, Result};
-use candle_core::{DType, Device, IndexOp, Tensor, D};
-use candle_nn::VarBuilder;
-use candle_transformers::models::stable_diffusion::lcm::{LCMScheduler, LCMSchedulerConfig};
-use candle_transformers::models::stable_diffusion::unet_2d::BlockConfig;
-use candle_transformers::models::stable_diffusion::unet_2d::UNet2DConditionModel;
-use candle_transformers::models::stable_diffusion::unet_2d::UNet2DConditionModelConfig;
-use candle_transformers::models::stable_diffusion::vae::{AutoEncoderKL, DiagonalGaussianDistribution};
-use candle_transformers::models::stable_diffusion::StableDiffusionConfig;
 use image::DynamicImage;
 use log::info;
+use ml_weights_registry::weights_registry::weights::{LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
 use rand::Rng;
 
 const DEFAULT_STRENGTH : f64 = 75.0;

crates/desktop/ml_weights_registry/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "ml_weights_registry"
+edition = "2021"
+version = "0.0.1"
+authors = ["storyteller"]
+publish = false
+description = ""
+license = ""
+repository = ""
+
+[lib]
+name = "ml_weights_registry"
+path = "src/lib.rs"
+
+# External
+[dependencies]
+anyhow = "1.0"
+const_format = "0.2.34"

crates/desktop/ml_weights_registry/src/lib.rs

@@ -0,0 +1 @@
+pub mod weights_registry;

crates/desktop/ml_weights_registry/src/weights_registry/weight_descriptor_builder.rs

@@ -5,10 +5,10 @@ pub (super) const R2_BUCKET_URL : &str = "https://pub-bc5e2bc0cdee4bb5ae8fca9d64
 //  and variables (even if they're known to be &'static) and keep allocations static.
 macro_rules! weight {
     ($name: literal, $file_name:literal, $weight_function:expr) => {
-      $crate::ml::weights_registry::weight_descriptor::WeightDescriptor {
+      $crate::weights_registry::weight_descriptor::WeightDescriptor {
         name: $name,
         filename: $file_name,
-        r2_download_url: const_format::concatcp!(crate::ml::weights_registry::weight_descriptor_builder::R2_BUCKET_URL, $file_name),
+        r2_download_url: const_format::concatcp!(crate::weights_registry::weight_descriptor_builder::R2_BUCKET_URL, $file_name),
         function: $weight_function,
       }
     };

crates/desktop/ml_weights_registry/src/weights_registry/weights.rs

@@ -1,5 +1,5 @@
-use crate::ml::weights_registry::weight_descriptor::{WeightDescriptor, WeightFunction};
-use crate::ml::weights_registry::weight_descriptor_builder::weight;
+use crate::weights_registry::weight_descriptor::{WeightDescriptor, WeightFunction};
+use crate::weights_registry::weight_descriptor_builder::weight;
 
 pub const CLIP_JSON : WeightDescriptor = weight!(
   "CLIP",

crates/desktop/src-tauri/Cargo.toml

@@ -23,11 +23,12 @@ tauri-build = { version = "2.0.4", features = [] }
 # Internal
 filesys = { path = "../../lib/files/filesys" }
 memory_caching = { path = "../../lib/caching/memory_caching" }
+ml_weights_registry = { path = "../ml_weights_registry" }
 primitives = { path = "../../lib/data/primitives" }
 
 # Internal ML
 # TODO: Only on Windows and Linux
-ml_models = { path = "../ml_models" }
+#ml_models = { path = "../ml_models", optional = true }
 
 # External
 #openssl = { version = "0.10", features = ["vendored"] }
@@ -57,11 +58,18 @@ tokio-util = { version = "0.7", features = ["codec"] }
 
 # tracing-subscriber = { version = "0.3", features = [ "env-filter", "fmt" ] }
 
+[target.'cfg(not(target_os = "macos"))'.dependencies]
+ml_models = { path = "../ml_models" }
+
 [dev-dependencies]
 libloading = "0.8.6"
 serial_test = "3.2.0"
 assertor = "0.0.3"
 
+#[target.'cfg(target_os = "macos")'.features]
+#default  = []
+#ml_models = ["dep:ml_models"]
+
 [profile.dev]
 incremental = true # Compile your binary in smaller steps.
 

crates/desktop/src-tauri/src/endpoints/inpaint_image_endpoint.rs

@@ -0,0 +1,24 @@
+use crate::ml::model_cache::ModelCache;
+use crate::ml::prompt_cache::PromptCache;
+use crate::state::app_config::AppConfig;
+use crate::state::app_dir::AppDataRoot;
+use image::{ImageReader, RgbImage};
+use log::info;
+use tauri::{AppHandle, State};
+
+
+#[tauri::command]
+pub async fn inpaint_image(
+  image: &str,
+  mask: &str,
+  prompt: String,
+  model_config: State<'_, AppConfig>,
+  model_cache: State<'_, ModelCache>,
+  prompt_cache: State<'_, PromptCache>,
+  app_data_root: State<'_, AppDataRoot>,
+  app: AppHandle,
+) -> Result<String, String> {
+  info!("inpaint_endpoint endpoint called.");
+
+  Ok(mask.to_string())
+}

crates/desktop/src-tauri/src/endpoints/mod.rs

@@ -1,6 +1,6 @@
 pub mod download_models;
 pub mod flip_image;
+pub mod inpaint_image_endpoint;
 pub mod realtime_image_endpoint;
 pub mod remove_background_endpoint;
-pub mod test_counter;
 pub mod text_to_image_endpoint;

crates/desktop/src-tauri/src/endpoints/realtime_image_endpoint.rs

@@ -1,17 +1,21 @@
+#[cfg(not(target_os = "macos"))]
+use ml_models::ml::stable_diffusion::lcm_pipeline::{lcm_pipeline, Args};
+
 use crate::state::app_config::AppConfig;
 use crate::state::app_dir::AppDataRoot;
+use crate::stubs::model_cache::ModelCache;
+use crate::stubs::prompt_cache::PromptCache;
 use crate::utils::image::decode_base64_image::decode_base64_image;
+use crate::utils::image::encode_dynamic_image_base64_png::encode_dynamic_image_base64_png;
 use crate::utils::image::encode_rgb_image_base64_png::encode_rgb_image_base64_png;
 use image::imageops::FilterType;
 use image::{DynamicImage, RgbImage};
 use log::{error, info};
-use ml_models::ml::model_cache::ModelCache;
-use ml_models::ml::prompt_cache::PromptCache;
-use ml_models::ml::stable_diffusion::lcm_pipeline::{lcm_pipeline, Args};
-use ml_models::ml::weights_registry::weights::{CLIP_JSON, LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
+use ml_weights_registry::weights_registry::weights::{CLIP_JSON, LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
 use std::path::PathBuf;
 use tauri::{AppHandle, State};
 
+
 const PROMPT_FILENAME : &str = "prompt.txt";
 const PROMPT: &str = "shiba inu, cute dog, detailed, walking in a wooded forest, photorealistic, 8k";
 
@@ -43,27 +47,30 @@ pub async fn infer_image(
     .map_err(|err| format!("Couldn't hydrate image from base64: {}", err))?;
   
   // TODO(bt,2025-02-17): Running out of vram with full image buffer size
-  let image = image.resize(512, 512, FilterType::CatmullRom);
+  let mut image = image.resize(512, 512, FilterType::CatmullRom);
 
-  let result = do_infer_image(
-    &prompt, 
-    image, 
-    strength, 
-    &model_config, 
-    &model_cache, 
-    prompt_cache, 
-    &app_data_root
-  ).await;
-  
-  let image = match result {
-    Ok(image) => image,
-    Err(err) => {
-      error!("There was an error generating the image: {:?}", err);
-      return Err(format!("There was an error generating the image: {}", err));
-    }
-  };
+  #[cfg(not(target_os = "macos"))]
+  {
+    let result = infer_image_impl(
+      &prompt,
+      image,
+      strength,
+      &model_config,
+      &model_cache,
+      prompt_cache,
+      &app_data_root
+    ).await;
 
-  let bytes = encode_rgb_image_base64_png(image)
+    image = match result {
+      Ok(img) => DynamicImage::ImageRgb8(img),
+      Err(err) => {
+        error!("There was an error generating the image: {:?}", err);
+        return Err(format!("There was an error generating the image: {}", err));
+      }
+    };
+  }
+
+  let bytes = encode_dynamic_image_base64_png(image)
     .map_err(|err| format!("failure to encode image: {:?}", err))?;
 
   info!("Inference successful; image converted to base64, serving back to browser...");
@@ -71,7 +78,8 @@ pub async fn infer_image(
   Ok(bytes)
 }
 
-async fn do_infer_image(
+#[cfg(not(target_os = "macos"))]
+async fn infer_image_impl(
   prompt: &str,
   image: DynamicImage,
   strength: Option<f64>,

crates/desktop/src-tauri/src/endpoints/remove_background_endpoint.rs

@@ -1,37 +1,45 @@
 //! Adapted from https://github.com/dnanhkhoa/rust-background-removal
 
+#[cfg(not(target_os = "macos"))]
+use ml_models::ml::background_removal::remove_image_background::remove_image_background;
+
 use crate::state::app_dir::AppDataRoot;
 use crate::utils::image::decode_base64_image::decode_base64_image;
 use crate::utils::image::encode_dynamic_image_base64_png::encode_dynamic_image_base64_png;
 use image::{imageops, DynamicImage};
-use log::{error, info};
-use ml_models::ml::background_removal::onnx_session::onnx_session;
-use ml_models::ml::background_removal::remove_image_background::remove_image_background;
-use ml_models::ml::model_cache::ModelCache;
-use ml_models::ml::weights_registry::weights::{DIS_MEDIUM_ONNX, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
-use tauri::{AppHandle, State};
+use log::info;
+use ml_weights_registry::weights_registry::weights::DIS_MEDIUM_ONNX;
+use tauri::State;
 
 /// This handler removes the background from an image.
 #[tauri::command]
 pub async fn remove_background(
   image: &str,
-  model_cache: State<'_, ModelCache>,
   app_data_root: State<'_, AppDataRoot>,
-  app: AppHandle,
 ) -> Result<String, String> {
   info!("remove_background endpoint called.");
 
-  let image = decode_base64_image(image)
-    .map_err(|err| format!("Couldn't hydrate image from base64: {}", err))?;
+  let mut image = decode_base64_image(image)
+      .map_err(|err| format!("Couldn't hydrate image from base64: {}", err))?;
 
-  let model_path = app_data_root.weights_dir().weight_path(&DIS_MEDIUM_ONNX);
-  
-  let image = remove_image_background(model_path, image)
-    .await
-    .map_err(|err| format!("Couldn't remove image from image: {}", err))?;
+  #[cfg(not(target_os = "macos"))]
+  {
+    image = remove_background_impl(&app_data_root, image).await?;
+  }
 
   let image = encode_dynamic_image_base64_png(image)
     .map_err(|err| format!("failure to encode image: {:?}", err))?;
 
   Ok(image)
 }
+
+#[cfg(not(target_os = "macos"))]
+async fn remove_background_impl(app_data_root: &AppDataRoot, image: DynamicImage) -> Result<DynamicImage, String> {
+  let model_path = app_data_root.weights_dir().weight_path(&DIS_MEDIUM_ONNX);
+
+  let image = remove_image_background(model_path, image)
+      .await
+      .map_err(|err| format!("Couldn't remove image from image: {}", err))?;
+
+  Ok(image)
+}

crates/desktop/src-tauri/src/endpoints/test_counter.rs

@@ -1,24 +0,0 @@
-use std::sync::{Arc, RwLock};
-use once_cell::sync::Lazy;
-
-static COUNTER : Lazy<Arc<RwLock<u64>>> = Lazy::new(|| Arc::new(RwLock::new(0)));
-
-#[tauri::command]
-pub fn test_counter() -> u64 {
-  let value : u64;
-  {
-    match COUNTER.write() {
-      Ok(mut counter) => {
-        *counter += 1;
-        value = *counter;
-      },
-      Err(_e) => {
-        value = 0;
-      }
-    }
-  }
-
-  println!("I was invoked from JavaScript! {:?}", value);
-
-  value
-}

crates/desktop/src-tauri/src/endpoints/text_to_image_endpoint.rs

@@ -1,22 +1,23 @@
+#[cfg(not(target_os = "macos"))]
+use ml_models::ml::stable_diffusion::lcm_pipeline::{lcm_pipeline, Args};
+
 use crate::state::app_config::AppConfig;
 use crate::state::app_dir::AppDataRoot;
-use crate::utils::image::decode_base64_image::decode_base64_image;
-use crate::utils::image::encode_rgb_image_base64_png::encode_rgb_image_base64_png;
+use crate::stubs::model_cache::ModelCache;
+use crate::stubs::prompt_cache::PromptCache;
+use crate::utils::image::encode_dynamic_image_base64_png::encode_dynamic_image_base64_png;
 use image::imageops::FilterType;
 use image::{DynamicImage, ImageReader, RgbImage};
 use log::{error, info};
-use ml_models::ml::model_cache::ModelCache;
-use ml_models::ml::prompt_cache::PromptCache;
-use ml_models::ml::stable_diffusion::lcm_pipeline::{lcm_pipeline, Args};
+use ml_weights_registry::weights_registry::weights::{CLIP_JSON, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
+
 use once_cell::sync::Lazy;
 use std::io::Cursor;
-use std::path::PathBuf;
 use tauri::{AppHandle, State};
-use ml_models::ml::weights_registry::weights::{CLIP_JSON, LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
 
 const RANDOM_SEED: u32 = 42;
 
-const STRENGTH: f64 = 1.0;
+const STRENGTH: f64 = 100.0;
 const PNG_BYTES : &[u8] = include_bytes!("../../binary_includes/1024.png");
 
 // NB: We're just hacking a temporary "text to image" test endpoint leveraging the existing image to image modality.
@@ -39,28 +40,31 @@ pub async fn text_to_image(
 ) -> Result<String, String> {
   info!("text_to_image endpoint called.");
 
-  let image = IMAGE.resize(512, 512, FilterType::CatmullRom);
+  let mut image = IMAGE.resize(512, 512, FilterType::CatmullRom);
 
-  let result = do_infer_image(
-    &prompt, 
-    image, 
-    Some(STRENGTH), 
-    &model_config, 
-    &model_cache, 
-    prompt_cache, 
-    app, 
-    &app_data_root
-  ).await;
-  
-  let image = match result {
-    Ok(image) => image,
-    Err(err) => {
-      error!("There was an error generating the image: {:?}", err);
-      return Err(format!("There was an error generating the image: {}", err));
-    }
-  };
+  #[cfg(not(target_os = "macos"))]
+  {
+    let result = text_to_image_impl(
+      &prompt,
+      image,
+      Some(STRENGTH),
+      &model_config,
+      &model_cache,
+      prompt_cache,
+      app,
+      &app_data_root
+    ).await;
 
-  let bytes = encode_rgb_image_base64_png(image)
+    image = match result {
+      Ok(img) => DynamicImage::ImageRgb8(img),
+      Err(err) => {
+        error!("There was an error generating the image: {:?}", err);
+        return Err(format!("There was an error generating the image: {}", err));
+      }
+    };
+  }
+
+  let bytes = encode_dynamic_image_base64_png(image)
     .map_err(|err| format!("failure to encode image: {:?}", err))?;
 
   info!("Inference successful; image converted to base64, serving back to browser...");
@@ -68,7 +72,8 @@ pub async fn text_to_image(
   Ok(bytes)
 }
 
-async fn do_infer_image(
+#[cfg(not(target_os = "macos"))]
+async fn text_to_image_impl(
   prompt: &str,
   image: DynamicImage,
   strength: Option<f64>,

crates/desktop/src-tauri/src/lib.rs

@@ -1,20 +1,22 @@
 pub mod endpoints;
 pub mod events;
 pub mod state;
+pub mod stubs;
 pub mod threads;
 pub mod transfer;
 pub mod utils;
 
 use crate::endpoints::download_models::download_models;
+use crate::endpoints::inpaint_image_endpoint::inpaint_image;
+use crate::endpoints::flip_image::flip_image;
 use crate::endpoints::realtime_image_endpoint::infer_image;
 use crate::endpoints::remove_background_endpoint::remove_background;
-use crate::endpoints::test_counter::test_counter;
 use crate::endpoints::text_to_image_endpoint::text_to_image;
 use crate::state::app_config::AppConfig;
+use crate::stubs::model_cache::ModelCache;
+use crate::stubs::prompt_cache::PromptCache;
 use crate::threads::downloader_thread::downloader_thread;
-use crate::utils::log_environment_details::log_environment_details;
-use ml_models::ml::model_cache::ModelCache;
-use ml_models::ml::prompt_cache::PromptCache;
+
 use tauri_plugin_log::Target;
 use tauri_plugin_log::TargetKind;
 
@@ -27,6 +29,7 @@ pub fn run() {
   let config = AppConfig::init()
     .expect("config should load");
 
+
   let prompt_cache = PromptCache::with_capacity(8)
     .expect("prompt cache should load");
 
@@ -67,9 +70,10 @@ pub fn run() {
     .manage(app_data_root)
     .invoke_handler(tauri::generate_handler![
       download_models,
+      flip_image,
       infer_image,
+      inpaint_image,
       remove_background,
-      test_counter,
       text_to_image,
     ])
     .run(tauri::generate_context!())

crates/desktop/src-tauri/src/state/app_config.rs

@@ -1,7 +1,7 @@
 use crate::state::app_dir::AppDataRoot;
 use crate::state::os_platform::OsPlatform;
 use crate::state::yaml_config::YamlConfig;
-use ml_models::ml::model_config::ModelConfig;
+use crate::stubs::model_config::ModelConfig;
 
 const DEFAULT_SD_IMAGE_WIDTH: usize = 1024;
 const DEFAULT_SD_IMAGE_HEIGHT: usize = 1024;

crates/desktop/src-tauri/src/state/app_dir.rs

@@ -2,7 +2,7 @@ use crate::state::expanduser::expanduser;
 use crate::state::os_platform::OsPlatform;
 use anyhow::anyhow;
 use directories::UserDirs;
-use ml_models::ml::weights_registry::weight_descriptor::WeightDescriptor;
+use ml_weights_registry::weights_registry::weight_descriptor::WeightDescriptor;
 use std::path::{Path, PathBuf};
 use tempdir::TempDir;
 use tempfile::{Builder, NamedTempFile};

crates/desktop/src-tauri/src/stubs/mod.rs

@@ -0,0 +1,3 @@
+pub mod model_cache;
+pub mod model_config;
+pub mod prompt_cache;

crates/desktop/src-tauri/src/stubs/model_cache.rs

@@ -0,0 +1,14 @@
+#[cfg(not(target_os = "macos"))]
+pub use ml_models::ml::model_cache::ModelCache;
+
+#[cfg(not(not(target_os = "macos")))]
+pub struct ModelCache {
+  // Intentionally left blank
+}
+
+#[cfg(not(not(target_os = "macos")))]
+impl ModelCache {
+  pub fn new() -> Self {
+    Self {}
+  }
+}

crates/desktop/src-tauri/src/stubs/model_config.rs

@@ -0,0 +1,14 @@
+#[cfg(not(target_os = "macos"))]
+pub use ml_models::ml::model_config::ModelConfig;
+
+#[cfg(not(not(target_os = "macos")))]
+pub struct ModelConfig {
+  // Intentionally left blank
+}
+
+#[cfg(not(not(target_os = "macos")))]
+impl ModelConfig {
+  pub fn init() -> anyhow::Result<Self> {
+    Ok(Self {})
+  }
+}

crates/desktop/src-tauri/src/stubs/prompt_cache.rs

@@ -0,0 +1,15 @@
+
+#[cfg(not(target_os = "macos"))]
+pub use ml_models::ml::prompt_cache::PromptCache;
+
+#[cfg(not(not(target_os = "macos")))]
+pub struct PromptCache {
+  // Intentionally left blank
+}
+
+#[cfg(not(not(target_os = "macos")))]
+impl PromptCache {
+  pub fn with_capacity(capacity: usize) -> anyhow::Result<Self> {
+    Ok(Self {})
+  }
+}

crates/desktop/src-tauri/src/threads/downloader_thread.rs

@@ -1,11 +1,11 @@
 use crate::events::notification_event::{NotificationEvent, NotificationModelType};
 use crate::state::app_dir::AppDataRoot;
 use crate::transfer::download::{download_async, ProgressUpdate};
-use futures::stream::FuturesUnordered;
 use futures::StreamExt;
+use futures::stream::FuturesUnordered;
 use log::{debug, error, info};
-use ml_models::ml::weights_registry::weight_descriptor::WeightFunction;
-use ml_models::ml::weights_registry::weights::{CLIP_JSON, DIS_MEDIUM_ONNX, LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SDXL_TURBO_CLIP_TEXT_ENCODER_2, SDXL_TURBO_UNET, SDXL_TURBO_VAE, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
+use ml_weights_registry::weights_registry::weight_descriptor::WeightFunction;
+use ml_weights_registry::weights_registry::weights::{CLIP_JSON, DIS_MEDIUM_ONNX, LYKON_DEAMSHAPER_7_TEXT_ENCODER_FP16, LYKON_DEAMSHAPER_7_VAE, SDXL_TURBO_CLIP_TEXT_ENCODER, SDXL_TURBO_CLIP_TEXT_ENCODER_2, SDXL_TURBO_UNET, SDXL_TURBO_VAE, SIMIANLUO_LCM_DREAMSHAPER_V7_UNET};
 use std::collections::VecDeque;
 use std::path::PathBuf;
 use std::sync::mpsc::Receiver;

frontend/realtime/package-lock.json

@@ -8,6 +8,7 @@
       "name": "storyteller-board",
       "version": "0.0.0",
       "dependencies": {
+        "@devnomic/marquee": "^1.0.3",
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@headlessui/react": "^2.1.3",
         "@preact/signals-react": "^2.2.0",
@@ -381,6 +382,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@devnomic/marquee": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@devnomic/marquee/-/marquee-1.0.3.tgz",
+      "integrity": "sha512-q8QUtNO8ff+UvfrKJsHBtxh4fbOfhGk6SSdK0Uu/XZFdEzrmiGJ/l0FuVHRYsPAmzgnhVVnz1dGNB5CWGLMVvw==",
+      "dependencies": {
+        "clsx": "^2.1.0",
+        "tailwind-merge": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.47",
+        "@types/react-dom": "^18.2.18",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
@@ -1510,14 +1526,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1527,7 +1541,6 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2364,8 +2377,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",

frontend/realtime/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@devnomic/marquee": "^1.0.3",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@headlessui/react": "^2.1.3",
     "@preact/signals-react": "^2.2.0",

frontend/realtime/src/EditModeRootComponent/EditModeRootComponent.tsx

@@ -0,0 +1,25 @@
+import { useCallback, useRef } from "react";
+import { useRenderCounter } from "~/hooks/useRenderCounter";
+import { EditEngine } from "~/KonvaApp/EditEngine";
+import { KonvaCanvasContainer } from "~/KonvaRootComponent/KonvaCanvasContainer";
+
+export const EditModeRootComponent = ({ className }: { className: string }) => {
+  useRenderCounter("EditModeRootComponent");
+
+  const editEngineRef = useRef<EditEngine | null>(null);
+
+  const konvaContainerCallbackRef = useCallback((node: HTMLDivElement) => {
+    if (node !== null && editEngineRef.current === null) {
+      editEngineRef.current = new EditEngine(node);
+    }
+  }, []);
+
+  return (
+    <>
+      <KonvaCanvasContainer
+        className={className}
+        ref={konvaContainerCallbackRef}
+      />
+    </>
+  );
+};

frontend/realtime/src/GenerationRootComponent/BackgroundGallery.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react";
+import { Marquee } from "@devnomic/marquee";
+import "@devnomic/marquee/dist/index.css";
+
+function getRandomImages(count: number) {
+  const images = Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    src: `/images/generate/image${i + 1}.png`,
+    alt: `Generated image ${i + 1}`,
+  }));
+
+  // Shuffle the array
+  return [...images].sort(() => Math.random() - 0.5);
+}
+
+interface ImageColumnProps {
+  images: Array<{ id: number; src: string; alt: string }>;
+  delay: number;
+  reverse?: boolean;
+  isLoaded: boolean;
+  duration?: number;
+}
+
+function ImageColumn({
+  images,
+  delay,
+  reverse = false,
+  duration = 100,
+  isLoaded,
+}: ImageColumnProps) {
+  return (
+    <div className="flex h-screen flex-col gap-6">
+      <Marquee
+        fade={false}
+        direction="up"
+        reverse={reverse}
+        pauseOnHover={false}
+        className={`h-full gap-[24px]`}
+        style={{ "--duration": `${duration}s` } as React.CSSProperties}
+        innerClassName="gap-[24px] [--gap:24px]"
+        numberOfCopies={2}
+      >
+        {images.map((image, i) => (
+          <div
+            key={`${image.id}-${i}`}
+            className={`relative aspect-[4/5] w-full overflow-hidden rounded-lg shadow-lg transition-all duration-700 ease-out ${
+              isLoaded
+                ? "translate-y-0 opacity-100"
+                : "translate-y-12 opacity-0"
+            }`}
+            style={{
+              transitionDelay: `${delay + i * 50}ms`,
+            }}
+          >
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="w-full object-cover"
+            />
+          </div>
+        ))}
+      </Marquee>
+    </div>
+  );
+}
+
+export default function GalleryBackground() {
+  const [images, _setImages] = useState(() => getRandomImages(20));
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    // delay for smooth animation
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Columns for masonry layout
+  const columns = {
+    col1: images.filter((_, i) => i % 5 === 0),
+    col2: images.filter((_, i) => i % 5 === 1),
+    col3: images.filter((_, i) => i % 5 === 2),
+    col4: images.filter((_, i) => i % 5 === 3),
+    col5: images.filter((_, i) => i % 5 === 4),
+  };
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[1] overflow-hidden bg-[radial-gradient(50%_50%_at_50%_50%,rgba(0,0,0,0.00)_49%,rgba(0,0,0,0.60)_100%)]" />
+      <div className="fixed inset-0 z-0 overflow-hidden">
+        <div
+          className={`h-full w-full transition-opacity duration-1000 ${isLoaded ? "opacity-50" : "opacity-0"}`}
+        >
+          <div className="absolute inset-0 grid grid-cols-5 gap-6 px-6 opacity-35">
+            <ImageColumn
+              images={columns.col1}
+              delay={0}
+              isLoaded={isLoaded}
+              duration={100}
+            />
+            <ImageColumn
+              images={columns.col2}
+              delay={columns.col1.length * 50}
+              isLoaded={isLoaded}
+              reverse={true}
+              duration={100}
+            />
+            <ImageColumn
+              images={columns.col3}
+              delay={(columns.col1.length + columns.col2.length) * 50}
+              isLoaded={isLoaded}
+              duration={125}
+            />
+            <ImageColumn
+              images={columns.col4}
+              delay={
+                (columns.col1.length +
+                  columns.col2.length +
+                  columns.col3.length) *
+                50
+              }
+              isLoaded={isLoaded}
+              reverse={true}
+              duration={160}
+            />
+            <ImageColumn
+              images={columns.col5}
+              delay={
+                (columns.col1.length +
+                  columns.col2.length +
+                  columns.col3.length +
+                  columns.col4.length) *
+                50
+              }
+              isLoaded={isLoaded}
+              duration={110}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx

@@ -0,0 +1,196 @@
+import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { useSignals } from "@preact/signals-react/runtime";
+import { Button, LoadingSpinner } from "~/components/ui";
+import { useRenderCounter } from "~/hooks/useRenderCounter";
+import { GenerationLoadingState, generationSignal } from "~/signals";
+import { useRef, useState } from "react";
+import BackgroundGallery from "./BackgroundGallery";
+import { twMerge } from "tailwind-merge";
+import { Transition } from "@headlessui/react";
+import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
+import { ensureBase64Prefix } from "~/KonvaApp/EngineUtitlities/Base64Helpers";
+
+export const GenerationRootComponent = ({
+  generationEngineRef,
+}: {
+  generationEngineRef: React.MutableRefObject<GenerationEngine | null>;
+}) => {
+  // This is a hook that will log the number of times the component has rerendered
+  // Let's make sure we only log once
+  useRenderCounter("GenerationRootComponent");
+  useSignals();
+
+  const generationState = generationSignal.value;
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+
+  if (generationEngineRef.current === null) {
+    generationEngineRef.current = new GenerationEngine();
+  }
+
+  const handleGenerate = () => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    const prompt = inputRef.current.value;
+    generationSignal.value = {
+      loadingState: GenerationLoadingState.GENERATING,
+      prompt,
+    };
+  };
+
+  let contentElement;
+  switch (generationState.loadingState) {
+    case GenerationLoadingState.INIT:
+      contentElement = null;
+      break;
+    case GenerationLoadingState.GENERATING:
+    case GenerationLoadingState.GENERATED:
+      contentElement = (
+        <GenerationContent
+          loadingState={generationState.loadingState}
+          imageB64={generationState.imageB64}
+          prompt={generationState.prompt}
+        />
+      );
+      break;
+  }
+
+  // const isButtonDisabled = generationState.loadingState === GenerationLoadingState.GENERATING;
+  const isButtonDisabled = false;
+
+  return (
+    <>
+      <div className="fixed z-10 flex h-full w-full flex-col items-center justify-center transition-all duration-500">
+        <Transition
+          show={generationState.loadingState !== GenerationLoadingState.INIT}
+          enter="transition-opacity duration-500"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-opacity duration-500"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          as="div"
+        >
+          {contentElement}
+        </Transition>
+        <div
+          className={twMerge(
+            "absolute flex w-full flex-col items-center justify-center gap-16 transition-all duration-500",
+            generationState.loadingState === GenerationLoadingState.INIT
+              ? "bottom-1/2 translate-y-1/2 transform"
+              : "bottom-8",
+          )}
+        >
+          <Transition
+            show={generationState.loadingState === GenerationLoadingState.INIT}
+            enter="transition-opacity duration-200"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition-opacity duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            as="div"
+          >
+            <div className="flex flex-col items-center justify-center text-center drop-shadow-xl">
+              <span className="text-8xl font-bold">Generate Image</span>
+              <span className="pt-2 text-2xl opacity-80">
+                Imagine, Describe, Generate.
+              </span>
+            </div>
+          </Transition>
+          <div
+            className={twMerge(
+              "glass flex min-h-[56px] w-full max-w-[900px] items-end rounded-xl border-2 p-3 shadow-xl transition-all duration-[400ms] ease-in-out",
+              isInputFocused ? "border-primary-400/60" : "border-ui-panel",
+            )}
+          >
+            <textarea
+              ref={inputRef}
+              rows={1}
+              placeholder="Describe what you want to see..."
+              className="max-h-[120px] min-h-[40px] flex-1 resize-none overflow-y-auto rounded-md bg-transparent px-3 py-2 text-lg leading-normal focus:outline-none"
+              style={{ lineHeight: "24px" }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement;
+                target.style.height = "auto";
+                target.style.height = `${target.scrollHeight}px`;
+              }}
+              autoFocus={true}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            />
+            <Button
+              icon={faSparkles}
+              variant="primary"
+              className="text-md ml-2 self-end"
+              onClick={handleGenerate}
+              disabled={isButtonDisabled}
+              loading={
+                generationState.loadingState ===
+                GenerationLoadingState.GENERATING
+              }
+            >
+              Generate
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <Transition
+        show={generationState.loadingState === GenerationLoadingState.INIT}
+        enter="transition-opacity duration-700"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-700"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as="div"
+      >
+        <BackgroundGallery />
+      </Transition>
+    </>
+  );
+};
+
+const GenerationContent = (generationState: {
+  loadingState: GenerationLoadingState;
+  imageB64?: string;
+  prompt: string;
+}) => {
+  let imgBoxContent;
+  if (generationState.loadingState === GenerationLoadingState.GENERATING) {
+    imgBoxContent = (
+      <div className="flex h-full w-full flex-col items-center justify-center gap-7">
+        <LoadingSpinner isShowing={true} message="Generating image..." />
+      </div>
+    );
+  } else if (
+    generationState.loadingState === GenerationLoadingState.GENERATED &&
+    generationState.imageB64
+  ) {
+    imgBoxContent = (
+      <img
+        src={ensureBase64Prefix(generationState.imageB64)}
+        alt="Generated Image"
+        className="h-full w-full object-contain"
+      />
+    );
+  }
+
+  return (
+    <>
+      <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center">
+        <div className="aspect-[1/1] w-[min(80vw,68vh)] overflow-clip rounded-t-lg bg-[#29292D]/60">
+          {imgBoxContent}
+        </div>
+        <div className="mb-16 flex w-[min(80vw,68vh)] rounded-b-lg bg-[#29292D]">
+          <span className="p-3.5 text-sm opacity-50">
+            {generationState.prompt || "No prompt provided"}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/realtime/src/KonvaApp/EditEngine.ts

@@ -0,0 +1,365 @@
+import Konva from "konva";
+
+import { uiAccess } from "~/signals";
+import { CommandManager, MatteBox } from "./EngineUtitlities";
+import { ImageNode } from "./Nodes";
+import { PaintNode } from "./Nodes/PaintNode";
+import {
+  NodesManager,
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+  NodeTransformer,
+  SelectionManager,
+  SelectionManagerEvents,
+  SelectorSquare,
+} from "./NodesManagers";
+import { UndoStackManager } from "./UndoRedo";
+
+import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
+import { EditModes, VideoResolutions } from "./constants";
+
+import { ToolbarNodeButtonNames } from "~/components/features/ToolbarNode/enums";
+
+import { RealTimeDrawEngine } from "./RenderingPrimitives/RealTimeDrawEngine";
+
+export interface RenderingOptions {
+  artstyle: string;
+  positivePrompt: string;
+  negativePrompt: string;
+  cinematic: boolean;
+  enginePreProcessing: boolean;
+  faceDetail: boolean;
+  lipSync: boolean;
+  upscale: boolean;
+  styleStrength: number;
+}
+
+export class EditEngine {
+  private editMode: EditModes = EditModes.SELECT;
+  private boardCanvasRef: HTMLDivElement;
+  private stage: Konva.Stage;
+  private bgLayer: Konva.Layer;
+  private mediaLayer: Konva.Layer;
+  private nodeIsolationLayer: Konva.Layer;
+  private uiLayer: Konva.Layer;
+  private offScreenCanvas: OffscreenCanvas;
+  private realTimeDrawEngine: RealTimeDrawEngine;
+  private nodesManager: NodesManager;
+  private nodeTransformer: NodeTransformer;
+  private selectionManager: SelectionManager;
+  private selectorSquare: SelectorSquare;
+  private matteBox: MatteBox;
+
+  private undoStackManager: UndoStackManager;
+  private commandManager: CommandManager;
+
+  public segmentationButtonCanBePressed: boolean = true;
+  // signal reference
+  constructor(boardCanvasRef: HTMLDivElement) {
+    if (import.meta.env.DEV) {
+      console.log("Engine Created");
+    }
+    this.editMode = EditModes.SELECT;
+
+    this.boardCanvasRef = boardCanvasRef;
+    this.stage = new Konva.Stage({
+      container: this.boardCanvasRef,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    this.bgLayer = new Konva.Layer();
+
+    this.mediaLayer = new Konva.Layer();
+
+    this.nodeIsolationLayer = new Konva.Layer();
+    this.uiLayer = new Konva.Layer();
+
+    this.stage.add(this.bgLayer);
+    this.stage.add(this.mediaLayer);
+    this.stage.add(this.nodeIsolationLayer);
+    this.stage.add(this.uiLayer);
+
+    // Konva Transformer
+    this.nodeTransformer = new NodeTransformer();
+    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
+
+    // core layer for all the work done.
+    this.offScreenCanvas = new OffscreenCanvas(0, 0);
+
+    // Collection of all Nodes
+    this.nodesManager = new NodesManager();
+    // Partial Collection of selected Nodes
+    this.selectionManager = new SelectionManager({
+      nodeTransformerRef: this.nodeTransformer,
+      mediaLayerRef: this.mediaLayer,
+    });
+
+    this.realTimeDrawEngine = new RealTimeDrawEngine({
+      width: VideoResolutions.SQUARE_1024.width,
+      height: VideoResolutions.SQUARE_1024.height,
+      mediaLayerRef: this.mediaLayer,
+      offScreenCanvas: this.offScreenCanvas,
+      onDraw: async (canvas, lineBounds) => {
+        await this.addPaintNode(canvas, lineBounds);
+      },
+    });
+
+    // Selector Square to select Nodes
+    this.selectorSquare = new SelectorSquare({
+      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      stageRef: this.stage,
+    });
+    this.uiLayer.add(this.selectorSquare.getKonvaNode());
+
+    //Collection of commands for undo-redo
+    this.undoStackManager = new UndoStackManager(() => {
+      this.realTimeDrawEngine.render();
+    });
+    this.commandManager = new CommandManager({
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      nodeTransformerRef: this.nodeTransformer,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+      undoStackManagerRef: this.undoStackManager,
+    });
+
+    this.matteBox = new MatteBox({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.clientWidth,
+        height: this.boardCanvasRef.clientHeight,
+      },
+      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
+      uiLayerRef: this.uiLayer,
+    });
+
+    // some of the managers has events
+    // hence, lastly, setup these events
+    this.setupEventSystem();
+    this.setEditMode(this.editMode);
+  }
+
+  private setEditMode(newEditMode: EditModes) {
+    this.editMode = newEditMode;
+    switch (this.editMode) {
+      case EditModes.SELECT:
+      default: {
+        console.log("EDITMODE: SELECT");
+        this.realTimeDrawEngine.disablePaintMode();
+
+        this.selectorSquare.enable();
+        this.selectionManager.enable();
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: true,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: false,
+        });
+        this.matteBox.disable();
+        document.body.style.cursor = "default";
+        return;
+      }
+      case EditModes.EDIT: {
+        console.log("EDITMODE: EDIT");
+        this.realTimeDrawEngine.enablePaintMode();
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+      }
+    }
+  }
+  private setupEventSystem() {
+    // Listen to changes in container size
+    const resizeObserver = new ResizeObserver(() => {
+      this.onBoardCanvasResize();
+    });
+    resizeObserver.observe(this.boardCanvasRef);
+    this.onBoardCanvasResize();
+
+    // Listen to Nodes
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSLATIONS,
+      ((event: CustomEvent<NodesTranslationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.translateNodes(event.detail);
+      }) as EventListener,
+    );
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSFORMATION,
+      ((event: CustomEvent<NodeTransformationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.transformNodes(event.detail);
+      }) as EventListener,
+    );
+
+    // Listen to Toolbar Main
+    // uiEvents.toolbarMain.UNDO.onClick(() => {
+    //   this.undoStackManager.undo();
+    // });
+    // uiEvents.toolbarMain.REDO.onClick(() => {
+    //   this.undoStackManager.redo();
+    //   this.realTimeDrawEngine.render();
+    // });
+
+    // uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
+    //   await this.realTimeDrawEngine.saveOutput();
+    // });
+
+    // uiEvents.toolbarMain.SELECT.onClick(() => {
+    //   console.log("Toolbar Main >> Select");
+    //   this.setAppMode(AppModes.SELECT);
+    // });
+
+    // uiEvents.toolbarMain.PAINT.onClick(() => {
+    //   console.log("Toolbar Main >> Paint");
+    //   this.setAppMode(AppModes.PAINT);
+    // });
+  }
+
+  disableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
+    }
+  }
+
+  async enableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
+    }
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  private onBoardCanvasResize() {
+    this.realTimeDrawEngine.updateCaptureCanvas(undefined, undefined);
+    this.matteBox.updateSize({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.offsetWidth,
+        height: this.boardCanvasRef.offsetHeight,
+      },
+    });
+    this.uiLayer.draw();
+    this.stage.width(this.boardCanvasRef.offsetWidth);
+    this.stage.height(this.boardCanvasRef.offsetHeight);
+    this.stage.draw(); // Redraw the canvas
+  }
+
+  // Sandbox is quickly a way to test your idea.
+  public async sandbox() {}
+
+  public onMessage(event: MessageEvent) {
+    console.log("Message From Shared Worker");
+    console.log(event);
+  }
+
+  public initializeStage() {
+    // load canvas that was originaly saved TODO Save manager for resharing.
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+    this.setupStage();
+  }
+
+  public isInitialized() {
+    return this.stage !== null;
+  }
+
+  public async setupStage() {
+    // Frame rate inicator
+    const textNode = new Konva.Text({
+      x: 10,
+      y: 80,
+      text: "",
+      fontSize: 18,
+      fontFamily: "Source Sans 3",
+      fill: "white",
+    });
+    const anim = new Konva.Animation((frame) => {
+      if (frame && import.meta.env.DEV) {
+        const timeDiff = frame.timeDiff;
+        const frameRate = frame.frameRate;
+        textNode.setText(
+          `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
+        );
+      }
+    }, this.mediaLayer);
+
+    anim.start();
+    this.uiLayer.add(textNode);
+    this.addKeyboardShortcuts();
+  }
+
+  public addImage(imageFile: File) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageFile: imageFile,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageBitmap: imageBitmap,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addPaintNode(
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) {
+    var node = new PaintNode({
+      canvasElement: canvas,
+      lineBounds: lineBounds,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+      },
+    });
+    this.commandManager.createNode(node);
+  }
+  // Events for Undo and Redo
+  private addKeyboardShortcuts() {
+    window.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.key === "z") {
+        this.undoStackManager.undo();
+      } else if (
+        (event.ctrlKey && event.key === "y") ||
+        (event.ctrlKey && event.shiftKey && event.key === "Z")
+      ) {
+        this.undoStackManager.redo();
+      } else if (event.key === "Delete") {
+        this.commandManager.deleteNodes();
+      }
+    });
+  }
+}

frontend/realtime/src/KonvaApp/EngineUtitlities/Base64Helpers.ts

@@ -0,0 +1,7 @@
+const ensureBase64Prefix = (base64String: string) => {
+    return base64String.startsWith("data:")
+      ? base64String
+      : `data:image/png;base64,${base64String}`;
+}
+
+export { ensureBase64Prefix };

frontend/realtime/src/KonvaApp/GenerationEngine.ts

@@ -0,0 +1,46 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  cancelGeneration,
+  finishGeneration,
+  onStartGeneration,
+} from "~/signals/generation/generationSignals";
+
+export class GenerationEngine {
+  private isGenerating = false;
+
+  constructor() {
+    console.log("GenerationEngine constructor");
+    this.attachEventListeners();
+  }
+
+  private attachEventListeners() {
+    onStartGeneration((prompt) => {
+      this.invokeGeneration(prompt);
+    });
+  }
+
+  private async invokeGeneration(prompt: string) {
+    if (this.isGenerating) {
+      return;
+    }
+
+    this.isGenerating = true;
+    console.log("Invoking generation for prompt:", prompt);
+
+    try {
+      const base64BitmapResponse = await invoke("text_to_image", {
+        prompt: prompt,
+      });
+
+      console.log("Generation finished with response:", base64BitmapResponse);
+
+      const base64string = base64BitmapResponse as string;
+      finishGeneration(base64string);
+    } catch (error) {
+      console.error("Error during image processing:", error);
+      cancelGeneration();
+    } finally {
+      this.isGenerating = false;
+    }
+  }
+}

frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -25,6 +25,7 @@ import {
   isLoadingVisible,
   loadingProgress,
 } from "~/signals/uiEvents/loadingIndicator";
+import { ensureBase64Prefix } from "../EngineUtitlities/Base64Helpers";
 import {DecodeBase64ToImage} from "~/utilities/DecodeBase64ToImage.ts";
 
 interface ServerSettings {

frontend/realtime/src/KonvaApp/constants.ts

@@ -7,6 +7,11 @@ export enum AppModes {
   RENDERING = "RENDERING",
 }
 
+export enum EditModes {
+  SELECT = "SELECT",
+  EDIT = "EDIT",
+}
+
 export const VideoResolutions = {
   VERTICAL_720: { width: 720, height: 1280 },
   LANDSCAPE_720: { width: 1280, height: 720 },

frontend/realtime/src/KonvaApp/index.ts

@@ -1,4 +1,5 @@
 // to do fix https://codesandbox.io/p/sandbox/react-konva-infinite-grid-kkndq?file=%2Fsrc%2Findex.js the dotted background doesn't move when draggable.
+import { EditEngine } from "./EditEngine";
 import { Engine } from "./Engine";
 import { EngineOptions } from "./types";
 export { Engine as EngineType };
@@ -8,3 +9,9 @@ export const KonvaApp = (element: HTMLDivElement, options: EngineOptions) => {
   engine.initializeStage(options.sceneToken);
   return engine;
 };
+
+export const KonvaEditModeApp = (element: HTMLDivElement) => {
+  const engine = new EditEngine(element);
+  engine.initializeStage();
+  return engine;
+};

frontend/realtime/src/app/pages/main/index.tsx

@@ -10,6 +10,13 @@ import { KonvaRootComponent } from "~/KonvaRootComponent";
 import { ToolbarTopLeft } from "~/components/features/ToolbarTopLeft";
 import { ToolbarTopRight } from "~/components/features/ToolbarTopRight";
 import { ToolbarTopCenter } from "~/components/features/ToolbarTopCenter";
+import { appMode } from "~/signals";
+import { useSignals } from "@preact/signals-react/runtime";
+import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
+import { EditModeRootComponent } from "~/EditModeRootComponent/EditModeRootComponent";
+import { useRef } from "react";
+import { EngineType } from "~/KonvaApp";
+import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -19,12 +26,41 @@ export const Main = withProtectionRoute(() => {
   if (import.meta.env.DEV && sceneToken === "debug") {
     sceneToken = "m_p8nkry6m5j22w586xyex0w4a4pznbx";
   }
+
+  useSignals();
+
+  const realtimeEngineRef = useRef<EngineType | null>(null);
+  const generationEngineRef = useRef<GenerationEngine | null>(null);
+
+  const appModeValue = appMode.value;
+  let childView;
+
+  switch (appModeValue) {
+    case "edit":
+      childView = (
+        <EditModeRootComponent className="col-span-12 col-start-1 row-span-12 row-start-1" />
+      );
+      break;
+    case "generate":
+      childView = (
+        <GenerationRootComponent generationEngineRef={generationEngineRef} />
+      );
+      break;
+    case "realtime":
+    default:
+      childView = (
+        <KonvaRootComponent
+          sceneToken={sceneToken}
+          className="col-span-12 col-start-1 row-span-12 row-start-1"
+        />
+      );
+
+      break;
+  }
+
   return (
     <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
-      <KonvaRootComponent
-        sceneToken={sceneToken}
-        className="col-span-12 col-start-1 row-span-12 row-start-1"
-      />
+      {childView}
       <div className="absolute top-0 w-full p-3.5">
         <div className="relative flex w-full">
           <div className="absolute left-0">

frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx

@@ -1,7 +1,12 @@
 import { twMerge } from "tailwind-merge";
 import { TabSelector, TabItem } from "~/components/ui/TabSelector";
 import { useComputed } from "@preact/signals-react";
-import { appMode, dispatchUiEvents } from "~/signals";
+import {
+  appMode,
+  dispatchUiEvents,
+  GenerationLoadingState,
+  generationSignal,
+} from "~/signals";
 
 // import { paperWrapperStyles } from "~/components/styles";
 // import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
@@ -12,21 +17,26 @@ export const ToolbarTopLeft = () => {
   const activeTab = useComputed(() => appMode.value);
 
   const tabs: TabItem[] = [
-    { id: "image", label: "Image" },
+    { id: "realtime", label: "Realtime" },
     { id: "edit", label: "Edit" },
+    { id: "generate", label: "Generate" },
     // { id: "video", label: "Video" },
   ];
 
   const handleTabChange = (tabId: string) => {
     // Update the global signal
-    dispatchUiEvents.changeAppMode(tabId as "image" | "edit");
+    dispatchUiEvents.changeAppMode(tabId as "realtime" | "edit" | "generate");
   };
 
+  const generationState = generationSignal.value;
+
   console.log(appMode.value);
 
   return (
     <div
-      className={twMerge("z-20 flex h-fit w-fit items-center gap-8 pl-1 pr-4")}
+      className={twMerge(
+        "relative z-50 flex h-fit w-fit items-center gap-8 pl-1 pr-4",
+      )}
     >
       <img
         src="/brand/mira-logo.png"
@@ -38,6 +48,9 @@ export const ToolbarTopLeft = () => {
         tabs={tabs}
         activeTab={activeTab.value}
         onTabChange={handleTabChange}
+        disabled={
+          generationState.loadingState === GenerationLoadingState.GENERATING
+        }
       />
 
       {/* <ToolbarButton icon={faPlus}>

frontend/realtime/src/components/features/ToolbarTopRight/index.tsx

@@ -22,7 +22,9 @@ export const ToolbarTopRight = () => {
   const [aspectRatio, setAspectRatio] = useState("1:1");
 
   return (
-    <div className={twMerge("z-20 flex h-fit w-fit items-center gap-2")}>
+    <div
+      className={twMerge("relative z-50 flex h-fit w-fit items-center gap-2")}
+    >
       {import.meta.env.DEV && ( // only show in dev mode for now
         <ToggleButton
           label="Ratio"

frontend/realtime/src/components/ui/TabSelector.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 import { Tab, TabGroup, TabList } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
+import { Tooltip } from "./Tooltip";
 
 export interface TabItem {
   id: string;
@@ -12,6 +13,8 @@ interface TabSelectorProps {
   activeTab: string;
   onTabChange: (tabId: string) => void;
   className?: string;
+  disabled?: boolean;
+  disabledMessage?: string;
 }
 
 export const TabSelector: React.FC<TabSelectorProps> = ({
@@ -19,6 +22,8 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
   activeTab,
   onTabChange,
   className,
+  disabled,
+  disabledMessage,
 }) => {
   // Find the index of the active tab
   const selectedIndex = tabs.findIndex((tab) => tab.id === activeTab);
@@ -46,13 +51,17 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
     }
   }, [selectedIndex, tabs]);
 
-  return (
+  const TabGroupElement = (
     <TabGroup
       selectedIndex={selectedIndex}
       onChange={handleTabChange}
-      className={twMerge("w-full", className)}
+      className={twMerge(
+        "w-full",
+        className,
+        disabled ? "cursor-not-allowed opacity-60" : "",
+      )}
     >
-      <TabList className="glass relative inline-flex min-w-fit overflow-x-auto rounded-lg p-1 shadow-lg">
+      <TabList className="glass relative inline-flex min-w-fit overflow-x-auto rounded-lg p-0.5 py-1 shadow-lg">
         {/* Animated indicator */}
         <div
           className="absolute top-1 z-10 h-[calc(100%-8px)] rounded-md border-2 border-primary bg-primary/30 transition-all duration-200 ease-in-out"
@@ -66,10 +75,12 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
           <Tab
             key={tab.id}
             ref={(el) => (tabsRef.current[index] = el)}
+            disabled={disabled}
             className={({ selected }) =>
               twMerge(
                 "relative z-20 mx-0.5 min-w-max rounded-md border-2 border-transparent px-4 py-0.5 text-center font-semibold transition-all duration-200 ease-in-out",
                 selected ? "text-white" : "text-gray-300 hover:text-white",
+                disabled ? "cursor-not-allowed opacity-60" : "",
               )
             }
           >
@@ -79,4 +90,18 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
       </TabList>
     </TabGroup>
   );
+
+  return (
+    <>
+      {disabled && (
+        <Tooltip
+          tip={disabledMessage ?? "Cannot change tab. Generation in progress."}
+          position="bottom"
+        >
+          {TabGroupElement}
+        </Tooltip>
+      )}
+      {!disabled && TabGroupElement}
+    </>
+  );
 };

frontend/realtime/src/signals/generation/generationSignals.ts

@@ -0,0 +1,50 @@
+import { effect, signal } from "@preact/signals-react";
+
+export enum GenerationLoadingState {
+  INIT,
+  GENERATING,
+  GENERATED,
+}
+
+const initValue = { loadingState: GenerationLoadingState.INIT, prompt: "" };
+
+export const generationSignal = signal<{
+  loadingState: GenerationLoadingState;
+  prompt: string;
+  imageB64?: string;
+}>(initValue);
+
+export const startGeneration = (prompt: string) => {
+  generationSignal.value = {
+    loadingState: GenerationLoadingState.GENERATING,
+    prompt,
+    imageB64: undefined,
+  };
+};
+
+export const onStartGeneration = (callback: (prompt: string) => void) => {
+  effect(() => {
+    // If value just changed to GENERATING, notify the listeners
+    if (
+      generationSignal.value.loadingState === GenerationLoadingState.GENERATING
+    ) {
+      callback(generationSignal.value.prompt);
+    }
+  });
+};
+
+export const finishGeneration = (imageB64: string) => {
+  generationSignal.value = {
+    loadingState: GenerationLoadingState.GENERATED,
+    prompt: generationSignal.value.prompt,
+    imageB64,
+  };
+};
+
+export const cancelGeneration = () => {
+  if (
+    generationSignal.value.loadingState === GenerationLoadingState.GENERATING
+  ) {
+    generationSignal.value = initValue;
+  }
+};

frontend/realtime/src/signals/generation/index.ts

@@ -0,0 +1 @@
+export * from "./generationSignals";

frontend/realtime/src/signals/index.ts

@@ -1,3 +1,4 @@
 export * from "./authentication";
 export * from "./uiAccess";
 export * from "./uiEvents";
+export * from "./generation";

frontend/realtime/src/signals/uiEvents/appMode.ts

@@ -3,10 +3,10 @@ import { signal, effect } from "@preact/signals-core";
 // this is to control the app mode - BFlat
 
 // Define the app mode types
-export type AppModeType = "image" | "edit";
+export type AppModeType = "realtime" | "edit" | "generate";
 
 // Create a signal for the current app mode
-export const appMode = signal<AppModeType>("image");
+export const appMode = signal<AppModeType>("realtime");
 
 // Create a function to change the app mode
 export const changeAppMode = (mode: AppModeType) => {

frontend/realtime/yarn.lock

@@ -200,6 +200,14 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@devnomic/marquee@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@devnomic/marquee/-/marquee-1.0.3.tgz"
+  integrity sha512-q8QUtNO8ff+UvfrKJsHBtxh4fbOfhGk6SSdK0Uu/XZFdEzrmiGJ/l0FuVHRYsPAmzgnhVVnz1dGNB5CWGLMVvw==
+  dependencies:
+    clsx "^2.1.0"
+    tailwind-merge "^2.2.0"
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz"
@@ -222,11 +230,6 @@
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@esbuild/win32-x64@0.21.5":
-  version "0.21.5"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz"
-  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -741,10 +744,10 @@
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz"
   integrity sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==
 
-"@rollup/rollup-win32-x64-msvc@4.24.0":
+"@rollup/rollup-darwin-arm64@4.24.0":
   version "4.24.0"
-  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz"
-  integrity sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz"
+  integrity sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==
 
 "@sigstore/bundle@^2.3.2":
   version "2.3.2"
@@ -816,10 +819,10 @@
   resolved "https://registry.npmjs.org/@tauri-apps/api/-/api-2.2.0.tgz"
   integrity sha512-R8epOeZl1eJEl603aUMIGb4RXlhPjpgxbGVEaqY+0G5JG9vzV/clNlzTeqc+NLYXVqXcn8mb4c5b9pJIUDEyAg==
 
-"@tauri-apps/cli-win32-x64-msvc@2.2.7":
+"@tauri-apps/cli-darwin-arm64@2.2.7":
   version "2.2.7"
-  resolved "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.2.7.tgz"
-  integrity sha512-ZB8Kw90j8Ld+9tCWyD2fWCYfIrzbQohJ4DJSidNwbnehlZzP7wAz6Z3xjsvUdKtQ3ibtfoeTqVInzCCEpI+pWg==
+  resolved "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.2.7.tgz"
+  integrity sha512-54kcpxZ3X1Rq+pPTzk3iIcjEVY4yv493uRx/80rLoAA95vAC0c//31Whz75UVddDjJfZvXlXZ3uSZ+bnCOnt0A==
 
 "@tauri-apps/cli@^2.2.7":
   version "2.2.7"
@@ -910,14 +913,14 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
-"@types/react-dom@^18.3.0":
+"@types/react-dom@^18.2.18", "@types/react-dom@^18.3.0":
   version "18.3.0"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz"
   integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.3.3":
+"@types/react@*", "@types/react@^18.2.47", "@types/react@^18.3.3":
   version "18.3.4"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz"
   integrity sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==
@@ -1416,7 +1419,7 @@ cli-columns@^4.0.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -2082,6 +2085,11 @@ fs-minipass@^3.0.0, fs-minipass@^3.0.3:
   dependencies:
     minipass "^7.0.3"
 
+fsevents@~2.3.2, fsevents@~2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -3635,7 +3643,7 @@ react-colorful@^5.6.1:
   resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.4.0, react-dom@>=16.8, react-dom@>=16.8.0:
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18, react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^18.2.0, react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.4.0, react-dom@>=16.8, react-dom@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -3684,7 +3692,7 @@ react-router@6.26.1:
   dependencies:
     "@remix-run/router" "1.19.1"
 
-"react@^16.14.0 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18.3.1, "react@>= 16.8.0", react@>=16.3, react@>=16.4.0, react@>=16.8, react@>=16.8.0:
+"react@^16.14.0 || 17.x || 18.x", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", react@^18, react@^18.0.0, "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18.2.0, react@^18.3.1, "react@>= 16.8.0", react@>=16.3, react@>=16.4.0, react@>=16.8, react@>=16.8.0:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -4180,7 +4188,7 @@ tabbable@^6.0.0:
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
-tailwind-merge@^2.5.2:
+tailwind-merge@^2.2.0, tailwind-merge@^2.5.2:
   version "2.5.2"
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz"
   integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==