| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
|
|
| <meta charset="UTF-8"> |
|
|
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1.0" |
| > |
|
|
| <title>YOLO Vision</title> |
|
|
| <style> |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| body { |
| margin: 0; |
| background: #0b1120; |
| color: #e5e7eb; |
| font-family: |
| Inter, |
| Arial, |
| sans-serif; |
| } |
| |
| .container { |
| width: min(1450px, 94%); |
| margin: auto; |
| padding: 25px 0 40px; |
| } |
| |
| |
| |
| .header { |
| background: #111827; |
| border: 1px solid #263244; |
| border-radius: 18px; |
| padding: 25px 28px; |
| margin-bottom: 20px; |
| } |
| |
| .title { |
| font-size: 30px; |
| font-weight: 700; |
| } |
| |
| .subtitle { |
| color: #94a3b8; |
| margin-top: 7px; |
| font-size: 14px; |
| } |
| |
| .status { |
| display: inline-block; |
| margin-top: 15px; |
| padding: 8px 14px; |
| border-radius: 999px; |
| background: #1e293b; |
| border: 1px solid #334155; |
| color: #cbd5e1; |
| font-size: 13px; |
| font-weight: 600; |
| } |
| |
| |
| |
| .panel { |
| background: #111827; |
| border: 1px solid #263244; |
| border-radius: 18px; |
| padding: 18px; |
| margin-bottom: 20px; |
| } |
| |
| .panel-title { |
| color: #f8fafc; |
| font-size: 17px; |
| font-weight: 650; |
| margin-bottom: 14px; |
| } |
| |
| |
| |
| .model-status { |
| font-size: 14px; |
| margin-bottom: 15px; |
| color: #cbd5e1; |
| } |
| |
| .model-actions { |
| display: flex; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
| |
| .button { |
| border: none; |
| border-radius: 10px; |
| padding: 11px 18px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| transition: 0.2s; |
| } |
| |
| .button:hover { |
| transform: translateY(-1px); |
| } |
| |
| .download { |
| background: #2563eb; |
| color: white; |
| } |
| |
| .download:hover { |
| background: #1d4ed8; |
| } |
| |
| .select { |
| background: #334155; |
| color: white; |
| } |
| |
| .select:hover { |
| background: #475569; |
| } |
| |
| .file-name { |
| margin-top: 12px; |
| color: #94a3b8; |
| font-size: 13px; |
| word-break: break-all; |
| } |
| |
| |
| |
| .progress-area { |
| margin-top: 18px; |
| } |
| |
| .progress-background { |
| width: 100%; |
| height: 10px; |
| background: #1e293b; |
| border-radius: 999px; |
| overflow: hidden; |
| } |
| |
| .progress-bar { |
| width: 0%; |
| height: 100%; |
| background: #22c55e; |
| transition: width 0.2s ease; |
| } |
| |
| .progress-info { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 8px; |
| font-size: 12px; |
| color: #94a3b8; |
| } |
| |
| |
| |
| .video-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| } |
| |
| .video-panel { |
| background: #111827; |
| border: 1px solid #263244; |
| border-radius: 18px; |
| padding: 15px; |
| } |
| |
| .video-title { |
| font-size: 15px; |
| font-weight: 600; |
| margin-bottom: 12px; |
| } |
| |
| .video-wrapper { |
| width: 100%; |
| height: 500px; |
| background: #020617; |
| border-radius: 12px; |
| overflow: hidden; |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| video, |
| canvas { |
| width: 100%; |
| height: 100%; |
| object-fit: contain; |
| } |
| |
| .placeholder { |
| position: absolute; |
| color: #64748b; |
| font-size: 14px; |
| text-align: center; |
| pointer-events: none; |
| } |
| |
| |
| |
| .settings { |
| display: grid; |
| grid-template-columns: 1fr 1fr 1fr; |
| gap: 15px; |
| } |
| |
| .setting { |
| background: #0f172a; |
| border: 1px solid #263244; |
| border-radius: 12px; |
| padding: 15px; |
| } |
| |
| .setting-label { |
| color: #94a3b8; |
| font-size: 12px; |
| margin-bottom: 7px; |
| } |
| |
| .setting-value { |
| font-size: 18px; |
| font-weight: 600; |
| } |
| |
| input[type="range"] { |
| width: 100%; |
| margin-top: 8px; |
| } |
| |
| |
| |
| .controls { |
| display: flex; |
| gap: 12px; |
| margin-top: 20px; |
| } |
| |
| .start { |
| background: #16a34a; |
| color: white; |
| } |
| |
| .start:hover:not(:disabled) { |
| background: #15803d; |
| } |
| |
| .stop { |
| background: #dc2626; |
| color: white; |
| } |
| |
| .stop:hover:not(:disabled) { |
| background: #b91c1c; |
| } |
| |
| button:disabled { |
| opacity: 0.45; |
| cursor: not-allowed; |
| transform: none; |
| } |
| |
| |
| |
| .footer { |
| text-align: center; |
| color: #64748b; |
| font-size: 12px; |
| margin-top: 25px; |
| } |
| |
| |
| |
| @media (max-width: 900px) { |
| |
| .video-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .settings { |
| grid-template-columns: 1fr; |
| } |
| |
| .video-wrapper { |
| height: 400px; |
| } |
| } |
| |
| </style> |
|
|
| </head> |
|
|
|
|
| <body> |
|
|
| <div class="container"> |
|
|
|
|
| |
|
|
| <div class="header"> |
|
|
| <div class="title"> |
| 🚀 YOLO Vision |
| </div> |
|
|
| <div class="subtitle"> |
| Browser-based YOLO11n segmentation using ONNX Runtime |
| </div> |
|
|
| <div |
| id="status" |
| class="status" |
| > |
| 🟡 Waiting for model |
| </div> |
|
|
| </div> |
|
|
|
|
| |
|
|
| <div class="panel"> |
|
|
| <div class="panel-title"> |
| 🧠 YOLO11n-Seg Model |
| </div> |
|
|
| <div |
| id="modelStatus" |
| class="model-status" |
| > |
| 🔴 Model not loaded |
| </div> |
|
|
|
|
| <div class="model-actions"> |
|
|
| <a |
| class="button download" |
| href="https://huggingface.co/MikeLud/ObjectDetectionYOLO11-ONNX/resolve/main/yolo11n-seg.onnx" |
| target="_blank" |
| rel="noopener" |
| > |
| ⬇️ Download YOLO11n-Seg |
| </a> |
|
|
|
|
| <label class="button select"> |
|
|
| 📁 Select ONNX Model |
|
|
| <input |
| id="modelFile" |
| type="file" |
| accept=".onnx" |
| hidden |
| > |
|
|
| </label> |
|
|
| </div> |
|
|
|
|
| <div |
| id="modelFileName" |
| class="file-name" |
| > |
| No model selected |
| </div> |
|
|
|
|
| <div class="progress-area"> |
|
|
| <div class="progress-background"> |
|
|
| <div |
| id="progressBar" |
| class="progress-bar" |
| ></div> |
|
|
| </div> |
|
|
|
|
| <div class="progress-info"> |
|
|
| <span id="loadingStatus"> |
| Download the model and select it |
| </span> |
|
|
| <span id="progressPercent"> |
| 0% |
| </span> |
|
|
| </div> |
|
|
| </div> |
|
|
| </div> |
|
|
|
|
| |
|
|
| <div class="video-grid"> |
|
|
|
|
| |
|
|
| <div class="video-panel"> |
|
|
| <div class="video-title"> |
| 📷 Camera |
| </div> |
|
|
| <div class="video-wrapper"> |
|
|
| <video |
| id="camera" |
| autoplay |
| muted |
| playsinline |
| ></video> |
|
|
| <div |
| id="cameraPlaceholder" |
| class="placeholder" |
| > |
| Camera stopped |
| </div> |
|
|
| </div> |
|
|
| </div> |
|
|
|
|
| |
|
|
| <div class="video-panel"> |
|
|
| <div class="video-title"> |
| 🎯 YOLO Segmentation |
| </div> |
|
|
| <div class="video-wrapper"> |
|
|
| <canvas |
| id="output" |
| ></canvas> |
|
|
| <div |
| id="outputPlaceholder" |
| class="placeholder" |
| > |
| YOLO output will appear here |
| </div> |
|
|
| </div> |
|
|
| </div> |
|
|
| </div> |
|
|
|
|
| |
|
|
| <div class="panel"> |
|
|
| <div class="panel-title"> |
| ⚙️ Detection Settings |
| </div> |
|
|
|
|
| <div class="settings"> |
|
|
|
|
| <div class="setting"> |
|
|
| <div class="setting-label"> |
| Confidence |
| </div> |
|
|
| <div |
| id="confidenceText" |
| class="setting-value" |
| > |
| 0.25 |
| </div> |
|
|
| <input |
| id="confidence" |
| type="range" |
| min="0.05" |
| max="0.90" |
| value="0.25" |
| step="0.05" |
| > |
|
|
| </div> |
|
|
|
|
| <div class="setting"> |
|
|
| <div class="setting-label"> |
| Inference Backend |
| </div> |
|
|
| <div |
| id="backend" |
| class="setting-value" |
| > |
| Waiting |
| </div> |
|
|
| </div> |
|
|
|
|
| <div class="setting"> |
|
|
| <div class="setting-label"> |
| Objects |
| </div> |
|
|
| <div |
| id="objects" |
| class="setting-value" |
| > |
| 0 |
| </div> |
|
|
| </div> |
|
|
|
|
| </div> |
|
|
|
|
| <div class="controls"> |
|
|
| <button |
| id="start" |
| class="button start" |
| disabled |
| > |
| ▶ Start Camera |
| </button> |
|
|
|
|
| <button |
| id="stop" |
| class="button stop" |
| disabled |
| > |
| ■ Stop Camera |
| </button> |
|
|
| </div> |
|
|
| </div> |
|
|
|
|
| |
|
|
| <div class="footer"> |
|
|
| YOLO11n-Seg • ONNX Runtime Web • WebGPU / WASM |
|
|
| </div> |
|
|
|
|
| </div> |
|
|
|
|
| <script |
| type="module" |
| src="app.js" |
| ></script> |
|
|
| </body> |
|
|
| </html> |
