read tokens from headers, cleanup

status: "{\n  \"error\": {\n    \"message\": \"The server had an error
processing your request. Sorry about that! You can retry your request,
or contact us through our help center at help.openai.com if you keep
seeing this error. (Please include the request ID
56ac473cef75ea7860620b8e207057a5 in your email.)\",\n    \"type\":
\"server_error\",\n    \"param\": null,\n    \"code\": null\n  }\n}"

crates/lib/api_clients/cloud_storage/src/bucket_client.rs

@@ -234,31 +234,17 @@ impl BucketClient {
       .map(|s| s.to_string())
       .ok_or(anyhow!("could not convert object path to string"))?;
 
-    info!("creating file for bucket download: {:?}", filesystem_path.as_ref());
+    info!("downloading from bucket: {:?}", &object_path_str);
 
-    let mut output_file = File::create(filesystem_path).await?;
+    let mut output_file = tokio::fs::File::create(filesystem_path).await?;
 
-    let result = self.bucket.get_object_to_writer(&object_path_str, &mut output_file).await;
-
-    info!("downloading from bucket (named '{}'), path: {}", &self.bucket.name, &object_path_str);
-
-    let status_code = match result {
-      Ok(status_code) => status_code,
-      Err(err) => {
-        return bail!("Error downloading from bucket (named '{}'): {:?}", &self.bucket.name, err)
-      }
-    };
+    let status_code = self.bucket.get_object_to_writer(&object_path_str, &mut output_file).await?;
 
     match status_code {
-      404 => {
-        error!("File not found in bucket (named '{}'), path: {}", &self.bucket.name, &object_path_str);
-        bail!("File not found in bucket: {}", &object_path_str)
-      },
-      _ => {
-        info!("download code: {}", status_code);
-      },
+      404 => bail!("File not found in bucket: {}", &object_path_str),
+      _ => {},
     }
-
+    info!("download code: {}", status_code);
     Ok(())
   }
 }

crates/service/web/storyteller_web/src/http_server/endpoints/control_plane/mod.rs

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

crates/service/web/storyteller_web/src/http_server/endpoints/control_plane/set_sora_secret_handler.rs

@@ -1,137 +0,0 @@
-use std::fmt;
-use std::sync::Arc;
-
-use actix_web::{HttpRequest, HttpResponse, web, Either};
-use actix_web::error::ResponseError;
-use actix_web::http::StatusCode;
-use actix_web::web::{Form, Json, Path};
-use anyhow::anyhow;
-use log::{error, log, warn};
-use r2d2_redis::redis::Commands;
-use utoipa::ToSchema;
-
-use enums::by_table::media_files::media_file_animation_type::MediaFileAnimationType;
-use enums::by_table::media_files::media_file_engine_category::MediaFileEngineCategory;
-use http_server_common::response::serialize_as_json_error::serialize_as_json_error;
-use mysql_queries::queries::media_files::edit::update_media_file_animation_type::update_media_file_animation_type;
-use mysql_queries::queries::media_files::get::get_media_file::get_media_file;
-use tokens::tokens::media_files::MediaFileToken;
-
-use crate::state::server_state::ServerState;
-use crate::util::redis_sora_secrets::get_sora_credentials;
-use crate::util::redis_sora_secrets::set_sora_credential_field;
-use crate::util::redis_sora_secrets::RedisSoraCredentialSubkey;
-
-#[derive(Deserialize, Clone, Copy)]
-#[serde(rename_all = "snake_case")]
-pub enum SetSoraSecretType {
-  Bearer,
-  Cookie,
-  Sentinel
-}
-
-#[derive(Deserialize, ToSchema)]
-pub struct SetSoraSecretRequest {
-  pub key: SetSoraSecretType,
-  pub value: String,
-}
-
-#[derive(Serialize, ToSchema)]
-pub struct SetSoraSecretSuccessResponse {
-  pub success: bool,
-  pub bearer: String,
-  pub cookie: String,
-  pub sentinel: String,
-}
-
-// =============== Error Response ===============
-
-#[derive(Debug, Serialize, ToSchema)]
-pub enum SetSoraSecretError {
-  BadInput(String),
-  NotAuthorized,
-  ServerError,
-}
-
-impl ResponseError for SetSoraSecretError {
-  fn status_code(&self) -> StatusCode {
-    match *self {
-      SetSoraSecretError::BadInput(_) => StatusCode::BAD_REQUEST,
-      SetSoraSecretError::NotAuthorized => StatusCode::UNAUTHORIZED,
-      SetSoraSecretError::ServerError => StatusCode::INTERNAL_SERVER_ERROR,
-    }
-  }
-
-  fn error_response(&self) -> HttpResponse {
-    serialize_as_json_error(self)
-  }
-}
-
-// NB: Not using derive_more::Display since Clion doesn't understand it.
-impl fmt::Display for SetSoraSecretError {
-  fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-    write!(f, "{:?}", self)
-  }
-}
-
-// =============== Handler ===============
-
-/// Set a Sora secret
-#[utoipa::path(
-  post,
-  tag = "Control Plane",
-  path = "/v1/control_plane/sora_secret",
-  responses(
-        (status = 200, description = "Success", body = SetSoraSecretSuccessResponse),
-        (status = 400, description = "Bad input", body = SetSoraSecretError),
-        (status = 401, description = "Not authorized", body = SetSoraSecretError),
-        (status = 500, description = "Server error", body = SetSoraSecretError),
-  ),
-  params(
-        ("request" = SetSoraSecretRequest, description = "Payload for Request"),
-        ("path" = MediaFileTokenPathInfo, description = "Path for Request")
-  )
-)]
-pub async fn set_sora_secret_handler(
-  http_request: HttpRequest,
-  request: Form<SetSoraSecretRequest>,
-  server_state: web::Data<Arc<ServerState>>
-) -> Result<Json<SetSoraSecretSuccessResponse>, SetSoraSecretError> {
-
-  // TODO(bt,2025-04-03): Some form of authentication should be required for this endpoint.
-  let value = request.value.trim().to_string();
-
-  let mut redis = server_state.redis_pool
-      .get()
-      .map_err(|e| {
-        error!("redis error: {:?}", e);
-        SetSoraSecretError::ServerError
-      })?;
-
-  set_sora_credential_field(
-    &mut redis,
-    match request.key {
-      SetSoraSecretType::Bearer => RedisSoraCredentialSubkey::Bearer,
-      SetSoraSecretType::Cookie => RedisSoraCredentialSubkey::Cookie,
-      SetSoraSecretType::Sentinel => RedisSoraCredentialSubkey::Sentinel,
-    },
-    &value
-  ).map_err(|e| {
-    error!("redis error: {:?}", e);
-    SetSoraSecretError::ServerError
-  })?;
-
-  let credentials = get_sora_credentials(&mut redis)
-      .map_err(|e| {
-        error!("redis error: {:?}", e);
-        SetSoraSecretError::ServerError
-      })?;
-
-  // TODO(bt,2025-04-03): Probably not smart to return, but useful for debugging.
-  Ok(Json(SetSoraSecretSuccessResponse {
-    success: true,
-    bearer: credentials.bearer_token,
-    cookie: credentials.cookie,
-    sentinel: credentials.sentinel.unwrap_or_else(|| "".to_string()),
-  }))
-}

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/get_sora_credentials_from_request.rs

@@ -1,68 +0,0 @@
-use actix_web::HttpRequest;
-use anyhow::anyhow;
-use log::{error, info};
-use r2d2_redis::r2d2::PooledConnection;
-use r2d2_redis::RedisConnectionManager;
-use errors::AnyhowResult;
-use http_server_common::request::get_request_header_optional::get_request_header_optional;
-use openai_sora_client::credentials::SoraCredentials;
-use crate::util::redis_sora_secrets::get_sora_credentials;
-
-const SORA_BEARER_HEADER_NAME : &str = "sora-bearer";
-const SORA_COOKIE_HEADER_NAME : &str = "sora-cookie";
-const SORA_SENTINEL_HEADER_NAME : &str = "sora-sentinel";
-
-pub fn get_sora_credentials_from_request(
-  http_request: &HttpRequest,
-  redis: &mut PooledConnection<RedisConnectionManager>,
-) -> AnyhowResult<SoraCredentials> {
-
-  let sora_bearer = get_request_header_optional(&http_request, SORA_BEARER_HEADER_NAME);
-  let sora_cookie = get_request_header_optional(&http_request, SORA_COOKIE_HEADER_NAME);
-  let sora_sentinel = get_request_header_optional(&http_request, SORA_SENTINEL_HEADER_NAME);
-
-  match (&sora_bearer, &sora_cookie, &sora_sentinel) {
-    (Some(bearer), Some(cookie), Some(sentinel)) => {
-      info!("Sora credentials were present in HTTP request headers!");
-
-      return Ok(SoraCredentials {
-        bearer_token: bearer.to_string(),
-        cookie: cookie.to_string(),
-        sentinel: Some(sentinel.to_string()),
-      });
-    }
-    _ => {} // Fall through
-  }
-
-  let redis_result = get_sora_credentials(redis);
-
-  match redis_result {
-    Ok(mut credentials) => {
-      if let Some(bearer) = sora_bearer {
-        info!("override bearer value");
-        credentials.bearer_token = bearer;
-      }
-      if let Some(cookie) = sora_cookie {
-        info!("override cookie value");
-        credentials.cookie = cookie;
-      }
-      if let Some(sentinel) = sora_sentinel {
-        info!("override sentinel value");
-        credentials.sentinel = Some(sentinel);
-      }
-      return Ok(credentials)
-    },
-    Err(err) => {
-      error!("Failed to get Sora credentials from Redis; using env as backup. Error: {:?}", err);
-      // NB: Fall through
-    }
-  };
-
-  match SoraCredentials::from_env() {
-    Ok(creds) => Ok(creds),
-    Err(err) => {
-      error!("Failed to load Sora credentials from environment: {:?}", err);
-      Err(anyhow!("Failed to load Sora credentials from environment"))
-    }
-  }
-}

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/mod.rs

@@ -1,3 +1,2 @@
 pub mod upload;
-pub mod prompt;
-pub mod get_sora_credentials_from_request;
+pub mod prompt;

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/prompt/enqueue_studio_image_generation_handler.rs

@@ -11,14 +11,13 @@ use actix_web::web::Json;
 use actix_web::{web, HttpRequest, HttpResponse};
 use bucket_paths::legacy::typified_paths::public::media_files::bucket_file_path::MediaFileBucketPath;
 use cloud_storage::bucket_client::BucketClient;
-use log::{debug, error, info};
+use log::{debug, error};
 use log::warn;
 use mysql_queries::queries::media_files::get::get_media_file::get_media_file;
 use openai_sora_client::credentials::SoraCredentials;
 use serde::Deserialize;
 use serde::Serialize;
 use sqlx::MySqlPool;
-use tempdir::TempDir;
 use utoipa::ToSchema;
 use web::Data;
 
@@ -48,13 +47,10 @@ use tokens::tokens::model_weights::ModelWeightToken;
 use tokens::tokens::users::UserToken;
 
 use crate::configs::plans::get_correct_plan_for_session::get_correct_plan_for_session;
-use crate::http_server::endpoints::image_studio::get_sora_credentials_from_request::get_sora_credentials_from_request;
-use crate::http_server::endpoints::tts::get_tts_inference_job_status::GetTtsInferenceStatusError;
 use crate::http_server::validations::validate_idempotency_token_format::validate_idempotency_token_format;
 use crate::http_server::web_utils::response_error_helpers::to_simple_json_error;
 use crate::state::server_state::ServerState;
 use crate::util::allowed_studio_access::allowed_studio_access;
-use crate::util::redis_sora_secrets::get_sora_credentials;
 
 /// This is the number of images (batch size) to generate for each request.
 /// We should allow all users to have multiple images generated at once as this
@@ -72,6 +68,10 @@ const DEBUG_HEADER_NAME: &str = "enable-debug-mode";
 /// This is useful for catching the live logs or intercepting the job.
 const ROUTING_TAG_HEADER_NAME: &str = "routing-tag";
 
+const SORA_BEARER_HEADER_NAME : &str = "sora-bearer";
+const SORA_COOKIE_HEADER_NAME : &str = "sora-cookie";
+const SORA_SENTINEL_HEADER_NAME : &str = "sora-sentinel";
+
 #[derive(Deserialize, ToSchema)]
 pub struct EnqueueStudioImageGenRequest {
   pub uuid_idempotency_token: String,
@@ -195,6 +195,7 @@ pub async fn enqueue_studio_image_generation_handler(
     |routing_tag| routing_tag.trim().to_string()
   );
 
+
   // ==================== BANNED USERS ==================== //
 
   if let Some(ref user) = maybe_user_session {
@@ -219,6 +220,7 @@ pub async fn enqueue_studio_image_generation_handler(
   // Get up IP address
   let ip_address = get_request_ip(&http_request);
 
+
   // ==================== HANDLE IDEMPOTENCY ==================== //
 
   if let Err(reason) = validate_idempotency_token_format(&request.uuid_idempotency_token) {
@@ -237,14 +239,17 @@ pub async fn enqueue_studio_image_generation_handler(
   // TODO: Maybe this moves to a job.
 
   let work_temp_dir = server_state.temp_dir_creator.new_tempdir("image_studio").unwrap();
-
   let public_bucket_client = server_state.public_bucket_client.clone();
+  let private_bucket_client = server_state.private_bucket_client.clone();
 
   let scene_media_token = request.snapshot_media_token.clone();
+  let scene_media_name = scene_media_token.to_string();
+  let scene_media_path = work_temp_dir.path().join(scene_media_name.clone());
 
-  let scene_media_path = query_and_download_media_file(
+  let scene_media_path = do_download_media_file(
+    &scene_media_name,
     &scene_media_token,
-    &work_temp_dir,
+    &scene_media_path,
     &public_bucket_client,
     &server_state.mysql_pool
   ).await.map_err(|err| {
@@ -260,9 +265,13 @@ pub async fn enqueue_studio_image_generation_handler(
   let additional_images = request.maybe_additional_images.clone().unwrap_or_else(|| vec![]);
 
   for media_file_token in &additional_images {
-    let media_file_path = query_and_download_media_file(
+    let media_file_name = media_file_token.to_string();
+    let media_file_path = work_temp_dir.path().join(media_file_name.clone());
+
+    let media_file_path = do_download_media_file(
+      &media_file_name,
       &media_file_token,
-      &work_temp_dir,
+      &media_file_path,
       &public_bucket_client,
       &server_state.mysql_pool
     ).await.map_err(|err| {
@@ -275,18 +284,30 @@ pub async fn enqueue_studio_image_generation_handler(
 
   // ==================== HANDLE SORA CREDENTIALS ==================== //
 
-  let mut redis = server_state.redis_pool
-      .get()
-      .map_err(|e| {
-        error!("redis error: {:?}", e);
-        EnqueueImageGenRequestError::ServerError
-      })?;
+  let sora_bearer = get_request_header_optional(&http_request, SORA_BEARER_HEADER_NAME);
+  let sora_cookie = get_request_header_optional(&http_request, SORA_COOKIE_HEADER_NAME);
+  let sora_sentinel = get_request_header_optional(&http_request, SORA_SENTINEL_HEADER_NAME);
 
-  let sora_credentials = get_sora_credentials_from_request(&http_request, &mut redis)
-      .map_err(|e| {
-        error!("sora credential error: {:?}", e);
-        EnqueueImageGenRequestError::ServerError
-      })?;
+  let sora_credentials;
+
+  match (sora_bearer, sora_cookie, sora_sentinel) {
+    (Some(bearer), Some(cookie), Some(sentinel)) => {
+      sora_credentials = SoraCredentials {
+        bearer_token: bearer,
+        cookie,
+        sentinel: Some(sentinel),
+      };
+    }
+    _ => {
+      sora_credentials = match SoraCredentials::from_env() {
+        Ok(creds) => creds,
+        Err(err) => {
+          error!("Failed to load Sora credentials from environment: {:?}", err);
+          return Err(EnqueueImageGenRequestError::ServerError);
+        }
+      };
+    }
+  }
 
   // ==================== HANDLE SORA UPLOAD ==================== //
 
@@ -415,51 +436,84 @@ pub enum DownloadMediaFileError {
   Other(anyhow::Error),
 }
 
+impl From<GetMediaFileError> for DownloadMediaFileError {
+  fn from(err: GetMediaFileError) -> Self {
+    match err {
+      GetMediaFileError::Other(e) => DownloadMediaFileError::Other(e),
+      GetMediaFileError::NotFound => DownloadMediaFileError::MediaFileNotFound,
+    }
+  }
+}
+
 impl From<anyhow::Error> for DownloadMediaFileError {
   fn from(err: anyhow::Error) -> Self {
     DownloadMediaFileError::Other(err)
   }
 }
 
-async fn query_and_download_media_file(
+async fn do_download_media_file(
+  media_file_name: &str,
   media_file_token: &MediaFileToken,
-  download_dir: &TempDir,
+  download_directory: &Path,
   bucket_client: &BucketClient,
   mysql_pool: &MySqlPool,
-) -> Result<PathBuf, DownloadMediaFileError> {
+) -> Result<(PathBuf), DownloadMediaFileError> {
+  let final_download_path = download_directory.join(format!("{}", media_file_name));
+
+  if final_download_path.exists() {
+    log::debug!("Deleting existing file at {:?}", final_download_path.display().to_string());
+    std::fs::remove_file(&final_download_path)
+        .map_err(|err| DownloadMediaFileError::IoError(err))?;
+  }
+
+  let bucket_object_path = get_media_file_details(&media_file_token, mysql_pool).await?;
+
+  log::info!("Downloading media from bucket path: {:?}", &bucket_object_path);
+
+  bucket_client.download_file_to_disk(
+    &bucket_object_path,
+    &final_download_path,
+  ).await?;
+
+  Ok(final_download_path)
+}
+
+
+#[derive(Debug)]
+enum GetMediaFileError {
+  NotFound,
+  Other(anyhow::Error),
+}
+
+
+async fn get_media_file_details(media_file_token: &MediaFileToken, mysql_pool: &MySqlPool) -> Result<PathBuf, GetMediaFileError> {
   let media_file_result = get_media_file(
     &media_file_token,
     false,
     mysql_pool
   ).await;
 
-  let media_file= match media_file_result {
+  let media_file_result = match media_file_result {
     Ok(Some(result)) => result,
     Ok(None) => {
-      warn!("could not find media file in database: {:?}", media_file_token);
-      return Err(DownloadMediaFileError::MediaFileNotFound)
+      warn!("could not find media file: {:?}", media_file_token);
+      return Err(GetMediaFileError::NotFound)
     }
     Err(e) => {
       error!("could not query media file: {:?}", e);
-      return Err(DownloadMediaFileError::Other(e))
+      return Err(GetMediaFileError::Other(e))
     }
   };
 
   let media_file_bucket_path = MediaFileBucketPath::from_object_hash(
-    &media_file.public_bucket_directory_hash,
-    media_file.maybe_public_bucket_prefix.as_deref(),
-    media_file.maybe_public_bucket_extension.as_deref());
+    &media_file_result.public_bucket_directory_hash,
+    media_file_result.maybe_public_bucket_prefix.as_deref(),
+    media_file_result.maybe_public_bucket_extension.as_deref());
 
-  let extension = media_file.maybe_public_bucket_extension.clone().unwrap_or_else(|| ".jpg".to_string());
-  let download_filename = format!("download_file_{}.{}", media_file.token.as_str(), extension);
-  let download_file_path = download_dir.path().join(download_filename);
+  Ok(media_file_bucket_path.to_full_object_pathbuf())
+}
 
-  info!("Downloading from bucket...");
 
-  bucket_client.download_file_to_disk(
-    &media_file_bucket_path.to_full_object_pathbuf(),
-    &download_file_path,
-  ).await?;
-
-  Ok(download_file_path)
+#[cfg(test)]
+mod tests {
 }

crates/service/web/storyteller_web/src/http_server/endpoints/mod.rs

@@ -5,7 +5,6 @@ pub mod app_state;
 pub mod beta_keys;
 pub mod categories;
 pub mod comments;
-pub mod control_plane;
 pub mod conversion;
 pub mod download_job;
 pub mod engine;
@@ -13,7 +12,6 @@ pub mod events;
 pub mod featured_items;
 pub mod flags;
 pub mod image_gen;
-pub mod image_studio;
 pub mod inference_job;
 pub mod investor_demo;
 pub mod leaderboard;
@@ -32,9 +30,9 @@ pub mod subscriptions;
 pub mod tags;
 pub mod trending;
 pub mod tts;
+pub mod users;
 pub mod user_bookmarks;
 pub mod user_ratings;
-pub mod users;
 pub mod vocoders;
 pub mod voice_clone_requests;
 pub mod voice_conversion;
@@ -42,3 +40,4 @@ pub mod voice_designer;
 pub mod w2l;
 pub mod weights;
 pub mod workflows;
+pub mod image_studio;

crates/service/web/storyteller_web/src/http_server/routes/add_control_plane_routes.rs

@@ -1,24 +0,0 @@
-use actix_http::body::MessageBody;
-use actix_service::ServiceFactory;
-use actix_web::dev::{ServiceRequest, ServiceResponse};
-use actix_web::{web, App, Error, HttpResponse};
-use crate::http_server::endpoints::control_plane::set_sora_secret_handler::set_sora_secret_handler;
-
-pub fn add_control_plane_routes<T, B> (app: App<T>) -> App<T>
-where
-    B: MessageBody,
-    T: ServiceFactory<
-      ServiceRequest,
-      Config = (),
-      Response = ServiceResponse<B>,
-      Error = Error,
-      InitError = (),
-    >,
-{
-  app.service(web::scope("/v1/control_plane")
-      .service(web::resource("/sora_secret")
-          .route(web::post().to(set_sora_secret_handler))
-          .route(web::head().to(|| HttpResponse::Ok()))
-      )
-  )
-}

crates/service/web/storyteller_web/src/http_server/routes/add_routes.rs

@@ -123,7 +123,6 @@ use crate::http_server::endpoints::w2l::get_w2l_template_use_count::get_w2l_temp
 use crate::http_server::endpoints::w2l::get_w2l_upload_template_job_status::get_w2l_upload_template_job_status_handler;
 use crate::http_server::endpoints::w2l::list_w2l_templates::list_w2l_templates_handler;
 use crate::http_server::endpoints::w2l::set_w2l_template_mod_approval::set_w2l_template_mod_approval_handler;
-use crate::http_server::routes::add_control_plane_routes::add_control_plane_routes;
 use crate::http_server::routes::add_image_studio_routes::add_image_studio_routes;
 use crate::http_server::routes::add_studio_gen2_routes::add_studio_gen2_routes;
 use crate::http_server::routes::beta_key_routes::add_beta_key_routes;
@@ -176,7 +175,6 @@ pub fn add_routes<T, B> (app: App<T>, server_environment: ServerEnvironment) ->
   app = add_image_studio_routes(app);
   app = add_job_routes(app);
   app = add_engine_routes(app); /* /v1/engine/... */
-  app = add_control_plane_routes(app); /* /v1/control_plane/... */
 
   // app = add_image_gen_routes(app);
 

crates/service/web/storyteller_web/src/http_server/routes/mod.rs

@@ -9,5 +9,4 @@ pub mod user_routes;
 pub mod weights_routes;
 pub mod workflow_routes;
 mod tag_routes;
-mod add_image_studio_routes;
-mod add_control_plane_routes;
+mod add_image_studio_routes;

crates/service/web/storyteller_web/src/http_server/web_utils/scoped_temp_dir_creator.rs

@@ -11,20 +11,6 @@ pub struct ScopedTempDirCreator {
 }
 
 impl ScopedTempDirCreator {
-  pub fn auto_setup() -> Self {
-    // Production configuration
-    let maybe_tmp = easyenv::get_env_pathbuf_optional("TEMP_DIR");
-
-    // MacOS
-    // TODO: Only run this on macOS
-    let maybe_mac_tmp = easyenv::get_env_pathbuf_optional("TMPDIR");
-
-    let directory = maybe_tmp
-        .or(maybe_mac_tmp)
-        .unwrap_or_else(|| PathBuf::from("/tmp"));
-
-    Self::for_directory(directory)
-  }
 
   pub fn for_directory<P: AsRef<Path>>(base_dir: P) -> Self {
     Self {

crates/service/web/storyteller_web/src/main.rs

@@ -464,7 +464,7 @@ async fn main() -> AnyhowResult<()> {
       user_tokens: user_token_troll_bans,
       ip_addresses: ip_address_troll_bans,
     },
-    temp_dir_creator: ScopedTempDirCreator::auto_setup(),
+    temp_dir_creator: ScopedTempDirCreator::for_directory(easyenv::get_env_pathbuf_or_default("TEMP_DIR", "/tmp")),
     google_sign_in_cert: GoogleSignInCert::new(),
   };
 

crates/service/web/storyteller_web/src/util/mod.rs

@@ -11,6 +11,5 @@ pub mod enroll_in_studio;
 pub mod generate_random_username;
 pub mod placeholder_images;
 pub mod read_toml_file_to_struct;
-pub mod redis_sora_secrets;
 pub mod title_to_url_slug;
 pub mod troll_user_bans;

crates/service/web/storyteller_web/src/util/redis_sora_secrets.rs

@@ -1,67 +0,0 @@
-use std::collections::HashMap;
-use anyhow::anyhow;
-use r2d2_redis::r2d2::PooledConnection;
-use r2d2_redis::redis::Commands;
-use r2d2_redis::RedisConnectionManager;
-use errors::AnyhowResult;
-use openai_sora_client::credentials::SoraCredentials;
-
-/// Redis key
-const SORA_SECRET_REDIS_KEY : &str = "sora_secret";
-
-// Fields within the HKEY
-const BEARER_SUBKEY : &str = "bearer";
-const COOKIE_SUBKEY : &str = "cookie";
-const SENTINEL_SUBKEY : &str = "sentinel";
-
-#[derive(Clone,Copy,Debug)]
-pub enum RedisSoraCredentialSubkey {
-  Bearer,
-  Cookie,
-  Sentinel,
-}
-
-impl RedisSoraCredentialSubkey {
-  pub fn to_str(&self) -> &'static str {
-    match self {
-      RedisSoraCredentialSubkey::Bearer => BEARER_SUBKEY,
-      RedisSoraCredentialSubkey::Cookie => COOKIE_SUBKEY,
-      RedisSoraCredentialSubkey::Sentinel => SENTINEL_SUBKEY,
-    }
-  }
-}
-
-pub fn get_sora_credentials(
-  redis: &mut PooledConnection<RedisConnectionManager>
-) -> AnyhowResult<SoraCredentials> {
-
-  let values : HashMap<String, String> = redis.hgetall(SORA_SECRET_REDIS_KEY)
-    .map_err(|e| anyhow!("Failed to get Sora credentials from Redis: {}", e))?;
-
-  let bearer = values.get(BEARER_SUBKEY);
-  let cookie = values.get(COOKIE_SUBKEY);
-  let sentinel = values.get(SENTINEL_SUBKEY);
-
-  match (bearer, cookie, sentinel) {
-    (Some(b), Some(c), Some(s)) => {
-      Ok(SoraCredentials {
-        bearer_token: b.to_string(),
-        cookie: c.to_string(),
-        sentinel: Some(s.to_string()),
-      })
-    }
-    _ => Err(anyhow!("redis sora credential values not present")),
-  }
-}
-
-pub fn set_sora_credential_field(
-  redis: &mut PooledConnection<RedisConnectionManager>,
-  subkey: RedisSoraCredentialSubkey,
-  value: &str,
-) -> AnyhowResult<()> {
-
-  redis.hset(SORA_SECRET_REDIS_KEY, subkey.to_str(), value)
-    .map_err(|e| anyhow!("Failed to set Sora credentials in Redis: {}", e))?;
-
-  Ok(())
-}

frontend/editor3d/app/Classes/ApiManager/EngineApi.ts

@@ -36,174 +36,4 @@ export class EngineApi extends ApiManager {
         };
       });
   }
-
-  public async uploadSceneSnapshot({
-    screenshot,
-    sceneMediaToken,
-  }: {
-    screenshot: File; // base64 encoded PNG
-    sceneMediaToken?: string;
-  }): Promise<ApiResponse<string>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/scene_snapshot`;
-    const formData = new FormData();
-    formData.append("snapshot", screenshot); // Changed from "screenshot" to "snapshot" to match API spec
-    if (sceneMediaToken) {
-      formData.append("scene_media_token", sceneMediaToken);
-    }
-
-    // for now ...
-    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
-    formData.append("uuid_idempotency_token", uuidIdempotencyToken); // Added uuid_idempotency_token
-
-    const response = await fetch(endpoint, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-      },
-      credentials: "include",
-      body: formData,
-    });
-
-    const postResponse = await response.json();
-
-    console.log(postResponse);
-
-    let result: { success: boolean; data?: string; errorMessage?: string };
-
-    if (postResponse.success) {
-      result = {
-        success: true,
-        data: postResponse.snapshot_media_token,
-        errorMessage: undefined,
-      };
-    } else {
-      result = {
-        success: false,
-        errorMessage: postResponse.BadInput,
-      };
-    }
-
-    return result;
-  }
-
-  public async enqueueImageGeneration({
-    prompt,
-    snapshotMediaToken,
-    additionalImages,
-  }: {
-    prompt: string;
-    snapshotMediaToken: string;
-    additionalImages?: string[];
-  }): Promise<ApiResponse<string>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/prompt`;
-    // for now ...
-    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
-    const body = {
-      uuid_idempotency_token: uuidIdempotencyToken,
-      prompt,
-      snapshot_media_token: snapshotMediaToken, // Changed from scene_media_token to snapshot_media_token
-      additional_images: additionalImages,
-    };
-
-    const postResponse = await this.post<
-      {
-        uuid_idempotency_token: string;
-        prompt: string;
-        snapshot_media_token: string;
-        additional_images?: string[];
-      },
-      { success?: boolean; job_token?: string; BadInput?: string }
-    >({
-      endpoint,
-      body,
-    });
-
-    // Check if the response is successful
-    const isSuccess = postResponse.success ?? false;
-
-    // Prepare the result object
-    const result = {
-      success: isSuccess,
-      data: isSuccess ? postResponse.job_token : undefined,
-      errorMessage: isSuccess ? undefined : postResponse.BadInput,
-    };
-
-    return result;
-  }
-
-  public async pollJobSession(jobToken: string): Promise<
-    ApiResponse<{
-      status: string;
-      result: {
-        generated_images?: string[];
-        error?: string;
-      };
-    }>
-  > {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/jobs/session/${jobToken}`;
-
-    const response = await this.get<{
-      success?: boolean;
-      status?: string;
-      result?: {
-        generated_images?: string[];
-        error?: string;
-      };
-      BadInput?: string;
-    }>({
-      endpoint,
-    });
-
-    const success = response.success ?? false;
-    const status = response.status ?? "";
-    const result = response.result ?? {
-      generated_images: [],
-      error: undefined,
-    };
-    const errorMessage = response.BadInput;
-
-    return {
-      success,
-      data: { status, result },
-      errorMessage,
-    };
-  }
-
-  public async pollStudioSessionJobs(jobToken: string): Promise<
-    ApiResponse<{
-      status: string;
-      result: {
-        generated_images?: string[];
-        error?: string;
-      };
-    }>
-  > {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/session_jobs/${jobToken}`;
-
-    const response = await this.get<{
-      success?: boolean;
-      status?: string;
-      result?: {
-        generated_images?: string[];
-        error?: string;
-      };
-      BadInput?: string;
-    }>({
-      endpoint,
-    });
-
-    const success = response.success ?? false;
-    const status = response.status ?? "";
-    const result = response.result ?? {
-      generated_images: [],
-      error: undefined,
-    };
-    const errorMessage = response.BadInput;
-
-    return {
-      success,
-      data: { status, result },
-      errorMessage,
-    };
-  }
 }

frontend/editor3d/app/components/reusable/Button/Button.tsx

@@ -28,7 +28,7 @@ export const Button = ({
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
-        return "bg-brand-secondary hover:bg-brand-secondary-700 text-white focus-visible:outline-brand-secondary";
+        return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "action": {
         return "bg-action hover:bg-action-900 text-white focus-visible:outline-action";

frontend/editor3d/app/components/reusable/Popover/Popover.tsx

@@ -8,7 +8,6 @@ export interface PopoverItem {
   selected: boolean;
   icon?: ReactNode;
   action?: string;
-  disabled?: boolean;
 }
 
 interface PopoverMenuProps {
@@ -25,8 +24,6 @@ interface PopoverMenuProps {
   panelClassName?: string;
   onAction?: (action: string) => void;
   panelTitle?: string;
-  position?: "top" | "bottom";
-  align?: "start" | "center" | "end";
 }
 
 export const PopoverMenu = ({
@@ -40,21 +37,16 @@ export const PopoverMenu = ({
   triggerLabel,
   children,
   buttonClassName,
-  panelClassName,
   onAction,
   panelTitle,
-  position = "top",
-  align = "start",
 }: PopoverMenuProps) => {
   const selectedItem = items.find((item) => item.selected);
 
-  const handleItemClick = (item: PopoverItem, close: () => void) => {
+  const handleItemClick = (item: PopoverItem) => {
     if (mode === "button" && item.action && onAction) {
       onAction(item.action);
-      close();
     } else {
       onSelect?.(item);
-      close();
     }
   };
 
@@ -66,121 +58,69 @@ export const PopoverMenu = ({
     buttonClassName,
   );
 
-  const positionClasses = {
-    top: "bottom-full",
-    bottom: "top-full",
-  };
-
-  const alignClasses = {
-    start: "left-0",
-    center: "left-1/2 -translate-x-1/2",
-    end: "right-0",
-  };
-
   return (
     <Popover className="relative">
-      {({ close }) => (
-        <>
-          <Popover.Button className={className}>
-            {triggerIcon}
-            {mode === "toggle" && selectedItem ? selectedItem.label : null}
-            {mode === "default" && triggerLabel ? triggerLabel : null}
-          </Popover.Button>
+      <Popover.Button className={className}>
+        {triggerIcon}
+        {mode === "toggle" && selectedItem ? selectedItem.label : null}
+        {mode === "default" && triggerLabel ? triggerLabel : null}
+      </Popover.Button>
 
-          <div
-            className={twMerge(
-              "absolute transform-gpu",
-              positionClasses[position],
-              alignClasses[align],
-            )}
-          >
-            <Transition
-              enter="transition duration-100 ease-out"
-              enterFrom={
-                position === "bottom"
-                  ? "translate-y-2 opacity-0"
-                  : "-translate-y-2 opacity-0"
-              }
-              enterTo="translate-y-0 opacity-100"
-              leave="transition duration-100 ease-in"
-              leaveFrom="translate-y-0 opacity-100"
-              leaveTo={
-                position === "bottom"
-                  ? "translate-y-2 opacity-0"
-                  : "-translate-y-2 opacity-0"
-              }
+      <div className="absolute bottom-full left-0 transform-gpu">
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="translate-y-2 opacity-0"
+          enterTo="translate-y-0 opacity-100"
+          leave="transition duration-100 ease-in"
+          leaveFrom="translate-y-0 opacity-100"
+          leaveTo="translate-y-2 opacity-0"
+        >
+          <Popover.Panel className="origin-bottom">
+            <div
+              className={twMerge(
+                "z-10 mb-2 min-w-48 rounded-lg bg-[#46464B] p-1.5 shadow-lg",
+              )}
             >
-              <Popover.Panel
-                className={twMerge(
-                  position === "bottom" ? "origin-top" : "origin-bottom",
-                )}
-              >
-                <div
-                  className={twMerge(
-                    "z-10 min-w-48 rounded-lg bg-[#46464B] p-1.5 shadow-lg",
-                    position === "top" && "mb-2",
-                    position === "bottom" && "mt-2",
-                    panelClassName,
-                  )}
-                >
-                  {panelTitle && (
-                    <div className="mb-2 mt-0.5 px-1.5 text-sm font-normal text-white opacity-70">
-                      {panelTitle}
-                    </div>
-                  )}
-                  {mode === "default" && children ? (
-                    <div className="text-sm text-white">{children}</div>
-                  ) : (
-                    <div className="flex flex-col gap-0 text-sm text-white">
-                      {items.map((item, index) => (
-                        <Button
-                          key={index}
-                          className={twMerge(
-                            "flex items-center justify-between border-transparent bg-transparent px-1.5",
-                            "hover:bg-[#63636B]/60",
-                            mode === "toggle" && item.selected
-                              ? "hover:bg-[#63636B]"
-                              : "bg-transparent",
-                            item.disabled
-                              ? "!cursor-not-allowed opacity-50"
-                              : "",
-                          )}
-                          onClick={() =>
-                            !item.disabled && handleItemClick(item, close)
-                          }
-                          variant="secondary"
-                          disabled={item.disabled}
-                        >
-                          <div className="flex items-center gap-2">
-                            {showIconsInList && item.icon}
-                            {item.label}
-                          </div>
-                          {mode === "toggle" && (
-                            <input
-                              type="radio"
-                              checked={item.selected}
-                              readOnly
-                            />
-                          )}
-                        </Button>
-                      ))}
-                      {showAddButton && onAdd && (
-                        <Button
-                          variant="secondary"
-                          className="mb-0.5 mt-2 border-none bg-[#7B7B84] py-1 hover:bg-[#8c8c96]"
-                          onClick={onAdd}
-                        >
-                          + Add
-                        </Button>
+              {panelTitle && (
+                <div className="mb-2 mt-0.5 px-1.5 text-sm font-normal text-white opacity-70">
+                  {panelTitle}
+                </div>
+              )}
+              {mode === "default" && children ? (
+                <div className="text-sm text-white">{children}</div>
+              ) : (
+                <div className="flex flex-col gap-0 text-sm text-white">
+                  {items.map((item, index) => (
+                    <Button
+                      key={index}
+                      className={`flex items-center justify-between border-transparent bg-transparent px-1.5 hover:bg-[#63636B]/60 ${mode === "toggle" && item.selected ? "hover:bg-[#63636B]" : "bg-transparent"}`}
+                      onClick={() => handleItemClick(item)}
+                      variant="secondary"
+                    >
+                      <div className="flex items-center gap-2">
+                        {showIconsInList && item.icon}
+                        {item.label}
+                      </div>
+                      {mode === "toggle" && (
+                        <input type="radio" checked={item.selected} readOnly />
                       )}
-                    </div>
+                    </Button>
+                  ))}
+                  {showAddButton && onAdd && (
+                    <Button
+                      variant="secondary"
+                      className="mb-0.5 mt-2 border-none bg-[#7B7B84] py-1 hover:bg-[#8c8c96]"
+                      onClick={onAdd}
+                    >
+                      + Add
+                    </Button>
                   )}
                 </div>
-              </Popover.Panel>
-            </Transition>
-          </div>
-        </>
-      )}
+              )}
+            </div>
+          </Popover.Panel>
+        </Transition>
+      </div>
     </Popover>
   );
 };

frontend/editor3d/app/components/reusable/ToggleButton/ToggleButton.tsx

@@ -1,34 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { Button } from "~/components";
-import { twMerge } from "tailwind-merge";
-
-interface ToggleButtonProps {
-  isActive: boolean;
-  icon?: IconDefinition;
-  activeIcon?: IconDefinition;
-  onClick: () => void;
-  className?: string;
-}
-
-export const ToggleButton = ({
-  isActive,
-  icon,
-  activeIcon,
-  onClick,
-  className,
-}: ToggleButtonProps) => {
-  return (
-    <Button
-      className={twMerge(
-        "flex h-9 w-9 items-center border-2 border-transparent text-sm text-white backdrop-blur-lg transition-all",
-        isActive
-          ? "border-white/20 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
-          : "bg-[#5F5F68]/60 hover:bg-[#5F5F68]/90",
-        className,
-      )}
-      variant="secondary"
-      icon={isActive && activeIcon ? activeIcon : icon}
-      onClick={onClick}
-    />
-  );
-};

frontend/editor3d/app/components/reusable/ToggleButton/index.ts

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

frontend/editor3d/app/components/reusable/Tooltip.tsx

@@ -7,7 +7,6 @@ interface TooltipProps {
   content: React.ReactNode;
   position: "top" | "bottom" | "left" | "right";
   className?: string;
-  delay?: number;
 }
 
 export const Tooltip = ({
@@ -15,7 +14,6 @@ export const Tooltip = ({
   content,
   position,
   className,
-  delay = 300,
 }: TooltipProps) => {
   const [isShowing, setIsShowing] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -65,7 +63,7 @@ export const Tooltip = ({
       {children}
       <Transition
         show={isShowing}
-        enter={`transition ease-out duration-200 delay-${delay}`}
+        enter="transition ease-out duration-200 delay-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
         leave="transition ease-in duration-150"
@@ -76,7 +74,7 @@ export const Tooltip = ({
           ref={tooltipRef}
           style={getStyleForPosition()}
           className={twMerge(
-            "pointer-events-none absolute z-10 w-max rounded-lg bg-[#5F5F68] px-2.5 py-1.5 text-sm font-medium text-white shadow-xl",
+            "pointer-events-none absolute z-10 w-max rounded-lg bg-ui-controls px-2.5 py-1.5 text-sm font-medium text-white shadow-xl",
             className ? className : "",
           )}
         >

frontend/editor3d/app/components/reusable/UploadModalMedia/uploadImage.ts

@@ -15,8 +15,6 @@ export const uploadImage = async ({
 }) => {
   const mediaUploadApi = new MediaUploadApi();
 
-  console.log("Uploading image:", assetFile);
-
   progressCallback({ status: UploaderStates.uploadingImage });
 
   const imageResponse = await mediaUploadApi.UploadImage({
@@ -26,10 +24,7 @@ export const uploadImage = async ({
     maybe_title: "char_frame_" + title,
   });
 
-  console.log("Image response:", imageResponse);
-
   if (imageResponse == undefined) {
-    console.log("Error: Could not upload image!");
     progressCallback({
       status: UploaderStates.imageCreateError,
       errorMessage: "Could not upload image!",
@@ -38,7 +33,6 @@ export const uploadImage = async ({
   }
 
   if (!imageResponse.success || !imageResponse.data) {
-    console.log("Error:", imageResponse.errorMessage);
     progressCallback({
       status: UploaderStates.imageCreateError,
       errorMessage: imageResponse.errorMessage,
@@ -46,9 +40,5 @@ export const uploadImage = async ({
     return;
   }
 
-  console.log("Upload successful:", imageResponse.data);
-  progressCallback({
-    status: UploaderStates.success,
-    data: imageResponse.data,
-  });
+  progressCallback({ status: UploaderStates.success, data: imageResponse.data });
 };

frontend/editor3d/app/components/reusable/index.ts

@@ -24,7 +24,6 @@ export * from "./Select";
 export * from "./Slider";
 export * from "./Tabs";
 export * from "./Textarea";
-export * from "./ToggleButton";
 export * from "./Tooltip";
 export * from "./TransitionDialogue";
 export * from "./Typography";

frontend/editor3d/app/components/signaled/TopBar/TopBar.tsx

@@ -1,10 +1,10 @@
 import { useLocation, useParams } from "@remix-run/react";
-import { faChevronLeft, faImages } from "@fortawesome/pro-solid-svg-icons";
-import { Button, ButtonLink } from "~/components";
+import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons";
+import { ButtonLink } from "~/components";
 import { AuthButtons } from "./AuthButtons";
 import { SceneTitleInput } from "./SceneTitleInput";
+import { MyMoviesButton } from "./MyMoviesButton";
 import { getCurrentLocationWithoutParams } from "~/utilities";
-import { Activity } from "~/pages/PageEnigma/comps/GenerateModals/Activity";
 
 function isEditorPath(path: string) {
   if (path === "/") return true;
@@ -47,13 +47,8 @@ export const TopBar = ({ pageName }: Props) => {
           <SceneTitleInput pageName={pageName} />
         </div>
 
-        <div className="flex justify-end gap-5">
-          <div className="flex gap-2">
-            <Button variant="secondary" icon={faImages} disabled>
-              My Library
-            </Button>
-            <Activity />
-          </div>
+        <div className="flex justify-end gap-2.5">
+          <MyMoviesButton />
           <div className="flex justify-end gap-2">
             <AuthButtons />
           </div>

frontend/editor3d/app/enums/JobStatus.ts

@@ -13,5 +13,4 @@ export enum JobType {
   TextToSpeech = "text_to_speech",
   VoiceConversion = "voice_conversion",
   VideoStyleTransfer = "workflow",
-  ImageGeneration = "image_generation",
 }

frontend/editor3d/app/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts

@@ -1,146 +0,0 @@
-import { TransformControls } from "three/examples/jsm/Addons";
-import * as THREE from "three";
-
-export const FKHelperSphereName = "__FKHelperSphere__";
-
-export class FKHelper {
-
-  private targetBoneSpheres: THREE.Object3D<THREE.Object3DEventMap>[];
-  private transformControls: TransformControls;
-  private raycaster: THREE.Raycaster;
-  private scene: THREE.Scene;
-
-  private skeletonHelper: THREE.SkeletonHelper | null = null;
-  private isControlInScene = false;
-
-  // Need the actual object to perform FK on
-  // This means the object must have bones
-  // Not all bones require FK right now
-  // Need a set of names to filter bones
-  // Use mixamo names
-  // Need a transform control (rotation mode) for the bones
-  // Need to disable the object transforms for bone transforms
-  // Need raycaster
-  constructor({
-    camera,
-    domElement,
-    scene,
-    onDragChange
-  }: {
-    camera: THREE.Camera;
-    domElement: HTMLElement;
-    scene: THREE.Scene;
-    onDragChange: (dragging: boolean) => void;
-  }) {
-    this.raycaster = new THREE.Raycaster();
-    this.scene = scene;
-    this.targetBoneSpheres = [];
-    this.transformControls = new TransformControls(camera, domElement);
-
-    this.transformControls.setSpace("local");
-    this.transformControls.setMode("rotate");
-    this.transformControls.setSize(0.5);
-    this.transformControls.addEventListener("dragging-changed", (event: any) => {
-      onDragChange(event.value);
-    });
-  }
-
-  // Set FK target
-  setTarget(target: THREE.Object3D) {
-    // TODO: Highlight all the necessary bones
-    this.clear();
-    target.traverse((child) => {
-      if (child.type !== "Bone") {
-        return;
-      }
-
-      // For each target bone, display a sphere to show the FK target and raycast intersect
-      const geometry = new THREE.SphereGeometry(1, 16, 16);
-      const material = new THREE.MeshBasicMaterial({ color: 0xff0000, depthTest: false, transparent: true });
-      const sphere = new THREE.Mesh(geometry, material);
-      sphere.name = FKHelperSphereName;
-      const uniformScale = 1.5;
-      sphere.scale.set(uniformScale, uniformScale, uniformScale);
-      child.add(sphere);
-      this.targetBoneSpheres.push(sphere);
-    });
-
-    this.skeletonHelper = new THREE.SkeletonHelper(target);
-    this.scene.add(this.skeletonHelper);
-  }
-
-  onMouseClick(mouse: THREE.Vector2) {
-    this.raycaster.setFromCamera(mouse, this.transformControls.camera);
-    const intersections = this.raycaster.intersectObjects(this.targetBoneSpheres, false);
-
-    if (intersections.length < 1) {
-      console.log("No intersections");
-      this.resetHighlight();
-      this.removeControls();
-      return;
-    }
-
-    // Attach the controls to the first bone
-    const firstBone = intersections[0];
-    this.highlightSphere(firstBone.object);
-    this.showControls(firstBone.object.parent!);
-    console.log("Showing bone", firstBone.object);
-  }
-
-  private showControls(object?: THREE.Object3D) {
-    if (object) {
-      this.transformControls.attach(object);
-    }
-
-    if (this.isControlInScene) {
-      return;
-    }
-
-    this.scene.add(this.transformControls);
-    this.isControlInScene = true;
-  }
-
-  private highlightSphere(sphere: THREE.Object3D) {
-    this.targetBoneSpheres.forEach((s) => {
-      // @ts-expect-error Material on object3d, but it's fine since this is a mesh
-      s.material.opacity = 0.2
-    });
-    // @ts-expect-error Material on object3d, but it's fine since this is a mesh
-    sphere.material.opacity = 1;
-  }
-
-  private resetHighlight() {
-    this.targetBoneSpheres.forEach((s) => {
-      // @ts-expect-error Material on object3d, but it's fine since this is a mesh
-      s.material.opacity = 1;
-    });
-  }
-
-  private removeControls() {
-    this.transformControls.detach();
-
-    if (this.isControlInScene) {
-      this.scene.remove(this.transformControls);
-      this.isControlInScene = false;
-    }
-  }
-
-  private removeSpheres() {
-    this.targetBoneSpheres.forEach((sphere) => {
-      this.scene.remove(sphere);
-      sphere.parent?.remove(sphere);
-      // @ts-expect-error Geometry on object3d, but it's fine since this is a mesh
-      sphere.geometry.dispose();
-    });
-    this.targetBoneSpheres = [];
-  }
-
-  clear() {
-    this.removeControls();
-    this.removeSpheres();
-
-    if (this.skeletonHelper) {
-      this.scene.remove(this.skeletonHelper!);
-    }
-  }
-}

frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts

@@ -66,7 +66,7 @@ class Editor {
   camera: THREE.PerspectiveCamera | null = null;
   render_camera: THREE.PerspectiveCamera | null = null;
   render_camera_aspect_ratio: CameraAspectRatio =
-    CameraAspectRatio.HORIZONTAL_3_2;
+    CameraAspectRatio.HORIZONTAL_16_9;
   renderer: THREE.WebGLRenderer | undefined;
   rawRenderer: THREE.WebGLRenderer | undefined;
   clock: THREE.Clock | undefined;
@@ -253,7 +253,7 @@ class Editor {
     this.selectedCanvas = false;
     // Audio Engine Test.
 
-    this.render_camera_aspect_ratio = CameraAspectRatio.HORIZONTAL_3_2;
+    this.render_camera_aspect_ratio = CameraAspectRatio.HORIZONTAL_16_9;
     this.render_width = this.getRenderDimensions().width;
     this.render_height = this.getRenderDimensions().height;
 
@@ -334,20 +334,6 @@ class Editor {
           aspectRatio: 16 / 9,
         };
       }
-      case CameraAspectRatio.HORIZONTAL_3_2: {
-        return {
-          width: 1200,
-          height: 800,
-          aspectRatio: 3 / 2,
-        };
-      }
-      case CameraAspectRatio.VERTICAL_2_3: {
-        return {
-          width: 800,
-          height: 1200,
-          aspectRatio: 2 / 3,
-        };
-      }
       case CameraAspectRatio.VERTICAL_9_16: {
         return {
           width: 720,
@@ -655,35 +641,6 @@ class Editor {
     document.body.appendChild(this.stats.dom);
   }
 
-  public snapShotOfCurrentFrame(shouldDownload: boolean = true) {
-    const snapshot = this.renderer?.domElement.toDataURL("image/png");
-    if (!snapshot) {
-      console.error("Error: Snapshot could not be created.");
-      return null;
-    }
-
-    const base64Snapshot = snapshot.split(",")[1];
-
-    if (shouldDownload) {
-      const link = document.createElement("a");
-      link.download = "scene-snapshot.png";
-      link.href = snapshot;
-      link.click();
-    }
-
-    const byteString = atob(base64Snapshot);
-    const mimeString = "image/png";
-    const ab = new ArrayBuffer(byteString.length);
-    const ia = new Uint8Array(ab);
-    for (let i = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
-    }
-    const uuid = crypto.randomUUID(); // Generate a new UUID
-    const file = new File([ab], `${uuid}.png`, { type: mimeString });
-
-    return { base64Snapshot, file };
-  }
-
   public async newScene(sceneTitleInput: string) {
     this.activeScene.clear();
     this.audio_engine = new AudioEngine();
@@ -960,8 +917,6 @@ class Editor {
   }
 
   deleteObject(uuid: string) {
-    this.mouse_controls?.clearFKVisuals();
-    this.mouse_controls?.removeTransformControls(true);
     this.utils.deleteObject(uuid);
     if (this.outliner_feature_flag) {
       const result = this.sceneManager?.render_outliner(
@@ -993,28 +948,16 @@ class Editor {
           this.render_camera_aspect_ratio === CameraAspectRatio.HORIZONTAL_16_9
             ? 1024
             : this.render_camera_aspect_ratio ===
-              meraAspectRatio.VERTICAL_9_16
+              CameraAspectRatio.VERTICAL_9_16
               ? 576
-              : this.render_camera_aspect_ratio ===
-                meraAspectRatio.HORIZONTAL_3_2
-                ? 900
-                : this.render_camera_aspect_ratio ===
-                  meraAspectRatio.VERTICAL_2_3
-                  ? 600
-                  : 1000;
+              : 1000;
         const height =
           this.render_camera_aspect_ratio === CameraAspectRatio.HORIZONTAL_16_9
             ? 576
             : this.render_camera_aspect_ratio ===
-              meraAspectRatio.VERTICAL_9_16
+              CameraAspectRatio.VERTICAL_9_16
               ? 1024
-              : this.render_camera_aspect_ratio ===
-                meraAspectRatio.HORIZONTAL_3_2
-                ? 600
-                : this.render_camera_aspect_ratio ===
-                  meraAspectRatio.VERTICAL_2_3
-                  ? 900
-                  : 1000;
+              : 1000;
 
         this.rawRenderer.setSize(width, height);
 

frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts

@@ -14,13 +14,6 @@ import { TransformControls } from "./TransformControls";
 import { SceneManager, SceneObject } from "./scene_manager_api";
 import { FreeCam } from "./free_cam";
 import Stats from "three/examples/jsm/libs/stats.module.js";
-import { FKHelper } from "./KinHelpers/FKHelper";
-
-export enum KinMode {
-  FK,
-  IK,
-  NONE,
-}
 
 export class MouseControls {
   camera: THREE.PerspectiveCamera | null;
@@ -54,12 +47,8 @@ export class MouseControls {
   private isMovable: Function;
   enable_stats: Function;
 
-  private kinMode: KinMode = KinMode.NONE;
-  private fkHelper: FKHelper;
-  private isBoneDragged: boolean = false;
-
   constructor(
-    camera: THREE.PerspectiveCamera,
+    camera: THREE.PerspectiveCamera | null,
     camera_person_mode: boolean,
     cameraViewControls: FreeCam,
     lockControls: PointerLockControls | undefined,
@@ -73,7 +62,7 @@ export class MouseControls {
     mouse: THREE.Vector2 | undefined,
     timeline_mouse: THREE.Vector2 | undefined,
     raycaster: THREE.Raycaster | undefined,
-    control: TransformControls,
+    control: TransformControls | undefined,
     outlinePass: OutlinePass | undefined,
     scene: THREE.Scene,
     publishSelect: Function,
@@ -112,20 +101,6 @@ export class MouseControls {
     this.sceneManager = undefined;
     this.isMovable = isMovable;
     this.enable_stats = enable_stats;
-    this.fkHelper = new FKHelper({
-      camera: this.camera,
-      domElement: this.control.domElement,
-      scene: this.scene,
-      onDragChange: this.onFKControlsDragging.bind(this),
-    });
-  }
-
-  onFKControlsDragging(dragging: boolean) {
-    this.isBoneDragged = dragging;
-  }
-
-  clearFKVisuals() {
-    this.fkHelper.clear();
   }
 
   focus() {
@@ -150,26 +125,9 @@ export class MouseControls {
       this.selected = [];
       this.publishSelect();
     }
-    this.hideTransformControls();
-    if (remove_outline) this.outlinePass.selectedObjects = [];
-  }
-
-  hideTransformControls() {
-    if (this.control == undefined) {
-      return;
-    }
-
     this.control.detach();
     this.scene.remove(this.control);
-  }
-
-  reattachTransformControls() {
-    if (this.control == undefined || this.selected == undefined) {
-      return;
-    }
-
-    this.control.attach(this.selected[0]);
-    this.scene.add(this.control);
+    if (remove_outline) this.outlinePass.selectedObjects = [];
   }
 
   selectObject(currentObject: THREE.Object3D) {
@@ -193,7 +151,7 @@ export class MouseControls {
   }
 
   onMouseDown(event: any) {
-    if ((event.button === 0 || event.button === 1) && this.isMovable() && !this.isBoneDragged) {
+    if ((event.button === 0 || event.button === 1) && this.isMovable()) {
       this.isMouseClicked = true;
     }
   }
@@ -218,35 +176,6 @@ export class MouseControls {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  toggleFKMode() {
-    if (this.kinMode == KinMode.FK) {
-      this.fkHelper.clear();
-      this.kinMode = KinMode.NONE;
-      this.reattachTransformControls();
-      console.log("FK mode off");
-      return;
-    }
-
-    // Make sure we have an intersection
-    if (!(this.selected && this.selected.length > 0)) {
-      return;
-    }
-
-    // Make sure FK is supported only on character type objects
-    const firstSelection = this.selected[0];
-    if (!firstSelection.userData.isCharacter) {
-      return;
-    }
-
-    // FK is good to go
-    // Disable main transform controls
-    this.hideTransformControls();
-    this.kinMode = KinMode.FK;
-    this.fkHelper.setTarget(this.selected[0]);
-    console.log("FK mode on");
-    return;
-  }
-
   async onkeydown(event: KeyboardEvent) {
     if (hotkeysStatus.value.disabled) {
       return;
@@ -269,7 +198,7 @@ export class MouseControls {
       // transform
       this.control?.setMode("translate");
       return;
-    } else if (event.key === "r" && !event.ctrlKey) {
+    } else if (event.key === "r") {
       // rotate
       this.control?.setMode("rotate");
       return;
@@ -277,8 +206,6 @@ export class MouseControls {
       // scale
       this.control?.setMode("scale");
       return;
-    } else if (event.key === "k") {
-      this.toggleFKMode();
     }
 
     if ((event.ctrlKey || event.metaKey) && !this.isProcessing) {
@@ -371,11 +298,6 @@ export class MouseControls {
     }
     this.camera_last_pos.copy(camera_pos);
 
-    if (this.kinMode == KinMode.FK) {
-      this.fkHelper.onMouseClick(this.mouse);
-      return;
-    }
-
     this.raycaster.setFromCamera(this.mouse, this.camera);
     const interactable: any[] = [];
     this.scene.children.forEach((child: THREE.Object3D) => {

frontend/editor3d/app/pages/PageEnigma/Editor/timeline.ts

@@ -287,6 +287,10 @@ export class TimeLine {
         // testDeformBody(lastRig);
       }
 
+      // Add a skeleton helper to the character
+      const skeletonHelper = new THREE.SkeletonHelper(obj);
+      this.scene.scene.add(skeletonHelper);
+
       const object_uuid = obj.uuid;
 
       this.characters[object_uuid] = ClipGroup.CHARACTER; // TODO: Create a class to make the idea of a character.

frontend/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -113,6 +113,7 @@ export const PageEditor = () => {
               <div className="grid grid-cols-3 gap-4">
                 <ControlsTopButtons />
                 <Controls3D />
+                <AspectRatioMenu />
               </div>
             </div>
 

frontend/editor3d/app/pages/PageEnigma/Wizard/Wizard.tsx

@@ -86,7 +86,7 @@ export const Wizard = () => {
         onNext: () => {
           resetSceneGenerationMetadata();
           editorEngine?.changeRenderCameraAspectRatio(
-            CameraAspectRatio.HORIZONTAL_3_2,
+            CameraAspectRatio.HORIZONTAL_16_9,
           );
           editorEngine?.newScene(textInput.value);
           showWizard.value = "end";

frontend/editor3d/app/pages/PageEnigma/comps/AspectRatioMenu/AspectRatioMenu.tsx

@@ -18,21 +18,13 @@ export const AspectRatioMenu = () => {
       ? faRectangle
       : cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16
         ? faRectangleVertical
-        : cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_3_2
-          ? faRectangle
-          : cameraAspectRatio.value === CameraAspectRatio.VERTICAL_2_3
-            ? faRectangleVertical
-            : faSquare;
+        : faSquare;
   const buttonText =
     cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_16_9
       ? "16:9 Horizontal"
       : cameraAspectRatio.value === CameraAspectRatio.VERTICAL_9_16
         ? "9:16 Vertical"
-        : cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_3_2
-          ? "3:2 Horizontal"
-          : cameraAspectRatio.value === CameraAspectRatio.VERTICAL_2_3
-            ? "2:3 Vertical"
-            : "1:1 Squared";
+        : "1:1 Squared";
 
   const handleChangeAspectRatio = (newRatio: CameraAspectRatio) => {
     Queue.publish({
@@ -60,26 +52,6 @@ export const AspectRatioMenu = () => {
             onClick: () =>
               handleChangeAspectRatio(CameraAspectRatio.HORIZONTAL_16_9),
           },
-          {
-            label: "3:2",
-            icon: faRectangle,
-            className: "pl-4",
-            description: "Horizontal",
-            selected:
-              cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_3_2,
-            onClick: () =>
-              handleChangeAspectRatio(CameraAspectRatio.HORIZONTAL_3_2),
-          },
-          {
-            label: "2:3",
-            icon: faRectangleVertical,
-            className: "pl-4",
-            description: "Vertical",
-            selected:
-              cameraAspectRatio.value === CameraAspectRatio.VERTICAL_2_3,
-            onClick: () =>
-              handleChangeAspectRatio(CameraAspectRatio.VERTICAL_2_3),
-          },
           {
             label: "9:16",
             icon: faRectangleVertical,

frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -67,7 +67,7 @@ export const ControlsTopButtons = () => {
   const handleResetScene = () => {
     resetSceneGenerationMetadata();
     editorEngine?.changeRenderCameraAspectRatio(
-      CameraAspectRatio.HORIZONTAL_3_2,
+      CameraAspectRatio.HORIZONTAL_16_9,
     );
   };
 

frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx

@@ -1,75 +0,0 @@
-import { useSignals } from "@preact/signals-react/runtime";
-import { faBell, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PopoverMenu } from "~/components/reusable/Popover/Popover";
-import { CompletedCard } from "./CompletedCard";
-import { InProgressCard } from "./InProgressCard";
-import { H3, P, Tooltip } from "~/components";
-import { activeImageGenerationJobs, userMovies } from "~/signals";
-
-export function Activity() {
-  useSignals();
-
-  return (
-    <Tooltip content="Activity" position="bottom">
-      <PopoverMenu
-        mode="default"
-        buttonClassName="h-[38px] w-[38px] !p-0"
-        panelClassName="w-[360px] p-2"
-        position="bottom"
-        align="end"
-        triggerIcon={
-          <div>
-            <FontAwesomeIcon icon={faBell} />
-            {activeImageGenerationJobs.value &&
-              activeImageGenerationJobs.value.length > 0 && (
-                <div className="bg-blue-500 absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full" />
-              )}
-          </div>
-        }
-      >
-        <div className="max-h-[480px] overflow-y-auto">
-          {/* In progress */}
-          {activeImageGenerationJobs.value &&
-            activeImageGenerationJobs.value.length > 0 && (
-              <div>
-                {activeImageGenerationJobs.value.map((movieJob) => (
-                  <InProgressCard key={movieJob.job_token} movie={movieJob} />
-                ))}
-              </div>
-            )}
-
-          {!userMovies.value && !activeImageGenerationJobs.value ? (
-            <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
-              <FontAwesomeIcon
-                icon={faSpinnerThird}
-                spin
-                size="2x"
-                className="text-gray-400"
-              />
-              <H3 className="text-gray-300">Retrieving Activities</H3>
-            </div>
-          ) : userMovies.value &&
-            userMovies.value.length === 0 &&
-            !activeImageGenerationJobs.value ? (
-            <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
-              <H3 className="text-gray-300">No activities yet</H3>
-              <P className="text-gray-400">
-                Try generating something new from the featured scenes
-              </P>
-            </div>
-          ) : (
-            <div>
-              {/* Completed */}
-              <div className="flex flex-col">
-                {userMovies.value?.map((movie) => (
-                  <CompletedCard key={movie.token} movie={movie} />
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </PopoverMenu>
-    </Tooltip>
-  );
-}

frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx

@@ -19,7 +19,7 @@ export function getStyleName(typeInput: string) {
 
 interface Props {
   movie: MediaInfo;
-  setMovieId?: (id: string) => void;
+  setMovieId: (id: string) => void;
 }
 
 export function CompletedCard({ movie, setMovieId }: Props) {
@@ -37,23 +37,20 @@ export function CompletedCard({ movie, setMovieId }: Props) {
   );
   const styleName =
     movie.maybe_style_name && getStyleName(movie.maybe_style_name);
-
-  const handleClick = () => {
-    setMovieId?.(movie.token);
-  };
-
   return (
     <div
-      className="flex w-full items-center justify-between rounded-lg p-2 text-start transition-all duration-150 hover:cursor-pointer hover:bg-white/10"
-      onClick={handleClick}
+      className="flex w-full items-center justify-between px-5 py-3 text-start transition-all duration-150 hover:cursor-pointer hover:bg-brand-secondary/40"
+      onClick={() => {
+        setMovieId(movie.token);
+      }}
     >
       <div className="flex gap-4">
-        <div className="flex aspect-square h-14 w-14 justify-center overflow-hidden rounded-lg border border-[#A9A9A9]/50 bg-black/60">
+        <div className="flex h-32 w-32 justify-center overflow-hidden rounded-lg bg-black/60">
           <img
             src={
               loadError ? "/resources/images/movie-placeholder.png" : imageUrl
             }
-            className="h-full w-full object-cover"
+            className="h-full object-contain"
             alt={movie.maybe_title ?? "unknown"}
             crossOrigin="anonymous"
             onError={() => setLoadError(true)}
@@ -63,16 +60,16 @@ export function CompletedCard({ movie, setMovieId }: Props) {
         <div className="flex flex-col justify-center gap-1">
           <div className="font-medium">{movie.maybe_title || "Untitled"}</div>
           <div>
-            {/* {styleName && (
+            {styleName && (
               <div className="text-sm text-white/60">{styleName}</div>
-            )} */}
+            )}
             <div className="text-sm text-white/60">
               {dayjs(movie.updated_at).format("MMM D, YYYY HH:mm:ss")}
             </div>
           </div>
         </div>
       </div>
-      {/* <div className="pr-5">
+      <div className="pr-5">
         <button
           onClick={(event) => {
             event.preventDefault();
@@ -86,7 +83,7 @@ export function CompletedCard({ movie, setMovieId }: Props) {
           <FontAwesomeIcon icon={faArrowDownToLine} className="mr-2" />
           Download
         </button>
-      </div> */}
+      </div>
     </div>
   );
 }

frontend/editor3d/app/pages/PageEnigma/comps/GenerateModals/InProgressCard.tsx

@@ -58,19 +58,19 @@ export function InProgressCard({ movie }: Props) {
   }, []);
 
   return (
-    <div className="flex w-full items-center justify-between rounded-lg p-2 text-start transition-all duration-150 hover:bg-white/10">
+    <div className="flex w-full items-center justify-between px-5 py-3 text-start transition-all duration-150">
       <div className="flex gap-4">
-        <div className="flex aspect-square h-14 w-14 items-center justify-center overflow-hidden rounded-lg border border-[#A9A9A9]/50 bg-black/60">
+        <div className="flex h-32 w-32 items-center justify-center rounded-lg bg-white/10">
           {(movie.status.status === JobState.STARTED ||
             movie.status.status === JobState.PENDING) && (
-            <FontAwesomeIcon icon={faSpinnerThird} spin size={"lg"} />
+            <FontAwesomeIcon icon={faSpinnerThird} spin size={"2x"} />
           )}
           {(movie.status.status === JobState.COMPLETE_FAILURE ||
             movie.status.status === JobState.ATTEMPT_FAILED) && (
-            <FontAwesomeIcon icon={faCircleExclamation} size={"lg"} />
+            <FontAwesomeIcon icon={faCircleExclamation} size={"2x"} />
           )}
         </div>
-        <div className="flex flex-col justify-center gap-1">
+        <div className="flex flex-col justify-center gap-2">
           <div className="font-medium">
             {movie.request.maybe_model_title || "Untitled"}
           </div>
@@ -94,7 +94,7 @@ export function InProgressCard({ movie }: Props) {
           <Tooltip content="Cancel" position="top">
             <button
               onClick={() => deleteJob(movie)}
-              className="text-[15px] font-medium text-white/50 transition-all duration-150 hover:text-white/100"
+              className="text-xl text-white/50 transition-all duration-150 hover:text-white/90"
             >
               <FontAwesomeIcon icon={faClose} />
             </button>

frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx

@@ -1,8 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { useSignals } from "@preact/signals-react/runtime";
-import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
-import { useContext } from "react";
-import { uploadImage } from "~/components/reusable/UploadModalMedia/uploadImage";
+
 import {
   faPlus,
   faCamera,
@@ -12,71 +9,19 @@ import {
   faImages,
   faDownload,
   faSpinnerThird,
-  faTimes,
-  faCheck,
-  faSpellCheck,
-  faMessageCheck,
-  faMessageXmark,
 } from "@fortawesome/pro-solid-svg-icons";
-import {
-  faRectangleWide,
-  faRectangleVertical,
-  faSquare,
-  faRectangle,
-} from "@fortawesome/pro-regular-svg-icons";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverItem, PopoverMenu } from "~/components/reusable/Popover";
-import { Button, ToggleButton, Tooltip } from "~/components";
-import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
-import {
-  cameraAspectRatio,
-  disableHotkeyInput,
-  DomLevels,
-  enableHotkeyInput,
-} from "~/pages/PageEnigma/signals";
-import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
-import Queue from "~/pages/PageEnigma/Queue/Queue";
-import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
-
-interface ReferenceImage {
-  id: string;
-  url: string;
-  file: File;
-  mediaToken: string;
-}
-import { EngineApi } from "~/Classes/ApiManager/EngineApi";
-import { scene } from "~/signals/scene";
-import { UploaderStates } from "~/enums/UploaderStates";
+import { Button } from "~/components";
 
 export const PromptBox = () => {
-  useSignals();
-  const editorEngine = useContext(EngineContext);
   const [prompt, setPrompt] = useState("");
   const [isEnqueueing, setisEnqueueing] = useState(false);
-  const [useSystemPrompt, setUseSystemPrompt] = useState(true);
-  const [referenceImages, setReferenceImages] = useState<ReferenceImage[]>([]);
   const [aspectRatioList, setAspectRatioList] = useState<PopoverItem[]>([
-    {
-      label: "3:2",
-      selected: true,
-      icon: <FontAwesomeIcon icon={faRectangle} className="h-4 w-4" />,
-    },
-    {
-      label: "2:3",
-      selected: false,
-      icon: <FontAwesomeIcon icon={faRectangleVertical} className="h-4 w-4" />,
-    },
-    {
-      label: "1:1",
-      selected: false,
-      icon: <FontAwesomeIcon icon={faSquare} className="h-4 w-4" />,
-    },
-    {
-      label: "16:9",
-      selected: false,
-      icon: <FontAwesomeIcon icon={faRectangleWide} className="h-4 w-4" />,
-    },
+    { label: "16:9", selected: true },
+    { label: "3:2", selected: false },
+    { label: "2:3", selected: false },
+    { label: "1:1", selected: false },
   ]);
   const [cameraList, setCameraList] = useState<PopoverItem[]>([
     {
@@ -100,25 +45,6 @@ export const PromptBox = () => {
     }
   }, [prompt]);
 
-  // Update aspect ratio list based on the current cameraAspectRatio signal
-  useEffect(() => {
-    setAspectRatioList((prev) =>
-      prev.map((item) => ({
-        ...item,
-        selected:
-          (item.label === "16:9" &&
-            cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_16_9) ||
-          (item.label === "3:2" &&
-            cameraAspectRatio.value === CameraAspectRatio.HORIZONTAL_3_2) ||
-          (item.label === "2:3" &&
-            cameraAspectRatio.value === CameraAspectRatio.VERTICAL_2_3) ||
-          (item.label === "1:1" &&
-            cameraAspectRatio.value === CameraAspectRatio.SQUARE_1_1),
-      })),
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cameraAspectRatio.value]);
-
   const handleCameraSelect = (selectedItem: PopoverItem) => {
     setCameraList((prev) =>
       prev.map((item) => ({
@@ -147,70 +73,12 @@ export const PromptBox = () => {
         selected: item.label === selectedItem.label,
       })),
     );
-
-    // Map the selected label to the corresponding CameraAspectRatio enum value
-    let newRatio: CameraAspectRatio;
-    switch (selectedItem.label) {
-      case "16:9":
-        newRatio = CameraAspectRatio.HORIZONTAL_16_9;
-        break;
-      case "3:2":
-        newRatio = CameraAspectRatio.HORIZONTAL_3_2;
-        break;
-      case "2:3":
-        newRatio = CameraAspectRatio.VERTICAL_2_3;
-        break;
-      case "1:1":
-        newRatio = CameraAspectRatio.SQUARE_1_1;
-        break;
-      default:
-        newRatio = CameraAspectRatio.HORIZONTAL_16_9;
-    }
-
-    // Publish the change to the engine
-    Queue.publish({
-      queueName: QueueNames.TO_ENGINE,
-      action: toEngineActions.CHANGE_CAMERA_ASPECT_RATIO,
-      data: newRatio,
-    });
   };
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (files) {
-      Array.from(files).forEach((file) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          uploadImage({
-            title: `reference-image-${Math.random().toString(36).substring(2, 15)}`,
-            assetFile: file,
-            progressCallback: (newState) => {
-              console.debug("Upload progress:", newState.data);
-              if (newState.status === UploaderStates.success && newState.data) {
-                const referenceImage: ReferenceImage = {
-                  id: Math.random().toString(36).substring(7),
-                  url: reader.result as string,
-                  file,
-                  mediaToken: newState.data || "",
-                };
-                setReferenceImages((prev) => [...prev, referenceImage]);
-                console.log("Reference image added:", referenceImage);
-              } else {
-                console.error("No data from uploadImage");
-              }
-            },
-          });
-        };
-
-        reader.readAsDataURL(file);
-      });
-    }
-  };
-
-  const handleRemoveReference = (id: string) => {
-    setReferenceImages((prev) => prev.filter((img) => img.id !== id));
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
+    const file = event.target.files?.[0];
+    if (file) {
+      console.log("File uploaded:", file);
     }
   };
 
@@ -248,37 +116,13 @@ export const PromptBox = () => {
   const handleEnqueue = async () => {
     if (!prompt.trim()) return;
 
-    if (editorEngine) {
-      editorEngine.positive_prompt = prompt;
-
-      const engineApi = new EngineApi();
-      const snapshot = editorEngine.snapShotOfCurrentFrame(false);
-      if (snapshot) {
-        const snapshotResult = await engineApi.uploadSceneSnapshot({
-          screenshot: snapshot.file,
-          sceneMediaToken: "",
-        });
-
-        await engineApi.enqueueImageGeneration({
-          prompt: prompt,
-          snapshotMediaToken: snapshotResult.data || "",
-          additionalImages: referenceImages.map((image) => image.mediaToken),
-        });
-      }
-
-      setisEnqueueing(true);
-      try {
-        // Here we would pass both the prompt and reference images to the generation
-        console.log(
-          "Enqueuing with prompt:",
-          prompt,
-          "and reference images:",
-          referenceImages,
-        );
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-      } finally {
-        setisEnqueueing(false);
-      }
+    setisEnqueueing(true);
+    try {
+      // generate logic here
+      console.log("Enqueuing with prompt:", prompt);
+      await new Promise((resolve) => setTimeout(resolve, 2000)); // dummy delay here
+    } finally {
+      setisEnqueueing(false);
     }
   };
 
@@ -289,204 +133,101 @@ export const PromptBox = () => {
     }
   };
 
-  // Get the current aspect ratio icon based on the cameraAspectRatio signal
-  const getCurrentAspectRatioIcon = () => {
-    switch (cameraAspectRatio.value) {
-      case CameraAspectRatio.HORIZONTAL_16_9:
-        return faRectangleWide;
-      case CameraAspectRatio.HORIZONTAL_3_2:
-        return faRectangle;
-      case CameraAspectRatio.VERTICAL_2_3:
-        return faRectangleVertical;
-      case CameraAspectRatio.VERTICAL_9_16:
-        return faRectangleVertical;
-      case CameraAspectRatio.SQUARE_1_1:
-        return faSquare;
-      default:
-        return faRectangleWide;
-    }
-  };
-
-  const handleSaveFrame = async () => {
-    if (editorEngine) {
-      const snapshot = editorEngine.snapShotOfCurrentFrame(false);
-      if (snapshot) {
-        const engineApi = new EngineApi();
-        await engineApi.uploadSceneSnapshot({
-          screenshot: snapshot.file || "",
-          sceneMediaToken: "",
-        });
-      }
-    }
-  };
-
-  const handleDownloadFrame = () => {
-    if (editorEngine) {
-      editorEngine.snapShotOfCurrentFrame(true);
-    }
-  };
-
   return (
-    <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col gap-3">
-      {referenceImages.length > 0 && (
-        <div className="flex w-full gap-2">
-          {referenceImages.map((image) => (
-            <div
-              key={image.id}
-              className="glass relative aspect-square w-20 rounded-lg"
-            >
-              <img
-                src={image.url}
-                alt="Reference"
-                className="h-full w-full rounded-lg object-cover"
-              />
-              <button
-                onClick={() => handleRemoveReference(image.id)}
-                className="absolute right-[2px] top-[2px] flex h-5 w-5 items-center justify-center rounded-full bg-black/40 text-white backdrop-blur-md transition-colors hover:bg-black"
-              >
-                <FontAwesomeIcon icon={faTimes} className="h-2.5 w-2.5" />
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-      <div className="glass w-[730px] rounded-xl p-4">
-        <input
-          type="file"
-          ref={fileInputRef}
-          className="hidden"
-          accept="image/*"
-          onChange={handleFileUpload}
-          multiple
+    <div className="glass absolute bottom-4 left-1/2 w-[730px] -translate-x-1/2 rounded-xl p-4">
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="hidden"
+        accept="image/*"
+        onChange={handleFileUpload}
+      />
+      <div className="flex justify-center gap-2">
+        <PopoverMenu
+          mode="button"
+          panelTitle="Add Image"
+          items={[
+            {
+              label: "Upload from device",
+              selected: false,
+              icon: <FontAwesomeIcon icon={faUpload} className="h-4 w-4" />,
+              action: "upload",
+            },
+            {
+              label: "Choose from library",
+              selected: false,
+              icon: <FontAwesomeIcon icon={faImages} className="h-4 w-4" />,
+              action: "library",
+            },
+          ]}
+          onAction={handleAction}
+          showIconsInList
+          buttonClassName="backdrop-blur-none bg-transparent hover:bg-transparent py-1.5 px-0 pr-0.5 m-0 hover:opacity-50 transition-opacity duration-100 ring-0 border-none focus:ring-0 outline-none"
+          triggerIcon={<FontAwesomeIcon icon={faPlus} className="text-xl" />}
         />
-        <div className="flex justify-center gap-2">
-          <PopoverMenu
-            mode="button"
-            panelTitle="Add Image"
-            items={[
-              {
-                label: "Upload from device",
-                selected: false,
-                icon: <FontAwesomeIcon icon={faUpload} className="h-4 w-4" />,
-                action: "upload",
-              },
-              {
-                label: "Choose from library",
-                selected: false,
-                icon: <FontAwesomeIcon icon={faImages} className="h-4 w-4" />,
-                action: "library",
-                disabled: true,
-              },
-            ]}
-            onAction={handleAction}
-            showIconsInList
-            buttonClassName="backdrop-blur-none bg-transparent hover:bg-transparent py-1.5 px-0 pr-1 m-0 hover:opacity-50 transition-opacity duration-100 ring-0 border-none focus:ring-0 outline-none"
-            triggerIcon={<FontAwesomeIcon icon={faPlus} className="text-xl" />}
-          />
 
-          <textarea
-            ref={textareaRef}
-            rows={1}
-            placeholder="Describe your image..."
-            className="text-md mb-2 max-h-[5.5em] flex-1 resize-none overflow-y-auto rounded bg-transparent pb-2 pr-2 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none"
-            value={prompt}
-            onChange={handleChange}
-            onPaste={handlePaste}
-            onKeyDown={handleKeyDown}
-            onFocus={() => {
-              console.log("disabling hotkeys");
-              disableHotkeyInput(DomLevels.INPUT);
-            }}
-            onBlur={() => {
-              console.log("enabling hotkeys");
-              enableHotkeyInput(DomLevels.INPUT);
-            }}
+        <textarea
+          ref={textareaRef}
+          rows={1}
+          placeholder="Describe your image..."
+          className="text-md mb-2 max-h-[5.5em] flex-1 resize-none overflow-y-auto rounded bg-transparent px-2 pb-2 pt-1 text-white placeholder-white placeholder:text-white/60 focus:outline-none"
+          value={prompt}
+          onChange={handleChange}
+          onPaste={handlePaste}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <div className="mt-2 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <PopoverMenu
+            items={aspectRatioList}
+            onSelect={handleAspectRatioSelect}
+            mode="toggle"
+            panelTitle="Aspect Ratio"
+          />
+          <PopoverMenu
+            items={cameraList}
+            onSelect={handleCameraSelect}
+            onAdd={handleAddCamera}
+            triggerIcon={
+              <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />
+            }
+            showAddButton
+            showIconsInList
+            mode="toggle"
+            panelTitle="Camera"
           />
         </div>
-        <div className="mt-2 flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
-            <PopoverMenu
-              items={aspectRatioList}
-              onSelect={handleAspectRatioSelect}
-              mode="toggle"
-              panelTitle="Aspect Ratio"
-              showIconsInList
-              triggerIcon={
-                <FontAwesomeIcon
-                  icon={getCurrentAspectRatioIcon()}
-                  className="h-4 w-4"
-                />
-              }
-            />
-            <PopoverMenu
-              items={cameraList}
-              onSelect={handleCameraSelect}
-              onAdd={handleAddCamera}
-              triggerIcon={
-                <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />
-              }
-              showAddButton
-              showIconsInList
-              mode="toggle"
-              panelTitle="Camera"
-            />
-            <Tooltip
-              content={
-                useSystemPrompt
-                  ? "Use system prompt: ON"
-                  : "Use system prompt: OFF"
-              }
-              position="top"
-              className="z-50"
-              delay={100}
-            >
-              <ToggleButton
-                isActive={useSystemPrompt}
-                icon={faMessageXmark}
-                activeIcon={faMessageCheck}
-                onClick={() => setUseSystemPrompt(!useSystemPrompt)}
+        <div className="flex items-center gap-2">
+          <Button
+            className="flex items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
+            variant="secondary"
+            icon={faDownload}
+          >
+            Download frame
+          </Button>
+          <Button
+            className="flex items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
+            variant="secondary"
+            icon={faSave}
+          >
+            Save frame
+          </Button>
+          <Button
+            className="flex items-center border-none bg-brand-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+            icon={!isEnqueueing ? faSparkles : undefined}
+            onClick={handleEnqueue}
+            disabled={isEnqueueing || !prompt.trim()}
+          >
+            {isEnqueueing ? (
+              <FontAwesomeIcon
+                icon={faSpinnerThird}
+                className="animate-spin text-lg"
               />
-            </Tooltip>
-          </div>
-          <div className="flex items-center gap-2">
-            <Tooltip
-              content="Download frame"
-              position="top"
-              className="z-50"
-              delay={100}
-            >
-              <Button
-                className="flex h-9 items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
-                variant="secondary"
-                icon={faDownload}
-                onClick={handleDownloadFrame}
-              />
-            </Tooltip>
-
-            <Button
-              className="flex items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
-              variant="secondary"
-              icon={faSave}
-              onClick={handleSaveFrame}
-            >
-              Save frame
-            </Button>
-            <Button
-              className="flex items-center border-none bg-brand-primary px-3 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
-              icon={!isEnqueueing ? faSparkles : undefined}
-              onClick={handleEnqueue}
-              disabled={isEnqueueing || !prompt.trim()}
-            >
-              {isEnqueueing ? (
-                <FontAwesomeIcon
-                  icon={faSpinnerThird}
-                  className="animate-spin text-lg"
-                />
-              ) : (
-                "Generate"
-              )}
-            </Button>
-          </div>
+            ) : (
+              "Generate"
+            )}
+          </Button>
         </div>
       </div>
     </div>

frontend/editor3d/app/pages/PageEnigma/comps/SceneContainer/Letterbox.tsx

@@ -51,7 +51,7 @@ export const Letterbox = ({
     <div
       id="letterbox"
       className={twMerge(
-        "absolute left-0 top-0 flex h-full w-full justify-between pointer-events-none",
+        "absolute left-0 top-0 flex h-full w-full justify-between",
         matteOri === MatteOrientation.TOP_BOTTOM ? "flex-col" : null,
       )}
     >

frontend/editor3d/app/pages/PageEnigma/comps/SceneContainer/helpers.ts

@@ -25,16 +25,6 @@ export const getMatteOrientation = ({
         ? MatteOrientation.TOP_BOTTOM
         : MatteOrientation.LEFT_RIGHT;
     }
-    case CameraAspectRatio.VERTICAL_2_3: {
-      return (height / 3) * 2 - width >= 0
-        ? MatteOrientation.TOP_BOTTOM
-        : MatteOrientation.LEFT_RIGHT;
-    }
-    case CameraAspectRatio.HORIZONTAL_3_2: {
-      return (width / 3) * 2 - height >= 0
-        ? MatteOrientation.LEFT_RIGHT
-        : MatteOrientation.TOP_BOTTOM;
-    }
     case CameraAspectRatio.HORIZONTAL_16_9:
     default: {
       return (width / 16) * 9 - height >= 0
@@ -68,12 +58,6 @@ export const calcMatteWidth = ({
     case CameraAspectRatio.VERTICAL_9_16: {
       return (width - (height / 16) * 9) / 2;
     }
-    case CameraAspectRatio.HORIZONTAL_3_2: {
-      return (width - (height / 2) * 3) / 2;
-    }
-    case CameraAspectRatio.VERTICAL_2_3: {
-      return (width - (height / 3) * 2) / 2;
-    }
     default: {
       return undefined;
     }
@@ -104,12 +88,6 @@ export const calcMatteHeight = ({
     case CameraAspectRatio.VERTICAL_9_16: {
       return (height - (width / 9) * 16) / 2;
     }
-    case CameraAspectRatio.HORIZONTAL_3_2: {
-      return (height - (width / 3) * 2) / 2;
-    }
-    case CameraAspectRatio.VERTICAL_2_3: {
-      return (height - (width / 2) * 3) / 2;
-    }
     default: {
       return undefined;
     }

frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/SidePanel.tsx

@@ -27,7 +27,7 @@ export const SidePanel = () => {
     <>
       <div
         className={[
-          "fixed flex border-l border-[#363636] bg-ui-panel transition-all duration-100",
+          "fixed z-30 flex border-l border-[#363636] bg-ui-panel transition-all duration-100",
         ].join(" ")}
         style={{
           top: 64,

frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/tabList.tsx

@@ -1,17 +1,10 @@
 import { ReactNode } from "react";
 import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import {
-  faAlienMonster,
-  faCatSpace,
-  faCloud,
-  faCube,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faBrush, faCatSpace } from "@fortawesome/pro-solid-svg-icons";
 
 import { TabTitles } from "~/enums";
+import { StylizeTab } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StylizeTab";
 import { CartoonsTab } from "../SidePanelTabs/tabComps/CharactersComboTabs";
-import { ObjectsTab } from "../SidePanelTabs/tabComps/ObjectsTab";
-import { SkyboxesTab } from "../SidePanelTabs/tabComps/SkyboxesTab";
-import { CreaturesTab } from "../SidePanelTabs/tabComps/CreaturesTab";
 
 export interface TabItem {
   icon: FontAwesomeIconProps["icon"];
@@ -26,21 +19,9 @@ export const tabList: TabItem[] = [
     component: <CartoonsTab />,
   },
 
-  {
-    icon: faCube,
-    title: TabTitles.OBJECTS,
-    component: <ObjectsTab />,
-  },
-
-  {
-    icon: faCloud,
-    title: TabTitles.SKYBOXES,
-    component: <SkyboxesTab />,
-  },
-
-  {
-    icon: faAlienMonster,
-    title: TabTitles.OBJECTS_CREATURES,
-    component: <CreaturesTab />,
-  },
+  // {
+  //   icon: faBrush,
+  //   title: TabTitles.STYLIZE,
+  //   component: <StylizeTab />,
+  // }
 ];

frontend/editor3d/app/pages/PageEnigma/comps/SidePanelMenu/SidePanelMenu.tsx

@@ -30,7 +30,7 @@ export const SidePanelMenu = ({
   return (
     <div
       className={twMerge(
-        "fixed bg-assets-background",
+        "fixed z-30 bg-assets-background",
         "right-0 top-[64px] w-[84px] overflow-auto border-l px-2 py-2",
         sidePanelVisible.value ? "border-transparent" : "border-[#363636]",
       )}
@@ -49,9 +49,9 @@ export const SidePanelMenu = ({
                   ? "border-[#363636] bg-brand-secondary-900/60 opacity-100 hover:bg-brand-secondary-900/60"
                   : "opacity-60",
                 tab.title === TabTitles.STYLIZE &&
-                  "bg-brand-primary font-medium opacity-90 hover:border-white/25 hover:bg-brand-primary hover:opacity-100",
+                "bg-brand-primary font-medium opacity-90 hover:border-white/25 hover:bg-brand-primary hover:opacity-100",
                 tab.title === selectedTab.title &&
-                tab.title === TabTitles.STYLIZE
+                  tab.title === TabTitles.STYLIZE
                   ? "border-white/50 opacity-100 hover:border-white/50"
                   : "",
               ])}

frontend/editor3d/app/pages/PageEnigma/enums/EditorState.ts

@@ -8,6 +8,4 @@ export enum CameraAspectRatio {
   HORIZONTAL_16_9 = "horizontal_16_9",
   VERTICAL_9_16 = "vertical_9_16",
   SQUARE_1_1 = "SQUARE_1_1",
-  HORIZONTAL_3_2 = "horizontal_3_2",
-  VERTICAL_2_3 = "vertical_2_3",
 }

frontend/editor3d/app/pages/PageEnigma/signals/engine.ts

@@ -4,7 +4,7 @@ import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
 export const editorState = signal<EditorStates>(EditorStates.EDIT);
 
 export const cameraAspectRatio = signal<CameraAspectRatio>(
-  CameraAspectRatio.HORIZONTAL_3_2,
+  CameraAspectRatio.HORIZONTAL_16_9,
 );
 
 export const setCameraAspectRatio = (newAspectRatio: CameraAspectRatio) => {

frontend/editor3d/app/signals/activeJobs.ts

@@ -33,15 +33,6 @@ export const activeWorkflowJobs = computed(() => {
   });
 });
 
-export const activeImageGenerationJobs = computed(() => {
-  if (!activeJobs.value) {
-    return undefined;
-  }
-  return activeJobs.value.filter((job) => {
-    return job.request.inference_category === JobType.ImageGeneration;
-  });
-});
-
 export const activeAudioJobs = computed(() => {
   if (!activeJobs.value) {
     return undefined;

frontend/editor3d/package-lock.json

@@ -9,7 +9,6 @@
         "@awesome.me/kit-fde2be5eb0": "^1.0.7",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-brands-svg-icons": "^6.5.2",
-        "@fortawesome/pro-regular-svg-icons": "^6.5.1",
         "@fortawesome/pro-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@headlessui/react": "^1.7.18",
@@ -1424,17 +1423,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@fortawesome/pro-regular-svg-icons": {
-      "version": "6.7.2",
-      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.7.2/pro-regular-svg-icons-6.7.2.tgz",
-      "integrity": "sha512-cJolK4K/s56mHAqOyno24SmjviHqSqG9ZfckBKCpWjJlgDexi61EfET5wWbmmEot6/BqasFjw9S6tudFQUL/PQ==",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@fortawesome/pro-solid-svg-icons": {
       "version": "6.7.2",
       "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.7.2/pro-solid-svg-icons-6.7.2.tgz",

frontend/editor3d/package.json

@@ -21,7 +21,6 @@
     "@awesome.me/kit-fde2be5eb0": "^1.0.7",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.5.1",
     "@fortawesome/pro-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.18",