cleanup

frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx

@@ -11,13 +11,11 @@ import Konva from "konva";
 import { setCanvasRenderBitmap } from "../../signals/canvasRenderBitmap";
 import { captureStageImageBitmap } from "./hooks/useUpdateSnapshot";
 import { ContextMenuContainer } from "./components/ui/ContextMenu";
-import { ImageModel, ModelInfo } from "@storyteller/model-list";
+import { ImageModel } from "@storyteller/model-list";
 import {
   CANVAS_2D_PAGE_MODEL_LIST,
   ClassyModelSelector,
   ModelPage,
-  ModelSelector,
-  useModelSelectorStore,
 } from "@storyteller/ui-model-selector";
 import { useCanvasBgRemovedEvent } from "@storyteller/tauri-api";
 import { getSelectedImageModel } from "@storyteller/ui-model-selector";
@@ -52,21 +50,11 @@ export const DecodeBase64ToImage = async (
 const PageDraw = () => {
   const canvasWidth = useRef<number>(1024);
   const canvasHeight = useRef<number>(1024);
-  //const { selectedModels } = useModelSelectorStore();
   const [isSelecting, setIsSelecting] = useState<boolean>(false);
   const stageRef = useRef<Konva.Stage>({} as Konva.Stage);
   const transformerRefs = useRef<{ [key: string]: Konva.Transformer }>({});
   const store = useSceneStore();
 
-  //const selectedModel =
-  //  selectedModels[PAGE_ID] ||
-  //  CANVAS_2D_PAGE_MODEL_LIST[0]?.label;
-
-  //const selectedModelInfo: ModelInfo | undefined =
-  //  CANVAS_2D_PAGE_MODEL_LIST.find(
-  //    (m) => m.label === selectedModel,
-  //  )?.modelInfo;
-
   const selectedImageModel : ImageModel | undefined = getSelectedImageModel(PAGE_ID);
 
   useDeleteHotkeys({ onDelete: store.deleteSelectedItems });

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

@@ -68,21 +68,20 @@ import {
 import {
   STAGE_3D_PAGE_MODEL_LIST,
   ModelPage,
-  ModelSelector,
-  useModelSelectorStore,
+  getSelectedImageModel,
+  ClassyModelSelector,
 } from "@storyteller/ui-model-selector";
 import { LoginModal, useLoginModalStore } from "@storyteller/ui-login-modal";
 import PageDraw from "../PageDraw/PageDraw";
 import { useTabStore } from "../Stores/TabState";
 import PageEdit from "../PageEdit/PageEdit";
-import { ModelInfo } from "@storyteller/model-list";
+import { ImageModel } from "@storyteller/model-list";
 
 const PAGE_ID : ModelPage = ModelPage.Stage3D;
 
 export const PageEditor = () => {
   useSignals();
   const { triggerRecheck } = useLoginModalStore();
-  const { selectedModels } = useModelSelectorStore();
   const { status } = authentication;
 
   useEffect(() => {
@@ -96,12 +95,6 @@ export const PageEditor = () => {
     event.stopPropagation();
   };
 
-  // TODO: For 3d Promptbox to accept this later on
-  // const { selectedModels } = useModelSelectorStore();
-  // const selectedModel =
-  // selectedModels[ModelCategory.Editor3D] ||
-  // videoGenerationModels[0]?.label;
-
   useEffect(() => {
     timelineHeight.value = 0; //timelineHeight.value = 208;
     sidePanelWidth.value = 340;
@@ -110,14 +103,7 @@ export const PageEditor = () => {
     };
   }, []);
 
-  const selectedModel =
-    selectedModels[PAGE_ID] ||
-    STAGE_3D_PAGE_MODEL_LIST[0]?.label;
-
-  const selectedModelInfo: ModelInfo | undefined =
-    STAGE_3D_PAGE_MODEL_LIST.find(
-      (m) => m.label === selectedModel,
-    )?.modelInfo;
+  const selectedImageModel : ImageModel | undefined = getSelectedImageModel(PAGE_ID);
 
   const height =
     dndTimelineHeight.value > -1
@@ -526,7 +512,7 @@ export const PageEditor = () => {
                   handleCameraNameChange={handleCameraNameChange}
                   handleCameraFocalLengthChange={handleCameraFocalLengthChange}
                   onAspectRatioSelect={onAspectRatioSelect}
-                  selectedModelInfo={selectedModelInfo}
+                  selectedImageModel={selectedImageModel}
                   setEnginePrompt={(prompt) => {
                     console.log("setEnginePrompt", prompt);
                     if (!editorEngine) {
@@ -548,7 +534,7 @@ export const PageEditor = () => {
                 />
 
                 <div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
-                  <ModelSelector
+                  <ClassyModelSelector
                     items={STAGE_3D_PAGE_MODEL_LIST}
                     page={PAGE_ID}
                     panelTitle="Select Model"

frontend/libs/components/model-selector/src/lib/model-lists.tsx

@@ -54,11 +54,6 @@ const buildItems2 = (
  * OLD MODEL LISTS
  */ 
 
-export const STAGE_3D_PAGE_MODEL_LIST : ModelList = buildItems(
-  STAGE_3D_PAGE_MODELS,
-  <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
-);
-
 export const IMAGE_EDITOR_PAGE_MODEL_LIST : ModelList = buildItems(
   IMAGE_EDITOR_PAGE_MODELS,
   <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
@@ -72,10 +67,14 @@ export const IMAGE_EDITOR_PAGE_MODEL_LIST : ModelList = buildItems(
  */ 
 
 export const CANVAS_2D_PAGE_MODEL_LIST : ModelList = buildItems2(
-  IMAGE_MODELS.filter((m) => m.tags?.includes(ModelTag.InstructiveEdit)),
+  IMAGE_MODELS.filter((m) => m.tags?.includes(ModelTag.InstructiveEdit)), // TODO: Just attach which page we want to see it on.
   <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
 );
 
+export const STAGE_3D_PAGE_MODEL_LIST : ModelList = buildItems2(
+  IMAGE_MODELS.filter((m) => m.tags?.includes(ModelTag.InstructiveEdit)),
+  <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
+);
 
 export const IMAGE_TO_VIDEO_PAGE_MODEL_LIST : ModelList = buildItems2(
   VIDEO_MODELS,

frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx

@@ -35,19 +35,12 @@ import { IsDesktopApp } from "@storyteller/tauri-utils";
 import { GalleryItem, GalleryModal } from "@storyteller/ui-gallery-modal";
 import { PromptsApi } from "@storyteller/api";
 import {
-  // SoraImageRemix,
-  // SoraImageRemixAspectRatio,
-  // CheckSoraSession,
-  // SoraSessionState,
-  // waitForSoraLogin,
   EnqueueContextualEditImage,
   EnqueueContextualEditImageSize,
 } from "@storyteller/tauri-api";
-// import { showActionReminder } from "@storyteller/ui-action-reminder-modal";
-// import { invoke } from "@tauri-apps/api/core";
 import { usePrompt2DStore, RefImage } from "./promptStore";
 import { gtagEvent } from "@storyteller/google-analytics";
-import { ModelInfo, getCapabilitiesForModel } from "@storyteller/model-list";
+import { getCapabilitiesForModel } from "@storyteller/model-list";
 import { ImageModel } from "@storyteller/model-list";
 
 export type AspectRatio = "1:1" | "3:2" | "2:3";
@@ -62,7 +55,6 @@ interface PromptBox2DProps {
     assetFile: File;
     progressCallback: (newState: UploaderState) => void;
   }) => Promise<void>;
-  //selectedModelInfo?: ModelInfo;
   selectedImageModel?: ImageModel;
   getCanvasRenderBitmap: () => MaybeCanvasRenderBitmapType;
   EncodeImageBitmapToBase64: (imageBitmap: ImageBitmap) => Promise<string>;
@@ -79,7 +71,6 @@ export const PromptBox2D = ({
   useJobContext,
   onEnqueuePressed,
   onAspectRatioChange,
-  //selectedModelInfo,
   selectedImageModel,
   onFitPressed,
 }: PromptBox2DProps) => {
@@ -321,31 +312,7 @@ export const PromptBox2D = ({
     setPrompt(e.target.value);
   };
 
-  // Helper to show Sora login reminder and wait for login
-  // const handleSoraLoginReminder = async () => {
-  //   return new Promise<void>((resolve) => {
-  //     showActionReminder({
-  //       reminderType: "soraLogin",
-  //       onPrimaryAction: async () => {
-  //         await invoke("open_sora_login_command");
-  //         await waitForSoraLogin();
-  //         toast.success("Logged in to Sora!");
-  //         resolve();
-  //       },
-  //     });
-  //   });
-  // };
-
   const handleTauriEnqueue = async () => {
-    // NB(bt): This needs to move to an error handler.
-    // // Check if the Sora session is valid
-    // const soraSession = await CheckSoraSession();
-    // if (soraSession.state !== SoraSessionState.Valid) {
-    //   setIsEnqueueing(false);
-    //   await handleSoraLoginReminder();
-    //   return;
-    // }
-
     const api = new PromptsApi();
     let image = getCanvasRenderBitmap();
     if (image === undefined) {

frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx

@@ -53,7 +53,7 @@ import {
 // import { showActionReminder } from "@storyteller/ui-action-reminder-modal";
 import { usePrompt3DStore, RefImage } from "./promptStore";
 import { gtagEvent } from "@storyteller/google-analytics";
-import { ModelInfo } from "@storyteller/model-list";
+import { ImageModel } from "@storyteller/model-list";
 
 interface PromptBox3DProps {
   cameras: Signal<Camera[]>;
@@ -73,7 +73,7 @@ interface PromptBox3DProps {
   handleCameraFocalLengthChange: (id: string, value: number) => void;
   onAspectRatioSelect: (newRatio: CameraAspectRatio) => void;
   setEnginePrompt: (prompt: string) => void;
-  selectedModelInfo?: ModelInfo;
+  selectedImageModel?: ImageModel;
   snapshotCurrentFrame:
     | ((shouldDownload?: boolean) => {
         base64Snapshot: string;
@@ -100,7 +100,7 @@ export const PromptBox3D = ({
   handleCameraFocalLengthChange,
   onAspectRatioSelect,
   setEnginePrompt,
-  selectedModelInfo,
+  selectedImageModel,
   snapshotCurrentFrame,
 }: PromptBox3DProps) => {
   useSignals();
@@ -450,7 +450,7 @@ export const PromptBox3D = ({
         const aspectRatio = getCurrentAspectRatio();
 
         const generateResponse = await EnqueueContextualEditImage({
-          model: selectedModelInfo,
+          model: selectedImageModel,
           scene_image_media_token: snapshotResult.data!,
           image_media_tokens: referenceImages.map((image) => image.mediaToken),
           disable_system_prompt: !useSystemPrompt,