Spaces:

Sasidhar
/

Jumpstart

Running

App Files Files Community

Sasidhar commited on 24 days ago

Commit

8479d9f

verified ·

1 Parent(s): 6c18cec

Update app.py

Browse files

Files changed (1) hide show

app.py +78 -55

app.py CHANGED Viewed

@@ -1,26 +1,39 @@
 import streamlit as st
 import streamlit.components.v1 as components
-import json
 st.set_page_config(layout="wide")
-st.title("🏗️ GenAI Claims Workflow (Horizontal + Tooltip)")
-# Tooltip content
-step_details = {
-    "lodged": "📩 Claim is received via the customer portal. If more info is needed, an email is sent.",
-    "fraud": "🔍 LLM performs a fraud check using historical claims and language cues.",
-    "coverage": "📜 Policy coverage is evaluated for eligibility using claim metadata.",
-    "builder": "👷 Based on location and damage type, a builder is assigned.",
-    "schedule": "📅 Repairs are scheduled between the customer and the builder.",
-    "payment": "💳 Payment is authorised after validation of repair progress.",
-    "settle": "✅ Final review is done and the claim is marked as settled."
-}
-step_json = json.dumps(step_details)
-# Safe HTML/JS with escaped braces
-html = f"""
-<div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
-<div id="tooltip" style="display:none; position:absolute; background:white; color:black; padding:10px; border-radius:5px; border:1px solid #666; box-shadow:2px 2px 8px rgba(0,0,0,0.2); z-index:10; max-width:300px;"></div>
 <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
@@ -29,21 +42,29 @@ html = f"""
 <script>
 cytoscape.use(window.cytoscapeDagre);
-const stepDetails = {step_json};
-const cy = cytoscape({{
   container: document.getElementById('cy'),
-  layout: {{
     name: 'dagre',
     rankDir: 'LR',
     nodeSep: 50,
     edgeSep: 30,
     rankSep: 120
-  }},
   style: [
-    {{
       selector: 'node',
-      style: {{
         'label': 'data(label)',
         'text-valign': 'center',
         'text-halign': 'center',
@@ -51,41 +72,41 @@ const cy = cytoscape({{
         'color': '#fff',
         'font-size': '14px',
         'text-wrap': 'wrap',
-        'text-max-width': 80,
         'shape': 'roundrectangle',
         'padding': '10px'
-      }}
-    }},
-    {{
       selector: 'edge',
-      style: {{
         'width': 2,
         'line-color': '#aaa',
         'target-arrow-color': '#aaa',
         'target-arrow-shape': 'triangle'
-      }}
-    }}
   ],
   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' }} }}
   ]
-}});
 const tooltip = document.getElementById('tooltip');
-cy.on('tap', 'node', function(evt) {{
   const nodeId = evt.target.id();
   const description = stepDetails[nodeId] || "No info available.";
   const rect = document.getElementById('cy').getBoundingClientRect();
@@ -95,15 +116,17 @@ cy.on('tap', 'node', function(evt) {{
   tooltip.style.left = (pos.clientX - rect.left + 20) + 'px';
   tooltip.style.top = (pos.clientY - rect.top + 20) + 'px';
   tooltip.style.display = 'block';
-}});
-cy.on('tap', function(evt) {{
-  if (evt.target === cy) {{
     tooltip.style.display = 'none';
-  }}
-}});
 </script>
-"""
-# Inject into Streamlit
-components.html(html, height=550, scrolling=False)

 import streamlit as st
 import streamlit.components.v1 as components
 st.set_page_config(layout="wide")
+st.title("🏗️ GenAI Claims Workflow (Horizontal with Tooltips)")
+# Inline the full HTML, JS, and CSS
+components.html(
+    """
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    #cy {
+      width: 100%;
+      height: 500px;
+      border: 1px solid #ccc;
+    }
+    #tooltip {
+      display: none;
+      position: absolute;
+      background: white;
+      color: black;
+      padding: 10px;
+      border-radius: 5px;
+      border: 1px solid #666;
+      box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
+      z-index: 10;
+      max-width: 300px;
+    }
+  </style>
+</head>
+<body>
+<div id="cy"></div>
+<div id="tooltip"></div>
 <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
 <script>
 cytoscape.use(window.cytoscapeDagre);
+const stepDetails = {
+  lodged: "📩 Claim is received via the customer portal. If more info is needed, an email is sent.",
+  fraud: "🔍 LLM performs a fraud check using historical claims and language cues.",
+  coverage: "📜 Policy coverage is evaluated for eligibility using claim metadata.",
+  builder: "👷 Based on location and damage type, a builder is assigned.",
+  schedule: "📅 Repairs are scheduled between the customer and the builder.",
+  payment: "💳 Payment is authorised after validation of repair progress.",
+  settle: "✅ Final review is done and the claim is marked as settled."
+};
+const cy = cytoscape({
   container: document.getElementById('cy'),
+  layout: {
     name: 'dagre',
     rankDir: 'LR',
     nodeSep: 50,
     edgeSep: 30,
     rankSep: 120
+  },
   style: [
+    {
       selector: 'node',
+      style: {
         'label': 'data(label)',
         'text-valign': 'center',
         'text-halign': 'center',
         'color': '#fff',
         'font-size': '14px',
         'text-wrap': 'wrap',
+        'text-max-width': 100,
         'shape': 'roundrectangle',
         'padding': '10px'
+      }
+    },
+    {
       selector: 'edge',
+      style: {
         'width': 2,
         'line-color': '#aaa',
         'target-arrow-color': '#aaa',
         'target-arrow-shape': 'triangle'
+      }
+    }
   ],
   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' }}
   ]
+});
 const tooltip = document.getElementById('tooltip');
+cy.on('tap', 'node', function(evt) {
   const nodeId = evt.target.id();
   const description = stepDetails[nodeId] || "No info available.";
   const rect = document.getElementById('cy').getBoundingClientRect();
   tooltip.style.left = (pos.clientX - rect.left + 20) + 'px';
   tooltip.style.top = (pos.clientY - rect.top + 20) + 'px';
   tooltip.style.display = 'block';
+});
+cy.on('tap', function(evt) {
+  if (evt.target === cy) {
     tooltip.style.display = 'none';
+  }
+});
 </script>
+</body>
+</html>
+    """,
+    height=550,
+    scrolling=False
+)