Sasidhar commited on
Commit
4ee39c6
Β·
verified Β·
1 Parent(s): 8479d9f

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +18 -125
app.py CHANGED
@@ -1,132 +1,25 @@
1
  import streamlit as st
2
- import streamlit.components.v1 as components
3
 
4
- st.set_page_config(layout="wide")
5
- st.title("πŸ—οΈ GenAI Claims Workflow (Horizontal with Tooltips)")
6
 
7
- # Inline the full HTML, JS, and CSS
8
- components.html(
9
- """
10
- <!DOCTYPE html>
11
- <html>
12
- <head>
13
- <meta charset="utf-8">
14
- <style>
15
- #cy {
16
- width: 100%;
17
- height: 500px;
18
- border: 1px solid #ccc;
19
- }
20
- #tooltip {
21
- display: none;
22
- position: absolute;
23
- background: white;
24
- color: black;
25
- padding: 10px;
26
- border-radius: 5px;
27
- border: 1px solid #666;
28
- box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
29
- z-index: 10;
30
- max-width: 300px;
31
- }
32
- </style>
33
- </head>
34
- <body>
35
- <div id="cy"></div>
36
- <div id="tooltip"></div>
37
 
38
- <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
39
- <script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
40
- <script src="https://unpkg.com/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>
 
 
 
 
 
 
41
 
42
- <script>
43
- cytoscape.use(window.cytoscapeDagre);
44
 
45
- const stepDetails = {
46
- lodged: "πŸ“© Claim is received via the customer portal. If more info is needed, an email is sent.",
47
- fraud: "πŸ” LLM performs a fraud check using historical claims and language cues.",
48
- coverage: "πŸ“œ Policy coverage is evaluated for eligibility using claim metadata.",
49
- builder: "πŸ‘· Based on location and damage type, a builder is assigned.",
50
- schedule: "πŸ“… Repairs are scheduled between the customer and the builder.",
51
- payment: "πŸ’³ Payment is authorised after validation of repair progress.",
52
- settle: "βœ… Final review is done and the claim is marked as settled."
53
- };
54
 
55
- const cy = cytoscape({
56
- container: document.getElementById('cy'),
57
- layout: {
58
- name: 'dagre',
59
- rankDir: 'LR',
60
- nodeSep: 50,
61
- edgeSep: 30,
62
- rankSep: 120
63
- },
64
- style: [
65
- {
66
- selector: 'node',
67
- style: {
68
- 'label': 'data(label)',
69
- 'text-valign': 'center',
70
- 'text-halign': 'center',
71
- 'background-color': '#0077B6',
72
- 'color': '#fff',
73
- 'font-size': '14px',
74
- 'text-wrap': 'wrap',
75
- 'text-max-width': 100,
76
- 'shape': 'roundrectangle',
77
- 'padding': '10px'
78
- }
79
- },
80
- {
81
- selector: 'edge',
82
- style: {
83
- 'width': 2,
84
- 'line-color': '#aaa',
85
- 'target-arrow-color': '#aaa',
86
- 'target-arrow-shape': 'triangle'
87
- }
88
- }
89
- ],
90
- elements: [
91
- { data: { id: 'lodged', label: '1. Claim Lodged' }},
92
- { data: { id: 'fraud', label: '2. Fraud Check' }},
93
- { data: { id: 'coverage', label: '3. Coverage Check' }},
94
- { data: { id: 'builder', label: '4. Builder Assignment' }},
95
- { data: { id: 'schedule', label: '5. Schedule Repairs' }},
96
- { data: { id: 'payment', label: '6. Authorise Payment' }},
97
- { data: { id: 'settle', label: '7. Settle Claim' }},
98
- { data: { source: 'lodged', target: 'fraud' }},
99
- { data: { source: 'fraud', target: 'coverage' }},
100
- { data: { source: 'coverage', target: 'builder' }},
101
- { data: { source: 'builder', target: 'schedule' }},
102
- { data: { source: 'schedule', target: 'payment' }},
103
- { data: { source: 'payment', target: 'settle' }}
104
- ]
105
- });
106
-
107
- const tooltip = document.getElementById('tooltip');
108
-
109
- cy.on('tap', 'node', function(evt) {
110
- const nodeId = evt.target.id();
111
- const description = stepDetails[nodeId] || "No info available.";
112
- const rect = document.getElementById('cy').getBoundingClientRect();
113
- const pos = evt.originalEvent;
114
-
115
- tooltip.innerHTML = '<strong>' + evt.target.data('label') + '</strong><br>' + description;
116
- tooltip.style.left = (pos.clientX - rect.left + 20) + 'px';
117
- tooltip.style.top = (pos.clientY - rect.top + 20) + 'px';
118
- tooltip.style.display = 'block';
119
- });
120
-
121
- cy.on('tap', function(evt) {
122
- if (evt.target === cy) {
123
- tooltip.style.display = 'none';
124
- }
125
- });
126
- </script>
127
- </body>
128
- </html>
129
- """,
130
- height=550,
131
- scrolling=False
132
- )
 
1
  import streamlit as st
2
+ from graphviz import Digraph
3
 
4
+ st.title("Claims Workflow")
 
5
 
6
+ dot = Digraph()
7
+ dot.attr(rankdir='LR') # Horizontal
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
 
9
+ steps = [
10
+ ("lodged", "1. Claim Lodged"),
11
+ ("fraud", "2. Fraud Check"),
12
+ ("coverage", "3. Coverage Check"),
13
+ ("builder", "4. Builder Assignment"),
14
+ ("schedule", "5. Schedule Repairs"),
15
+ ("payment", "6. Authorise Payment"),
16
+ ("settle", "7. Settle Claim"),
17
+ ]
18
 
19
+ for step_id, label in steps:
20
+ dot.node(step_id, label)
21
 
22
+ for i in range(len(steps) - 1):
23
+ dot.edge(steps[i][0], steps[i + 1][0])
 
 
 
 
 
 
 
24
 
25
+ st.graphviz_chart(dot)