File size: 3,376 Bytes
313351d 236ea6f be5a8cb 236ea6f be5a8cb 236ea6f da13ad4 236ea6f 1edbc6c 236ea6f 1edbc6c 236ea6f 6c18cec 236ea6f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import streamlit as st
import streamlit.components.v1 as components
st.set_page_config(layout="wide")
st.title("🏗️ GenAI Claims Workflow (Fake Horizontal Layout)")
components.html(
"""
<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>
const stepDetails = {
lodged: "📩 Claim is received via the customer portal.",
fraud: "🔍 Fraud check using LLM.",
coverage: "📜 Check if claim is covered by policy.",
builder: "👷 Assign a builder.",
schedule: "📅 Schedule the repair.",
payment: "💳 Authorise builder payment.",
settle: "✅ Mark claim as settled."
};
const cy = cytoscape({
container: document.getElementById('cy'),
layout: { name: 'preset' }, // Position manually
style: [
{
selector: 'node',
style: {
'label': 'data(label)',
'background-color': '#0077B6',
'color': '#fff',
'text-valign': 'center',
'text-halign': 'center',
'text-wrap': 'wrap',
'text-max-width': 100,
'font-size': '14px',
'shape': 'roundrectangle',
'width': 'label',
'height': 'label',
'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' }, position: { x: 100, y: 100 } },
{ data: { id: 'fraud', label: '2. Fraud Check' }, position: { x: 300, y: 100 } },
{ data: { id: 'coverage', label: '3. Coverage Check' }, position: { x: 500, y: 100 } },
{ data: { id: 'builder', label: '4. Builder Assignment' }, position: { x: 700, y: 100 } },
{ data: { id: 'schedule', label: '5. Schedule Repairs' }, position: { x: 900, y: 100 } },
{ data: { id: 'payment', label: '6. Authorise Payment' }, position: { x: 1100, y: 100 } },
{ data: { id: 'settle', label: '7. Settle Claim' }, position: { x: 1300, y: 100 } },
{ 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();
const pos = evt.originalEvent;
tooltip.innerHTML = '<strong>' + evt.target.data('label') + '</strong><br>' + description;
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>
""",
height=550,
scrolling=False
)
|