Update

assets/img/.gitattributes

@@ -0,0 +1,3 @@
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

assets/style.css

@@ -0,0 +1,441 @@
+:root {
+     --background: 0 0% 100%;
+     --foreground: 222.2 84% 4.9%;
+     --card: 0 0% 100%;
+     --card-foreground: 222.2 84% 4.9%;
+     --popover: 0 0% 100%;
+     --popover-foreground: 222.2 84% 4.9%;
+     --primary: 221.2 83.2% 53.3%;
+     --primary-foreground: 210 40% 98%;
+     --secondary: 210 40% 96.1%;
+     --secondary-foreground: 222.2 47.4% 11.2%;
+     --muted: 210 40% 96.1%;
+     --muted-foreground: 215.4 16.3% 46.9%;
+     --accent: 210 40% 96.1%;
+     --accent-foreground: 222.2 47.4% 11.2%;
+     --destructive: 0 84.2% 60.2%;
+     --destructive-foreground: 210 40% 98%;
+     --border: 214.3 31.8% 91.4%;
+     --input: 214.3 31.8% 91.4%;
+     --ring: 221.2 83.2% 53.3%;
+     --radius: 0.5rem;
+ }
+
+
+ * {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+ }
+
+ body {
+     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+         Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+         "Helvetica Neue", sans-serif;
+     background-color: hsl(var(--background));
+     color: hsl(var(--foreground));
+     line-height: 1.5;
+     min-height: 100vh;
+     transition: background-color 0.2s;
+     overflow-y: scroll;
+ }
+
+ .container {
+     max-width: 1400px;
+     margin: 0 auto;
+     padding: 1rem;
+ }
+
+ header {
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+     padding: 1rem 0;
+     border-bottom: 1px solid hsl(var(--border));
+     margin-bottom: 2rem;
+ }
+
+ h1 {
+     font-size: 1.5rem;
+     font-weight: 600;
+ }
+
+ .grid {
+     display: grid;
+     gap: 1.5rem;
+ }
+
+ .grid-cols-2 {
+     grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .mb-2 {
+    margin-bottom: 2rem;
+ }
+
+ .card {
+     background-color: hsl(var(--card));
+     border: 1px solid hsl(var(--border));
+     border-radius: var(--radius);
+     padding: 1.5rem;
+     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ }
+
+ .card-header {
+     margin-bottom: 1rem;
+ }
+
+ .card-title {
+     font-size: 1.25rem;
+     font-weight: 600;
+     margin-bottom: 0.5rem;
+ }
+
+ .card-description {
+     color: hsl(var(--muted-foreground));
+     font-size: 0.875rem;
+ }
+
+ .preview-area {
+     position: relative;
+     width: 100%;
+     height: 300px;
+     border: 2px dashed hsl(var(--border));
+     border-radius: var(--radius);
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     overflow: hidden;
+     margin-bottom: 1rem;
+ }
+
+ .text-output-area {
+     width: 100%;
+     height: 500px;
+     border: 2px dashed hsl(var(--border));
+     border-radius: var(--radius);
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     overflow: scroll;
+ }
+
+ .preview-area.has-image {
+     border: none;
+ }
+
+ .preview-area img {
+     max-width: 100%;
+     max-height: 100%;
+     object-fit: contain;
+ }
+
+ .preview-placeholder {
+     text-align: center;
+     color: hsl(var(--muted-foreground));
+ }
+
+ .preview-placeholder svg {
+     width: 3rem;
+     height: 3rem;
+     margin-bottom: 1rem;
+     color: hsl(var(--muted-foreground));
+ }
+
+ .btn {
+     display: inline-flex;
+     align-items: center;
+     justify-content: center;
+     border-radius: var(--radius);
+     font-size: 0.875rem;
+     font-weight: 500;
+     transition: all 0.2s;
+     padding: 0.5rem 1rem;
+     cursor: pointer;
+     border: 1px solid transparent;
+ }
+
+ .btn-primary {
+     background-color: hsl(var(--primary));
+     color: hsl(var(--primary-foreground));
+ }
+
+ .btn-primary:hover {
+     background-color: hsl(var(--primary) / 0.9);
+ }
+
+ .btn-secondary {
+     background-color: hsl(var(--secondary));
+     color: hsl(var(--secondary-foreground));
+     border-color: hsl(var(--border));
+ }
+
+ .btn-secondary:hover {
+     background-color: hsl(var(--secondary) / 0.9);
+ }
+
+ .btn-group {
+     display: flex;
+     gap: 0.5rem;
+ }
+
+ .tabs {
+     display: flex;
+     border-bottom: 1px solid hsl(var(--border));
+     margin-bottom: 1rem;
+ }
+
+ .tab {
+     padding: 0.5rem 1rem;
+     cursor: pointer;
+     border-bottom: 2px solid transparent;
+     font-size: 0.875rem;
+     font-weight: 500;
+     color: hsl(var(--muted-foreground));
+ }
+
+ .tab.active {
+     color: hsl(var(--primary));
+     border-bottom-color: hsl(var(--primary));
+ }
+
+ .results {
+     margin-top: 1rem;
+     border-top: 1px solid hsl(var(--border));
+     padding-top: 1rem;
+ }
+
+ .result-item {
+     padding: 0.5rem;
+     border-radius: var(--radius);
+     margin-bottom: 0.5rem;
+     background-color: hsl(var(--secondary));
+ }
+
+ .result-label {
+     font-weight: 500;
+ }
+
+ .result-confidence {
+     color: hsl(var(--muted-foreground));
+     font-size: 0.75rem;
+ }
+
+ .bounding-box {
+     position: absolute;
+     border: 2px solid hsl(var(--primary));
+     background-color: hsl(var(--primary) / 0.2);
+ }
+
+ 
+ /* Updated tabs styling for collapsible applications */
+ .applications-container {
+     display: flex;
+     flex-direction: column;
+     gap: 1rem;
+     margin-bottom: 1rem;
+ }
+
+ .application-tab {
+     border: 1px solid hsl(var(--border));
+     border-radius: var(--radius);
+     overflow: hidden;
+ }
+
+ .application-header {
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+     padding: 0.75rem 1rem;
+     background-color: hsl(var(--secondary));
+     cursor: pointer;
+     user-select: none;
+ }
+
+ .application-header:hover {
+     background-color: hsl(var(--secondary) / 0.9);
+ }
+
+ .application-title {
+     font-weight: 500;
+     display: flex;
+     align-items: center;
+     gap: 0.5rem;
+ }
+
+ .application-icon {
+     width: 1.25rem;
+     height: 1.25rem;
+ }
+
+ .application-content {
+     padding: 0 1rem;
+     max-height: 0;
+     overflow: hidden;
+     transition: max-height 0.1s ease-out;
+ }
+
+ .application-tab.active .application-content {
+     padding: 1rem;
+     max-height: 2000px;
+     transition: max-height 0.2s ease-in;
+ }
+
+ .application-arrow {
+     transition: transform 0.2s ease;
+ }
+
+ .application-tab.active .application-arrow {
+     transform: rotate(180deg);
+ }
+
+ /* -- */
+
+ @media (max-width: 768px) {
+     .grid-cols-2 {
+         grid-template-columns: 1fr;
+     }
+ }
+ 
+  
+  .input-group {
+    margin-bottom: 4px;
+  }
+  
+  .input-group label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--foreground);
+  }
+  
+  .input-group input {
+    width: 100%;
+    padding: 10px 12px;
+    font-size: 0.9375rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius);
+    transition: var(--transition);
+    box-shadow: var(--shadow-sm);
+  }
+  
+  .input-group input::placeholder {
+    color: #9ca3af; /* Placeholder text color */
+  }
+  
+  .input-group input:focus {
+    outline: none;
+    border-color: #6b7280;
+    box-shadow: var(--shadow-focus), var(--shadow-sm);
+  }
+  
+  .helper-text {
+    margin-top: 6px;
+    font-size: 0.75rem;
+    color: #6b7280; /* Muted gray for helper text */
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .confidence-slider input[type="range"] {
+    width: 100%;
+    appearance: none;
+    height: 6px;
+    background: hsl(var(--border));
+    border-radius: var(--radius);
+    outline: none;
+    transition: background 0.2s;
+}
+
+.confidence-slider input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: hsl(var(--primary));
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.confidence-slider input[type="range"]::-webkit-slider-thumb:hover {
+    background: hsl(var(--primary) / 0.9);
+}
+
+/* Sample images collapsible section */
+.sample-images-container {
+    border-top: 1px solid hsl(var(--border));
+    margin-top: 1rem;
+}
+
+.collapsible-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 0;
+    cursor: pointer;
+    font-weight: 500;
+    user-select: none;
+}
+
+.collapsible-header:hover {
+    color: hsl(var(--primary));
+}
+
+.transition-transform {
+    transition: transform 0.2s ease;
+}
+
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+.sample-images-content {
+    padding-bottom: 0.5rem;
+}
+
+.sample-image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.sample-image {
+    cursor: pointer;
+    text-align: center;
+    transition: transform 0.2s;
+}
+
+.sample-image:hover {
+    transform: scale(1.05);
+}
+
+.sample-image-thumb {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--radius);
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    margin-bottom: 0.25rem;
+}
+
+.sample-image-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sample-image p {
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+}
+
+.mt-2 {
+    margin-top: 2rem;
+}
+
+

index.html

@@ -0,0 +1,992 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ML Vision Playground</title>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
+    ></script>
+    <link rel="stylesheet" href="assets/style.css" />
+  </head>
+
+  <body x-data="app()" :class="{'dark': darkMode}">
+    <div class="container">
+      <header>
+        <h1>ML Vision Playground</h1>
+      </header>
+
+      <div class="applications-container mb-2">
+        <!-- Object Detection Application -->
+
+        <!-- Object detection -->
+        <div
+          class="application-tab"
+          :class="{'active': activeApplication === 'objdet'}"
+        >
+          <div class="application-header" @click="toggleApplication('objdet')">
+            <div class="application-title">
+              <img src="assets/obj-detect.svg" height="20px" />
+              Object detection
+            </div>
+            <img
+              src="assets/arrow.svg"
+              height="20px"
+              class="application-arrow"
+            />
+          </div>
+
+          <div class="application-content">
+            <!-- api creds -->
+            <div class="application-meta-input card mb-2">
+              <div class="form-container">
+                <div class="input-group">
+                  <label for="url"
+                    >URL
+                    <span class="helper-text"
+                      >Enter the base URL for the API.</span
+                    ></label
+                  >
+                  <input
+                    type="text"
+                    id="url"
+                    placeholder="https://example.com/api"
+                  />
+                </div>
+                <div class="input-group">
+                  <label for="apiKey"
+                    >API Key
+                    <span class="helper-text"
+                      >Your secret API key.
+                    </span></label
+                  >
+                  <input
+                    type="text"
+                    id="apiKey"
+                    placeholder="DPT23exmplg4FJfgfFREsada0lMUgJs0kcC9wxd"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2">
+              <!-- Input Card -->
+              <div class="card">
+                <div class="card-header">
+                  <h2 class="card-title">Input Image</h2>
+                  <p class="card-description">
+                    Upload or capture an image to analyze
+                  </p>
+                </div>
+
+                <div class="tabs">
+                  <div
+                    @click="activeTab = 'upload'"
+                    :class="{'active': activeTab === 'upload'}"
+                    class="tab"
+                  >
+                    Upload
+                  </div>
+                  <div
+                    @click="activeTab = 'camera'"
+                    :class="{'active': activeTab === 'camera'}"
+                    class="tab"
+                  >
+                    Camera
+                  </div>
+                </div>
+
+                <div
+                  x-show="imageUrl"
+                  class="preview-image-container"
+                  style="max-width: 100%; height: auto"
+                >
+                  <canvas
+                    id="previewCanvas"
+                    x-ref="previewCanvas"
+                    class="preview-image"
+                    style="max-width: 100%; height: auto"
+                    x-effect="imageUrl && (() => {
+                                        const canvas = $refs.previewCanvas;
+                                        const img = new Image();
+                                        img.onload = function() {
+                                            canvas.width = img.width;
+                                            canvas.height = img.height;
+                                            canvas.getContext('2d').drawImage(img, 0, 0);
+                                        };
+                                        img.src = imageUrl;
+                                    })()"
+                  ></canvas>
+                </div>
+                <!-- <canvas id="canvas" x-ref="canvas"></canvas> -->
+
+                <div
+                  x-show="activeTab === 'upload' && !imageUrl"
+                  class="upload-tab"
+                >
+                  <div
+                    @click="$refs.fileInput.click()"
+                    @dragover.prevent="dragOver = true"
+                    @dragleave="dragOver = false"
+                    @drop.prevent="handleDrop($event)"
+                    :class="{'has-image': imageUrl, 'border-primary': dragOver}"
+                    class="preview-area"
+                  >
+                    <input
+                      type="file"
+                      @change="handleFileSelect"
+                      x-ref="fileInput"
+                      accept="image/*"
+                      class="hidden"
+                    />
+
+                    <template x-if="!imageUrl">
+                      <div class="preview-placeholder">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        <p>Click to upload or drag and drop</p>
+                        <p class="text-sm">Supports JPG, PNG, WEBP</p>
+                      </div>
+                    </template>
+                  </div>
+                  <!-- <div class="btn-group">
+                                    <button @click="clearImage" x-show="imageUrl" class="btn btn-secondary">
+                                        Clear
+                                    </button>
+                                </div> -->
+                </div>
+
+                <div
+                  x-show="activeTab === 'camera' && !imageUrl"
+                  class="camera-tab"
+                >
+                  <div class="preview-area">
+                    <video
+                      x-ref="video"
+                      autoplay
+                      playsinline
+                      class="hidden"
+                    ></video>
+                    <canvas x-ref="canvas" class="hidden"></canvas>
+
+                    <div class="preview-placeholder">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                        />
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                      </svg>
+                      <p>Camera Feed</p>
+                    </div>
+                  </div>
+
+                  <div class="btn-group">
+                    <button @click="startCamera" class="btn btn-primary">
+                      Start Camera
+                    </button>
+                    <button
+                      @click="captureImage"
+                      class="btn btn-primary"
+                      :disabled="!cameraActive"
+                    >
+                      Capture
+                    </button>
+                    <button
+                      @click="stopCamera"
+                      class="btn btn-secondary"
+                      :disabled="!cameraActive"
+                    >
+                      Stop
+                    </button>
+                  </div>
+                </div>
+
+                <div class="btn-group">
+                  <button
+                    @click="clearImage"
+                    x-show="imageUrl"
+                    class="btn btn-secondary"
+                  >
+                    Clear
+                  </button>
+                </div>
+
+                <!-- Collapsible section to select sample images from thumbnails -->
+                <div class="sample-images-container mt-2">
+                  <div
+                    class="collapsible-header"
+                    @click="sampleImagesOpen = !sampleImagesOpen"
+                  >
+                    <span>Sample Images</span>
+                    <img
+                      src="assets/arrow.svg"
+                      height="20px"
+                      :class="{'rotate-180': sampleImagesOpen}"
+                    />
+                  </div>
+
+                  <div
+                    x-show="sampleImagesOpen"
+                    x-transition
+                    class="sample-images-content"
+                  >
+                    <div class="sample-image-grid">
+                      <template x-for="(image, type) in sampleData" :key="type">
+                        <span @click="loadSample(type)" class="sample-image">
+                          <img
+                            :src="image.url"
+                            alt=""
+                            width="80px"
+                            style="max-height: 100px"
+                          />
+                        </span>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Confidence Interval Slider -->
+                <div class="confidence-slider mt-2">
+                  <label
+                    for="confidence-slider"
+                    class="block text-sm font-medium text-gray-700"
+                    >Confidence Interval</label
+                  >
+                  <input
+                    id="confidence-slider"
+                    type="range"
+                    min="0"
+                    max="100"
+                    step="1"
+                    x-model="confidenceThreshold"
+                  />
+                  <p class="text-sm mt-1">
+                    Selected: <span x-text="confidenceThreshold"></span>%
+                  </p>
+                </div>
+
+                <!-- Predict Button -->
+                <div class="mt-2">
+                  <button
+                    @click="predictImage()"
+                    class="btn btn-primary w-100"
+                    :disabled="!imageUrl"
+                  >
+                    Predict
+                  </button>
+                </div>
+              </div>
+
+              <!-- Processing Card -->
+              <!-- Processing Card - results -->
+              <div class="card">
+                <div class="card-header">
+                  <h2 class="card-title">Output</h2>
+                  <p class="card-description">
+                    Select an application to analyze your image
+                  </p>
+                </div>
+
+                <div class="application-content">
+                  <!-- Preview content same as before -->
+                  <span id="objdet-status-display"></span>
+                  <textarea
+                    id="objdet-output-display"
+                    class="text-output-area"
+                  ></textarea>
+
+                  <div class="btn-group mt-2">
+                    <button
+                      @click="clearResults"
+                      class="btn btn-secondary"
+                      :disabled="!results.length"
+                    >
+                      Clear Results
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- end -->
+        </div>
+
+        <!-- OCR -->
+        <div
+          class="application-tab"
+          :class="{'active': activeApplication === 'ocr'}"
+        >
+          <div class="application-header" @click="toggleApplication('ocr')">
+            <div class="application-title">
+              <img src="assets/text.svg" height="20px" />
+              Text Recognition (OCR)
+            </div>
+            <img
+              src="assets/arrow.svg"
+              height="20px"
+              class="application-arrow"
+            />
+          </div>
+          <div class="application-content">
+            <!-- api creds -->
+            <div class="application-meta-input card mb-2">
+              <div class="form-container">
+                <div class="input-group">
+                  <!-- Add the loader component here -->
+
+                  <label for="url-ocr"
+                    >URL
+                    <span class="helper-text"
+                      >Enter the base URL for the API.</span
+                    ></label
+                  >
+                  <input
+                    type="text"
+                    id="url-ocr"
+                    placeholder="https://example.com/api"
+                  />
+                </div>
+                <div class="input-group">
+                  <label for="apiKey-ocr"
+                    >API Key
+                    <span class="helper-text"
+                      >Your secret API key.
+                    </span></label
+                  >
+                  <input
+                    type="text"
+                    id="apiKey-ocr"
+                    placeholder="DPT23exmplg4FJfgfFREsada0lMUgJs0kcC9wxd"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- app -->
+            <div class="grid grid-cols-2">
+              <!-- Input Card -->
+              <div class="card">
+                <div class="card-header">
+                  <h2 class="card-title">Input Image</h2>
+                  <p class="card-description">
+                    Upload or capture an image to analyze
+                  </p>
+                </div>
+
+                <div class="tabs">
+                  <div
+                    @click="activeTab = 'upload'"
+                    :class="{'active': activeTab === 'upload'}"
+                    class="tab"
+                  >
+                    Upload
+                  </div>
+                  <div
+                    @click="activeTab = 'camera'"
+                    :class="{'active': activeTab === 'camera'}"
+                    class="tab"
+                  >
+                    Camera
+                  </div>
+                </div>
+
+                <div
+                  x-show="imageUrlOcr"
+                  class="preview-image-container"
+                  style="max-width: 100%; height: auto"
+                >
+                  <canvas
+                    id="previewCanvasOcr"
+                    x-ref="previewCanvasOcr"
+                    class="preview-image"
+                    style="max-width: 100%; height: auto"
+                    x-effect="imageUrlOcr && (() => {
+                                          const canvas = $refs.previewCanvasOcr;
+                                          const img = new Image();
+                                          img.onload = function() {
+                                              canvas.width = img.width;
+                                              canvas.height = img.height;
+                                              canvas.getContext('2d').drawImage(img, 0, 0);
+                                          };
+                                          img.src = imageUrlOcr;
+                                      })()"
+                  ></canvas>
+                </div>
+                <!-- <canvas id="canvas" x-ref="canvas"></canvas> -->
+
+                <div
+                  x-show="activeTab === 'upload' && !imageUrlOcr"
+                  class="upload-tab"
+                >
+                  <div
+                    @click="$refs.fileInput.click()"
+                    @dragover.prevent="dragOver = true"
+                    @dragleave="dragOver = false"
+                    @drop.prevent="handleDrop($event)"
+                    :class="{'has-image': imageUrlOcr, 'border-primary': dragOver}"
+                    class="preview-area"
+                  >
+                    <input
+                      type="file"
+                      @change="handleFileSelect"
+                      x-ref="fileInput"
+                      accept="image/*"
+                      class="hidden"
+                    />
+
+                    <template x-if="!imageUrlOcr">
+                      <div class="preview-placeholder">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        <p>Click to upload or drag and drop</p>
+                        <p class="text-sm">Supports JPG, PNG, WEBP</p>
+                      </div>
+                    </template>
+                  </div>
+                  <!-- <div class="btn-group">
+                                      <button @click="clearImage" x-show="imageUrl" class="btn btn-secondary">
+                                          Clear
+                                      </button>
+                                  </div> -->
+                </div>
+
+                <div
+                  x-show="activeTab === 'camera' && !imageUrlOcr"
+                  class="camera-tab"
+                >
+                  <div class="preview-area">
+                    <video
+                      x-ref="video"
+                      autoplay
+                      playsinline
+                      class="hidden"
+                    ></video>
+                    <canvas x-ref="canvas" class="hidden"></canvas>
+
+                    <div class="preview-placeholder">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                        />
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                      </svg>
+                      <p>Camera Feed</p>
+                    </div>
+                  </div>
+
+                  <div class="btn-group">
+                    <button @click="startCamera" class="btn btn-primary">
+                      Start Camera
+                    </button>
+                    <button
+                      @click="captureImage"
+                      class="btn btn-primary"
+                      :disabled="!cameraActive"
+                    >
+                      Capture
+                    </button>
+                    <button
+                      @click="stopCamera"
+                      class="btn btn-secondary"
+                      :disabled="!cameraActive"
+                    >
+                      Stop
+                    </button>
+                  </div>
+                </div>
+
+                <div class="btn-group">
+                  <button
+                    @click="clearImage"
+                    x-show="imageUrlOcr"
+                    class="btn btn-secondary"
+                  >
+                    Clear
+                  </button>
+                </div>
+
+                <!-- Collapsible section to select sample images from thumbnails -->
+                <div class="sample-images-container mt-2">
+                  <div
+                    class="collapsible-header"
+                    @click="sampleImagesOpen = !sampleImagesOpen"
+                  >
+                    <span>Sample Images</span>
+                    <img
+                      src="assets/arrow.svg"
+                      height="20px"
+                      :class="{'rotate-180': sampleImagesOpen}"
+                    />
+                  </div>
+
+                  <div
+                    x-show="sampleImagesOpen"
+                    x-transition
+                    class="sample-images-content"
+                  >
+                    <div class="sample-image-grid">
+                      <template
+                        x-for="(image, type) in sampleDataOcr"
+                        :key="type"
+                      >
+                        <span @click="loadSampleOcr(type)" class="sample-image">
+                          <img
+                            :src="image.url"
+                            alt=""
+                            width="80px"
+                            style="max-height: 100px"
+                          />
+                        </span>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Confidence Interval Slider -->
+                <div class="confidence-slider mt-2">
+                  <label
+                    for="confidence-slider"
+                    class="block text-sm font-medium text-gray-700"
+                    >Confidence Interval</label
+                  >
+                  <input
+                    id="confidence-slider"
+                    type="range"
+                    min="0"
+                    max="100"
+                    step="1"
+                    x-model="confidenceThreshold"
+                  />
+                  <p class="text-sm mt-1">
+                    Selected: <span x-text="confidenceThreshold"></span>%
+                  </p>
+                </div>
+
+                <!-- Predict Button -->
+                <div class="mt-2">
+                  <button
+                    @click="predictOcr()"
+                    class="btn btn-primary w-100"
+                    :disabled="!imageUrlOcr"
+                  >
+                    Predict
+                  </button>
+                </div>
+              </div>
+
+              <!-- Processing Card -->
+              <!-- Processing Card - results -->
+              <div class="card">
+                <div class="card-header">
+                  <h2 class="card-title">Output</h2>
+                  <p class="card-description">
+                    Select an application to analyze your image
+                  </p>
+                </div>
+
+                <div class="application-content">
+                  <!-- Preview content same as before -->
+                  <span id="ocr-status-display"></span>
+                  <textarea
+                    id="ocr-output-display"
+                    class="text-output-area"
+                  ></textarea>
+
+                  <div class="btn-group mt-2">
+                    <button
+                      @click="clearResults"
+                      class="btn btn-secondary"
+                    >
+                      Clear Results
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        // ocr
+        // detection / yolov11
+        // whisper
+        // medical (yolov11)
+        //
+        $ = (id) => document.getElementById(id);
+
+        function fetchWrapper(url, statusElPrefix, options = {}) {
+          // Get or create UI elements
+          const statusSpan = $(`${statusElPrefix}-status-display`);
+          const jsonTextarea = $(`${statusElPrefix}-output-display`);
+
+          // Update status to loading
+          statusSpan.textContent = "Loading...";
+          statusSpan.className = "status loading";
+
+          // Clear previous results
+          jsonTextarea.value = "";
+
+          // Make the fetch request
+          return fetch(url, options)
+            .then((response) => {
+              // Display status code
+              statusSpan.textContent = `Status: ${response.status} ${response.statusText}`;
+              statusSpan.className = response.ok
+                ? "status success"
+                : "status error";
+
+              // Check if response is JSON
+              const contentType = response.headers.get("content-type");
+              if (contentType && contentType.includes("application/json")) {
+                return response.json().then((data) => {
+                  // Format and display JSON
+                  jsonTextarea.value = JSON.stringify(data, null, 2);
+                  drawBoundingBoxesObjdet(data);
+                  return data; // Return data for further processing
+                });
+              } else {
+                // Handle non-JSON responses
+                return response.text().then((text) => {
+                  jsonTextarea.value = text;
+                  return text; // Return text for further processing
+                });
+              }
+            })
+            .catch((error) => {
+              // Handle network errors
+              statusSpan.textContent = `Error: ${error.message}`;
+              statusSpan.className = "status error";
+              jsonTextarea.value = `Failed to fetch: ${error.message}`;
+              console.error("Fetch error:", error);
+              throw error; // Re-throw to allow caller to handle error
+            });
+        }
+
+        // Draw bounding boxes on the image
+        function drawBoundingBoxesObjdet(data) {
+          // Check if we have predictions to display
+          if (!data || !data.detections || !data.detections.length) return;
+
+          // Get canvas and create context for drawing
+          const canvasPreview = $("previewCanvas");
+
+          const ctx = canvasPreview.getContext("2d");
+
+
+          // Draw each bounding box
+        for (const box of data.detections) {
+
+
+            // Set styling for the box
+            ctx.strokeStyle = "rgba(255, 0, 0, 0.8)";
+            ctx.lineWidth = 2;
+
+            // Draw the rectangle
+            ctx.strokeRect(
+              box.x_min,
+              box.y_min,
+              box.x_max - box.x_min,
+              box.y_max - box.y_min
+            );
+
+            // Add label text with confidence
+            const label = `${box.class_name} (${Math.round(
+              box.confidence * 100
+            )}%)`;
+            ctx.fillStyle = "rgba(255, 0, 0, 0.8)";
+            // Scale font based on image dimensions (640px is the base)
+            const scale = Math.max(1, Math.min(2, canvasPreview.width / 640));
+            ctx.font = `${Math.round(14 * scale)}px Arial`;
+            const textWidth = ctx.measureText(label).width;
+            ctx.fillRect(box.x_min, box.y_min - 20, textWidth + 10, 20);
+
+            ctx.fillStyle = "white";
+            ctx.fillText(label, box.x_min + 5, box.y_min - 5);
+          };
+
+
+        }
+
+        document.addEventListener("alpine:init", () => {
+          Alpine.data("app", () => ({
+            darkMode: false,
+            activeTab: "upload",
+            activeModel: "object",
+            activeApplication: "object",
+            imageUrl: null,
+            imageUrlOcr: null,
+            dragOver: false,
+            cameraActive: false,
+            boundingBoxes: [],
+            results: [],
+            confidenceThreshold: 50, // Default confidence threshold,
+            sampleImagesOpen: false,
+
+            toggleApplication(app) {
+              this.activeApplication =
+                this.activeApplication === app ? null : app;
+              this.clearResults();
+            },
+
+            predictOcr() {
+              console.log("predictOcr called");
+              if (!this.imageUrlOcr) {
+                console.log("no imageUrlOcr");
+                return;
+              }
+
+              const baseUrl = $("url-ocr").value;
+              const apiKey = $("apiKey-ocr").value;
+              const imageUrlOcr = this.imageUrlOcr;
+
+              if (!baseUrl) {
+                alert("Please enter an API URL");
+                return;
+              }
+              if (!apiKey) {
+                alert("Please enter an API Key");
+                return;
+              }
+
+              // Fetch the blob first, then make the API call
+              fetch(imageUrlOcr)
+                .then((response) => response.blob())
+                .then((blob) => {
+                  // Convert blob to base64
+                  const reader = new FileReader();
+                  reader.readAsDataURL(blob);
+                  reader.onloadend = () => {
+                    // Extract the base64 data (remove the data:image/xyz;base64, prefix)
+                    const base64data = reader.result.split(",")[1];
+
+                    // use fetchWrapper to make the API call using application/json body
+                    fetchWrapper(`/api/req`, "ocr", {
+                      method: "POST",
+                      headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${apiKey}`,
+                        "x-req-path": `${baseUrl}`,
+                      },
+                      body: JSON.stringify({
+                        instances: [],
+                        image_base64: base64data,
+                      }),
+                    });
+                  };
+                })
+                .catch((error) => {
+                  console.error("Error preparing image:", error);
+                  alert("Error preparing image for upload");
+                });
+            },
+
+            predictImage() {
+              if (!this.imageUrl) return;
+
+              const baseUrl = $("url").value;
+              const apiKey = $("apiKey").value;
+              const imageUrl = this.imageUrl;
+
+              if (!baseUrl) {
+                alert("Please enter an API URL");
+                return;
+              }
+              if (!apiKey) {
+                alert("Please enter an API Key");
+                return;
+              }
+
+              // Fetch the blob first, then make the API call
+              fetch(imageUrl)
+                .then((response) => response.blob())
+                .then((blob) => {
+                  // use fetchWrapper to make the API call using application/octet-stream body
+                  fetchWrapper(`/api/req`, "objdet", {
+                    method: "POST",
+                    headers: {
+                      "Content-Type": "application/octet-stream",
+                      Authorization: `Bearer ${apiKey}`,
+                      "x-req-path": `${baseUrl}`,
+                    },
+                    body: blob,
+                  });
+                })
+                .catch((error) => {
+                  console.error("Error preparing image:", error);
+                  alert("Error preparing image for upload");
+                });
+            },
+
+            // Sample data for demo purposes
+            sampleData: {
+              catdog: {
+                url: "https://images.unsplash.com/photo-1606098216818-40939b7c98ad?w=600",
+              },
+              document: {
+                url: "https://images.unsplash.com/photo-1546410531-bb4caa6b424d?w=600",
+              },
+              food: {
+                url: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=600",
+              },
+              people: {
+                url: "https://images.unsplash.com/photo-1527529482837-4698179dc6ce?w=600",
+              },
+              people2: {
+                url: "assets/img/AdobeStock_84708957.jpg",
+              },
+              confuse: {
+                url: "assets/img/confuse.jpeg",
+              },
+            },
+
+            sampleDataOcr: {
+              ausweis: {
+                url: "assets/img/Deutscher_Personalausweis_(2010_Version).jpg",
+              },
+              textbook: { url: "assets/img/computer_vision_textbook_001.jpeg" },
+              handwritten: { url: "assets/img/sample_handwritten.png" },
+              nlpass: { url: "assets/img/sample_nl_passport.jpg" },
+            },
+
+            handleFileSelect(e) {
+              const file = e.target.files[0];
+              if (file?.type.match("image.*")) {
+                this.imageUrl = URL.createObjectURL(file);
+                this.clearResults();
+              }
+            },
+
+            handleDrop(e) {
+              this.dragOver = false;
+              const file = e.dataTransfer.files[0];
+              if (file?.type.match("image.*")) {
+                this.imageUrl = URL.createObjectURL(file);
+                this.clearResults();
+              }
+            },
+
+            clearImage() {
+              if (this.imageUrl) {
+                URL.revokeObjectURL(this.imageUrl);
+                this.imageUrl = null;
+              }
+              this.clearResults();
+            },
+
+            async startCamera() {
+              try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                  video: true,
+                });
+                this.$refs.video.srcObject = stream;
+                this.$refs.video.classList.remove("hidden");
+                this.cameraActive = true;
+              } catch (err) {
+                console.error("Error accessing camera:", err);
+                alert("Could not access camera. Please check permissions.");
+              }
+            },
+
+            captureImage() {
+              const video = this.$refs.video;
+              const canvas = this.$refs.canvas;
+              canvas.width = video.videoWidth;
+              canvas.height = video.videoHeight;
+              canvas.getContext("2d").drawImage(video, 0, 0);
+
+              this.imageUrl = canvas.toDataURL("image/png");
+              this.clearResults();
+            },
+
+            stopCamera() {
+              const stream = this.$refs.video.srcObject;
+              if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+                this.$refs.video.srcObject = null;
+                this.$refs.video.classList.add("hidden");
+                this.cameraActive = false;
+              }
+            },
+
+            loadSample(type) {
+              this.imageUrl = this.sampleData[type].url;
+              this.clearResults();
+            },
+            loadSampleOcr(type) {
+              this.imageUrlOcr = this.sampleDataOcr[type].url;
+              // this.clearResults();
+            },
+
+            processImage(appname) {
+              if (!this.imageUrl) return;
+
+              this.clearResults();
+
+              // API call
+            },
+
+            clearResults() {
+              const jsonTextareaOcr = $(`ocr-output-display`);
+              const jsonTextareaObjdect = $(`objdet-output-display`);
+
+              // Clear previous results
+              jsonTextareaOcr.value = "";
+              jsonTextareaObjdect.value = "";
+            },
+          }));
+        });
+      </script>
+    </div>
+  </body>
+</html>

main.go

@@ -134,7 +134,13 @@ func main() {
 	})
 
 	// Serve static files from ./frontend, no directory listing
-	r.StaticFS("/app", gin.Dir("./frontend/", false))
+	r.StaticFS("/assets", gin.Dir("./assets", false))
+
+	r.GET("/", func(c *gin.Context) {
+		// Load HTML templates from ./frontend folder
+		// Render the template by name
+		c.HTML(http.StatusOK, "index.html", gin.H{})
+	})
 
 	// Route to serve parsed HTML template partials
 	r.GET("/partials", func(c *gin.Context) {