Update app.py

app.py

@@ -748,39 +748,73 @@ def _render_header_html(auto: bool, px: int, scale: float) -> str:
   {logo_b64_img()}
   <div class="cf-text">
     <h1 class="cf-title">ForgeCaptions</h1>
-    <div class="cf-sub">Batch captioning</div>
-    <div class="cf-sub">Scrollable editor & autosave</div>
-    <div class="cf-sub">CSV / Excel / TXT export · CSV/XLSX import</div>
+    <div class="cf-sub">JoyCaption Image Captioning </div>
+    <div class="cf-sub">Import CSV/XLSX • Export CSV/XLSX/TXT</div>
+    <div class="cf-sub">Batch 10-20 per Zero GPU run • Larger batches with GPU</div>
   </div>
 </div>
 <hr>
 <style>
-  .cf-logo {{ height: auto; width: auto; object-fit: contain; }}
+  .cf-logo {{ height: auto; width: auto; object-fit: contain; display:block; }}
 </style>
 <script>
 (function() {{
   const AUTO = {auto_js};
   const PX = {int(px)};
   const SCALE = {float(scale)};
+  const MIN = 80, MAX = 720;  // hard clamps
+
+  function outerH(el) {{
+    if (!el) return 0;
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    return r.height + parseFloat(cs.marginTop) + parseFloat(cs.marginBottom);
+  }}
+
+  function stackHeight(root) {{
+    // Sum title + every subtitle's full box height (including margins)
+    const title = root.querySelector('.cf-title');
+    const subs  = root.querySelectorAll('.cf-sub');
+    let h = outerH(title);
+    subs.forEach(s => h += outerH(s));
+    // tiny buffer so the two columns don't look mismatched if rounding occurs
+    return Math.round(h + 2);
+  }}
+
   function fit() {{
-    const logo = document.querySelector(".cf-logo");
-    const text = document.querySelector(".cf-text");
+    const logo = document.querySelector('.cf-logo');
+    const text = document.querySelector('.cf-text');
     if (!logo || !text) return;
     if (AUTO) {{
-      const h = text.getBoundingClientRect().height || 200;
-      const target = Math.max(80, Math.min(520, Math.round(h * SCALE)));
-      logo.style.height = target + "px";
+      const total = stackHeight(text);
+      const target = Math.max(MIN, Math.min(MAX, Math.round(total * SCALE)));
+      logo.style.height = target + 'px';
     }} else {{
-      logo.style.height = Math.max(80, Math.min(520, PX)) + "px";
+      logo.style.height = Math.max(MIN, Math.min(MAX, PX)) + 'px';
     }}
   }}
-  const textNode = document.querySelector(".cf-text");
+
+  // Re-fit at the right times
+  const textNode = document.querySelector('.cf-text');
+
+  // 1) Once fonts are ready (prevents under-measuring before webfonts load)
+  if (document.fonts && document.fonts.ready) {{
+    document.fonts.ready.then(() => requestAnimationFrame(fit));
+  }}
+
+  // 2) On resize
+  window.addEventListener('resize', () => requestAnimationFrame(fit), {{ passive: true }});
+
+  // 3) Whenever the text block changes size (line wrapping, content edits)
   if (window.ResizeObserver && textNode) {{
-    const ro = new ResizeObserver(fit);
+    const ro = new ResizeObserver(() => requestAnimationFrame(fit));
     ro.observe(textNode);
   }}
-  window.addEventListener("resize", fit, {{ passive: true }});
-  setTimeout(fit, 0);
+
+  // 4) As a fallback, run a couple times after first paint
+  requestAnimationFrame(fit);
+  setTimeout(fit, 100);
+  setTimeout(fit, 400);
 }})();
 </script>
 """
@@ -816,7 +850,7 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
     settings = load_settings()
     header_html = gr.HTML(_render_header_html(settings.get("logo_auto", True),
                                               settings.get("logo_px", 200),
-                                              settings.get("logo_scale", 1.10)))
+                                              settings.get("logo_scale", 1.0)))
 
     # ---- Controls group
     with gr.Group():
@@ -862,13 +896,6 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
                 gpu_budget = gr.Slider(20, 110, value=55, step=5, label="Max seconds per GPU call")
                 no_time_limit = gr.Checkbox(value=False, label="No time limit (ignore above)")
 
-                # Logo controls
-                logo_auto = gr.Checkbox(value=settings.get("logo_auto", True),
-                                        label="Auto-match logo height to text")
-                logo_px   = gr.Slider(80, 520, value=settings.get("logo_px", 200),
-                                      step=4, label="Logo height (px, if Auto off)")
-                logo_scale = gr.Slider(0.7, 1.6, value=settings.get("logo_scale", 1.10),
-                                       step=0.02, label="Logo scale × (if Auto on)")
 
     # Persist instruction + general settings
     def _refresh_instruction(styles, extra, name_value, trigv, begv, endv, excel_px, ms):
@@ -897,18 +924,6 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
         return gr.update()
     dataset_name.change(_save_dataset_name, inputs=[dataset_name], outputs=[])
 
-    # Header controls live update
-    def _update_header(auto, px, scale):
-        cfg = load_settings()
-        cfg["logo_auto"] = bool(auto)
-        cfg["logo_px"] = int(px)
-        cfg["logo_scale"] = float(scale)
-        save_settings(cfg)
-        return _render_header_html(cfg["logo_auto"], cfg["logo_px"], cfg["logo_scale"])
-
-    logo_px.change(_update_header, inputs=[logo_auto, logo_px, logo_scale], outputs=[header_html])
-    logo_auto.change(_update_header, inputs=[logo_auto, logo_px, logo_scale], outputs=[header_html])
-    logo_scale.change(_update_header, inputs=[logo_auto, logo_px, logo_scale], outputs=[header_html])
 
     # ---- Shape Aliases (with plural matching + persist) ----
     with gr.Accordion("Shape Aliases", open=False):