File size: 5,617 Bytes
62356a6 | 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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | """
UI Components for Traffic Accident Reconstruction System
========================================================
Reusable Streamlit components for the application.
"""
import streamlit as st
from config import CASE_STUDY_LOCATION, ALTERNATIVE_LOCATIONS
def render_sidebar():
"""Render the application sidebar."""
with st.sidebar:
# MindSpore Logo at the top
try:
st.image("assets/mindspore_logo.png", width=120)
except:
st.markdown("### 🤖 MindSpore")
st.markdown("---")
st.header("🚗 Accident Analyzer")
st.markdown("""
This system helps traffic authorities
understand accidents through:
- **AI-powered** scenario generation
- **Real map** visualization
- **2D simulation** of accidents
- **Probability analysis** of scenarios
""")
st.markdown("---")
st.subheader("📍 Case Study Location")
st.info(f"""
**{CASE_STUDY_LOCATION['name']}**
📍 {CASE_STUDY_LOCATION['city']}, {CASE_STUDY_LOCATION['country']}
🗺️ Lat: {CASE_STUDY_LOCATION['latitude']:.4f}
🗺️ Lng: {CASE_STUDY_LOCATION['longitude']:.4f}
""")
st.markdown("---")
st.subheader("📚 Help")
with st.expander("How to use"):
st.markdown("""
1. **Select Location**: View the roundabout location
2. **Vehicle 1**: Enter first vehicle details and draw its path
3. **Vehicle 2**: Enter second vehicle details and draw its path
4. **Analyze**: Let AI generate possible scenarios
5. **Results**: View scenarios with probability scores
""")
with st.expander("About MindSpore"):
st.markdown("""
This system uses **Huawei MindSpore**
for AI-powered scenario generation.
MindSpore is an open-source deep
learning framework optimized for
Ascend processors.
""")
st.markdown("---")
st.caption("Huawei AI Innovation Challenge 2026")
def render_header():
"""Render the application header."""
st.markdown("""
<div style="
background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
padding: 2rem;
border-radius: 10px;
color: white;
margin-bottom: 2rem;
text-align: center;
">
<h1 style="margin: 0; font-size: 2.5rem;">🚗 Traffic Accident Reconstruction System</h1>
<p style="margin: 0.5rem 0 0 0; opacity: 0.9;">AI-Powered Analysis using Huawei MindSpore</p>
</div>
""", unsafe_allow_html=True)
def render_footer():
"""Render the application footer."""
st.markdown("---")
col1, col2, col3 = st.columns([2, 1, 2])
with col1:
st.markdown("🏆 **Huawei AI Innovation Challenge 2026**")
with col2:
# MindSpore logo in the center of footer
try:
st.image("assets/mindspore_logo.png", width=80)
except:
st.markdown("**[M]**")
with col3:
st.markdown("🤖 **Powered by MindSpore AI Framework**")
def render_info_card(title: str, content: str, color: str = "#2d5a87"):
"""Render an information card."""
st.markdown(f"""
<div style="
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
border-left: 4px solid {color};
margin: 1rem 0;
">
<h4 style="margin: 0 0 0.5rem 0;">{title}</h4>
<p style="margin: 0;">{content}</p>
</div>
""", unsafe_allow_html=True)
def render_metric_card(label: str, value: str, delta: str = None, color: str = "#2d5a87"):
"""Render a metric card."""
delta_html = ""
if delta:
delta_color = "#28a745" if "+" in delta or "High" in delta else "#dc3545"
delta_html = f'<span style="color: {delta_color}; font-size: 0.9rem;">{delta}</span>'
st.markdown(f"""
<div style="
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
padding: 1.5rem;
border-radius: 12px;
border-top: 3px solid {color};
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border: 1px solid rgba(255, 255, 255, 0.12);
">
<p style="margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; font-weight: 500;">{label}</p>
<h2 style="margin: 0.5rem 0; color: {color}; font-weight: 700;">{value}</h2>
{delta_html}
</div>
""", unsafe_allow_html=True)
def render_progress_bar(value: float, label: str = "", color: str = "#2d5a87"):
"""Render a custom progress bar."""
percentage = min(max(value * 100, 0), 100)
st.markdown(f"""
<div style="margin: 0.5rem 0;">
<div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
<span>{label}</span>
<span>{percentage:.1f}%</span>
</div>
<div style="
background: #e9ecef;
border-radius: 5px;
height: 20px;
overflow: hidden;
">
<div style="
background: {color};
width: {percentage}%;
height: 100%;
border-radius: 5px;
transition: width 0.3s ease;
"></div>
</div>
</div>
""", unsafe_allow_html=True)
|