Update app.py

app.py

@@ -1,2 +1,537 @@
 import os
-print("HF_TOKEN present:", bool(os.getenv("HF_TOKEN")))
+import io
+import time
+import base64
+
+import gradio as gr
+import pandas as pd
+from PIL import Image
+from gradio_client import Client
+
+# ------------------------- Constants -------------------------
+TABLEAU_URL = "https://public.tableau.com/views/InsuranceDashboard_17677520784850/ExecutiveOverviewDashbiard?:showVizHome=no&:embed=y&:toolbar=no"
+
+BACKEND_SPACE_ID = os.getenv("BACKEND_SPACE_ID", "your-username/insurance-chatbot-backend")
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+QUICK_QUESTIONS = [
+    "Loss ratio by product_type",
+    "Loss ratio by region",
+    "Claim frequency by product_type",
+    "Average claim severity",
+    "Top 10 agents by premium",
+]
+
+# Initialize once
+client = Client(BACKEND_SPACE_ID, hf_token=HF_TOKEN)
+
+
+# ------------------------- Backend helpers -------------------------
+def decode_chart(chart_b64: str):
+    """Decode a base64 PNG/JPEG string returned by the backend into a PIL image."""
+    if not chart_b64:
+        return None
+
+    raw = chart_b64
+    if "," in raw and raw.strip().startswith("data:image"):
+        raw = raw.split(",", 1)[1]
+
+    try:
+        img_bytes = base64.b64decode(raw)
+        return Image.open(io.BytesIO(img_bytes))
+    except Exception:
+        return None
+
+
+def call_backend(query: str) -> tuple[pd.DataFrame, object, str]:
+    """
+    Expected backend response format:
+    {
+      "data": [ { ...row... }, ... ],
+      "chart": "<base64-encoded image or data URL>",
+      "message": "optional summary"
+    }
+    """
+    response = client.predict(query, api_name="/query")
+
+    if not isinstance(response, dict):
+        raise ValueError("Backend returned an unexpected response format.")
+
+    df_res = pd.DataFrame(response.get("data", []))
+    chart_img = decode_chart(response.get("chart"))
+    message = response.get("message", "Results generated.")
+
+    return df_res, chart_img, message
+
+
+# ------------------------- UI + Streaming -------------------------
+def _js_autoscroll():
+    return """
+<script>
+(function(){
+  const t = document.getElementById("chat_thread");
+  if (t) t.scrollTop = t.scrollHeight;
+})();
+</script>
+"""
+
+
+def _set_interactive(flag: bool):
+    return gr.update(interactive=flag)
+
+
+def _thinking_steps(query: str):
+    base = f"Query: {query}\nThinking"
+    dots = ["", ".", "..", "..."]
+    for i in range(4):
+        yield f"{base}{dots[i]}"
+        time.sleep(0.10)
+
+    steps = [
+        "• Calling backend",
+        "• Fetching results",
+        "• Rendering results",
+    ]
+
+    acc = f"{base}...\n"
+    for s in steps:
+        acc = acc + s + "\n"
+        yield acc.rstrip()
+        time.sleep(0.15)
+
+
+def _to_messages(history_pairs: list[list[str]]):
+    msgs = []
+    for pair in history_pairs or []:
+        if not pair:
+            continue
+        user = pair[0] if len(pair) > 0 else ""
+        assistant = pair[1] if len(pair) > 1 else ""
+        if user:
+            msgs.append({"role": "user", "content": str(user)})
+        if assistant:
+            msgs.append({"role": "assistant", "content": str(assistant)})
+    return msgs
+
+
+def run_query(user_text: str, history_pairs: list):
+    history_pairs = history_pairs or []
+    q = (user_text or "").strip()
+
+    if not q:
+        yield (
+            gr.update(value=""),
+            history_pairs,
+            gr.update(value=_to_messages(history_pairs)),
+            gr.update(value=pd.DataFrame(), visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(selected=0),
+            _set_interactive(False),
+            *[_set_interactive(True) for _ in range(len(QUICK_QUESTIONS))],
+            _js_autoscroll(),
+        )
+        return
+
+    disabled_send = _set_interactive(False)
+    disabled_chips = [_set_interactive(False) for _ in range(len(QUICK_QUESTIONS))]
+
+    for frame in _thinking_steps(q):
+        yield (
+            gr.update(value=frame),
+            history_pairs,
+            gr.update(value=_to_messages(history_pairs)),
+            gr.update(value=pd.DataFrame(), visible=False),
+            gr.update(value=None, visible=False),
+            gr.update(),
+            disabled_send,
+            *disabled_chips,
+            _js_autoscroll(),
+        )
+
+    try:
+        df_res, chart_img, assistant_msg = call_backend(q)
+    except Exception as e:
+        df_res = pd.DataFrame({"error": [str(e)]})
+        chart_img = None
+        assistant_msg = f"Backend request failed: {e}"
+
+    history_pairs = history_pairs + [[q, assistant_msg]]
+
+    show_df = df_res is not None and not df_res.empty
+    show_fig = chart_img is not None
+    tab_selected = 1 if show_fig else 0
+
+    enabled_chips = [_set_interactive(True) for _ in range(len(QUICK_QUESTIONS))]
+    send_after = _set_interactive(False)
+
+    yield (
+        gr.update(value=""),
+        history_pairs,
+        gr.update(value=_to_messages(history_pairs)),
+        gr.update(value=(df_res if df_res is not None else pd.DataFrame()), visible=show_df),
+        gr.update(value=chart_img, visible=show_fig),
+        gr.update(selected=tab_selected),
+        send_after,
+        *enabled_chips,
+        _js_autoscroll(),
+    )
+
+
+def chip_run(chip_text: str, history_pairs: list):
+    yield from run_query(chip_text, history_pairs)
+
+
+def clear_all():
+    empty_pairs = []
+    return (
+        gr.update(value=""),
+        empty_pairs,
+        gr.update(value=_to_messages(empty_pairs)),
+        gr.update(value=pd.DataFrame(), visible=False),
+        gr.update(value=None, visible=False),
+        gr.update(selected=0),
+        gr.update(interactive=False),
+        *[gr.update(interactive=True) for _ in range(len(QUICK_QUESTIONS))],
+        _js_autoscroll(),
+    )
+
+
+def send_enabled(text: str):
+    ok = bool((text or "").strip())
+    return gr.update(interactive=ok)
+
+
+# ------------------------- CSS -------------------------
+CSS = """
+:root{
+  --bg: #f6f7fb;
+  --card: #ffffff;
+  --muted: #64748b;
+  --border: rgba(15, 23, 42, 0.10);
+  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --radius: 16px;
+}
+
+body{ background: var(--bg) !important; }
+
+#app_wrap{
+  height: 100vh;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 14px;
+  box-sizing: border-box;
+}
+.split_row{ height: calc(100vh - 28px); gap: 14px; }
+
+#left_tableau{
+  height: calc(100vh - 28px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--card);
+  box-shadow: var(--shadow);
+}
+#left_tableau iframe{ width: 100%; height: calc(100vh - 28px); border: 0; }
+
+#right_chat{
+  height: calc(100vh - 28px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.copilot_header{
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  background: linear-gradient(180deg, #ffffff, #fbfbfe);
+  font-weight: 700;
+}
+
+/* ONLY scroll container on right */
+#chat_thread{
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 14px 14px 120px 14px;
+  background: var(--bg);
+  box-sizing: border-box;
+}
+
+/* REMOVE chat message bubbles + toolbar */
+#chat_thread .message,
+#chat_thread .message-wrap,
+#chat_thread .message-row,
+#chat_thread .bubble,
+#chat_thread .toolbar,
+#chat_thread .icon-row {
+  display: none !important;
+}
+
+/* Collapse leftover Chatbot spacing */
+#chat_thread .chatbot,
+#chat_thread .chatbot > div {
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 0 !important;
+}
+
+/* Dock */
+#dock{
+  position: sticky;
+  bottom: 0;
+  z-index: 50;
+  padding: 12px 14px 12px 14px;
+  background: linear-gradient(180deg, rgba(246,247,251,0.95), rgba(246,247,251,1));
+  border-top: 1px solid rgba(15, 23, 42, 0.10);
+}
+
+#composer_card{
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  padding: 10px 10px 10px 12px;
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+#composer{ flex: 1 1 auto; }
+#composer .wrap{ padding: 0 !important; }
+#composer textarea{
+  width: 100% !important;
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
+  font-size: 14px !important;
+  line-height: 1.35 !important;
+  min-height: 56px !important;
+  max-height: 160px !important;
+  resize: none !important;
+  padding: 6px 6px 6px 2px !important;
+}
+
+#composer_actions{
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+}
+#send_btn button{
+  height: 38px !important;
+  padding: 0 14px !important;
+  border-radius: 999px !important;
+  border: 1px solid #111827 !important;
+  background: #111827 !important;
+  color: #fff !important;
+  font-weight: 800 !important;
+}
+#clear_btn button{
+  height: 38px !important;
+  padding: 0 12px !important;
+  border-radius: 999px !important;
+  border: 1px solid rgba(15, 23, 42, 0.18) !important;
+  background: #ffffff !important;
+  color: #111827 !important;
+  font-weight: 800 !important;
+}
+#clear_btn button:hover{ background: #f8fafc !important; }
+
+#quick_chips .chips-row > div,
+#quick_chips .chips-row > .gradio-column,
+#quick_chips .chips-row .gradio-column{
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: 0 !important;
+}
+
+#chips{ margin-top: 10px; }
+.chips-wrap{ display: grid; gap: 8px; }
+.chips-title{
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--muted);
+  letter-spacing: 0.02em;
+}
+.chips-row{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.chip{
+  appearance: none;
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  background: #ffffff;
+  border-radius: 999px;
+  padding: 7px 11px;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+}
+.chip:hover{ background: #f8fafc; }
+
+.card{
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+  padding: 12px;
+}
+
+#result_chart{
+  min-height: 360px;
+  width: 100%;
+}
+
+#output_tabs{ margin-top: 4px !important; }
+"""
+
+# ------------------------- App -------------------------
+with gr.Blocks(title="Converse AI", css=CSS) as demo:
+    history_state = gr.State([])
+
+    with gr.Column(elem_id="app_wrap"):
+        with gr.Row(elem_classes=["split_row"]):
+            with gr.Column(scale=2, min_width=650):
+                gr.HTML(
+                    f"""
+                    <div id="left_tableau">
+                      <iframe src="{TABLEAU_URL}" allowfullscreen></iframe>
+                    </div>
+                    """
+                )
+
+            with gr.Column(scale=1, min_width=420):
+                with gr.Group(elem_id="right_chat"):
+                    with gr.Column(elem_id="chat_thread"):
+                        chat_ui = gr.Chatbot(
+                            value=[],
+                            show_label=False,
+                            label=None,
+                            height=None,
+                        )
+
+                        with gr.Tabs(elem_id="output_tabs") as output_tabs:
+                            with gr.Tab("Results", id=0):
+                                result_df = gr.Dataframe(
+                                    value=pd.DataFrame(),
+                                    show_label=False,
+                                    interactive=False,
+                                    visible=False,
+                                    wrap=True,
+                                    elem_classes=["card"],
+                                )
+                            with gr.Tab("Chart", id=1):
+                                result_chart = gr.Image(
+                                    value=None,
+                                    show_label=False,
+                                    visible=False,
+                                    elem_id="result_chart",
+                                    elem_classes=["card"],
+                                )
+
+                        js = gr.HTML(value=_js_autoscroll())
+
+                    with gr.Column(elem_id="dock"):
+                        with gr.Row(elem_id="composer_card", equal_height=False):
+                            composer = gr.Textbox(
+                                placeholder="Ask a question…",
+                                show_label=False,
+                                lines=2,
+                                max_lines=8,
+                                elem_id="composer",
+                                container=False,
+                            )
+                            with gr.Row(elem_id="composer_actions", equal_height=False):
+                                send_btn = gr.Button("Send", elem_id="send_btn", interactive=False)
+                                clear_btn = gr.Button("Clear", elem_id="clear_btn", variant="secondary")
+
+                        with gr.Column(elem_id="quick_chips"):
+                            gr.HTML(
+                                """
+                                <div class="chips-wrap">
+                                  <div class="chips-title">Quick questions</div>
+                                </div>
+                                """
+                            )
+                            with gr.Row(elem_classes=["chips-row"]):
+                                chip_buttons = []
+                                for q in QUICK_QUESTIONS:
+                                    chip_buttons.append(gr.Button(q, variant="secondary", elem_classes=["chip"]))
+
+    composer.change(send_enabled, inputs=[composer], outputs=[send_btn])
+
+    send_btn.click(
+        run_query,
+        inputs=[composer, history_state],
+        outputs=[
+            composer,
+            history_state,
+            chat_ui,
+            result_df,
+            result_chart,
+            output_tabs,
+            send_btn,
+            *chip_buttons,
+            js,
+        ],
+    )
+    composer.submit(
+        run_query,
+        inputs=[composer, history_state],
+        outputs=[
+            composer,
+            history_state,
+            chat_ui,
+            result_df,
+            result_chart,
+            output_tabs,
+            send_btn,
+            *chip_buttons,
+            js,
+        ],
+    )
+
+    for btn, q in zip(chip_buttons, QUICK_QUESTIONS):
+        btn.click(
+            chip_run,
+            inputs=[gr.State(q), history_state],
+            outputs=[
+                composer,
+                history_state,
+                chat_ui,
+                result_df,
+                result_chart,
+                output_tabs,
+                send_btn,
+                *chip_buttons,
+                js,
+            ],
+        )
+
+    clear_btn.click(
+        clear_all,
+        outputs=[
+            composer,
+            history_state,
+            chat_ui,
+            result_df,
+            result_chart,
+            output_tabs,
+            send_btn,
+            *chip_buttons,
+            js,
+        ],
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch(ssr_mode=False)
+