Major UI cleanup and improvements

- Fixed duplicate model selector issue in img2video mode
- Replaced width/height with simple Aspect Ratio dropdown
- Collapsed advanced settings (steps, cfg) by default
- Reorganized model dropdowns with clearer categories:
- Recommended, NSFW Friendly, Fast, Other
- Simplified video model selector (removed redundant backend chips)
- Added pricing hints to video models
- Cleaner labels and descriptions throughout
- Added updateDimensions() function for aspect ratio

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/content_engine/api/ui.html

@@ -876,75 +876,58 @@ select { cursor: pointer; }
           </div>
 
           <div id="cloud-model-select" style="display:none">
-            <label>Cloud Model (Text-to-Image)</label>
+            <label>Model</label>
             <select id="gen-cloud-model">
-              <optgroup label="SeeDream (ByteDance) - NSFW OK">
-                <option value="seedream-4.5">SeeDream v4.5 (Best Quality)</option>
+              <optgroup label="Recommended">
+                <option value="seedream-4.5" selected>SeeDream v4.5 (Best)</option>
+                <option value="gpt-image-1.5">GPT Image 1.5</option>
+                <option value="nano-banana-pro">NanoBanana Pro</option>
+              </optgroup>
+              <optgroup label="NSFW Friendly">
                 <option value="seedream-4">SeeDream v4</option>
                 <option value="seedream-3.1">SeeDream v3.1</option>
               </optgroup>
-              <optgroup label="GPT Image (OpenAI)">
-                <option value="gpt-image-1.5">GPT Image 1.5 (Latest)</option>
-                <option value="gpt-image-1">GPT Image 1</option>
-                <option value="gpt-image-1-mini">GPT Image 1 Mini (Fast)</option>
-              </optgroup>
-              <optgroup label="NanoBanana (Google)">
-                <option value="nano-banana-pro">NanoBanana Pro</option>
+              <optgroup label="Fast">
+                <option value="gpt-image-1-mini">GPT Image Mini</option>
                 <option value="nano-banana">NanoBanana</option>
               </optgroup>
-              <optgroup label="Kling (Kuaishou)">
+              <optgroup label="Other">
                 <option value="kling-image-o3">Kling Image O3</option>
-              </optgroup>
-              <optgroup label="WAN (Alibaba)">
-                <option value="wan-2.6">WAN 2.6 (Latest)</option>
+                <option value="wan-2.6">WAN 2.6</option>
                 <option value="wan-2.5">WAN 2.5</option>
-              </optgroup>
-              <optgroup label="Other">
                 <option value="qwen-image">Qwen Image</option>
                 <option value="dreamina-3.1">Dreamina v3.1</option>
-                <option value="dreamina-3">Dreamina v3</option>
               </optgroup>
             </select>
           </div>
 
           <div id="cloud-edit-model-select" style="display:none">
-            <label>Cloud Edit Model (Image-to-Image)</label>
+            <label>Model</label>
             <select id="gen-cloud-edit-model">
-              <optgroup label="Higgsfield (Character Consistency)">
-                <option value="higgsfield-soul">Higgsfield Soul (Best for Faces)</option>
+              <optgroup label="Recommended">
+                <option value="seedream-4.5-edit" selected>SeeDream v4.5 Edit (Best)</option>
+                <option value="higgsfield-soul">Higgsfield Soul (Faces)</option>
+                <option value="gpt-image-1.5-edit">GPT Image 1.5 Edit</option>
               </optgroup>
-              <optgroup label="SeeDream Edit - NSFW OK">
-                <option value="seedream-4.5-edit">SeeDream v4.5 Edit (Best Quality)</option>
+              <optgroup label="NSFW Friendly">
                 <option value="seedream-4-edit">SeeDream v4 Edit</option>
-              </optgroup>
-              <optgroup label="WAN Edit (Alibaba)">
                 <option value="wan-2.6-edit">WAN 2.6 Edit</option>
+              </optgroup>
+              <optgroup label="Fast">
+                <option value="gpt-image-1-mini-edit">GPT Image Mini Edit</option>
+                <option value="nano-banana-edit">NanoBanana Edit</option>
+              </optgroup>
+              <optgroup label="Other">
                 <option value="wan-2.5-edit">WAN 2.5 Edit</option>
                 <option value="wan-2.2-edit">WAN 2.2 Edit</option>
-              </optgroup>
-              <optgroup label="Qwen Edit (WaveSpeed)">
                 <option value="qwen-edit-lora">Qwen Edit + LoRA</option>
-                <option value="qwen-edit-angles">Qwen Multi-Angle Edit</option>
-                <option value="qwen-layered">Qwen Layered</option>
-              </optgroup>
-              <optgroup label="GPT Image Edit (OpenAI)">
-                <option value="gpt-image-1.5-edit">GPT Image 1.5 Edit (Highest Quality)</option>
-                <option value="gpt-image-1-edit">GPT Image 1 Edit</option>
-                <option value="gpt-image-1-mini-edit">GPT Image 1 Mini Edit (Fastest)</option>
-              </optgroup>
-              <optgroup label="NanoBanana Edit (Google)">
                 <option value="nano-banana-pro-edit">NanoBanana Pro Edit</option>
-                <option value="nano-banana-edit">NanoBanana Edit</option>
-              </optgroup>
-              <optgroup label="Kling Edit (Kuaishou)">
                 <option value="kling-o3-edit">Kling O3 Edit</option>
-              </optgroup>
-              <optgroup label="Dreamina Edit (ByteDance)">
                 <option value="dreamina-3-edit">Dreamina v3 Edit</option>
               </optgroup>
             </select>
             <div style="font-size:11px;color:var(--text-secondary);margin-top:4px">
-              Upload a reference photo and describe what you want. The model preserves identity, face, and pose while applying your prompt.
+              Upload a reference image and describe changes. The model preserves faces and poses.
             </div>
           </div>
 
@@ -953,109 +936,71 @@ select { cursor: pointer; }
             <div id="pod-status-inline" style="padding:8px 12px; background:var(--bg-primary); border-radius:6px; margin-bottom:12px; font-size:13px">
               <span id="pod-status-indicator">Checking pod status...</span>
             </div>
-            <label>Model</label>
-            <select id="pod-model-select" onchange="updatePodModelInfo()">
-              <option value="flux">FLUX.2 Dev (Best for realistic images)</option>
-              <option value="wan-t2i">WAN 2.2 T2I (Good for stylized/anime)</option>
+            <label>Base Model</label>
+            <select id="pod-model-select">
+              <option value="flux">FLUX.2 Dev (Realistic)</option>
+              <option value="wan-t2i">WAN 2.2 (Stylized/Anime)</option>
             </select>
-            <label style="margin-top:8px">LoRA Model (trained character)</label>
+            <label style="margin-top:8px">Your LoRA</label>
             <select id="pod-lora-select">
-              <option value="">None - Base model only</option>
+              <option value="">None (Base model only)</option>
             </select>
             <div style="font-size:11px;color:var(--text-secondary);margin-top:4px">
-              Select your trained LoRA to generate images of your character. Start the pod in Status page first.
+              Start the pod in Status page first.
             </div>
           </div>
 
           <!-- Image to Video settings -->
           <div id="img2video-section" style="display:none">
-            <div class="section-title">Source Image</div>
+            <div class="section-title">Upload Image</div>
             <div class="drop-zone" id="video-drop-zone" onclick="document.getElementById('video-file-input').click()">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:32px;height:32px;opacity:0.5;margin-bottom:8px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-              <div>Drop image here or click to browse</div>
-              <div style="font-size:11px;margin-top:4px">This image will be animated into a video</div>
+              <div>Drop image or click to upload</div>
             </div>
             <input type="file" id="video-file-input" accept="image/*" style="display:none" onchange="handleVideoImage(this)">
             <div id="video-preview" style="display:none; margin-top:8px">
               <img id="video-preview-img" style="max-width:100%; border-radius:6px">
             </div>
-            <div class="section-title" style="margin-top:12px">Video Settings</div>
-            <div style="margin-bottom:8px">
-              <label>Backend</label>
-              <div id="video-backend-chips" class="chips" style="margin-top:4px">
-                <div class="chip selected" onclick="selectVideoBackend(this, 'cloud')">Cloud API (WaveSpeed)</div>
-                <div class="chip" onclick="selectVideoBackend(this, 'pod')">RunPod (WAN 2.2)</div>
-              </div>
-            </div>
-            <div id="video-cloud-model-select">
-              <label>Video Model</label>
-              <select id="video-cloud-model">
-                <optgroup label="⭐ Kling 3.0 (Higgsfield) - Best Quality">
-                  <option value="kling-3.0-pro">Kling 3.0 Pro (15s, Audio)</option>
-                  <option value="kling-3.0">Kling 3.0 (Up to 15s)</option>
-                </optgroup>
-                <optgroup label="⭐ Premium (Higgsfield)">
-                  <option value="sora-2-hf">Sora 2 (OpenAI via Higgsfield)</option>
-                  <option value="veo-3.1-hf">Veo 3.1 (Google via Higgsfield)</option>
-                </optgroup>
-                <optgroup label="Higgsfield (Cinematic Motion)">
-                  <option value="higgsfield-dop">Higgsfield DoP (5s Cinematic)</option>
-                  <option value="higgsfield-dop-turbo">Higgsfield DoP Turbo (Fast)</option>
-                </optgroup>
-                <optgroup label="WAN 2.6 I2V (Alibaba)">
-                  <option value="wan-2.6-i2v-pro" selected>WAN 2.6 I2V Pro (Best)</option>
-                  <option value="wan-2.6-i2v">WAN 2.6 I2V</option>
-                  <option value="wan-2.6-i2v-flash">WAN 2.6 I2V Flash (Fast)</option>
-                </optgroup>
-                <optgroup label="WAN 2.5 I2V (Alibaba)">
-                  <option value="wan-2.5-i2v">WAN 2.5 I2V</option>
-                </optgroup>
-                <optgroup label="WAN 2.2 I2V">
-                  <option value="wan-2.2-i2v-1080p">WAN 2.2 I2V 1080p</option>
-                  <option value="wan-2.2-i2v-720p">WAN 2.2 I2V 720p</option>
-                </optgroup>
-                <optgroup label="Kling (WaveSpeed)">
-                  <option value="kling-o3-pro">Kling O3 Pro</option>
-                  <option value="kling-o3">Kling O3</option>
-                </optgroup>
-                <optgroup label="Seedance (ByteDance)">
-                  <option value="seedance-1.5-pro">Seedance 1.5 Pro</option>
-                </optgroup>
-                <optgroup label="Dreamina I2V (ByteDance)">
-                  <option value="dreamina-i2v-1080p">Dreamina I2V 1080p</option>
-                  <option value="dreamina-i2v-720p">Dreamina I2V 720p</option>
-                </optgroup>
-                <optgroup label="Veo (Google)">
-                  <option value="veo-3.1">Veo 3.1</option>
-                </optgroup>
-                <optgroup label="Sora (OpenAI)">
-                  <option value="sora-2">Sora 2</option>
-                </optgroup>
-                <optgroup label="Vidu">
-                  <option value="vidu-q3">Vidu Q3 Turbo</option>
-                </optgroup>
-              </select>
-            </div>
-            <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px">
-              <div>
-                <label>Duration</label>
-                <select id="video-duration">
-                  <option value="41">~2 seconds (41 frames)</option>
-                  <option value="81" selected>~3 seconds (81 frames)</option>
-                  <option value="121">~5 seconds (121 frames)</option>
-                </select>
-              </div>
-              <div>
-                <label>FPS</label>
-                <select id="video-fps">
-                  <option value="16">16 fps</option>
-                  <option value="24" selected>24 fps</option>
-                </select>
-              </div>
-            </div>
-            <div id="video-note" style="font-size:11px;color:var(--text-secondary);margin-top:8px">
-              Cloud API: Fast generation via WaveSpeed. RunPod: Uses WAN 2.2 I2V (~2 sec per frame).
-            </div>
+
+            <div class="section-title" style="margin-top:16px">Video Model</div>
+            <select id="video-cloud-model" style="margin-top:0">
+              <optgroup label="Recommended">
+                <option value="wan-2.6-i2v-pro" selected>WAN 2.6 Pro ($0.05/s)</option>
+                <option value="wan-2.6-i2v-flash">WAN 2.6 Flash (Fast)</option>
+                <option value="kling-o3-pro">Kling O3 Pro</option>
+              </optgroup>
+              <optgroup label="Premium (Higgsfield - requires API key)">
+                <option value="kling-3.0-pro">Kling 3.0 Pro (15s + Audio)</option>
+                <option value="kling-3.0">Kling 3.0</option>
+                <option value="sora-2-hf">Sora 2</option>
+                <option value="veo-3.1-hf">Veo 3.1</option>
+              </optgroup>
+              <optgroup label="Budget Friendly">
+                <option value="wan-2.2-i2v-720p">WAN 2.2 720p ($0.01/s)</option>
+                <option value="wan-2.2-i2v-1080p">WAN 2.2 1080p</option>
+                <option value="wan-2.5-i2v">WAN 2.5</option>
+              </optgroup>
+              <optgroup label="Cinematic">
+                <option value="higgsfield-dop">Higgsfield DoP (5s)</option>
+                <option value="seedance-1.5-pro">Seedance Pro</option>
+                <option value="dreamina-i2v-1080p">Dreamina 1080p</option>
+              </optgroup>
+              <optgroup label="Other">
+                <option value="kling-o3">Kling O3</option>
+                <option value="veo-3.1">Veo 3.1 (WaveSpeed)</option>
+                <option value="sora-2">Sora 2 (WaveSpeed)</option>
+                <option value="vidu-q3">Vidu Q3</option>
+              </optgroup>
+            </select>
+
+            <label style="margin-top:12px">Duration</label>
+            <select id="video-duration">
+              <option value="41">2 seconds</option>
+              <option value="81" selected>3 seconds</option>
+              <option value="121">5 seconds</option>
+              <option value="241">10 seconds</option>
+              <option value="361">15 seconds</option>
+            </select>
           </div>
 
           <!-- Reference image upload for img2img -->
@@ -1105,29 +1050,39 @@ select { cursor: pointer; }
             <div class="section-title">Settings</div>
             <div class="row" style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
               <div>
-                <label>Seed (-1 = random)</label>
-                <input type="number" id="gen-seed" value="-1">
+                <label>Aspect Ratio</label>
+                <select id="gen-aspect" onchange="updateDimensions()">
+                  <option value="9:16" selected>Portrait (9:16)</option>
+                  <option value="2:3">Portrait (2:3)</option>
+                  <option value="1:1">Square (1:1)</option>
+                  <option value="3:2">Landscape (3:2)</option>
+                  <option value="16:9">Landscape (16:9)</option>
+                </select>
               </div>
               <div>
-                <label>Steps</label>
-                <input type="number" id="gen-steps" value="28">
+                <label>Seed (-1 = random)</label>
+                <input type="number" id="gen-seed" value="-1">
               </div>
             </div>
-            <label>CFG Scale</label>
-            <div class="slider-row">
-              <input type="range" id="gen-cfg" min="1" max="20" step="0.5" value="7" oninput="this.nextElementSibling.textContent=this.value">
-              <span class="value">7</span>
-            </div>
-            <div class="row" style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;">
-              <div>
-                <label>Width</label>
-                <input type="number" id="gen-width" value="832">
-              </div>
-              <div>
-                <label>Height</label>
-                <input type="number" id="gen-height" value="1216">
+            <!-- Hidden fields for actual dimensions -->
+            <input type="hidden" id="gen-width" value="832">
+            <input type="hidden" id="gen-height" value="1216">
+            <!-- Advanced settings (collapsed by default) -->
+            <details style="margin-top:12px">
+              <summary style="cursor:pointer;color:var(--text-secondary);font-size:12px">Advanced Settings</summary>
+              <div style="padding-top:8px">
+                <div class="row" style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
+                  <div>
+                    <label>Steps</label>
+                    <input type="number" id="gen-steps" value="28">
+                  </div>
+                  <div>
+                    <label>CFG Scale</label>
+                    <input type="number" id="gen-cfg" value="7" min="1" max="20" step="0.5">
+                  </div>
+                </div>
               </div>
-            </div>
+            </details>
           </div>
 
           <button class="btn btn-primary" id="generate-btn" onclick="doGenerate()">
@@ -2043,6 +1998,20 @@ function selectBackend(chip, backend) {
   updateCloudModelVisibility();
 }
 
+function updateDimensions() {
+  const aspect = document.getElementById('gen-aspect').value;
+  const dimensions = {
+    '9:16': [832, 1216],
+    '2:3': [832, 1248],
+    '1:1': [1024, 1024],
+    '3:2': [1248, 832],
+    '16:9': [1216, 832],
+  };
+  const [w, h] = dimensions[aspect] || [832, 1216];
+  document.getElementById('gen-width').value = w;
+  document.getElementById('gen-height').value = h;
+}
+
 function selectVideoBackend(chip, backend) {
   chip.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('selected'));
   chip.classList.add('selected');
@@ -2065,11 +2034,21 @@ function updateCloudModelVisibility() {
   const isCloud = selectedBackend === 'cloud';
   const isPod = selectedBackend === 'pod';
   const isImg2img = selectedMode === 'img2img';
+  const isVideo = selectedMode === 'img2video';
+
+  // Hide all model selectors for video mode (video has its own selector)
+  if (isVideo) {
+    document.getElementById('cloud-model-select').style.display = 'none';
+    document.getElementById('cloud-edit-model-select').style.display = 'none';
+    document.getElementById('pod-settings-section').style.display = 'none';
+    return;
+  }
+
   // Show txt2img cloud models when cloud + txt2img
   document.getElementById('cloud-model-select').style.display = (isCloud && !isImg2img) ? '' : 'none';
   // Show edit cloud models when cloud + img2img
   document.getElementById('cloud-edit-model-select').style.display = (isCloud && isImg2img) ? '' : 'none';
-  // Show pod settings when pod backend selected
+  // Show pod settings when pod backend selected (not in video mode)
   document.getElementById('pod-settings-section').style.display = isPod ? '' : 'none';
   if (isPod) loadPodLorasForGeneration();
   // Show denoise slider only for local img2img (cloud edit doesn't use denoise)