tomaito_web/index.html

156 lines
5.5 KiB
HTML
Raw Normal View History

2024-01-16 15:30:46 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TomAIto</title>
<style>
canvas {
border: 1px solid black;
display: flex;
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>
</head>
<body>
<form id="uploadForm">
<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>
<div id="weatherInfo"></div>
<script>
const form = document.getElementById("uploadForm");
form.addEventListener("submit", async (event) => {
event.preventDefault();
const fileInput = document.getElementById("uploadInput");
const cropTypeInput = document.getElementById("cropType");
const locationInput = document.getElementById("location");
const varietyInput = document.getElementById("variety");
const file = fileInput.files[0];
const data = new FormData();
data.append("image_file", file);
data.append("cropType", cropTypeInput.value);
data.append("location", locationInput.value);
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;
getWeather(location);
});
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>
2023-12-28 22:09:32 +01:00
</html>