From 59f5da1be311d00d10fd7927ad19abcae9244262 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Tue, 23 Sep 2025 14:39:36 -0400
Subject: [PATCH] change model orders (#839)

---
 .../src/lib/model-selectors-for-pages.tsx     | 91 +++++++++++++------
 .../model-list/src/lib/lists/ImageModels.ts   |  8 ++
 2 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/frontend/libs/components/model-selector/src/lib/model-selectors-for-pages.tsx b/frontend/libs/components/model-selector/src/lib/model-selectors-for-pages.tsx
index 5e7d76494e..e61666c82f 100644
--- a/frontend/libs/components/model-selector/src/lib/model-selectors-for-pages.tsx
+++ b/frontend/libs/components/model-selector/src/lib/model-selectors-for-pages.tsx
@@ -6,7 +6,7 @@ import {
   Model,
   VIDEO_MODELS,
   IMAGE_MODELS,
-  ALL_MODELS_BY_ID,
+  IMAGE_MODELS_BY_ID,
 } from "@storyteller/model-list";
 import { ModelTag } from "@storyteller/model-list";
 
@@ -14,7 +14,7 @@ export type ModelList = Omit<PopoverItem, "selected">[];
 
 const withIcon = (creatorIcon: any, fallback: any) => creatorIcon || fallback;
 
-const buildItems2 = (
+const buildItems = (
   models: Model[],
   fallbackIcon: any
 ) =>
@@ -37,35 +37,66 @@ const buildItems2 = (
  * access to the object directly.
  */ 
 
-export const CANVAS_2D_PAGE_MODEL_LIST : ModelList = buildItems2(
-  IMAGE_MODELS.filter((m) => m.tags?.includes(ModelTag.InstructiveEdit)),
-  <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
-);
+export const TEXT_TO_IMAGE_PAGE_MODEL_LIST : ModelList = 
+  buildItems(
+    (function() : Model[] {
+      const set : Set<Model> = new Set();
+      set.add(IMAGE_MODELS_BY_ID.get("flux_pro_1_1")!); // Don't put Midjourney first!
+      IMAGE_MODELS
+        .filter((model) => !model.usesInpaintingMask) // We can't use masked inpainting models here
+        .filter((model) => model.id !== "flux_pro_kontext_max") // NB: Flux Pro Kontext Max requires an input image
+        .forEach((m) => set.add(m));
+      return Array.from(set);
+    })(),
+    <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 CANVAS_2D_PAGE_MODEL_LIST : ModelList = 
+  buildItems(
+    (function() : Model[] {
+      const set : Set<Model> = new Set();
+      set.add(IMAGE_MODELS_BY_ID.get("gpt_image_1")!); // Place gpt_image_1 first.
+      IMAGE_MODELS
+        .filter((m) => m.tags?.includes(ModelTag.InstructiveEdit))
+        .forEach((m) => set.add(m));
+      return Array.from(set);
+    })(),
+    <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
+  );
 
-export const IMAGE_EDITOR_PAGE_MODEL_LIST : ModelList = buildItems2(
-  //[
-  //  ALL_MODELS_BY_ID.get("flux_pro_inpaint")!,
-  //  ALL_MODELS_BY_ID.get("flux_dev_juggernaut_inpaint")!,
-  //  ALL_MODELS_BY_ID.get("flux_pro_kontext_max")!,
-  //],
-  IMAGE_MODELS.filter((m) => m.canEditImages),
-  <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
-);
+export const STAGE_3D_PAGE_MODEL_LIST : ModelList = 
+  buildItems(
+    (function() : Model[] {
+      const set : Set<Model> = new Set();
+      set.add(IMAGE_MODELS_BY_ID.get("gpt_image_1")!); // Place gpt_image_1 first.
+      IMAGE_MODELS
+        .filter((m) => m.tags?.includes(ModelTag.InstructiveEdit))
+        .forEach((m) => set.add(m));
+      return Array.from(set);
+    })(),
+    <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
+  );
 
-export const IMAGE_TO_VIDEO_PAGE_MODEL_LIST : ModelList = buildItems2(
-  VIDEO_MODELS,
-  <FontAwesomeIcon icon={faFilm} className="h-4 w-4" />
-);
+export const IMAGE_EDITOR_PAGE_MODEL_LIST : ModelList = 
+  buildItems(
+    //[
+    //  ALL_MODELS_BY_ID.get("flux_pro_inpaint")!,
+    //  ALL_MODELS_BY_ID.get("flux_dev_juggernaut_inpaint")!,
+    //  ALL_MODELS_BY_ID.get("flux_pro_kontext_max")!,
+    //],
+    (function() : Model[] {
+      const set : Set<Model> = new Set();
+      //set.add(IMAGE_MODELS_BY_ID.get("gpt_image_1")!); // Place gpt_image_1 first.
+      IMAGE_MODELS
+        .filter((m) => m.canEditImages)
+        .forEach((m) => set.add(m));
+      return Array.from(set);
+    })(),
+    <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
+  );
 
-export const TEXT_TO_IMAGE_PAGE_MODEL_LIST : ModelList = buildItems2(
-  IMAGE_MODELS
-    .filter((model) => !model.usesInpaintingMask) // We can't use masked inpainting models here
-    .filter((model) => model.id !== "flux_pro_kontext_max") // NB: Flux Pro Kontext Max requires an input image
-    ,
-  <FontAwesomeIcon icon={faImage} className="h-4 w-4" />
-);
+export const IMAGE_TO_VIDEO_PAGE_MODEL_LIST : ModelList = 
+  buildItems(
+    VIDEO_MODELS,
+    <FontAwesomeIcon icon={faFilm} className="h-4 w-4" />
+  );
\ No newline at end of file
diff --git a/frontend/libs/model-list/src/lib/lists/ImageModels.ts b/frontend/libs/model-list/src/lib/lists/ImageModels.ts
index fa92ac5c99..bde886fcf4 100644
--- a/frontend/libs/model-list/src/lib/lists/ImageModels.ts
+++ b/frontend/libs/model-list/src/lib/lists/ImageModels.ts
@@ -148,3 +148,11 @@ export const IMAGE_MODELS: ImageModel[] = [
     usesInpaintingMask: true,
   }),
 ];
+
+export const IMAGE_MODELS_BY_ID : Map<string, ImageModel> = new Map(
+  IMAGE_MODELS.map((model) => [model.id, model])
+);
+
+if (IMAGE_MODELS_BY_ID.size !== IMAGE_MODELS.length) {
+  throw new Error("All image models must have unique IDs");
+}