Create app.py

app.py

@@ -0,0 +1,130 @@
+# app.py
+import gradio as gr
+import plotly.graph_objects as go
+import plotly.io as pio
+
+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_figure():
+    # 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
+    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"
+    )
+
+    # return a full HTML string for embedding
+    return pio.to_html(fig, full_html=True, include_plotlyjs='cdn')
+
+# Build the HTML once (fast) and reuse
+PLOTLY_HTML = build_qids_figure()
+
+with gr.Blocks() as demo:
+    gr.Markdown("## QIDS Framework — Interactive Visualizer")
+    gr.HTML(PLOTLY_HTML)
+    gr.Markdown("---\n*Interactive Plotly visualization served with Gradio*")
+
+if __name__ == "__main__":
+    demo.launch()