| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>♻️ Camera Feature Unavailable</title>
|
| <link
|
| rel="stylesheet"
|
| href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
| />
|
| <style>
|
| body {
|
| background: linear-gradient(135deg, #d4fc79, #96e6a1);
|
| font-family: "Segoe UI", sans-serif;
|
| }
|
| .info-card {
|
| background: rgba(255, 255, 255, 0.9);
|
| border-radius: 15px;
|
| padding: 40px;
|
| box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
|
| max-width: 600px;
|
| margin: auto;
|
| }
|
| .btn {
|
| border-radius: 50px;
|
| padding: 10px 20px;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div
|
| class="container d-flex justify-content-center align-items-center min-vh-100"
|
| >
|
| <div class="info-card text-center">
|
| <h2 class="text-warning fw-bold mb-4">
|
| 📷 Camera Feature Not Available
|
| </h2>
|
|
|
| <div class="alert alert-info">
|
| <h5>🏠 Running on Hugging Face Spaces</h5>
|
| <p class="mb-0">
|
| Camera access is not available in cloud deployments for security
|
| reasons. Please use the image upload feature instead!
|
| </p>
|
| </div>
|
|
|
| <div class="mt-4">
|
| <h6 class="text-muted">What you can still do:</h6>
|
| <ul class="list-unstyled mt-3">
|
| <li>
|
| 📤 <strong>Upload Images</strong> - Take a photo with your device
|
| and upload it
|
| </li>
|
| <li>
|
| 📊 <strong>View Statistics</strong> - See your classification
|
| history
|
| </li>
|
| <li>
|
| 📄 <strong>Download Reports</strong> - Export your data as PDF or
|
| CSV
|
| </li>
|
| </ul>
|
| </div>
|
|
|
| <div class="mt-4">
|
| <a href="/" class="btn btn-success me-2">📤 Upload Image Instead</a>
|
| <a href="/stats" class="btn btn-info">📊 View Statistics</a>
|
| </div>
|
|
|
| <div class="mt-4">
|
| <small class="text-muted">
|
| 💡 <strong>Tip:</strong> For real-time detection, download and run
|
| this application locally on your computer.
|
| </small>
|
| </div>
|
| </div>
|
| </div>
|
| </body>
|
| </html>
|
|
|
