241 lines
8.8 KiB
HTML
241 lines
8.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="sv">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<title>QUIXZOOM — AI-Powered Field Intelligence</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: #fff;
|
||
|
|
min-height: 100vh;
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
}
|
||
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||
|
|
h1 { font-size: 2.5em; margin-bottom: 10px; }
|
||
|
|
.subtitle { font-size: 1.1em; opacity: 0.9; margin-bottom: 30px; }
|
||
|
|
|
||
|
|
/* Mobilmeny */
|
||
|
|
.mobile-menu {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 15px;
|
||
|
|
background: rgba(0,0,0,0.2);
|
||
|
|
margin: 0 -20px 20px;
|
||
|
|
}
|
||
|
|
.menu-btn {
|
||
|
|
display: inline-block;
|
||
|
|
background: rgba(255,255,255,0.2);
|
||
|
|
color: white;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 20px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: 0.85em;
|
||
|
|
font-weight: 500;
|
||
|
|
border: 1px solid rgba(255,255,255,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
background: rgba(255,255,255,0.1);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 20px;
|
||
|
|
margin: 15px 0;
|
||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
||
|
|
}
|
||
|
|
h2 { font-size: 1.5em; margin-bottom: 15px; }
|
||
|
|
h3 { font-size: 1.2em; margin: 15px 0 10px; opacity: 0.9; }
|
||
|
|
.metric-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 10px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.metric {
|
||
|
|
background: rgba(255,255,255,0.15);
|
||
|
|
padding: 15px;
|
||
|
|
border-radius: 12px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.metric-value { font-size: 1.8em; font-weight: bold; }
|
||
|
|
.metric-label { font-size: 0.8em; opacity: 0.8; margin-top: 5px; }
|
||
|
|
.phase {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
margin: 12px 0;
|
||
|
|
padding: 12px;
|
||
|
|
background: rgba(255,255,255,0.05);
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.phase-number {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
background: rgba(255,255,255,0.2);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-right: 12px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.phase-content { flex: 1; }
|
||
|
|
.phase-title { font-weight: 600; }
|
||
|
|
.phase-desc { font-size: 0.85em; opacity: 0.8; }
|
||
|
|
.btn {
|
||
|
|
display: block;
|
||
|
|
background: #fff;
|
||
|
|
color: #667eea;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 600;
|
||
|
|
text-align: center;
|
||
|
|
margin: 8px 0;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin: 15px 0;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
padding: 8px;
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
|
|
}
|
||
|
|
th { opacity: 0.8; font-weight: 600; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>QUIXZOOM</h1>
|
||
|
|
<p class="subtitle">AI-Powered Field Intelligence Network</p>
|
||
|
|
|
||
|
|
<!-- Mobilmeny -->
|
||
|
|
<div class="mobile-menu">
|
||
|
|
<a href="#strategy" class="menu-btn">Strategi</a>
|
||
|
|
<a href="#metrics" class="menu-btn">Mål</a>
|
||
|
|
<a href="#vocabulary" class="menu-btn">Vokabulär</a>
|
||
|
|
<a href="#routes" class="menu-btn">Routes</a>
|
||
|
|
<a href="#benchmark" class="menu-btn">Benchmark</a>
|
||
|
|
<a href="#docs" class="menu-btn">Docs</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric-grid" id="metrics">
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">10K</div>
|
||
|
|
<div class="metric-label">Mål: Observationer</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">1K</div>
|
||
|
|
<div class="metric-label">Mål: Unika objekt</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">95%</div>
|
||
|
|
<div class="metric-label">Korrekt ID</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">90%</div>
|
||
|
|
<div class="metric-label">Auto-godkända</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" id="strategy">
|
||
|
|
<h2>🚀 Tre-fas strategi</h2>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-number">1</div>
|
||
|
|
<div class="phase-content">
|
||
|
|
<div class="phase-title">Cloud Vision Bootstrap</div>
|
||
|
|
<div class="phase-desc">Automatiska annotationer, gold dataset, UIOS-validering</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-number">2</div>
|
||
|
|
<div class="phase-content">
|
||
|
|
<div class="phase-title">Eget Dataset</div>
|
||
|
|
<div class="phase-desc">27,000+ verifierade observationer från 6 städer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-number">3</div>
|
||
|
|
<div class="phase-content">
|
||
|
|
<div class="phase-title">Egen Modell (Ensemble)</div>
|
||
|
|
<div class="phase-desc">YOLOv11 + DINO + SAM2 + OCR + Object Identity</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" id="vocabulary">
|
||
|
|
<h2>📖 Infrastructure Vocabulary</h2>
|
||
|
|
<p>50 objekt i 7 kategorier:</p>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr><th>Kategori</th><th>Antal</th><th>Exempel</th></tr>
|
||
|
|
<tr><td>Lighting</td><td>6</td><td>street_lamp</td></tr>
|
||
|
|
<tr><td>Road</td><td>10</td><td>manhole_cover</td></tr>
|
||
|
|
<tr><td>Utility</td><td>6</td><td>fire_hydrant</td></tr>
|
||
|
|
<tr><td>Traffic</td><td>8</td><td>stop_sign</td></tr>
|
||
|
|
<tr><td>Vegetation</td><td>6</td><td>tree</td></tr>
|
||
|
|
<tr><td>Furniture</td><td>7</td><td>bench</td></tr>
|
||
|
|
<tr><td>Buildings</td><td>7</td><td>facade</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" id="routes">
|
||
|
|
<h2>🌍 Gold Routes</h2>
|
||
|
|
<div class="metric-grid">
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">🇹🇭</div>
|
||
|
|
<div class="metric-label">Bangkok<br>Sukhumvit</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">🇪🇸</div>
|
||
|
|
<div class="metric-label">Torrevieja<br>Costa Blanca</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">🇸🇪</div>
|
||
|
|
<div class="metric-label">Stockholm<br>+ Nacka</div>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<div class="metric-value">🇸🇪</div>
|
||
|
|
<div class="metric-label">Tyresö<br>Haninge</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" id="benchmark">
|
||
|
|
<h2>📈 Benchmark</h2>
|
||
|
|
<table>
|
||
|
|
<tr><th>Modell</th><th>Kostnad</th><th>Latens</th></tr>
|
||
|
|
<tr><td>Cloud Vision</td><td>$0.0015</td><td>~250ms</td></tr>
|
||
|
|
<tr><td>YOLOv8</td><td>$0</td><td>~100ms</td></tr>
|
||
|
|
<tr><td>Grounding DINO</td><td>$0</td><td>~500ms</td></tr>
|
||
|
|
<tr><td>Egen modell</td><td>$0</td><td>~50ms</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card" id="docs">
|
||
|
|
<h2>🔗 Dokumentation</h2>
|
||
|
|
<a href="/pilot/EXECUTION-PLAN.md" class="btn">Execution Plan</a>
|
||
|
|
<a href="/pilot/AI-ARCHITECTURE.md" class="btn">AI-arkitektur</a>
|
||
|
|
<a href="/pilot/INFRASTRUCTURE-VOCABULARY.md" class="btn">Vokabulär</a>
|
||
|
|
<a href="/pilot/STATUS-2026-06-29.md" class="btn">Status</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 40px; opacity: 0.7; font-size: 0.8em; text-align: center;">
|
||
|
|
<p>QUIXZOOM — Field Intelligence Network</p>
|
||
|
|
<p>LandveX Infrastructure Intelligence</p>
|
||
|
|
<p>Senast uppdaterad: 2026-06-29</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|