Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>ผลลัพธ์การจำแนกต้นไม้</title> | |
| <style> | |
| body { | |
| font-family: 'Sarabun', sans-serif; | |
| background-color: #f0f9f0; | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .main-image img { | |
| width: 300px; | |
| border-radius: 10px; | |
| } | |
| .results { | |
| margin-top: 20px; | |
| font-size: 18px; | |
| color: #2e7d32; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🌳 ผลลัพธ์ของต้นไม้ที่คุณอัปโหลด</h1> | |
| <div class="main-image"> | |
| <img src="" alt="Uploaded Tree Image" /> | |
| </div> | |
| <div class="results" id="results">⏳ กำลังวิเคราะห์ภาพ...</div> | |
| <script> | |
| window.addEventListener("DOMContentLoaded", async () => { | |
| const base64Image = localStorage.getItem("uploadedImage"); | |
| if (!base64Image) return; | |
| document.querySelector(".main-image img").src = base64Image; | |
| try { | |
| // แปลง base64 เป็น Blob แล้วส่งไป API | |
| const blob = await (await fetch(base64Image)).blob(); | |
| const formData = new FormData(); | |
| formData.append("file", blob, "image.jpg"); | |
| const response = await fetch("https://jkcoolkidz-deeptree.hf.space/predict", { | |
| method: "POST", | |
| body: formData, | |
| }); | |
| const data = await response.json(); | |
| console.log("API response:", data); | |
| document.getElementById("results").innerHTML = | |
| `🌿 โมเดลคาดว่าเป็น: <strong>${data.prediction}</strong>`; | |
| } catch (err) { | |
| console.error("Error calling API:", err); | |
| document.getElementById("results").innerHTML = `❌ เกิดข้อผิดพลาดในการวิเคราะห์`; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |