Compare commits
No commits in common. "3dc1bcf466fdfd4b5aa459a1d6ce202b21eac319" and "5397b09a1324338e6263413c296d41dbfbea3ba9" have entirely different histories.
3dc1bcf466
...
5397b09a13
205
index.html
205
index.html
@ -2,168 +2,69 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>TomAIto</title>
|
<title>YOLOv8 Object Detection</title>
|
||||||
<style>
|
<style>
|
||||||
canvas {
|
canvas {
|
||||||
|
display:block;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
display: flex;
|
margin-top:10px;
|
||||||
flex-direction: column;
|
|
||||||
max-width: 300px; /* Ustaw maksymalną szerokość formularza */
|
|
||||||
margin: auto; /* Centruj formularz na stronie */
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#weatherInfo {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 300px; /* Ustaw maksymalną szerokość formularza */
|
|
||||||
margin: auto; /* Centruj formularz na stronie */
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 300px; /* Ustaw maksymalną szerokość formularza */
|
|
||||||
margin: auto; /* Centruj formularz na stronie */
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form id="uploadForm">
|
<input id="uploadInput" type="file"/>
|
||||||
|
|
||||||
<label for="cropType">Crop Type:</label>
|
|
||||||
<select id="cropType" name="cropType">
|
|
||||||
<option value="external">External</option>
|
|
||||||
<option value="internal">Internal</option>
|
|
||||||
<option value="greenhouse">Greenhouse</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<label for="location">Location:</label>
|
|
||||||
<input type="text" id="location" name="location" required/>
|
|
||||||
|
|
||||||
<label for="variety">Variety:</label>
|
|
||||||
<input type="text" id="variety" name="variety" required/>
|
|
||||||
|
|
||||||
<label for="uploadInput">Choose an image:</label>
|
|
||||||
<input id="uploadInput" type="file" required/>
|
|
||||||
|
|
||||||
<button type="Sprawdz">Sprawdz</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<canvas></canvas>
|
<canvas></canvas>
|
||||||
<div id="weatherInfo"></div>
|
|
||||||
<script>
|
<script>
|
||||||
const form = document.getElementById("uploadForm");
|
/**
|
||||||
|
* "Upload" button onClick handler: uploads selected
|
||||||
|
* image file to backend, receives an array of
|
||||||
|
* detected objects and draws them on top of image
|
||||||
|
*/
|
||||||
|
const input = document.getElementById("uploadInput");
|
||||||
|
input.addEventListener("change",async(event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
const data = new FormData();
|
||||||
|
data.append("image_file",file,"image_file");
|
||||||
|
const response = await fetch("/detect",{
|
||||||
|
method:"post",
|
||||||
|
body:data
|
||||||
|
});
|
||||||
|
const boxes = await response.json();
|
||||||
|
draw_image_and_boxes(file,boxes);
|
||||||
|
})
|
||||||
|
|
||||||
form.addEventListener("submit", async (event) => {
|
/**
|
||||||
event.preventDefault();
|
* Function draws the image from provided file
|
||||||
|
* and bounding boxes of detected objects on
|
||||||
|
* top of the image
|
||||||
|
* @param file Uploaded file object
|
||||||
|
* @param boxes Array of bounding boxes in format
|
||||||
|
[[x1,y1,x2,y2,object_type,probability],...]
|
||||||
|
*/
|
||||||
|
function draw_image_and_boxes(file,boxes) {
|
||||||
|
const img = new Image()
|
||||||
|
img.src = URL.createObjectURL(file);
|
||||||
|
img.onload = () => {
|
||||||
|
const canvas = document.querySelector("canvas");
|
||||||
|
canvas.width = img.width;
|
||||||
|
canvas.height = img.height;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(img,0,0);
|
||||||
|
ctx.strokeStyle = "#00FF00";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.font = "20px serif";
|
||||||
|
boxes.forEach(([x1,y1,x2,y2,object_type, prob]) => {
|
||||||
|
|
||||||
const fileInput = document.getElementById("uploadInput");
|
const label = `${object_type} ${prob.toFixed(2)}`;
|
||||||
const cropTypeInput = document.getElementById("cropType");
|
ctx.strokeRect(x1,y1,x2-x1,y2-y1);
|
||||||
const locationInput = document.getElementById("location");
|
ctx.fillStyle = "#00ff00";
|
||||||
const varietyInput = document.getElementById("variety");
|
const width = ctx.measureText(label).width;
|
||||||
|
ctx.fillRect(x1,y1,width+10,25);
|
||||||
const file = fileInput.files[0];
|
ctx.fillStyle = "#000000";
|
||||||
|
ctx.fillText(label,x1,y1+18);
|
||||||
const data = new FormData();
|
});
|
||||||
data.append("image_file", file);
|
}
|
||||||
data.append("cropType", cropTypeInput.value);
|
}
|
||||||
data.append("location", locationInput.value);
|
</script>
|
||||||
data.append("variety", varietyInput.value);
|
|
||||||
|
|
||||||
const response = await fetch("/detect", {
|
|
||||||
method: "post",
|
|
||||||
body: data
|
|
||||||
});
|
|
||||||
|
|
||||||
const boxes = await response.json();
|
|
||||||
draw_image_and_boxes(file, boxes);
|
|
||||||
|
|
||||||
const location = locationInput.value;
|
|
||||||
|
|
||||||
if (cropTypeInput.value == "external") {
|
|
||||||
getWeather(location);
|
|
||||||
}
|
|
||||||
|
|
||||||
else {
|
|
||||||
const randomTips = [
|
|
||||||
"water your tomatoes every day.",
|
|
||||||
"keep the temperature between 20-25 degrees Celsius.",
|
|
||||||
"place the tomatoes in sunlight."];
|
|
||||||
|
|
||||||
const randomTip = randomTips[Math.floor(Math.random() * randomTips.length)];
|
|
||||||
document.getElementById("weatherInfo").innerText = "TIP! To maximalize your yields " + randomTip;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function draw_image_and_boxes(file, boxes) {
|
|
||||||
const img = new Image()
|
|
||||||
img.src = URL.createObjectURL(file);
|
|
||||||
img.onload = () => {
|
|
||||||
const canvas = document.querySelector("canvas");
|
|
||||||
canvas.width = img.width;
|
|
||||||
canvas.height = img.height;
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
ctx.drawImage(img, 0, 0);
|
|
||||||
ctx.strokeStyle = "#00FF00";
|
|
||||||
ctx.lineWidth = 5;
|
|
||||||
ctx.font = "20px serif";
|
|
||||||
boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
|
|
||||||
const label = `${object_type} ${prob.toFixed(2)}`;
|
|
||||||
ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
|
|
||||||
ctx.fillStyle = "#00ff00";
|
|
||||||
const width = ctx.measureText(label).width;
|
|
||||||
ctx.fillRect(x1, y1, width + 10, 25);
|
|
||||||
ctx.fillStyle = "#000000";
|
|
||||||
ctx.fillText(label, x1, y1 + 18);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getWeather(location) {
|
|
||||||
const apiKey = "1fc6a52c96331d035a828cc0c1606241";
|
|
||||||
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const weatherResponse = await fetch(apiUrl);
|
|
||||||
const weatherData = await weatherResponse.json();
|
|
||||||
|
|
||||||
if (weatherData.main && weatherData.main.temp) {
|
|
||||||
const temperatureKelvin = weatherData.main.temp;
|
|
||||||
const temperatureCelsius = temperatureKelvin - 273.15;
|
|
||||||
const tempRound = Math.round(temperatureCelsius);
|
|
||||||
|
|
||||||
const weatherCondition = weatherData.weather[0].main;
|
|
||||||
const isRaining = weatherCondition === 'Rain';
|
|
||||||
|
|
||||||
let additionalInfo = `${isRaining ? 'Rain is expected in your town today, so you dont have to water your tomatoes' :
|
|
||||||
'No rainfall is expected in the city today, so you need to water your tomatoes!'} Temperature in ${location} is ${tempRound} °C.`;
|
|
||||||
|
|
||||||
if (tempRound < 15) {
|
|
||||||
additionalInfo += ' So you need to cover your tomatoes!';
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("weatherInfo").innerText = additionalInfo;
|
|
||||||
} else {
|
|
||||||
document.getElementById("weatherInfo").innerText = "Unable to fetch weather data.";
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching weather data:", error);
|
|
||||||
document.getElementById("weatherInfo").innerText = "Error fetching weather data.";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -4,7 +4,6 @@ from waitress import serve
|
|||||||
from PIL import Image
|
from PIL import Image
|
||||||
import onnxruntime as ort
|
import onnxruntime as ort
|
||||||
import numpy as np
|
import numpy as np
|
||||||
import requests
|
|
||||||
|
|
||||||
#my changes
|
#my changes
|
||||||
import os
|
import os
|
||||||
@ -25,7 +24,6 @@ yolo_classes = ["b_fully_ripened",
|
|||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/")
|
@app.route("/")
|
||||||
def root():
|
def root():
|
||||||
"""
|
"""
|
||||||
@ -35,18 +33,22 @@ def root():
|
|||||||
with open("index.html") as file:
|
with open("index.html") as file:
|
||||||
return file.read()
|
return file.read()
|
||||||
|
|
||||||
|
|
||||||
@app.route("/detect", methods=["POST"])
|
@app.route("/detect", methods=["POST"])
|
||||||
def detect():
|
def detect():
|
||||||
|
"""
|
||||||
|
Handler of /detect POST endpoint
|
||||||
|
Receives uploaded file with a name "image_file", passes it
|
||||||
|
through YOLOv8 object detection network and returns and array
|
||||||
|
of bounding boxes.
|
||||||
|
:return: a JSON array of objects bounding boxes in format [[x1,y1,x2,y2,object_type,probability],..]
|
||||||
|
"""
|
||||||
buf = request.files["image_file"]
|
buf = request.files["image_file"]
|
||||||
crop_type = request.form.get("cropType")
|
|
||||||
location = request.form.get("location")
|
|
||||||
variety = request.form.get("variety")
|
|
||||||
boxes, orientation = detect_objects_on_image(buf.stream)
|
boxes, orientation = detect_objects_on_image(buf.stream)
|
||||||
# Do something with crop_type, location, and variety here (e.g., store in database)
|
#print(boxes)
|
||||||
|
#print(orientation)
|
||||||
return jsonify(boxes)
|
return jsonify(boxes)
|
||||||
|
|
||||||
|
|
||||||
def detect_objects_on_image(buf):
|
def detect_objects_on_image(buf):
|
||||||
input, img_width, img_height = prepare_input(buf)
|
input, img_width, img_height = prepare_input(buf)
|
||||||
output = run_model(input)
|
output = run_model(input)
|
||||||
|
Loading…
Reference in New Issue
Block a user