Hugging Face's logo

Spaces:
parthmax
/
CarDentIQ
Sleeping

App Files Community
CarDentIQ
File size: 4,903 Bytes
81b4246
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Damage Report — CarDentIQ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/report.css">
</head>
<body>
  <header class="navbar">
    <div class="container navbar-inner">
      <a href="index.html" class="brand">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 12.5 4.6 8a2 2 0 0 1 1.9-1.4h11a2 2 0 0 1 1.9 1.4L21 12.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
            <rect x="2.4" y="12.5" width="19.2" height="5.2" rx="1.6" stroke="currentColor" stroke-width="1.7"/>
            <circle cx="6.6" cy="17.7" r="1.6" fill="currentColor"/>
            <circle cx="17.4" cy="17.7" r="1.6" fill="currentColor"/>
          </svg>
        </span>
        <span class="brand-name">CarDentIQ</span>
      </a>
      <div class="navbar-actions">
        <a href="workspace.html" class="btn-secondary btn-sm">New Scan</a>
      </div>
    </div>
  </header>

  <div class="stepper-bar">
    <div class="stepper">
      <div class="step completed" data-step="1"><span class="step-num">✓</span><span class="step-label">Upload</span></div>
      <div class="step-line filled"></div>
      <div class="step completed" data-step="2"><span class="step-num">✓</span><span class="step-label">Analyze</span></div>
      <div class="step-line filled"></div>
      <div class="step active" data-step="3"><span class="step-num">3</span><span class="step-label">Report</span></div>
    </div>
  </div>

  <main class="report-page">
    <div class="container">

      <div class="report-empty glass-card" id="emptyState" hidden>
        <h2>No scan data found</h2>
        <p>Start a new scan to generate a damage report.</p>
        <a href="workspace.html" class="btn-primary">Start a Scan</a>
      </div>

      <div class="report-container" id="reportContainer" hidden>
        <div class="severity-banner glass-card" id="severityBanner">
          <div class="severity-banner-left">
            <span class="severity-pill" id="severityPill">—</span>
            <span class="severity-filename" id="severityFilename"></span>
          </div>
          <div class="summary-stats">
            <div class="stat">
              <span class="stat-value mono" id="statDefects">0</span>
              <span class="stat-label">defects found</span>
            </div>
            <div class="stat">
              <span class="stat-value mono" id="statTypes">0</span>
              <span class="stat-label">damage types</span>
            </div>
            <div class="stat">
              <span class="stat-value mono" id="statScore">0</span>
              <span class="stat-label">severity score /10</span>
            </div>
          </div>
        </div>
        <div class="findings" id="findings"></div>

        <div class="card glass-card">
          <div class="result-header">
            <h3>Detection Result</h3>
            <span class="image-meta mono" id="imageMeta"></span>
          </div>
          <div class="result-image-wrap">
            <img id="outputImage" class="result-image" alt="Annotated image with detected damage">
          </div>
        </div>

        <div class="card glass-card detections-card">
          <h3>Detected Issues</h3>
          <div class="detections-list" id="detectionsList"></div>
        </div>

        <details class="card glass-card technical-details">
          <summary>Technical details &amp; export</summary>
          <div class="advanced-body">
            <table id="resultsTable">
              <thead><tr><th>Class</th><th>Confidence</th><th>YOLO [cx, cy, w, h]</th></tr></thead>
              <tbody></tbody>
            </table>
            <div class="downloads">
              <button class="btn-secondary" id="downloadCsv" disabled>Download CSV</button>
              <button class="btn-secondary" id="downloadTxt" disabled>Download YOLO Labels (.txt)</button>
            </div>
          </div>
        </details>

        <div class="report-cta">
          <a href="workspace.html" class="btn-primary" id="scanAnotherBtn">Scan Another Vehicle</a>
        </div>
      </div>

    </div>
  </main>

  <div class="toast-stack" id="toastStack" aria-live="polite"></div>

  <script src="js/ui.js"></script>
  <script src="js/report.js"></script>
</body>
</html>