Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vision AI | Real-time Object Detection</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <div class="background-blobs"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| </div> | |
| <div class="container"> | |
| <nav> | |
| <div class="logo"> | |
| <i class="fas fa-eye"></i> | |
| <span>Vision AI</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#" class="active">Detection</a> | |
| <a href="#">History</a> | |
| <a href="#">API</a> | |
| </div> | |
| </nav> | |
| <main> | |
| <section class="hero"> | |
| <h1>Unlock the Power of <span class="gradient-text">Computer Vision</span></h1> | |
| <p>Upload an image or video to identify objects instantly using state-of-the-art YOLOv8 neural networks.</p> | |
| </section> | |
| <div class="glass-card upload-section"> | |
| <div class="upload-box" id="drop-zone"> | |
| <input type="file" id="file-input" hidden accept="image/*,video/*"> | |
| <div class="upload-content"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Drop your file here</h3> | |
| <p>or click to browse (Image/Video)</p> | |
| </div> | |
| <div class="file-info" id="file-info" style="display: none;"> | |
| <i class="fas fa-file-alt"></i> | |
| <span id="filename-display"></span> | |
| <button id="remove-file"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| <button id="analyze-btn" class="primary-btn" disabled> | |
| <i class="fas fa-microchip"></i> Start Analysis | |
| </button> | |
| </div> | |
| <div id="loading" class="loading-container" style="display: none;"> | |
| <div class="loader"></div> | |
| <p>Neural network is analyzing...</p> | |
| </div> | |
| <div id="results" class="results-container" style="display: none;"> | |
| <div class="results-grid"> | |
| <div class="glass-card result-preview"> | |
| <h2>Result Preview</h2> | |
| <div class="preview-wrapper"> | |
| <img id="result-img" src="" alt="Result" style="display: none;"> | |
| <video id="result-vid" controls style="display: none;"></video> | |
| </div> | |
| <a id="download-btn" href="#" download class="secondary-btn"> | |
| <i class="fas fa-download"></i> Download Result | |
| </a> | |
| </div> | |
| <div class="glass-card result-stats"> | |
| <h2>Detections</h2> | |
| <div id="stats-content"> | |
| <div class="total-badge"> | |
| <span class="count" id="total-count">0</span> | |
| <span class="label">Objects Found</span> | |
| </div> | |
| <div class="object-list" id="object-list"> | |
| <!-- Dynamic content --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2024 Vision AI. Powered by YOLOv8 & Flask.</p> | |
| </footer> | |
| </div> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> | |