Update app.py

app.py

@@ -1,68 +1,87 @@
 import streamlit as st
-from streamlit_cytoscapejs import cytoscape
+import streamlit.components.v1 as components
+import json
 
-st.set_page_config(page_title="GenAI Claims Workflow", layout="wide")
-st.title("GenAI Claims Automation Workflow")
+st.set_page_config(layout="wide")
+st.title("GenAI Claims Workflow - Interactive Demo")
 
-# Define the workflow steps and edges
-nodes = [
-    {"data": {"id": "lodged", "label": "1. Claim Lodged"}},
-    {"data": {"id": "fraud", "label": "2. Fraud Check"}},
-    {"data": {"id": "coverage", "label": "3. Coverage Check"}},
-    {"data": {"id": "builder", "label": "4. Builder Assignment"}},
-    {"data": {"id": "schedule", "label": "5. Schedule Repairs"}},
-    {"data": {"id": "payment", "label": "6. Authorise Payment"}},
-    {"data": {"id": "settle", "label": "7. Settle Claim"}},
-]
-
-edges = [
-    {"data": {"source": "lodged", "target": "fraud"}},
-    {"data": {"source": "fraud", "target": "coverage"}},
-    {"data": {"source": "coverage", "target": "builder"}},
-    {"data": {"source": "builder", "target": "schedule"}},
-    {"data": {"source": "schedule", "target": "payment"}},
-    {"data": {"source": "payment", "target": "settle"}},
-]
+# Define node data and labels (pass to JS)
+step_details = {
+    "lodged": "The claim is received via the customer portal.",
+    "fraud": "LLM checks for fraud patterns.",
+    "coverage": "Check if claim is covered under the policy.",
+    "builder": "Assign a builder based on location and task.",
+    "schedule": "Schedule repair with builder and customer.",
+    "payment": "Authorise payment after repair is complete.",
+    "settle": "Mark claim as settled after review."
+}
 
-# Combine into elements
-elements = nodes + edges
+node_data = json.dumps(step_details)
 
-# Render the graph
-selected_node = cytoscape(
-    elements=elements,
-    layout_name="breadthfirst",  # Options: grid, circle, breadthfirst
-    height="500px",
-    style={
-        "node": {
-            "label": "data(label)",
-            "background-color": "#0077B6",
-            "text-valign": "center",
-            "text-halign": "center",
-            "color": "white",
-            "font-size": "14px",
-            "width": "label",
-            "height": "label",
-            "padding": "10px",
-            "border-color": "#023E8A",
-            "border-width": "2px",
-        }
-    },
-)
+html_content = f"""
+<div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
+<p id="step-details" style="font-weight:bold; font-size:16px;"></p>
+<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
+<script>
+  const stepDetails = {node_data};
 
-# Show step details
-step_details = {
-    "lodged": "The claim is received via the customer portal. If more info is needed, an email is sent.",
-    "fraud": "LLM checks for fraud patterns using historic claims and language cues.",
-    "coverage": "The policy is evaluated to check coverage eligibility using claim metadata.",
-    "builder": "Based on the location and nature of damage, an approved builder is assigned.",
-    "schedule": "The repair is scheduled by coordinating between the builder and customer.",
-    "payment": "The system authorises payment to builder after repair progress is validated.",
-    "settle": "Final review is done, and the claim is marked as settled in the system."
-}
+  var cy = cytoscape({{
+    container: document.getElementById('cy'),
+    elements: [
+      {{ data: {{ id: 'lodged', label: '1. Claim Lodged' }} }},
+      {{ data: {{ id: 'fraud', label: '2. Fraud Check' }} }},
+      {{ data: {{ id: 'coverage', label: '3. Coverage Check' }} }},
+      {{ data: {{ id: 'builder', label: '4. Builder Assignment' }} }},
+      {{ data: {{ id: 'schedule', label: '5. Schedule Repairs' }} }},
+      {{ data: {{ id: 'payment', label: '6. Authorise Payment' }} }},
+      {{ data: {{ id: 'settle', label: '7. Settle Claim' }} }},
+      {{ data: {{ source: 'lodged', target: 'fraud' }} }},
+      {{ data: {{ source: 'fraud', target: 'coverage' }} }},
+      {{ data: {{ source: 'coverage', target: 'builder' }} }},
+      {{ data: {{ source: 'builder', target: 'schedule' }} }},
+      {{ data: {{ source: 'schedule', target: 'payment' }} }},
+      {{ data: {{ source: 'payment', target: 'settle' }} }},
+    ],
+    style: [
+      {{
+        selector: 'node',
+        style: {{
+          'label': 'data(label)',
+          'text-valign': 'center',
+          'color': '#fff',
+          'background-color': '#0077B6',
+          'text-outline-width': 2,
+          'text-outline-color': '#0077B6',
+          'width': 'label',
+          'height': 'label',
+          'padding': '10px',
+          'font-size': '12px',
+          'shape': 'roundrectangle'
+        }}
+      }},
+      {{
+        selector: 'edge',
+        style: {{
+          'width': 2,
+          'line-color': '#aaa',
+          'target-arrow-color': '#aaa',
+          'target-arrow-shape': 'triangle'
+        }}
+      }}
+    ],
+    layout: {{
+      name: 'breadthfirst',
+      directed: true,
+      padding: 10
+    }}
+  }});
 
-if selected_node:
-    st.subheader(f"Details for: {selected_node}")
-    st.success(step_details.get(selected_node, "No info available."))
-else:
-    st.info("Click a node to view details about that step.")
+  cy.on('tap', 'node', function(evt){{
+    const nodeId = evt.target.id();
+    const info = stepDetails[nodeId] || "No details available";
+    document.getElementById('step-details').innerText = info;
+  }});
+</script>
+"""
 
+components.html(html_content, height=600, scrolling=False)