Hugging Face's logo

Spaces:
parthmax
/
CarDentIQ
Sleeping

App Files Community
CarDentIQ
File size: 4,884 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analyze a Vehicle — 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/workspace.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="index.html" class="btn-secondary btn-sm">← Home</a>
      </div>
    </div>
  </header>

  <div class="stepper-bar">
    <div class="stepper">
      <div class="step active" data-step="1">
        <span class="step-num">1</span><span class="step-label">Upload</span>
      </div>
      <div class="step-line" id="line1"></div>
      <div class="step" data-step="2">
        <span class="step-num">2</span><span class="step-label">Analyze</span>
      </div>
      <div class="step-line" id="line2"></div>
      <div class="step" data-step="3">
        <span class="step-num">3</span><span class="step-label">Report</span>
      </div>
    </div>
  </div>

  <main class="workspace-page">
    <span class="glow-orb orb-1"></span>
    <span class="glow-orb orb-2"></span>

    <div class="workspace-header">
      <span class="eyebrow" id="stepEyebrow"><span class="dot"></span> Step 1 of 3</span>
      <h1>Upload a vehicle photo</h1>
      <p>We'll detect and classify damage, then hand you a full report.</p>
    </div>

    <section class="card workspace-card glass-card">
      <div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Upload vehicle image">
        <input type="file" id="imageInput" accept="image/*" hidden>
        <div class="dropzone-empty" id="dropzoneEmpty">
          <div class="upload-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 15V4m0 0 4 4m-4-4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <p class="dropzone-title">Drag &amp; drop a vehicle photo, or click to browse</p>
          <p class="dropzone-hint">JPG, PNG or WebP</p>
        </div>
        <div class="dropzone-preview" id="dropzonePreview" hidden>
          <div class="dropzone-preview-frame">
            <img id="previewImage" alt="Selected vehicle image">
            <div class="scan-overlay" id="scanOverlay">
              <div class="scan-line"></div>
              <span class="scan-overlay-label">Analyzing…</span>
            </div>
          </div>
          <div class="dropzone-preview-meta">
            <span id="previewFileName"></span>
            <span class="dot-sep">·</span>
            <span id="previewFileInfo" class="mono"></span>
            <button type="button" class="btn-ghost" id="changeImageBtn">Change image</button>
          </div>
        </div>
      </div>

      <details class="advanced">
        <summary>Advanced detection settings</summary>
        <div class="advanced-body">
          <label class="checkbox">
            <input type="checkbox" id="resizeCb">
            Resize to 1024px max before inference (faster on large images)
          </label>

          <h4>Per-class confidence thresholds</h4>
          <div id="sliders" class="sliders-grid"></div>

          <div id="legend" class="legend"></div>
        </div>
      </details>

      <button id="runBtn" class="btn-primary btn-block" disabled>Analyze Image</button>
    </section>
  </main>

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

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