s486797/tomaito_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remove variety, adjust buttons

Browse Source
This commit is contained in:
anetla 2024-01-19 12:16:55 +01:00
parent 7cbad19bc3
commit d53eafaecf
1 changed files with 150 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
index.html
View File

@ -1,27 +1,42 @@
<head> <head>
<meta charset="UTF-8"> <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> <title>TomAIto</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style> <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 { body {
font-family: 'Arial', sans-serif; font-family: var(--font-family);
margin: 0; margin: 0;
padding: 0; padding: 20px;
background-color: #f5f5f5; background-color: var(--light-color);
color: #333; color: var(--dark-color);
display: flex;
flex-direction: column;
align-items: center;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
body.dark-mode { body.dark-mode {
background-color: #333; background-color: var(--dark-color);
color: #fff !important; color: var(--light-color) !important;
} }
header { header {
background-color: #4CAF50; background-color: var(--primary-color);
color: white; color: var(--light-color);
text-align: center; text-align: center;
padding: 15px; padding: 20pt;
padding-right: 10%;
padding-left: 10%;
font-size: 24px; font-size: 24px;
width: 100%; width: 100%;
position: relative; position: relative;
@ -30,17 +45,18 @@
} }
header span { header span {
color: #ff6600; color: var(--secondary-color);
font-weight: bold; font-weight: bold;
} }
#darkModeToggle { #darkModeToggle {
width: 90px; width: 90px;
height: 30px; height: 45px;
background-color: #333; font-size: 18px;
color: white; background-color: var(--secondary-color);
border: none; color: var(--light-color);
border-radius: 5px; border: var(--light-color);
border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -54,16 +70,16 @@
} }
#darkModeToggle:hover { #darkModeToggle:hover {
background-color: #001a33; background-color: var(--secondary-color);
} }
canvas { canvas {
border: 1px solid #ddd; border: 1px solid var(--dark-color);
max-width: 100%; max-width: 100%;
display: block; display: block;
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
background-color: white; background-color: var(--light-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
} }
@ -73,75 +89,57 @@
margin: auto; margin: auto;
margin-top: 20px; margin-top: 20px;
padding: 15px; padding: 15px;
background-color: #fff; background-color: var(--light-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
border-radius: 5px; border-radius: 5px;
color: #333; color: var(--dark-color);
} }
form { form {
max-width: 600px; max-width: 600px;
width: 100%; width: 100%;
margin: auto; margin: auto;
margin-top: 20px;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: #f9f9f9; background-color: var(--light-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
color: #333; color: var(--dark-color);
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
body.dark-mode form { body.dark-mode form {
background-color: #333; background-color: var(--dark-color);
color: #fff; color: var(--light-color);
} }
label { label {
margin-top: 10px; display: block;
font-weight: bold; margin-bottom: 5px;
font-size: 18px;
} }
input, input,
select { select {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 15px; margin-bottom: 20px;
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid var(--dark-color);
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: var(--light-color);
transition: border-color 0.3s; transition: border-color 0.3s;
font-weight: bold; font-weight: bold;
} font-size: 16px;
@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;
} }
input[type="file"]:focus { input[type="file"]:focus {
outline: none; outline: none;
border-color: #001a33; border-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
} }
button { button {
@ -149,19 +147,56 @@
padding: 15px; padding: 15px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background-color: #4CAF50; background-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
color: white; color: var(--light-color);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s, transform 0.3s;
font-weight: bold; font-weight: bold;
font-size: 18px;
} }
button:hover { 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> </style>
</head> </head>
<body> <body>
<header> <header>
Tom<span style="color: #ff6600;">AI</span>to Tom<span style="color: #ff6600;">AI</span>to
@ -180,27 +215,37 @@
<label for="location">Location:</label> <label for="location">Location:</label>
<input type="text" id="location" name="location" required/> <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> <label for="uploadInput">Choose an image:</label>
<input id="uploadInput" type="file" required/> <input id="uploadInput" type="file" required/>
<button type="Sprawdz">Check the ripeness</button> <button type="submit" id="checkRipenessBtn">Check the ripeness</button>
</form> </form>
<canvas></canvas> <div id="loadingMessage" style="display: none;">Loading...</div>
<div id="weatherInfo"></div>
<canvas style="display: none; max-width: 100%;"></canvas>
<div id="weatherInfo" style="display: none;"></div>
<script> <script>
const form = document.getElementById("uploadForm"); 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) => { form.addEventListener("submit", async (event) => {
event.preventDefault(); 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 fileInput = document.getElementById("uploadInput");
const cropTypeInput = document.getElementById("cropType"); const cropTypeInput = document.getElementById("cropType");
const locationInput = document.getElementById("location"); const locationInput = document.getElementById("location");
const varietyInput = document.getElementById("variety");
const file = fileInput.files[0]; const file = fileInput.files[0];
@ -208,7 +253,6 @@
data.append("image_file", file); data.append("image_file", file);
data.append("cropType", cropTypeInput.value); data.append("cropType", cropTypeInput.value);
data.append("location", locationInput.value); data.append("location", locationInput.value);
data.append("variety", varietyInput.value);
const response = await fetch("/detect", { const response = await fetch("/detect", {
method: "post", method: "post",
@ -218,37 +262,33 @@
const boxes = await response.json(); const boxes = await response.json();
draw_image_and_boxes(file, boxes); 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") { // Update weather info text
getWeather(location); updateWeatherInfo(locationInput.value, cropTypeInput.value);
}
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) { function draw_image_and_boxes(file, boxes) {
const img = new Image() const img = new Image()
img.src = URL.createObjectURL(file); img.src = URL.createObjectURL(file);
img.onload = () => { 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.width = img.width;
canvas.height = img.height; canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
ctx.strokeStyle = "#00FF00"; ctx.strokeStyle = "#00FF00";
ctx.lineWidth = 5; ctx.lineWidth = 5;
ctx.font = "20px serif"; ctx.font = "20px serif";
// Draw bounding boxes
boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => { 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.strokeRect(x1, y1, x2 - x1, y2 - y1);
ctx.fillStyle = "#00ff00"; ctx.fillStyle = "#00ff00";
const width = ctx.measureText(label).width; const width = ctx.measureText(label).width;
@ -259,7 +299,7 @@
} }
} }
async function getWeather(location) { async function updateWeatherInfo(location, cropType) {
const apiKey = "1fc6a52c96331d035a828cc0c1606241"; const apiKey = "1fc6a52c96331d035a828cc0c1606241";
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`; const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
@ -282,16 +322,17 @@
additionalInfo += ' So you need to cover your tomatoes!'; additionalInfo += ' So you need to cover your tomatoes!';
} }
document.getElementById("weatherInfo").innerText = additionalInfo; weatherInfo.innerText = additionalInfo;
} else { } else {
document.getElementById("weatherInfo").innerText = "Unable to fetch weather data."; weatherInfo.innerText = "Unable to fetch weather data.";
} }
} catch (error) { } catch (error) {
console.error("Error fetching weather data:", error); console.error("Error fetching weather data:", error);
document.getElementById("weatherInfo").innerText = "Error fetching weather data."; weatherInfo.innerText = "Error fetching weather data.";
} }
} }
</script> </script>
<script> <script>