Clean up UI: smaller controls, better spacing

- Narrower controls panel (340px)
- Smaller form elements (6px padding, 12px font)
- Compact chips (4px padding, square corners)
- Smaller drop zones (16px padding, 100px min-height)
- Section dividers with border-top
- Inline character/template selectors in 2-column grid
- Shorter labels and placeholder text
- Compact reference image previews (70px max)
- Better visual hierarchy with cleaner spacing

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

src/content_engine/api/ui.html

@@ -109,13 +109,13 @@ body {
 }
 
 /* --- Page: Generate --- */
-.generate-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; height: calc(100vh - 56px); }
+.generate-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; height: calc(100vh - 56px); }
 
 .controls-panel {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 20px;
+  padding: 16px;
   overflow-y: auto;
 }
 
@@ -129,35 +129,37 @@ body {
 }
 
 .section-title {
-  font-size: 13px;
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--text-secondary);
-  margin-bottom: 10px;
-  margin-top: 18px;
+  margin-bottom: 8px;
+  margin-top: 20px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
 }
 
-.section-title:first-child { margin-top: 0; }
+.section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
 
 label {
   display: block;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-secondary);
-  margin-bottom: 5px;
-  margin-top: 12px;
+  margin-bottom: 4px;
+  margin-top: 10px;
 }
 
 label:first-of-type { margin-top: 0; }
 
 select, input[type="text"], input[type="number"], textarea {
   width: 100%;
-  padding: 8px 12px;
+  padding: 6px 10px;
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 6px;
   color: var(--text-primary);
-  font-size: 13px;
+  font-size: 12px;
   font-family: inherit;
   outline: none;
   transition: border-color 0.15s;
@@ -165,7 +167,7 @@ select, input[type="text"], input[type="number"], textarea {
 
 select:focus, input:focus, textarea:focus { border-color: var(--accent); }
 
-textarea { resize: vertical; min-height: 80px; }
+textarea { resize: vertical; min-height: 60px; }
 
 select { cursor: pointer; }
 
@@ -191,11 +193,11 @@ select { cursor: pointer; }
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 10px 20px;
+  gap: 6px;
+  padding: 8px 16px;
   border: none;
-  border-radius: 8px;
-  font-size: 14px;
+  border-radius: 6px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s;
@@ -206,7 +208,7 @@ select { cursor: pointer; }
   background: var(--accent);
   color: white;
   width: 100%;
-  margin-top: 20px;
+  margin-top: 16px;
 }
 
 .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 20px var(--accent-glow); }
@@ -225,16 +227,15 @@ select { cursor: pointer; }
 .chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 6px;
+  gap: 4px;
 }
 
 .chip {
-  padding: 5px 12px;
+  padding: 4px 10px;
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: 20px;
-  font-size: 12px;
+  border-radius: 4px;
+  font-size: 11px;
   cursor: pointer;
   transition: all 0.15s;
   color: var(--text-secondary);
@@ -340,18 +341,19 @@ select { cursor: pointer; }
 
 /* File upload drop zone */
 .drop-zone {
-  border: 2px dashed var(--border);
-  border-radius: var(--radius);
-  padding: 24px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  padding: 16px 12px;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
   color: var(--text-secondary);
-  margin-top: 8px;
+  font-size: 11px;
 }
 .drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: rgba(124,58,237,0.05); }
 .drop-zone.has-file { border-color: var(--green); background: rgba(34,197,94,0.05); }
-.drop-zone img { max-width: 100%; max-height: 120px; border-radius: 8px; margin-top: 8px; }
+.drop-zone img { max-width: 100%; max-height: 80px; border-radius: 6px; margin-top: 6px; }
+.drop-zone svg { width: 24px; height: 24px; opacity: 0.4; margin-bottom: 4px; }
 
 /* --- Page: Gallery --- */
 .gallery-header {
@@ -958,18 +960,18 @@ select { cursor: pointer; }
 
           <!-- Image to Video settings -->
           <div id="img2video-section" style="display:none">
-            <div class="section-title">Upload Image</div>
+            <div class="section-title">Source 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 or click to upload</div>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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 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 id="video-preview" style="display:none; margin-top:6px">
+              <img id="video-preview-img" style="max-width:100%; max-height:100px; border-radius:6px">
             </div>
 
-            <div class="section-title" style="margin-top:16px">Video Model</div>
-            <select id="video-cloud-model" style="margin-top:0">
+            <label style="margin-top:12px">Video Model</label>
+            <select id="video-cloud-model">
               <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>
@@ -999,60 +1001,60 @@ select { cursor: pointer; }
               </optgroup>
             </select>
 
-            <label style="margin-top:12px">Duration</label>
+            <label>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>
+              <option value="41">2s</option>
+              <option value="81" selected>3s</option>
+              <option value="121">5s</option>
+              <option value="241">10s</option>
+              <option value="361">15s</option>
             </select>
           </div>
 
           <!-- Reference image upload for img2img -->
           <div id="img2img-section" style="display:none">
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+            <div class="section-title">Reference Images</div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
               <div>
-                <div class="section-title">Character Reference</div>
-                <div class="drop-zone" id="ref-drop-zone" onclick="document.getElementById('ref-file-input').click()" style="min-height:140px">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:28px;height:28px;opacity:0.5;margin-bottom:6px"><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 style="font-size:12px">Drop or click</div>
-                  <div style="font-size:10px;margin-top:2px;color:var(--text-secondary)">Main subject</div>
+                <div class="drop-zone" id="ref-drop-zone" onclick="document.getElementById('ref-file-input').click()" style="min-height:100px">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>Character</div>
                 </div>
                 <input type="file" id="ref-file-input" accept="image/*" style="display:none" onchange="handleRefImage(this)">
               </div>
               <div>
-                <div class="section-title">Pose/Style Reference <span style="font-weight:400;font-size:10px;color:var(--text-secondary)">(optional)</span></div>
-                <div class="drop-zone" id="pose-drop-zone" onclick="document.getElementById('pose-file-input').click()" style="min-height:140px">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:28px;height:28px;opacity:0.5;margin-bottom:6px"><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 style="font-size:12px">Drop or click</div>
-                  <div style="font-size:10px;margin-top:2px;color:var(--text-secondary)">Pose or style</div>
+                <div class="drop-zone" id="pose-drop-zone" onclick="document.getElementById('pose-file-input').click()" style="min-height:100px">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>Pose <span style="color:var(--text-secondary)">(opt)</span></div>
                 </div>
                 <input type="file" id="pose-file-input" accept="image/*" style="display:none" onchange="handlePoseImage(this)">
               </div>
             </div>
-            <div style="font-size:11px;color:var(--text-secondary);margin-top:8px">
-              Multi-ref models (SeeDream Sequential, Kling O1) use both images for character consistency.
-            </div>
-            <label style="margin-top:12px">Denoise Strength (0 = keep original, 1 = ignore reference)</label>
+            <label style="margin-top:10px">Denoise (0=keep, 1=ignore ref)</label>
             <div class="slider-row">
               <input type="range" id="gen-denoise" min="0" max="1" step="0.05" value="0.65" oninput="this.nextElementSibling.textContent=this.value">
               <span class="value">0.65</span>
             </div>
           </div>
 
-          <div class="section-title">Character <span style="font-weight:400;text-transform:none;font-size:11px;color:var(--text-secondary)">(optional)</span></div>
-          <select id="gen-character">
-            <option value="">None (free prompt)</option>
-          </select>
-
           <div id="local-template-select">
-          <div class="section-title">Template <span style="font-weight:400;text-transform:none;font-size:11px;color:var(--text-secondary)">(optional - preset prompt recipe)</span></div>
-          <select id="gen-template" onchange="loadTemplateVariables()">
-            <option value="">None (use prompt below)</option>
-          </select>
+          <div class="section-title">Character & Template</div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
+            <div>
+              <label style="margin-top:0">Character</label>
+              <select id="gen-character">
+                <option value="">None</option>
+              </select>
+            </div>
+            <div>
+              <label style="margin-top:0">Template</label>
+              <select id="gen-template" onchange="loadTemplateVariables()">
+                <option value="">None</option>
+              </select>
+            </div>
+          </div>
 
-          <div class="section-title">Content Rating</div>
+          <label>Rating</label>
           <div class="chips" id="content-rating-chips">
             <div class="chip selected" onclick="selectRating(this, 'sfw')">SFW</div>
             <div class="chip" onclick="selectRating(this, 'nsfw')">NSFW</div>
@@ -1062,40 +1064,38 @@ select { cursor: pointer; }
           </div>
 
           <div class="section-title">Prompt</div>
-          <label>Positive Prompt</label>
-          <textarea id="gen-positive" placeholder="masterpiece, best quality, photorealistic, a woman standing in a garden..."></textarea>
+          <label style="margin-top:0">Positive</label>
+          <textarea id="gen-positive" placeholder="masterpiece, best quality, photorealistic..." rows="3"></textarea>
 
-          <label>Negative Prompt</label>
+          <label>Negative</label>
           <textarea id="gen-negative" placeholder="worst quality, blurry, deformed..." rows="2"></textarea>
 
           <div id="local-settings-section">
-            <div class="section-title">Settings</div>
-            <div class="row" style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
+            <div class="section-title">Output Settings</div>
+            <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
               <div>
-                <label>Aspect Ratio</label>
+                <label style="margin-top:0">Aspect</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>
+                  <option value="9:16" selected>9:16</option>
+                  <option value="2:3">2:3</option>
+                  <option value="1:1">1:1</option>
+                  <option value="3:2">3:2</option>
+                  <option value="16:9">16:9</option>
                 </select>
               </div>
               <div>
-                <label>Seed (-1 = random)</label>
-                <input type="number" id="gen-seed" value="-1">
+                <label style="margin-top:0">Seed</label>
+                <input type="number" id="gen-seed" value="-1" placeholder="-1 = random">
               </div>
             </div>
-            <!-- 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;">
+            <details style="margin-top:10px">
+              <summary style="cursor:pointer;color:var(--text-secondary);font-size:11px">Advanced</summary>
+              <div style="padding-top:6px">
+                <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                   <div>
-                    <label>Steps</label>
+                    <label style="margin-top:0">Steps</label>
                     <input type="number" id="gen-steps" value="28">
                   </div>
                   <div>
@@ -1726,9 +1726,8 @@ function showRefPreview(file) {
   const reader = new FileReader();
   reader.onload = e => {
     zone.innerHTML = `
-      <img src="${e.target.result}" style="max-height:100px;max-width:100%;border-radius:4px">
-      <div style="margin-top:4px;font-size:11px">${file.name.substring(0,15)}${file.name.length > 15 ? '...' : ''}</div>
-      <button class="btn btn-secondary btn-small" onclick="event.stopPropagation();clearRefImage()" style="margin-top:4px;padding:2px 8px;font-size:10px">Remove</button>
+      <img src="${e.target.result}" style="max-height:70px;max-width:100%;border-radius:4px">
+      <button class="btn btn-secondary" onclick="event.stopPropagation();clearRefImage()" style="margin-top:4px;padding:2px 6px;font-size:9px">Remove</button>
     `;
   };
   reader.readAsDataURL(file);
@@ -1739,9 +1738,8 @@ function clearRefImage() {
   const zone = document.getElementById('ref-drop-zone');
   zone.classList.remove('has-file');
   zone.innerHTML = `
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:28px;height:28px;opacity:0.5;margin-bottom:6px"><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 style="font-size:12px">Drop or click</div>
-    <div style="font-size:10px;margin-top:2px;color:var(--text-secondary)">Main subject</div>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>Character</div>
   `;
   document.getElementById('ref-file-input').value = '';
 }
@@ -1759,9 +1757,8 @@ function showPosePreview(file) {
   const reader = new FileReader();
   reader.onload = e => {
     zone.innerHTML = `
-      <img src="${e.target.result}" style="max-height:100px;max-width:100%;border-radius:4px">
-      <div style="margin-top:4px;font-size:11px">${file.name.substring(0,15)}${file.name.length > 15 ? '...' : ''}</div>
-      <button class="btn btn-secondary btn-small" onclick="event.stopPropagation();clearPoseImage()" style="margin-top:4px;padding:2px 8px;font-size:10px">Remove</button>
+      <img src="${e.target.result}" style="max-height:70px;max-width:100%;border-radius:4px">
+      <button class="btn btn-secondary" onclick="event.stopPropagation();clearPoseImage()" style="margin-top:4px;padding:2px 6px;font-size:9px">Remove</button>
     `;
   };
   reader.readAsDataURL(file);
@@ -1772,9 +1769,8 @@ function clearPoseImage() {
   const zone = document.getElementById('pose-drop-zone');
   zone.classList.remove('has-file');
   zone.innerHTML = `
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:28px;height:28px;opacity:0.5;margin-bottom:6px"><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 style="font-size:12px">Drop or click</div>
-    <div style="font-size:10px;margin-top:2px;color:var(--text-secondary)">Pose or style</div>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>Pose <span style="color:var(--text-secondary)">(opt)</span></div>
   `;
   document.getElementById('pose-file-input').value = '';
 }