Spaces:
Running
Running
File size: 4,246 Bytes
1287b01 |
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 |
<!DOCTYPE html>
<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>
|