feat: implement proper markdown formatting for scene analysis

backend/app/core/inference.py

@@ -22,40 +22,39 @@ logger = get_logger("inference")
 
 SCENE_ANALYSIS_PROMPT = """You are an expert AI Accident Investigator. Analyze this accident scene photograph and extract specific details EXACTLY matching the formatting below.
 
-DO NOT output a generic "Accident Report" with Date/Time/Location. Do not use markdown headers like "## Accident Report".
-You MUST output EXACTLY these four bracketed sections and nothing else. Output the brackets exactly as shown.
-
-[AI Observation]
-Vehicles Involved: <Number>
-Vehicle 1 Make/Model: <Year Make Model (Color BodyType)>
-Vehicle 1 License Plate: <Plate or "Not visible">
-Vehicle 1 Geographic Location: <Place name and Country derived from license plate format/text. E.g. "Maharashtra, India" or "Texas, USA" if possible, else "Unknown">
-Vehicle 1 Owner: <Owner Name or "Not visible">
-... (Repeat exactly the same 4 fields for Vehicle 2, Vehicle 3, etc. ONLY if they are clearly visible in the image. DO NOT invent vehicles that do not exist.)
-Non-vehicle Parties: <Pedestrians, cyclists, objects if any>
-
-[Accident Severity]
-Accident Category: <mild / medium / critical based on structural damage>
-Survival/Injury Estimation: <minor injury / critical injury / life threatening injury based on passenger compartment intrusion and airbag deployment>
-
-[Condition Assessment]
-Time of Incident: <Day / Dusk / Night based on lighting>
-Weather: <Clear / Cloudy / Rain / Fog / Snow>
-Road Type: <1-way / 2-way / Intersection / Parking Lot / Highway>
-Road Surface: <Dry / Wet / Icy / Debris-covered>
-Vehicle 1 Position: <Direction facing, location on road>
-Vehicle 1 Tyre Direction: <Straight / Turned Left / Turned Right>
-Vehicle 1 Tyre Condition: <Condition details or "Not visible">
+You MUST use Markdown formatting with headers (###) and bullet points (- **Key**: Value) as shown below.
+
+### [AI Observation]
+- **Vehicles Involved**: <Number>
+- **Vehicle 1 Make/Model**: <Year Make Model (Color BodyType)>
+- **Vehicle 1 License Plate**: <Plate or "Not visible">
+- **Vehicle 1 Geographic Location**: <Place name and Country derived from license plate format/text. E.g. "Dubai, UAE" or "Texas, USA" if possible, else "Unknown">
+- **Vehicle 1 Owner**: <Owner Name or "Not visible">
+... (Repeat exactly the same fields for Vehicle 2, Vehicle 3, etc. ONLY if they are clearly visible in the image. DO NOT invent vehicles that do not exist.)
+- **Non-vehicle Parties**: <Pedestrians, cyclists, objects if any>
+
+### [Accident Severity]
+- **Accident Category**: <mild / medium / critical based on structural damage>
+- **Survival/Injury Estimation**: <minor injury / critical injury / life threatening injury based on passenger compartment intrusion and airbag deployment>
+
+### [Condition Assessment]
+- **Time of Incident**: <Day / Dusk / Night based on lighting>
+- **Weather**: <Clear / Cloudy / Rain / Fog / Snow>
+- **Road Type**: <1-way / 2-way / Intersection / Parking Lot / Highway>
+- **Road Surface**: <Dry / Wet / Icy / Debris-covered>
+- **Vehicle 1 Position**: <Direction facing, location on road>
+- **Vehicle 1 Tyre Direction**: <Straight / Turned Left / Turned Right>
+- **Vehicle 1 Tyre Condition**: <Condition details or "Not visible">
 ... (Repeat exactly the same 3 fields for Vehicle 2, Vehicle 3, etc. ONLY if they are present)
-Area of Impact: <Front / Rear / Side / Corner etc. for the primary collision>
-Visible Debris/Skid Marks: <Description of glass, plastic, fluids, or tire marks on road>
-Airbag/Safety: <Deployed / Not visible>
+- **Area of Impact**: <Front / Rear / Side / Corner etc. for the primary collision>
+- **Visible Debris/Skid Marks**: <Description of glass, plastic, fluids, tire marks on road>
+- **Airbag/Safety**: <Deployed / Not visible>
 
-[Damage Analysis & Insurance Assessment]
-- <Specific Part of Vehicle 1>: <Damage description> (Intensity: <Low/Medium/High>). Clause <Guess> -> <SUBROGATION CLAIM / FULLY COVERED / SUBJECT TO DEDUCTIBLE>
+### [Damage Analysis & Insurance Assessment]
+- **<Specific Part of Vehicle 1>**: <Damage description> (Intensity: <Low/Medium/High>). Clause <Guess> -> <SUBROGATION CLAIM / FULLY COVERED / SUBJECT TO DEDUCTIBLE>
 ... (List damage for other visible vehicles only)
 
-[Summary]
+### [Summary]
 <2-3 sentences summarizing the collision, layout, and visible damages>"""
 
 

backend/app/core/reference_data.py

@@ -24,7 +24,37 @@ REFERENCE_CASES = {
         "analyses": [
             {
                 "filename": "01a252ba0708_car_8.jpg",
-                "raw_analysis": "[AI Observation]\\nVehicles Involved: 1\\nVehicle 1 Make/Model: 2018 Toyota Highlander (Silver SUV)\\nVehicle 1 License Plate: CA 8XYZ123\\nVehicle 1 Geographic Location: California, USA\\nVehicle 1 Owner: Sarah Jenkins\\nNon-vehicle Parties: None\\n\\n[Accident Severity]\\nAccident Category: critical\\nSurvival/Injury Estimation: minor injury\\n\\n[Condition Assessment]\\nTime of Incident: Day\\nWeather: Clear\\nRoad Type: 2-way\\nRoad Surface: Dry\\nVehicle 1 Position: Facing right, near the curb\\nVehicle 1 Tyre Direction: Straight\\nVehicle 1 Tyre Condition: Front-Left (Good, 6mm tread), Front-Right (Good, 6mm tread), Rears (Worn, 3mm tread)\\nArea of Impact: Front\\nVisible Debris/Skid Marks: Glass shards and fluid leak near the front bumper\\nAirbag/Safety: Deployed\\n\\n[Damage Analysis & Insurance Assessment]\\n- Front Bumper: Severe crush damage (Intensity: High). \\n- Radiator & Core Support: Destroyed (Intensity: High).\\n- Right Fender: Crumpled (Intensity: High).\\n\\n[Summary]\\nSevere front-end deformation observed consistent with high-speed frontal impact. Airbags deployed. Vehicle is likely a total loss."
+                "raw_analysis": """### [AI Observation]
+- **Vehicles Involved**: 1
+- **Vehicle 1 Make/Model**: 2018 Toyota Highlander (Silver SUV)
+- **Vehicle 1 License Plate**: CA 8XYZ123
+- **Vehicle 1 Geographic Location**: California, USA
+- **Vehicle 1 Owner**: Sarah Jenkins
+- **Non-vehicle Parties**: None
+
+### [Accident Severity]
+- **Accident Category**: critical
+- **Survival/Injury Estimation**: minor injury
+
+### [Condition Assessment]
+- **Time of Incident**: Day
+- **Weather**: Clear
+- **Road Type**: 2-way
+- **Road Surface**: Dry
+- **Vehicle 1 Position**: Facing right, near the curb
+- **Vehicle 1 Tyre Direction**: Straight
+- **Vehicle 1 Tyre Condition**: Front-Left (Good, 6mm tread), Front-Right (Good, 6mm tread), Rears (Worn, 3mm tread)
+- **Area of Impact**: Front
+- **Visible Debris/Skid Marks**: Glass shards and fluid leak near the front bumper
+- **Airbag/Safety**: Deployed
+
+### [Damage Analysis & Insurance Assessment]
+- **Front Bumper**: Severe crush damage (Intensity: High). 
+- **Radiator & Core Support**: Destroyed (Intensity: High).
+- **Right Fender**: Crumpled (Intensity: High).
+
+### [Summary]
+Severe front-end deformation observed consistent with high-speed frontal impact. Airbags deployed. Vehicle is likely a total loss."""
             }
         ],
         "violations": [
@@ -61,7 +91,18 @@ REFERENCE_CASES = {
         "analyses": [
             {
                 "filename": "a358e234c528_accident_scene_2.jpg",
-                "raw_analysis": "[AI Observation]\\nVehicles Involved: 2\\nVehicle 1 Make/Model: 2020 Honda Civic (Blue Sedan)\\nVehicle 1 License Plate: TX LMN-4567\\nVehicle 2 Make/Model: 2015 Ford F-150 (White Truck)\\nVehicle 2 License Plate: TX PQR-8910\\n\\n[Accident Severity]\\nAccident Category: medium\\n\\n[Summary]\\nT-bone intersection collision. Blue Sedan sustained heavy side impact; White Truck shows front-end damage. Airbags deployed on Blue Sedan."
+                "raw_analysis": """### [AI Observation]
+- **Vehicles Involved**: 2
+- **Vehicle 1 Make/Model**: 2020 Honda Civic (Blue Sedan)
+- **Vehicle 1 License Plate**: TX LMN-4567
+- **Vehicle 2 Make/Model**: 2015 Ford F-150 (White Truck)
+- **Vehicle 2 License Plate**: TX PQR-8910
+
+### [Accident Severity]
+- **Accident Category**: medium
+
+### [Summary]
+T-bone intersection collision. Blue Sedan sustained heavy side impact; White Truck shows front-end damage. Airbags deployed on Blue Sedan."""
             }
         ],
         "violations": [
@@ -82,3 +123,5 @@ REFERENCE_CASES = {
         ]
     }
 }
+
+

frontend/css/styles.css

@@ -844,10 +844,52 @@ button {
     color: var(--text-secondary);
 }
 
-.analysis-content pre {
-    white-space: pre-wrap;
-    word-break: break-word;
-    font-family: var(--font-body);
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.8rem;
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+.markdown-body h3 {
+    font-size: 1.1rem;
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 0.3rem;
+}
+
+.markdown-body h4 {
+    font-size: 0.95rem;
+    color: var(--accent);
+}
+
+.markdown-body p {
+    margin-bottom: 1rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+    margin-bottom: 1rem;
+    padding-left: 1.2rem;
+}
+
+.markdown-body li {
+    margin-bottom: 0.4rem;
+}
+
+.markdown-body strong {
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+.markdown-body code {
+    background: var(--surface);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 0.8rem;
 }
 
 .analysis-photo-section {

frontend/index.html

@@ -20,6 +20,8 @@
 
     <!-- Styles -->
     <link rel="stylesheet" href="/static/css/styles.css">
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 </head>
 
 <body>

frontend/js/alt_app.js

@@ -725,9 +725,11 @@ function renderCaseDetail(data) {
     const analysisContent = document.getElementById('analysis-content');
     if (data.analyses?.length) {
         analysisContent.innerHTML = data.analyses.map(a => `
-            <div class="analysis-photo-section">
-                <div class="analysis-photo-label">📷 ${escHtml(a.filename || 'Photo')}</div>
-                <pre>${escHtml(a.raw_analysis || '')}</pre>
+            <div class="analysis-photo-section" style="margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);">
+                <div class="analysis-photo-label" style="font-weight: 600; margin-bottom: 1rem;">📷 ${escHtml(a.filename || 'Photo')}</div>
+                <div class="markdown-body">
+                    ${marked.parse(a.raw_analysis || '')}
+                </div>
             </div>
         `).join('');
     } else {

frontend/js/app.js

@@ -552,9 +552,11 @@ function renderCaseDetail(data) {
     const analysisContent = document.getElementById('analysis-content');
     if (data.analyses?.length) {
         analysisContent.innerHTML = data.analyses.map(a => `
-            <div class="analysis-photo-section">
-                <div class="analysis-photo-label">📷 ${escHtml(a.filename || 'Photo')}</div>
-                <pre>${escHtml(a.raw_analysis || '')}</pre>
+            <div class="analysis-photo-section" style="margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);">
+                <div class="analysis-photo-label" style="font-weight: 600; margin-bottom: 1rem;">📷 ${escHtml(a.filename || 'Photo')}</div>
+                <div class="markdown-body">
+                    ${marked.parse(a.raw_analysis || '')}
+                </div>
             </div>
         `).join('');
     } else {

test_chat.py

@@ -0,0 +1,21 @@
+import requests
+import json
+
+url = "http://127.0.0.1:8001/gradio_api/call/chat"
+headers = {"Content-Type": "application/json"}
+payload = {
+    "data": ["Hello", [], "System Context here"]
+}
+
+res = requests.post(url, headers=headers, json=payload)
+print("POST Response:", res.status_code, res.text)
+
+if res.status_code == 200:
+    event_id = res.json().get("event_id")
+    print("Event ID:", event_id)
+    stream_url = f"{url}/{event_id}"
+    res2 = requests.get(stream_url, headers={"Accept": "text/event-stream"})
+    print("STREAM Response:", res2.status_code)
+    for line in res2.iter_lines():
+        if line:
+            print(line.decode("utf-8"))