feat: move preset controls, apply theme on click, and refine fresh UI layout

Author: HuiMi24

backend/app/generator_service.py

@@ -52,6 +52,15 @@ class GeneratorService:
     def __init__(self, ppt_service: PPTService):
         self.ppt_service = ppt_service
 
+    def apply_theme_preset(self, path: str, preset: str, output_path: str | None = None) -> tuple[str, ThemeConfig]:
+        prs = Presentation(path)
+        req = GenerateRequest(topic="theme-apply", preset=preset)
+        theme = self._select_theme(req, [])
+        self.ppt_service.apply_theme_to_presentation(prs, theme)
+        save_path = output_path or self.ppt_service._default_output(path, f"preset-{theme.name}")
+        prs.save(save_path)
+        return save_path, theme
+
     def generate(self, req: GenerateRequest) -> tuple[str, List[OutlineSlide], ThemeConfig]:
         if os.getenv("FAKE_LLM_RESPONSES", "0") == "1":
             outline = self._fake_llm_outline(req)

backend/app/main.py

@@ -13,6 +13,7 @@
     GenerateRequest,
     GenerateResponse,
     ThemeApplyRequest,
+    ThemePresetApplyRequest,
     UpdateRequest,
 )
 from .ppt_service import PPTService
@@ -130,3 +131,20 @@ def apply_theme(req: ThemeApplyRequest):
         }
     except Exception as e:
         raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.post("/api/theme/apply-preset")
+def apply_theme_preset(req: ThemePresetApplyRequest):
+    try:
+        output, theme = generator_service.apply_theme_preset(req.path, req.preset, req.output_path)
+        return {
+            "output_path": output,
+            "theme": {
+                "name": theme.name,
+                "font_name": theme.font_name,
+                "title_size_pt": theme.title_size_pt,
+                "body_size_pt": theme.body_size_pt,
+            },
+        }
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))

backend/app/models.py

@@ -44,6 +44,12 @@ class ThemeApplyRequest(BaseModel):
     output_path: Optional[str] = None
 
 
+class ThemePresetApplyRequest(BaseModel):
+    path: str
+    preset: str
+    output_path: Optional[str] = None
+
+
 class ChatResponse(BaseModel):
     plan: List[EditInstruction]
     output_path: str

frontend/src/App.jsx

@@ -136,6 +136,25 @@ export default function App() {
     }
   }
 
+  const applyPresetImmediately = async (presetName) => {
+    setForm((f) => ({ ...f, preset: presetName }))
+    if (!pptPath) return
+
+    setLoading(true)
+    try {
+      const data = await api('/api/theme/apply-preset', {
+        method: 'POST',
+        body: JSON.stringify({ path: pptPath, preset: presetName }),
+      })
+      await loadPPT(data.output_path)
+      setNotice(`Preset switched to ${presetName} and applied immediately.`)
+    } catch (e) {
+      setNotice(`Apply preset failed: ${e.message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const generatePPT = async () => {
     if (!form.topic.trim()) return
     setLoading(true)
@@ -322,27 +341,6 @@ export default function App() {
           </label>
 
           <div className="field-grid">
-            <label>
-              Theme preset
-              <div className="theme-cards">
-                {PRESET_OPTIONS.map((option) => (
-                  <button
-                    type="button"
-                    key={option.name}
-                    data-testid={`preset-${option.name.toLowerCase()}`}
-                    className={`theme-card ${form.preset === option.name ? 'active' : ''}`}
-                    onClick={() => setForm((f) => ({ ...f, preset: option.name }))}
-                  >
-                    <div className="theme-swatches">
-                      <span style={{ background: option.colors[0] }} />
-                      <span style={{ background: option.colors[1] }} />
-                    </div>
-                    <strong>{option.name}</strong>
-                    <small>{option.desc}</small>
-                  </button>
-                ))}
-              </div>
-            </label>
             <label>
               <span className="label-row">
                 Audience
@@ -411,6 +409,28 @@ export default function App() {
             </div>
           </div>
 
+          <div className="preset-inline">
+            <span>Theme preset:</span>
+            <div className="theme-cards compact">
+              {PRESET_OPTIONS.map((option) => (
+                <button
+                  type="button"
+                  key={option.name}
+                  data-testid={`preset-${option.name.toLowerCase()}`}
+                  className={`theme-card ${form.preset === option.name ? 'active' : ''}`}
+                  onClick={() => applyPresetImmediately(option.name)}
+                  disabled={loading}
+                >
+                  <div className="theme-swatches">
+                    <span style={{ background: option.colors[0] }} />
+                    <span style={{ background: option.colors[1] }} />
+                  </div>
+                  <strong>{option.name}</strong>
+                </button>
+              ))}
+            </div>
+          </div>
+
           {!doc && <div className="skeleton">Start by entering a topic and generating a PPT from the left panel.</div>}
           {doc && (
             <div className="editor-layout">

frontend/src/styles.css

@@ -119,6 +119,33 @@ textarea { min-height: 84px; resize: vertical; }
   gap: 8px;
 }
 
+.preset-inline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.preset-inline > span {
+  color: #475569;
+  font-size: 13px;
+  min-width: 92px;
+}
+
+.theme-cards.compact {
+  margin-top: 0;
+  grid-template-columns: repeat(4, minmax(110px, 1fr));
+  flex: 1;
+}
+
+.theme-cards.compact .theme-card {
+  padding: 6px 8px;
+}
+
+.theme-cards.compact .theme-card small {
+  display: none;
+}
+
 .theme-card {
   text-align: left;
   background: #f8fafc;