Spaces:
Running
Running
File size: 2,296 Bytes
a0d2afd |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CIFAR-10 Vision AI</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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="container">
<header>
<h1>CIFAR-10 Vision AI</h1>
<p>Advanced Deep Learning Classifier for Small Images</p>
</header>
<main class="main-card">
<div id="drop-zone" class="upload-area">
<i class="fas fa-cloud-upload-alt"></i>
<h3>Drag & Drop Image</h3>
<p>or click to browse files (JPEG, PNG)</p>
<input type="file" id="file-input" hidden accept="image/*">
</div>
<div id="preview-section" class="hidden">
<img id="image-display" src="#" alt="Preview" class="image-preview">
<button id="predict-btn">Analyze Image</button>
</div>
<div id="result-section" class="prediction-results">
<div class="result-header">
<h2>Prediction Result</h2>
<div id="prediction-label" class="class-tag">---</div>
</div>
<div class="confidence-stats">
<p>Confidence Level: <span id="confidence-text">0%</span></p>
<div class="confidence-bar-container">
<div id="confidence-bar" class="confidence-bar"></div>
</div>
</div>
<button id="reset-btn" style="background: transparent; border: 1px solid var(--glass-border); margin-top: 1rem; color: var(--text-dim); padding: 0.5rem; width: 100%; border-radius: 0.5rem; cursor: pointer;">
Upload Another
</button>
</div>
</main>
</div>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
|