Update app.py
Browse files
app.py
CHANGED
|
@@ -23,6 +23,65 @@ def detect():
|
|
| 23 |
def serve_detected_image(filename):
|
| 24 |
return send_from_directory('/tmp/detected_images', filename)
|
| 25 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 26 |
|
| 27 |
if __name__ == "__main__":
|
| 28 |
app.run(host="0.0.0.0", port=5000)
|
|
|
|
| 23 |
def serve_detected_image(filename):
|
| 24 |
return send_from_directory('/tmp/detected_images', filename)
|
| 25 |
|
| 26 |
+
@app.route("/")
|
| 27 |
+
def index():
|
| 28 |
+
return """
|
| 29 |
+
<!DOCTYPE html>
|
| 30 |
+
<html>
|
| 31 |
+
<head>
|
| 32 |
+
<title>Gesture Detection UI</title>
|
| 33 |
+
<style>
|
| 34 |
+
body { font-family: sans-serif; padding: 20px; }
|
| 35 |
+
.result img { max-width: 100%; height: auto; margin-top: 10px; }
|
| 36 |
+
</style>
|
| 37 |
+
</head>
|
| 38 |
+
<body>
|
| 39 |
+
<h1>Gesture Detection</h1>
|
| 40 |
+
<form id="upload-form">
|
| 41 |
+
<input type="file" id="image" name="image" accept="image/*" required />
|
| 42 |
+
<button type="submit">Detect Gesture</button>
|
| 43 |
+
</form>
|
| 44 |
+
|
| 45 |
+
<div class="result" id="result"></div>
|
| 46 |
+
|
| 47 |
+
<script>
|
| 48 |
+
const form = document.getElementById("upload-form");
|
| 49 |
+
const resultDiv = document.getElementById("result");
|
| 50 |
+
|
| 51 |
+
form.addEventListener("submit", async (e) => {
|
| 52 |
+
e.preventDefault();
|
| 53 |
+
const imageInput = document.getElementById("image");
|
| 54 |
+
const file = imageInput.files[0];
|
| 55 |
+
|
| 56 |
+
const formData = new FormData();
|
| 57 |
+
formData.append("image", file);
|
| 58 |
+
|
| 59 |
+
resultDiv.innerHTML = "Processing...";
|
| 60 |
+
|
| 61 |
+
const response = await fetch("/detect", {
|
| 62 |
+
method: "POST",
|
| 63 |
+
body: formData
|
| 64 |
+
});
|
| 65 |
+
|
| 66 |
+
if (!response.ok) {
|
| 67 |
+
resultDiv.innerHTML = "Error detecting gesture.";
|
| 68 |
+
return;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
const data = await response.json();
|
| 72 |
+
resultDiv.innerHTML = `
|
| 73 |
+
<p><strong>Total Detections:</strong> ${data.total_detections}</p>
|
| 74 |
+
<ul>
|
| 75 |
+
${data.detections.map(d => `<li>${d.label} (${(d.confidence * 100).toFixed(1)}%)</li>`).join("")}
|
| 76 |
+
</ul>
|
| 77 |
+
<img src="${data.saved_to}" alt="Detected Image" />
|
| 78 |
+
`;
|
| 79 |
+
});
|
| 80 |
+
</script>
|
| 81 |
+
</body>
|
| 82 |
+
</html>
|
| 83 |
+
"""
|
| 84 |
+
|
| 85 |
|
| 86 |
if __name__ == "__main__":
|
| 87 |
app.run(host="0.0.0.0", port=5000)
|