| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Smart Recycling Assistant</title>
|
| <style>
|
| body {
|
| font-family: Arial, sans-serif;
|
| text-align: center;
|
| margin: 50px;
|
| }
|
| input {
|
| margin-top: 20px;
|
| }
|
| img {
|
| max-width: 100%;
|
| margin-top: 20px;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <h1>♻️ Smart Recycling Assistant</h1>
|
| <p>Upload an image of waste, and the AI will classify it for proper disposal.</p>
|
|
|
| <form id="upload-form" enctype="multipart/form-data">
|
| <input type="file" id="file" name="file" accept="image/*" required>
|
| <button type="submit">Predict</button>
|
| </form>
|
|
|
| <h3 id="prediction"></h3>
|
| <p id="guidelines"></p>
|
| <img id="preview" src="" style="display: none;"/>
|
|
|
| <script>
|
| document.getElementById("upload-form").addEventListener("submit", function(event) {
|
| event.preventDefault();
|
| let fileInput = document.getElementById("file").files[0];
|
| let formData = new FormData();
|
| formData.append("file", fileInput);
|
|
|
| fetch("/predict", {
|
| method: "POST",
|
| body: formData
|
| })
|
| .then(response => response.json())
|
| .then(data => {
|
| document.getElementById("prediction").innerText = "🗑️ Prediction: " + data.prediction;
|
| document.getElementById("guidelines").innerText = "♻️ Recycling Guidelines: " + data.recycling_guidelines;
|
| let imgPreview = document.getElementById("preview");
|
| imgPreview.src = URL.createObjectURL(fileInput);
|
| imgPreview.style.display = "block";
|
| })
|
| .catch(error => console.error("Error:", error));
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
