copy button

app.py

@@ -282,6 +282,10 @@ def toggle_payload_render(payload: Dict[str, Any], render_newlines: bool):
         gr.update(value=payload_button_label(new_state), interactive=True),
     )
 
+
+def notify_payload_copied():
+    gr.Info("Payload copied to clipboard.")
+
 def load_specs_data(sku_no: str) -> bytes:
   if not sku_no or not str(sku_no).strip().isdigit():
       raise ValueError(f"Invalid SKU '{sku_no}'. Please enter a numeric SKU.")
@@ -376,13 +380,15 @@ def compare_cameras_gui(model_name, verbosity, reasoning_level, prompt, sku_list
         valid_skus = [sku for sku in sku_candidates if sku]
 
         if len(valid_skus) < 2:
-            button_state = gr.update(value=payload_button_label(False), interactive=False)
+            render_button_state = gr.update(value=payload_button_label(False), interactive=False)
+            copy_button_state = gr.update(interactive=False)
             return (
                 "Please enter at least two SKU numbers separated by commas.",
                 render_request_payload_html({}, False),
                 {},
                 False,
-                button_state,
+                render_button_state,
+                copy_button_state,
             )
 
         logger.info("Fetching product specs for SKUs: %s", ", ".join(valid_skus))
@@ -401,27 +407,30 @@ def compare_cameras_gui(model_name, verbosity, reasoning_level, prompt, sku_list
 {summary.summary}
 """
         payload_data = getattr(compare_cameras, "last_request_payload", {}) or {}
-        button_state = gr.update(
+        render_button_state = gr.update(
             value=payload_button_label(False),
             interactive=bool(payload_data),
         )
+        copy_button_state = gr.update(interactive=bool(payload_data))
 
         return (
             output_text,
             render_request_payload_html(payload_data, False),
             payload_data,
             False,
-            button_state,
+            render_button_state,
+            copy_button_state,
         )
     except Exception:
         # Surface full traceback in the UI for easier debugging
         err = traceback.format_exc()
         logger.error("An error occurred during comparison. Returning traceback to UI.\n%s", err)
         payload_data = getattr(compare_cameras, "last_request_payload", {}) or {}
-        button_state = gr.update(
+        render_button_state = gr.update(
             value=payload_button_label(False),
             interactive=bool(payload_data),
         )
+        copy_button_state = gr.update(interactive=bool(payload_data))
 
         return (
             "Encountered an error while generating the comparison. "
@@ -430,7 +439,8 @@ def compare_cameras_gui(model_name, verbosity, reasoning_level, prompt, sku_list
             render_request_payload_html(payload_data, False),
             payload_data,
             False,
-            button_state,
+            render_button_state,
+            copy_button_state,
         )
 
 # Custom CSS: hide footer + style the Compare button greenish
@@ -511,6 +521,25 @@ footer { display: none !important; }
     outline: 2px solid #22c55e;
     outline-offset: 2px;
 }
+#payload-copy-btn > button {
+    background-color: #1f2937;
+    color: #f3f4f6;
+    border-color: #374151;
+}
+#payload-copy-btn > button:hover {
+    background-color: #374151;
+}
+#payload-copy-btn > button:disabled,
+#payload-copy-btn > button[disabled] {
+    background-color: #111827 !important;
+    border-color: #1f2937 !important;
+    color: #6b7280 !important;
+    cursor: not-allowed;
+}
+#payload-copy-btn > button:focus-visible {
+    outline: 2px solid #22c55e;
+    outline-offset: 2px;
+}
 """
 with gr.Blocks(title="Product Comparison Tool", css=APP_CSS) as demo:
     gr.Markdown("# AI Item Compare")
@@ -542,6 +571,12 @@ with gr.Blocks(title="Product Comparison Tool", css=APP_CSS) as demo:
                 variant="secondary",
                 interactive=False,
             )
+            payload_copy_btn = gr.Button(
+                "Copy payload",
+                elem_id="payload-copy-btn",
+                variant="secondary",
+                interactive=False,
+            )
         payload_html = gr.HTML(
             value='<div class="payload-empty">Payload not available yet.</div>',
             elem_id="model-payload-html",
@@ -554,7 +589,14 @@ with gr.Blocks(title="Product Comparison Tool", css=APP_CSS) as demo:
     submit_btn.click(
         fn=compare_cameras_gui,
         inputs=[model_dd, verbosity_dd, reasoning_dd, prompt_tb, sku_list_tb],
-        outputs=[output_md, payload_html, payload_data_state, render_newlines_state, payload_toggle_btn],
+        outputs=[
+            output_md,
+            payload_html,
+            payload_data_state,
+            render_newlines_state,
+            payload_toggle_btn,
+            payload_copy_btn,
+        ],
     )
 
     payload_toggle_btn.click(
@@ -563,6 +605,13 @@ with gr.Blocks(title="Product Comparison Tool", css=APP_CSS) as demo:
         outputs=[payload_html, render_newlines_state, payload_toggle_btn],
     )
 
+    payload_copy_btn.click(
+        fn=notify_payload_copied,
+        inputs=[],
+        outputs=[],
+        js="() => { const el = document.getElementById('model-payload-html'); if (!el) { return; } const text = el.innerText || ''; navigator.clipboard.writeText(text); }",
+    )
+
 def authenticate(username, password):
     return username == "bnh" and password == login_password