remove variety, adjust buttons
This commit is contained in:
parent
7cbad19bc3
commit
d53eafaecf
259
index.html
259
index.html
|
|
@ -1,27 +1,42 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dodałem ten tag, aby ustawić viewport strony -->
|
||||
<title>TomAIto</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* Użyłem zmiennych CSS, aby łatwiej zmieniać kolory i czcionki */
|
||||
:root {
|
||||
--primary-color: #409c0f;
|
||||
--secondary-color: #e2513b;
|
||||
--dark-color: #333;
|
||||
--light-color: #fff;
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: var(--font-family);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
padding: 20px;
|
||||
background-color: var(--light-color);
|
||||
color: var(--dark-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: #333;
|
||||
color: #fff !important;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--light-color) !important;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--light-color);
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
padding: 20pt;
|
||||
padding-right: 10%;
|
||||
padding-left: 10%;
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -30,17 +45,18 @@
|
|||
}
|
||||
|
||||
header span {
|
||||
color: #ff6600;
|
||||
color: var(--secondary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#darkModeToggle {
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
height: 45px;
|
||||
font-size: 18px;
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--light-color);
|
||||
border: var(--light-color);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -54,16 +70,16 @@
|
|||
}
|
||||
|
||||
#darkModeToggle:hover {
|
||||
background-color: #001a33;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--dark-color);
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
background-color: white;
|
||||
background-color: var(--light-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -73,75 +89,57 @@
|
|||
margin: auto;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--light-color);
|
||||
box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #333;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f9f9f9;
|
||||
background-color: var(--light-color);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #333;
|
||||
color: var(--dark-color);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
body.dark-mode form {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--light-color);
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--dark-color);
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
background-color: var(--light-color);
|
||||
transition: border-color 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
form {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input[type="file"]:focus {
|
||||
outline: none;
|
||||
border-color: #001a33;
|
||||
border-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -149,19 +147,56 @@
|
|||
padding: 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
background-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
|
||||
color: var(--light-color);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #001a33;
|
||||
background-color: var(--primary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* dodałem zapytania medialne, aby dostosować styl strony do różnych szerokości okna przeglądarki */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
|
||||
#darkModeToggle {
|
||||
position: right;
|
||||
transform: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10pt;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
Tom<span style="color: #ff6600;">AI</span>to
|
||||
|
|
@ -179,28 +214,38 @@
|
|||
|
||||
<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">Check the ripeness</button>
|
||||
<button type="submit" id="checkRipenessBtn">Check the ripeness</button>
|
||||
</form>
|
||||
|
||||
<canvas></canvas>
|
||||
<div id="weatherInfo"></div>
|
||||
<div id="loadingMessage" style="display: none;">Loading...</div>
|
||||
|
||||
<canvas style="display: none; max-width: 100%;"></canvas>
|
||||
|
||||
<div id="weatherInfo" style="display: none;"></div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById("uploadForm");
|
||||
const loadingMessage = document.getElementById("loadingMessage");
|
||||
const weatherInfo = document.getElementById("weatherInfo");
|
||||
const canvas = document.querySelector("canvas");
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
// Show loading message and weather info
|
||||
loadingMessage.style.display = "block";
|
||||
weatherInfo.style.display = "block";
|
||||
|
||||
// Disable the button to prevent multiple submissions
|
||||
document.getElementById("checkRipenessBtn").disabled = true;
|
||||
|
||||
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];
|
||||
|
||||
|
|
@ -208,7 +253,6 @@
|
|||
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",
|
||||
|
|
@ -218,37 +262,33 @@
|
|||
const boxes = await response.json();
|
||||
draw_image_and_boxes(file, boxes);
|
||||
|
||||
const location = locationInput.value;
|
||||
// Hide loading message and enable the button after canvas is loaded
|
||||
loadingMessage.style.display = "none";
|
||||
document.getElementById("checkRipenessBtn").disabled = false;
|
||||
|
||||
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;
|
||||
}
|
||||
// Update weather info text
|
||||
updateWeatherInfo(locationInput.value, cropTypeInput.value);
|
||||
});
|
||||
|
||||
function draw_image_and_boxes(file, boxes) {
|
||||
const img = new Image()
|
||||
img.src = URL.createObjectURL(file);
|
||||
img.onload = () => {
|
||||
const canvas = document.querySelector("canvas");
|
||||
// Show canvas once the image is loaded
|
||||
canvas.style.display = "block";
|
||||
weatherInfo.innerText = ""; // Clear previous weather info
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
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";
|
||||
|
||||
// Draw bounding boxes
|
||||
boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
|
||||
const label = `${object_type}`;
|
||||
const label = `${object_type} ${prob.toFixed(2)}`;
|
||||
ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
|
||||
ctx.fillStyle = "#00ff00";
|
||||
const width = ctx.measureText(label).width;
|
||||
|
|
@ -259,39 +299,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function getWeather(location) {
|
||||
const apiKey = "1fc6a52c96331d035a828cc0c1606241";
|
||||
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
|
||||
async function updateWeatherInfo(location, cropType) {
|
||||
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();
|
||||
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);
|
||||
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';
|
||||
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.`;
|
||||
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!';
|
||||
if (tempRound < 15) {
|
||||
additionalInfo += ' So you need to cover your tomatoes!';
|
||||
}
|
||||
|
||||
weatherInfo.innerText = additionalInfo;
|
||||
} else {
|
||||
weatherInfo.innerText = "Unable to fetch weather data.";
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching weather data:", error);
|
||||
weatherInfo.innerText = "Error fetching weather data.";
|
||||
}
|
||||
|
||||
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>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue