Plant Analysis Tool
Redesign this using html and css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8" /> <meta name="viewport" content="width=device width, initial scale=1.0" /> <title>Plant Analysis Tool</title> <style> /* Same as before */ </style> </head> <body> <h1>Plant Analysis Tool</h1> <form id="uploadForm" enctype="multipart/form data"> <input type="file" name="image" accept="image/*" required id="imageInput" /> <button type="submit">Analyze Plant</button> </form> <img id="imagePreview" alt="Image preview" /> <div id="loading" style="display: none">Analyzing plant image...</div> <div id="result"></div> <button id="downloadButton" style="display: none"> Download PDF Report </button> <script> const imageInput = document.getElementById("imageInput"); const imagePreview = document.getElementById("imagePreview"); const uploadForm = document.getElementById("uploadForm"); const resultDiv = document.getElementById("result"); const loadingDiv = document.getElementById("loading"); const downloadButton = document.getElementById("downloadButton"); let analysisResult = ""; // Store the analysis result imageInput.addEventListener("change", function (event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function (e) { imagePreview.src = e.target.result; imagePreview.style.display = "block"; }; reader.readAsDataURL(file); } }); uploadForm.addEventListener("submit", async (e) => { e.preventDefault(); const formData = new FormData(e.target); loadingDiv.style.display = "block"; resultDiv.style.display = "none"; // Hide result initially resultDiv.textContent = ""; downloadButton.style.display = "none"; // Hide the download button initially try { const response = await fetch("/analyze", { method: "POST", body: formData, }); const data = await response.json(); if (data.result) { analysisResult = data.result; // Save the analysis result analysisImage = data.image; // Save the base64 image data resultDiv.textContent = "Analysis Result:\n" + analysisResult; resultDiv.style.display = "block"; // Show the download button downloadButton.style.display = "block"; } else if (data.error) { resultDiv.textContent = "Error: " + data.error; resultDiv.style.display = "block"; } } catch (error) { resultDiv.textContent = "Error: " + error.message; resultDiv.style.display = "block"; } finally { loadingDiv.style.display = "none"; } }); downloadButton.addEventListener("click", async () => { const response = await fetch("/download", { method: "POST", headers: { "Content Type": "application/json", }, body: JSON.stringify({ result: analysisResult, image: analysisImage, }), }); if (response.ok) { const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "Plant_Analysis_Report.pdf"; document.body.appendChild(a); a.click(); a.remove(); } else { alert("Failed to generate and download the PDF report."); } }); </script> </body> </html>
