-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
344 lines (326 loc) · 22.1 KB
/
Copy pathindex.html
File metadata and controls
344 lines (326 loc) · 22.1 KB
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Samudra Manthan | The AI-Powered Coastal Guardian</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Energetic & Playful -->
<!-- Application Structure Plan: The infographic follows a narrative structure designed to guide the user from understanding the core problem to appreciating the solution's impact. The flow is: 1. Hero Section (Hook), 2. The Problem (Context), 3. Our Solution (Value Proposition), 4. How It Works (Technical Deep-Dive), 5. Data Insights (Demonstration of Output), 6. Core Features (Functionality), 7. Technology Stack (Foundation), 8. Feasibility (Risk Mitigation), and 9. Impact (Conclusion). This thematic, top-down structure was chosen over a direct mirror of the README to build a compelling story, making the complex technical details more digestible for a judging audience. It starts broad, dives deep into the architecture and features, and zooms back out to the high-level impact. -->
<!-- Visualization & Content Choices:
- The Problem: Goal: Inform. Method: Styled HTML/CSS to visually represent the 'information gap' between official sources and citizens, which is more effective than a simple text block.
- 5-Layer Architecture: Goal: Organize. Method: A custom flowchart built with HTML/CSS (Flexbox and Borders). This avoids prohibited SVG/MermaidJS while providing a clear visual representation of the data flow, which is crucial for understanding the system's logic.
- Data Insights (Charts): Goal: Compare/Change/Relationships. Method: Three Chart.js canvas charts (Donut, Line, Bar) are used to visualize the *type* of analytics the platform would generate (e.g., hazard distribution, report volume during an event, trust score analysis). This demonstrates the platform's analytical power.
- Features & Tech Stack: Goal: Compare/Inform. Method: Styled cards with Unicode icons in a grid layout. This is more visually engaging and scannable than a standard HTML table.
- Impact: Goal: Inform. Method: Large Unicode icons and bold text in cards to make the key benefits memorable and impactful.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #F7F7F7;
}
.chart-container {
position: relative;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.flow-arrow {
font-size: 2rem;
line-height: 1;
color: #4A4A4A;
transform: rotate(90deg);
}
@media (min-width: 1024px) {
.flow-arrow {
transform: rotate(0deg);
}
}
</style>
</head>
<body class="text-gray-800">
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
<header class="text-center py-12">
<h1 class="text-4xl md:text-6xl font-bold text-[#0D47A1]">Project Samudra Manthan by Team Marg Vedha 3.0</h1>
<p class="text-lg md:text-2xl mt-4 text-[#FF6F61]">The AI-Powered Coastal Guardian</p>
<p class="max-w-3xl mx-auto mt-6 text-gray-600">
An integrated platform for INCOIS that intelligently fuses crowdsourced citizen reports and real-time social media analytics to revolutionize ocean hazard warnings and coastal safety.
</p>
</header>
<main>
<section id="problem" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-10">The Critical Information Gap</h2>
<div class="bg-white rounded-xl shadow-lg p-8 grid grid-cols-1 md:grid-cols-3 items-center gap-8">
<div class="text-center">
<div class="text-6xl mb-4">🛰️</div>
<h3 class="text-xl font-semibold text-[#0D47A1]">Official Forecasts</h3>
<p class="text-gray-600 mt-2">INCOIS provides vital warnings based on satellite and sensor data.</p>
</div>
<div class="text-center text-red-500">
<div class="text-5xl font-extrabold p-4 rounded-full">...GAP...</div>
<p class="font-semibold mt-2">Lack of Real-Time Ground Truth</p>
</div>
<div class="text-center">
<div class="text-6xl mb-4">👨👩👧👦</div>
<h3 class="text-xl font-semibold text-[#0D47A1]">Coastal Communities</h3>
<p class="text-gray-600 mt-2">First-hand observations are delayed, fragmented, or lost.</p>
</div>
</div>
</section>
<section id="solution" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-10">Our Solution: A Unified Ecosystem</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-2xl transition-shadow duration-300">
<div class="text-5xl mb-4 text-[#FF6F61]">🧠</div>
<h3 class="text-xl font-bold mb-2 text-[#0D47A1]">Hybrid Intelligence Engine</h3>
<p class="text-gray-600">Fuses AI-driven social media analysis with human-verified citizen reports for a complete, reliable view of any coastal event.</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-2xl transition-shadow duration-300">
<div class="text-5xl mb-4 text-[#FF6F61]">🛡️</div>
<h3 class="text-xl font-bold mb-2 text-[#0D47A1]">Dynamic Trust Scoring</h3>
<p class="text-gray-600">Combats misinformation by automatically assigning a trust score to every report based on reputation, location, and cross-correlation.</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-2xl transition-shadow duration-300">
<div class="text-5xl mb-4 text-[#FF6F61]">📴</div>
<h3 class="text-xl font-bold mb-2 text-[#0D47A1]">Offline-First for the Last Mile</h3>
<p class="text-gray-600">Ensures critical data is never lost. The mobile app is fully functional offline, syncing reports automatically when connectivity returns.</p>
</div>
</div>
</section>
<section id="architecture" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-12">How It Works: The 5-Layer Architecture</h2>
<div class="flex flex-col lg:flex-row items-center justify-center gap-4 lg:gap-0">
<div class="bg-white border-t-8 border-[#0D47A1] rounded-xl shadow-lg p-4 w-64 h-48 flex flex-col justify-center items-center text-center">
<p class="text-3xl mb-2">📱</p><h3 class="font-bold text-lg">1. Citizen Layer</h3><p class="text-sm text-gray-600">Offline-capable mobile app for simple, geotagged reporting.</p>
</div>
<div class="flow-arrow">➔</div>
<div class="bg-white border-t-8 border-[#FF6F61] rounded-xl shadow-lg p-4 w-64 h-48 flex flex-col justify-center items-center text-center">
<p class="text-3xl mb-2">📥</p><h3 class="font-bold text-lg">2. Ingestion Layer</h3><p class="text-sm text-gray-600">Centralized funnel for citizen reports and social media feeds.</p>
</div>
<div class="flow-arrow">➔</div>
<div class="bg-white border-t-8 border-[#4A4A4A] rounded-xl shadow-lg p-4 w-64 h-48 flex flex-col justify-center items-center text-center">
<p class="text-3xl mb-2">🔬</p><h3 class="font-bold text-lg">3. Analysis Layer</h3><p class="text-sm text-gray-600">The Brain: Multilingual NLP, media verification, and trust scoring.</p>
</div>
<div class="flow-arrow">➔</div>
<div class="bg-white border-t-8 border-[#0D47A1] rounded-xl shadow-lg p-4 w-64 h-48 flex flex-col justify-center items-center text-center">
<p class="text-3xl mb-2">📊</p><h3 class="font-bold text-lg">4. Visualization Layer</h3><p class="text-sm text-gray-600">INCOIS dashboard with interactive maps and heatmaps.</p>
</div>
<div class="flow-arrow">➔</div>
<div class="bg-white border-t-8 border-[#FF6F61] rounded-xl shadow-lg p-4 w-64 h-48 flex flex-col justify-center items-center text-center">
<p class="text-3xl mb-2">📢</p><h3 class="font-bold text-lg">5. Response Layer</h3><p class="text-sm text-gray-600">Targeted, localized alert generation and system integration.</p>
</div>
</div>
</section>
<section id="insights" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-10">Generating Actionable Insights</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-center">Hazard Type Distribution</h3>
<div class="chart-container"><canvas id="hazardDonutChart"></canvas></div>
<p class="text-center text-sm text-gray-600 mt-4">Instantly see the breakdown of reported incidents to understand the nature of an event.</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-center">Report Volume Over Time</h3>
<div class="chart-container"><canvas id="reportLineChart"></canvas></div>
<p class="text-center text-sm text-gray-600 mt-4">Track the velocity of incoming reports to identify escalating situations in near real-time.</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-center">Report Trust Score Analysis</h3>
<div class="chart-container"><canvas id="trustBarChart"></canvas></div>
<p class="text-center text-sm text-gray-600 mt-4">Focus response efforts by visualizing the quality and reliability of incoming data streams.</p>
</div>
</div>
</section>
<section id="features" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-10">Core Platform Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold text-[#0D47A1] mb-6 text-center">📱 Citizen Mobile App</h3>
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="text-2xl mr-3 text-[#FF6F61]">👆</span><div><strong>Simple, One-Click Reporting:</strong> Easily submit hazard reports with photos and video.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#FF6F61]">🌍</span><div><strong>Automatic Geotagging:</strong> Location and time are captured automatically for accuracy.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#FF6F61]">📴</span><div><strong>Full Offline Functionality:</strong> Reports are saved locally and synced automatically when online.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#FF6F61]">🔔</span><div><strong>Targeted Safety Alerts:</strong> Receive official warnings relevant to your specific location.</div></li>
</ul>
</div>
<div class="bg-white rounded-xl shadow-lg p-8">
<h3 class="text-2xl font-bold text-[#0D47A1] mb-6 text-center">🖥️ INCOIS Web Dashboard</h3>
<ul class="space-y-4 text-gray-700">
<li class="flex items-start"><span class="text-2xl mr-3 text-[#4A4A4A]">🗺️</span><div><strong>Real-Time Unified Map:</strong> Visualize citizen reports and social media hotspots in one view.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#4A4A4A]">✅</span><div><strong>Verification Workflow:</strong> Admins can review, verify, and escalate reports with a single click.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#4A4A4A]">📈</span><div><strong>Advanced Analytics:</strong> Track trends, monitor sentiment, and generate post-event reports.</div></li>
<li class="flex items-start"><span class="text-2xl mr-3 text-[#4A4A4A]">📢</span><div><strong>Geo-Targeted Alerting:</strong> Draw an area on the map to send alerts to affected citizens instantly.</div></li>
</ul>
</div>
</div>
</section>
<section id="techstack" class="mb-20 bg-white rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-center mb-10">Technology Stack</h2>
<div class="flex flex-wrap justify-center gap-8 text-center">
<div class="w-36"><div class="text-4xl">📱</div><p class="font-semibold mt-2">Flutter / Kotlin</p><p class="text-sm text-gray-500">Mobile App</p></div>
<div class="w-36"><div class="text-4xl">⚙️</div><p class="font-semibold mt-2">Node.js</p><p class="text-sm text-gray-500">Backend</p></div>
<div class="w-36"><div class="text-4xl">🗃️</div><p class="font-semibold mt-2">MongoDB</p><p class="text-sm text-gray-500">Database</p></div>
<div class="w-36"><div class="text-4xl">🗺️</div><p class="font-semibold mt-2">Mapbox API</p><p class="text-sm text-gray-500">GIS & Mapping</p></div>
<div class="w-36"><div class="text-4xl">🤖</div><p class="font-semibold mt-2">Python & IndicBERT</p><p class="text-sm text-gray-500">AI / ML</p></div>
<div class="w-36"><div class="text-4xl">☁️</div><p class="font-semibold mt-2">GCP / AWS</p><p class="text-sm text-gray-500">Deployment</p></div>
</div>
</section>
<section id="feasibility" class="mb-20">
<h2 class="text-3xl font-bold text-center mb-10">Addressing Key Challenges</h2>
<div class="space-y-6 max-w-4xl mx-auto">
<div>
<h3 class="text-lg font-semibold text-[#0D47A1]">Challenge: Data Quality & Misinformation</h3>
<p class="bg-white p-4 rounded-lg mt-2 text-gray-700 shadow"><strong>Mitigation:</strong> Our multi-pronged approach of Dynamic Trust Scoring, AI media verification, and a final manual admin review process ensures a high degree of data reliability.</p>
</div>
<div>
<h3 class="text-lg font-semibold text-[#0D47A1]">Challenge: Social Media API Limitations</h3>
<p class="bg-white p-4 rounded-lg mt-2 text-gray-700 shadow"><strong>Mitigation:</strong> We will employ intelligent, keyword-focused data fetching and robust caching mechanisms to optimize API usage, manage costs, and stay within rate limits.</p>
</div>
<div>
<h3 class="text-lg font-semibold text-[#0D47A1]">Challenge: User Adoption in Remote Communities</h3>
<p class="bg-white p-4 rounded-lg mt-2 text-gray-700 shadow"><strong>Mitigation:</strong> The app will be gamified, offered in multiple regional languages, and promoted through partnerships with local authorities to build trust and drive adoption.</p>
</div>
</div>
</section>
<section id="impact" class="bg-[#0D47A1] text-white rounded-xl shadow-2xl p-12">
<h2 class="text-3xl font-bold text-center mb-10">A Multi-Faceted Positive Impact</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
<div>
<div class="text-6xl mb-4">❤️</div>
<h3 class="text-2xl font-bold mb-2">Social</h3>
<p>Saves lives by delivering faster, more accurate ground-truth information to responders and targeted alerts to citizens.</p>
</div>
<div>
<div class="text-6xl mb-4">💰</div>
<h3 class="text-2xl font-bold mb-2">Economic</h3>
<p>Reduces economic losses by enabling timely protection of critical infrastructure, property, and livelihoods like fishing.</p>
</div>
<div>
<div class="text-6xl mb-4">🌿</div>
<h3 class="text-2xl font-bold mb-2">Environmental</h3>
<p>Facilitates a quicker, more effective response to environmental hazards like oil spills or marine debris events reported by citizens.</p>
</div>
</div>
</section>
</main>
<footer class="text-center py-8 mt-12 text-gray-500">
<p>© Team MargVedha 3.0 - Samudra Manthan</p>
</footer>
</div>
<script>
const tooltipTitleCallback = (tooltipItems) => {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
}
return label;
};
const chartColors = {
blue: '#0D47A1',
orange: '#FF6F61',
grey: '#4A4A4A',
lightBlue: '#64B5F6',
yellow: '#FFC107'
};
const processLabels = (labels) => {
return labels.map(label => {
if (label.length > 16) {
const words = label.split(' ');
const lines = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + word).length > 16) {
lines.push(currentLine.trim());
currentLine = '';
}
currentLine += word + ' ';
});
lines.push(currentLine.trim());
return lines;
}
return label;
});
};
const hazardDonutCtx = document.getElementById('hazardDonutChart').getContext('2d');
new Chart(hazardDonutCtx, {
type: 'doughnut',
data: {
labels: ['Coastal Flooding', 'High Waves', 'Abnormal Tides', 'Tsunami Sighting'],
datasets: [{
label: 'Hazard Reports',
data: [45, 25, 20, 10],
backgroundColor: [chartColors.blue, chartColors.orange, chartColors.yellow, chartColors.grey],
borderColor: '#F7F7F7',
borderWidth: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
tooltip: { callbacks: { title: tooltipTitleCallback } }
}
}
});
const reportLineCtx = document.getElementById('reportLineChart').getContext('2d');
new Chart(reportLineCtx, {
type: 'line',
data: {
labels: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
datasets: [{
label: 'Reports per Hour',
data: [5, 12, 8, 45, 90, 65, 30],
borderColor: chartColors.orange,
backgroundColor: 'rgba(255, 111, 97, 0.2)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { beginAtZero: true } },
plugins: {
legend: { display: false },
tooltip: { callbacks: { title: tooltipTitleCallback } }
}
}
});
const trustBarCtx = document.getElementById('trustBarChart').getContext('2d');
new Chart(trustBarCtx, {
type: 'bar',
data: {
labels: processLabels(['Low Trust (<40)', 'Medium Trust (40-70)', 'High Trust (>70)', 'Verified by Admin']),
datasets: [{
label: 'Number of Reports',
data: [22, 58, 120, 85],
backgroundColor: [chartColors.grey, chartColors.yellow, chartColors.lightBlue, chartColors.blue],
borderRadius: 5
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: { callbacks: { title: tooltipTitleCallback } }
}
}
});
</script>
</body>
</html>