Update app.py

app.py

@@ -42,6 +42,9 @@ body { background: var(--bg); color:var(--text); font-family: Inter, system-ui,
 
 /* minor Gradio element tweaks */
 input[type="number"], .gradio-number { background: transparent; color: var(--text); border-radius:6px; }
+
+/* theme button row */
+.theme-btn-row { display:flex; gap:8px; align-items:center; }
 """
 
 # ------------------------
@@ -109,20 +112,18 @@ def preset_tf_for_ui(selected_gpu: str, dtype: str):
         return GPUS[selected_gpu].get(dtype, 0.0)
     return 0.0
 
-# ------------------------
-# Theme setter (returns HTML snippet to run client-side JS)
-# ------------------------
-def set_theme(theme_name: str):
-    cls = {
-        "Blue": "theme-blue",
-        "Green": "theme-green",
-        "Purple": "theme-purple",
-    }.get(theme_name, "theme-blue")
-    return f"<script>document.documentElement.className='{cls}';</script>"
-
 # ------------------------
 # Build UI
 # ------------------------
+# Inline HTML for theme buttons with client-side onclick handlers
+THEME_BUTTONS_HTML = """
+<div class="theme-btn-row">
+  <button class="btn-theme" onclick="document.documentElement.className='theme-blue'">Blue</button>
+  <button class="btn-theme" onclick="document.documentElement.className='theme-green'">Green</button>
+  <button class="btn-theme" onclick="document.documentElement.className='theme-purple'">Purple</button>
+</div>
+"""
+
 with gr.Blocks() as demo:
     # initial theme set (runs immediately on load)
     gr.HTML("<script>document.documentElement.className='theme-blue';</script>")
@@ -130,10 +131,8 @@ with gr.Blocks() as demo:
     with gr.Column(elem_classes="card"):
         with gr.Row():
             gr.Markdown("## 🧠 Roman’s Training Time Estimator")
-            with gr.Row():
-                btn_blue = gr.Button("Blue", elem_classes="btn-theme")
-                btn_green = gr.Button("Green", elem_classes="btn-theme")
-                btn_purple = gr.Button("Purple", elem_classes="btn-theme")
+            # render the theme buttons as raw HTML so onclick works client-side instantly
+            gr.HTML(THEME_BUTTONS_HTML)
 
     with gr.Column(elem_classes="card"):
         gr.Markdown("### Model & Hardware")
@@ -152,9 +151,6 @@ with gr.Blocks() as demo:
         result = gr.Textbox(lines=12, interactive=False, elem_classes="result-box", label="Result")
         run_btn = gr.Button("Estimate Training Time", elem_classes="btn-theme")
 
-    # invisible HTML target used to inject theme-changing script
-    theme_script = gr.HTML(value="")
-
     # update TF override when gpu/dtype change
     def _update_tf(selected_gpu, dtype):
         return gr.update(value=preset_tf_for_ui(selected_gpu, dtype))
@@ -166,13 +162,8 @@ with gr.Blocks() as demo:
                   inputs=[params, tokens, gpu_dropdown, dtype_dropdown, tf_override, utilization],
                   outputs=[result])
 
-    # THE FIXED THEME BUTTONS: use zero-arg lambdas that return the HTML script value
-    btn_blue.click(lambda: set_theme("Blue"), outputs=[theme_script])
-    btn_green.click(lambda: set_theme("Green"), outputs=[theme_script])
-    btn_purple.click(lambda: set_theme("Purple"), outputs=[theme_script])
-
     gr.HTML("<div class='small-muted'>Tip: GPU presets are TFLOPs per dtype. You can edit the TFLOPs number to override. Utilization reduces theoretical peak to realistic throughput.</div>")
 
-# pass CSS to launch (Gradio 6.0+ API)
+# pass CSS to launch
 if __name__ == "__main__":
     demo.launch(css=CSS)