Update app.py

app.py

@@ -1,131 +1,58 @@
-# app.py (corrected for HF Spaces)
-import gradio as gr
-import plotly.graph_objects as go
-import plotly.io as pio
+# app.py
+import os
+from pathlib import Path
+from flask import Flask, send_from_directory, render_template_string, abort
+
+# Configure where built frontend lives
+DIST_DIR = Path(__file__).parent.joinpath("dist")
+
+app = Flask(
+    __name__,
+    static_folder=str(DIST_DIR),   # serve static files from dist/
+    static_url_path=""             # serve them from root (so /assets/... works)
+)
+
+@app.route("/", defaults={"path": ""})
+@app.route("/<path:path>")
+def serve_spa(path: str):
+    """
+    Serve files from dist/ when they exist.
+    If a file doesn't exist, serve index.html (SPA fallback).
+    If dist/index.html is missing, show a helpful message.
+    """
+    # If dist doesn't exist or index.html missing, show message.
+    index_file = DIST_DIR / "index.html"
+    if not index_file.exists():
+        msg = """
+        <h2>Static frontend not found (dist/index.html)</h2>
+        <p>The Space is running but the built frontend (dist/) is missing.</p>
+        <p>Possible fixes:</p>
+        <ol>
+          <li>Ensure your GitHub Actions builds the Vite app and copies <code>dist/</code> into the Space repo root.</li>
+          <li>Or manually build locally and copy the <code>dist/</code> contents into this repo.</li>
+        </ol>
+        <p>Once <code>dist/index.html</code> is present, the app will be served automatically.</p>
+        """
+        return render_template_string(msg), 200
+
+    # If path points to an existing file in dist => serve it
+    target = DIST_DIR.joinpath(path)
+    if path != "" and target.exists() and target.is_file():
+        # send direct file, preserves mime types
+        return send_from_directory(str(DIST_DIR), path)
+
+    # Otherwise return index.html (SPA fallback)
+    return send_from_directory(str(DIST_DIR), "index.html")
+
+
+# Health endpoint (optional)
+@app.route("/_health")
+def health():
+    return {"status": "ok"}, 200
 
-def add_card(fig, x, y, w, h, title, subtitle=None,
-             fillcolor="#0f1724", border="#263145",
-             title_color="#ffffff", subtitle_color="#bfcbdc"):
-    fig.add_shape(type="rect",
-                  x0=x - w/2, y0=y - h/2, x1=x + w/2, y1=y + h/2,
-                  xref="x", yref="y",
-                  line=dict(color=border, width=1),
-                  fillcolor=fillcolor, layer="below")
-    fig.add_trace(go.Scatter(
-        x=[x], y=[y + h*0.18],
-        mode="text",
-        text=[f"<b>{title}</b>"],
-        textfont=dict(color=title_color, size=12),
-        hoverinfo="none", showlegend=False
-    ))
-    if subtitle:
-        fig.add_trace(go.Scatter(
-            x=[x], y=[y - h*0.18],
-            mode="text",
-            text=[subtitle],
-            textfont=dict(color=subtitle_color, size=10),
-            hoverinfo="none", showlegend=False
-        ))
-
-def add_arrow(fig, x1, y1, x2, y2, color="#86b6ff"):
-    fig.add_annotation(
-        x=x2, y=y2,
-        ax=x1, ay=y1,
-        xref="x", yref="y",
-        axref="x", ayref="y",
-        showarrow=True, arrowhead=3, arrowsize=1, arrowwidth=1.6,
-        arrowcolor=color, opacity=0.95
-    )
-
-def build_qids_html():
-    # sample nodes (tweak / replace with your data)
-    nodes = [
-        {"id":"Intake & Consent", "row":3, "col":1, "subtitle":"Collect identity, demographics"},
-        {"id":"Prepare Assessment Suite", "row":3, "col":2, "subtitle":"Assemble IQ, psychometrics"},
-        {"id":"Baseline Data Collection", "row":3, "col":3, "subtitle":"Administer tests"},
-        {"id":"Standardize & Score", "row":3, "col":4, "subtitle":"Normalize results"},
-        {"id":"Integrated Profile Construction", "row":3, "col":5, "subtitle":"Triangulate multi-method data"},
-        {"id":"Scheduling & Resource Allocation", "row":2, "col":1, "subtitle":"Session calendar"},
-        {"id":"Module Deployment", "row":2, "col":2, "subtitle":"Deploy modules"},
-        {"id":"Session Data Capture", "row":2, "col":3, "subtitle":"Attendance, engagement"},
-        {"id":"Progress Evaluation Engine", "row":2, "col":4, "subtitle":"Progress metrics"},
-        {"id":"DEI Practice (EQ)", "row":2, "col":5, "subtitle":"Emotional integration"},
-        {"id":"Full Reassessment", "row":1, "col":2, "subtitle":"Re-run assessments"},
-        {"id":"Compute Outcomes", "row":1, "col":3, "subtitle":"Calculate KPIs"},
-        {"id":"Intervention Effectiveness", "row":1, "col":4, "subtitle":"Aggregate effectiveness"},
-        {"id":"Final IDP & Roadmap", "row":1, "col":5, "subtitle":"Produce final IDP"},
-    ]
-
-    x_spacing = 3.5
-    y_spacing = 2.5
-    for n in nodes:
-        n["x"] = n["col"] * x_spacing
-        n["y"] = n["row"] * y_spacing
-
-    fig = go.Figure()
-
-    # subtle grid lines (visual only)
-    x_min, x_max = 0, 22
-    y_min, y_max = 0, 9
-    for gx in range(int(x_min), int(x_max)+1):
-        fig.add_shape(type="line", x0=gx, y0=y_min, x1=gx, y1=y_max,
-                      line=dict(color="#0b1220", width=1), layer="below")
-    for gy in [i*0.5 for i in range(int(y_min*2), int(y_max*2)+1)]:
-        fig.add_shape(type="line", x0=x_min, y0=gy, x1=x_max, y1=gy,
-                      line=dict(color="#08121c", width=1), layer="below")
-
-    card_w, card_h = 2.8, 1.0
-    for n in nodes:
-        add_card(fig, n["x"], n["y"], card_w, card_h, n["id"], n.get("subtitle"))
-
-    rows = {}
-    for n in nodes:
-        rows.setdefault(n["row"], []).append(n)
-    for r, row_nodes in rows.items():
-        row_nodes = sorted(row_nodes, key=lambda x: x["col"])
-        for a,b in zip(row_nodes, row_nodes[1:]):
-            add_arrow(fig, a["x"]+card_w/2, a["y"], b["x"]-card_w/2, b["y"])
-
-    # right panel
-    panel_x0 = x_max - 2.5; panel_x1 = x_max + 2.5
-    panel_y0 = y_min + 0.5; panel_y1 = y_max - 0.5
-    fig.add_shape(type="rect", x0=panel_x0, y0=panel_y0, x1=panel_x1, y1=panel_y1,
-                  xref="x", yref="y", line=dict(color="#243445"), fillcolor="#0e1724", layer="below")
-    fig.add_trace(go.Scatter(x=[panel_x0+0.2], y=[panel_y1-0.4], mode="text",
-                             text=["<b>Legal & Technical Highlights</b>"],
-                             textfont=dict(color="#8fb4ff", size=12), showlegend=False))
-    panel_items = [
-        ("Unique IQ Measurement Model", "Four-parameter model: Verbal, Quantitative, Psychometric"),
-        ("Standardization Algorithm", "Unified 0-100% scale and conversion factors"),
-        ("Dynamic Weightage Algorithm (DWA)", "Context-sensitive weights by role/culture/mission"),
-    ]
-    y = panel_y1 - 1.0
-    for title, body in panel_items:
-        fig.add_trace(go.Scatter(x=[panel_x0+0.2], y=[y], mode="text",
-                                 text=[f"<b>{title}</b><br><span style='color:#bfcbdc;font-size:10px'>{body}</span>"],
-                                 showlegend=False, textfont=dict(size=11)))
-        y -= 0.9
-
-    fig.update_layout(
-        width=1200, height=700,
-        paper_bgcolor="#071021", plot_bgcolor="#071021",
-        margin=dict(l=20, r=20, t=20, b=20),
-        xaxis=dict(range=[0, x_max+3], visible=False),
-        yaxis=dict(range=[0, y_max+1], visible=False, scaleanchor="x"),
-        hovermode="closest"
-    )
-
-    # NOTE: full_html=False returns only the chart DIV and JS that we can safely embed
-    fragment = pio.to_html(fig, full_html=False, include_plotlyjs='cdn')
-    wrapper = f"<div id='qids-plotly-container'>{fragment}</div>"
-    return wrapper
-
-PLOTLY_FRAGMENT = build_qids_html()
-
-with gr.Blocks() as demo:
-    gr.Markdown("## QIDS Framework — Interactive Visualizer")
-    gr.HTML(PLOTLY_FRAGMENT)
-    gr.Markdown("---\n*Interactive Plotly visualization served with Gradio*")
 
 if __name__ == "__main__":
-    demo.launch()
+    # When launched by HF Spaces, this script will be executed directly.
+    # Use environment PORT if provided, else default 7860.
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port)