Allow editing the boxes visually on the sample section for ideogram

ui/src/app/jobs/new/SimpleJob.tsx

@@ -22,8 +22,9 @@ import {
   SliderInput,
 } from '@/components/formInputs';
 import Card from '@/components/Card';
-import { X, Copy, Wand2 } from 'lucide-react';
+import { X, Copy, Wand2, SquareDashed } from 'lucide-react';
 import { openUpsamplePromptsModal, toAspectRatio } from '@/components/UpsamplePromptsModal';
+import { openPromptBoxEditor } from '@/components/PromptBoxEditorModal';
 import AddSingleImageModal, { openAddImageModal } from '@/components/AddSingleImageModal';
 import SampleControlImage from '@/components/SampleControlImage';
 import { FlipHorizontal2, FlipVertical2 } from 'lucide-react';
@@ -1268,7 +1269,7 @@ export default function SimpleJob({
               <label className="block text-xs text-gray-300">
                 Sample Prompts ({jobConfig.config.process[0].sample.samples.length})
               </label>
-              {modelArch?.additionalSections?.includes('upsample_prompts') && (
+              {modelArch?.additionalSections?.includes('ideogram_4_prompt') && (
                 <button
                   type="button"
                   disabled={jobConfig.config.process[0].sample.samples.length === 0}
@@ -1377,6 +1378,31 @@ export default function SimpleJob({
                           </>
                         )}
 
+                        {modelArch?.additionalSections?.includes('ideogram_4_prompt') && (
+                          <div className="mt-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                const sampleCfg = jobConfig.config.process[0].sample;
+                                openPromptBoxEditor({
+                                  prompt: sample.prompt || '',
+                                  aspectRatio: toAspectRatio(
+                                    sample.width || sampleCfg.width,
+                                    sample.height || sampleCfg.height,
+                                  ),
+                                  title: `Prompt #${i + 1}`,
+                                  onApply: newPrompt =>
+                                    setJobConfig(newPrompt, `config.process[0].sample.samples[${i}].prompt`),
+                                });
+                              }}
+                              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md border border-gray-600 text-gray-300 hover:bg-gray-800 transition-colors"
+                            >
+                              <SquareDashed className="w-3.5 h-3.5" />
+                              Edit caption &amp; boxes
+                            </button>
+                          </div>
+                        )}
+
                         <div className="grid w-full lg:grid-flow-col lg:auto-cols-fr gap-4 mt-2">
                           {!isAudioModel && (
                             <TextInput

ui/src/app/jobs/new/options.ts

@@ -32,7 +32,7 @@ type AdditionalSections =
   | 'model.low_vram'
   | 'model.qie.match_target_res'
   | 'model.assistant_lora_path'
-  | 'upsample_prompts';
+  | 'ideogram_4_prompt';
 
 type ModelGroup = 'image' | 'instruction' | 'video' | 'experimental' | 'audio';
 
@@ -1000,7 +1000,7 @@ export const modelArchs: ModelArch[] = [
     additionalSections: [
       'model.low_vram',
       'model.layer_offloading',
-      'upsample_prompts',
+      'ideogram_4_prompt',
     ],
     hasMultiLinePrompts: true,
   },

ui/src/app/layout.tsx

@@ -11,6 +11,7 @@ import os from 'os';
 import { CaptionDatasetModal } from '@/components/CaptionDatasetModal';
 import MergeLoRAsModal from '@/components/MergeLoRAsModal';
 import UpsamplePromptsModal from '@/components/UpsamplePromptsModal';
+import PromptBoxEditorModal from '@/components/PromptBoxEditorModal';
 
 export const dynamic = 'force-dynamic';
 
@@ -65,6 +66,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <CaptionDatasetModal />
         <MergeLoRAsModal />
         <UpsamplePromptsModal />
+        <PromptBoxEditorModal />
       </body>
     </html>
   );