tomaito_web/index.html

<head>
    <meta charset="UTF-8">
    <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: var(--font-family);
            margin: 0;
            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: var(--dark-color);
            color: var(--light-color) !important;
        }

        header {
            background-color: var(--primary-color);
            color: var(--light-color);
            text-align: center;
            padding: 20pt;
            padding-right: 10%;
            padding-left: 10%;
            font-size: 24px;
            width: 80%;
            position: relative;
            display: flex;
            justify-content: center;
        }

        header span {
            color: var(--secondary-color);
            font-weight: bold;
        }

        #darkModeToggle {
            width: 90px;
            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;
            padding: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }

        #darkModeToggle:hover {
            background-color: var(--secondary-color);
        }

        canvas {
            border: 1px solid var(--dark-color);
            max-height: 600px;
            display: block;
            margin: auto;
            margin-top: 20px;
            background-color: var(--light-color);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        #weatherInfo {
            max-width: 100%;
            margin: auto;
            margin-top: 20px;
            padding: 15px;
            background-color: var(--light-color);
            box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);
            border-radius: 5px;
            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: var(--light-color);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            color: var(--dark-color);
            transition: background-color 0.3s, color 0.3s;
        }

        body.dark-mode form {
            background-color: var(--dark-color);
            color: var(--light-color);
            
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-size: 18px;
        }

        input,
        select {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid var(--dark-color);
            border-radius: 4px;
            background-color: var(--light-color);
            transition: border-color 0.3s;
            font-weight: bold;
            font-size: 16px;
        }

        input[type="file"]:focus {
            outline: none;
            border-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
        }

        button {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 4px;
            background-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
            color: var(--light-color);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            font-weight: bold;
            font-size: 18px;
        }

        button:hover {
            background-color: var(--primary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */
            transform: scale(1.05);
        }

        #legend {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* Tło legenda z lekkim przezroczystością */
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#legend h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 5px;
}

.legend-label {
    font-weight: bold;
}

        /* 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
        <button id="darkModeToggle" onclick="toggleDarkMode()">Dark Mode</button>
    </header>

    <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="uploadInput">Choose an image:</label>
        <input id="uploadInput" type="file" required/>
        
        <button type="submit" id="checkRipenessBtn">Check the ripeness</button>
    </form>
    
    <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 file = fileInput.files[0];

            const data = new FormData();
            data.append("image_file", file);
            data.append("cropType", cropTypeInput.value);
            data.append("location", locationInput.value);

            const response = await fetch("/detect", {
                method: "post",
                body: data
            });

            const boxes = await response.json();
            draw_image_and_boxes(file, boxes);

            // Hide loading message and enable the button after canvas is loaded
            loadingMessage.style.display = "none";
            document.getElementById("checkRipenessBtn").disabled = false;

            // 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 = () => {
        // 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;
        ctx.drawImage(img, 0, 0);
        ctx.lineWidth = 5;
        ctx.font = "30px serif"; // Zwiększono rozmiar czcionki

        // Draw bounding boxes
        boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {
            const label = `${object_type}`;
            
            // Przypisz różne kolory do różnych klas
            let boxColor;
            switch (object_type) {
                case "b_fully_ripened":
                    boxColor = "#ff0000"; // Czerwony dla b_fully_ripened
                    break;
                case "b_half_ripened":
                    boxColor = "#00ff00"; // Zielony dla b_half_ripened
                    break;
                case "b_green":
                    boxColor = "#0000ff"; // Niebieski dla b_green
                    break;
                case "l_fully_ripened":
                    boxColor = "#ffcc00"; // Pomarańczowy dla l_fully_ripened
                    break;
                case "l_half_ripened":
                    boxColor = "#9900cc"; // Fioletowy dla l_half_ripened
                    break;
                case "l_green":
                    boxColor = "#ff9900"; // Pomarańczowy dla l_green
                    break;
                default:
                    boxColor = "#000000"; // Domyślny kolor dla nieznanych klas
                    break;
            }

            ctx.strokeStyle = boxColor;
            ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
            ctx.fillStyle = boxColor;
            const width = ctx.measureText(label).width;
            ctx.fillRect(x1, y1, width + 10, 25);
            ctx.fillStyle = "#000000";
            ctx.fillText(label, x1 + width + 15, y1 + 28); // Przesunięcie etykiety
        });

        // Draw legend
        drawLegend(ctx);
    }
}

function drawLegend(ctx) {
    const legendContainer = document.createElement("div");
    legendContainer.id = "legend";

    const legendTitle = document.createElement("h3");
    legendTitle.textContent = "Legend";

    legendContainer.appendChild(legendTitle);

    const legendItems = [
        { label: "b_fully_ripened", color: "#ff0000" },
        { label: "b_half_ripened", color: "#00ff00" },
        { label: "b_green", color: "#0000ff" },
        { label: "l_fully_ripened", color: "#ffcc00" },
        { label: "l_half_ripened", color: "#9900cc" },
        { label: "l_green", color: "#ff9900" },
    ];

    legendItems.forEach(item => {
        const legendItem = document.createElement("div");
        legendItem.classList.add("legend-item");

        const legendColor = document.createElement("div");
        legendColor.classList.add("legend-color");
        legendColor.style.backgroundColor = item.color;

        const legendLabel = document.createElement("div");
        legendLabel.classList.add("legend-label");
        legendLabel.textContent = item.label;

        legendItem.appendChild(legendColor);
        legendItem.appendChild(legendLabel);

        legendContainer.appendChild(legendItem);
    });

    document.body.appendChild(legendContainer);
}


        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();

                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!';
                    }

                    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.";
            }
        }


    </script>  
        <script>
            // Dark mode toggle functionality
            function toggleDarkMode() {
                const body = document.body;
                body.classList.toggle('dark-mode');
                
                // Change the text content of the toggle icon
                const toggleIcon = document.getElementById('darkModeToggle');
                toggleIcon.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';
            }
        </script>
</body>
</html>
Weather api added 2024-01-16 15:30:46 +01:00			`<head>`
			`<meta charset="UTF-8">`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dodałem ten tag, aby ustawić viewport strony -->`
Weather api added 2024-01-16 15:30:46 +01:00			`<title>TomAIto</title>`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">`
Weather api added 2024-01-16 15:30:46 +01:00			`<style>`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`/* 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;`
			`}`

modify index, add responsive features 2024-01-18 23:28:35 +01:00			`body {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`font-family: var(--font-family);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`margin: 0;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`padding: 20px;`
			`background-color: var(--light-color);`
			`color: var(--dark-color);`
			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`transition: background-color 0.3s, color 0.3s;`
			`}`

			`body.dark-mode {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--dark-color);`
			`color: var(--light-color) !important;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`

			`header {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--primary-color);`
			`color: var(--light-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`text-align: center;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`padding: 20pt;`
			`padding-right: 10%;`
			`padding-left: 10%;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`font-size: 24px;`
Add legend and box colors 2024-01-20 22:09:57 +01:00			`width: 80%;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`position: relative;`
Weather api added 2024-01-16 15:30:46 +01:00			`display: flex;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`justify-content: center;`
Weather api added 2024-01-16 15:30:46 +01:00			`}`

modify index, add responsive features 2024-01-18 23:28:35 +01:00			`header span {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`color: var(--secondary-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`font-weight: bold;`
			`}`

			`#darkModeToggle {`
			`width: 90px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`height: 45px;`
			`font-size: 18px;`
			`background-color: var(--secondary-color);`
			`color: var(--light-color);`
			`border: var(--light-color);`
			`border-radius: 10px;`
Weather api added 2024-01-16 15:30:46 +01:00			`display: flex;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`align-items: center;`
			`justify-content: space-between;`
			`padding: 5px;`
			`cursor: pointer;`
			`transition: background-color 0.3s;`
			`position: absolute;`
			`top: 50%;`
			`right: 20px;`
			`transform: translateY(-50%);`
			`}`

			`#darkModeToggle:hover {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--secondary-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`
Weather api added 2024-01-16 15:30:46 +01:00
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`canvas {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`border: 1px solid var(--dark-color);`
Add legend and box colors 2024-01-20 22:09:57 +01:00			`max-height: 600px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`display: block;`
			`margin: auto;`
			`margin-top: 20px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--light-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);`
			`border-radius: 5px;`
			`}`

			`#weatherInfo {`
			`max-width: 100%;`
			`margin: auto;`
			`margin-top: 20px;`
			`padding: 15px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--light-color);`
			`box-shadow: 0 0 10px rgba(52, 47, 47, 0.1);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`border-radius: 5px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`color: var(--dark-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`
Weather api added 2024-01-16 15:30:46 +01:00
			`form {`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`max-width: 600px;`
			`width: 100%;`
			`margin: auto;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`margin-top: 20px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`padding: 20px;`
Weather api added 2024-01-16 15:30:46 +01:00			`display: flex;`
			`flex-direction: column;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`align-items: center;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--light-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);`
			`border-radius: 5px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`color: var(--dark-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`transition: background-color 0.3s, color 0.3s;`
			`}`

			`body.dark-mode form {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--dark-color);`
			`color: var(--light-color);`

Weather api added 2024-01-16 15:30:46 +01:00			`}`

			`label {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`display: block;`
			`margin-bottom: 5px;`
			`font-size: 18px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`

			`input,`
			`select {`
			`width: 100%;`
			`box-sizing: border-box;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`margin-bottom: 20px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`padding: 10px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`border: 1px solid var(--dark-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`border-radius: 4px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--light-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`transition: border-color 0.3s;`
			`font-weight: bold;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`font-size: 16px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`

			`input[type="file"]:focus {`
			`outline: none;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`border-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */`
Weather api added 2024-01-16 15:30:46 +01:00			`}`

			`button {`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`width: 100%;`
			`padding: 15px;`
			`border: none;`
			`border-radius: 4px;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--secondary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */`
			`color: var(--light-color);`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`cursor: pointer;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`transition: background-color 0.3s, transform 0.3s;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`font-weight: bold;`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`font-size: 18px;`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`}`

			`button:hover {`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`background-color: var(--primary-color); /* użyłem zmiennej CSS zamiast koloru szesnastkowego */`
			`transform: scale(1.05);`
			`}`

Add legend and box colors 2024-01-20 22:09:57 +01:00			`#legend {`
			`position: absolute;`
			`top: 20px;`
			`left: 20px;`
			`background-color: rgba(255, 255, 255, 0.8); /* Tło legenda z lekkim przezroczystością */`
			`padding: 10px;`
			`border-radius: 5px;`
			`font-size: 16px;`
			`box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);`
			`}`

			`#legend h3 {`
			`margin-bottom: 10px;`
			`font-size: 18px;`
			`}`

			`.legend-item {`
			`display: flex;`
			`align-items: center;`
			`margin-bottom: 5px;`
			`}`

			`.legend-color {`
			`width: 20px;`
			`height: 20px;`
			`margin-right: 10px;`
			`border-radius: 5px;`
			`}`

			`.legend-label {`
			`font-weight: bold;`
			`}`

remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`/* 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;`
			`}`
Weather api added 2024-01-16 15:30:46 +01:00			`}`
			`</style>`
			`</head>`
			`<body>`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`<header>`
			`Tom<span style="color: #ff6600;">AI</span>to`
			`<button id="darkModeToggle" onclick="toggleDarkMode()">Dark Mode</button>`
			`</header>`

Weather api added 2024-01-16 15:30:46 +01:00			`<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="uploadInput">Choose an image:</label>`
			`<input id="uploadInput" type="file" required/>`

remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`<button type="submit" id="checkRipenessBtn">Check the ripeness</button>`
Weather api added 2024-01-16 15:30:46 +01:00			`</form>`

remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`<div id="loadingMessage" style="display: none;">Loading...</div>`

			`<canvas style="display: none; max-width: 100%;"></canvas>`

			`<div id="weatherInfo" style="display: none;"></div>`

Weather api added 2024-01-16 15:30:46 +01:00			`<script>`
			`const form = document.getElementById("uploadForm");`
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`const loadingMessage = document.getElementById("loadingMessage");`
			`const weatherInfo = document.getElementById("weatherInfo");`
			`const canvas = document.querySelector("canvas");`
Weather api added 2024-01-16 15:30:46 +01:00
			`form.addEventListener("submit", async (event) => {`
			`event.preventDefault();`

remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`// 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;`

Weather api added 2024-01-16 15:30:46 +01:00			`const fileInput = document.getElementById("uploadInput");`
			`const cropTypeInput = document.getElementById("cropType");`
			`const locationInput = document.getElementById("location");`

			`const file = fileInput.files[0];`

			`const data = new FormData();`
			`data.append("image_file", file);`
			`data.append("cropType", cropTypeInput.value);`
			`data.append("location", locationInput.value);`

			`const response = await fetch("/detect", {`
			`method: "post",`
			`body: data`
			`});`

			`const boxes = await response.json();`
			`draw_image_and_boxes(file, boxes);`

remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`// Hide loading message and enable the button after canvas is loaded`
			`loadingMessage.style.display = "none";`
			`document.getElementById("checkRipenessBtn").disabled = false;`
Crop type affects the output 2024-01-16 16:02:04 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`// Update weather info text`
			`updateWeatherInfo(locationInput.value, cropTypeInput.value);`
Weather api added 2024-01-16 15:30:46 +01:00			`});`

			`function draw_image_and_boxes(file, boxes) {`
Add legend and box colors 2024-01-20 22:09:57 +01:00			`const img = new Image()`
			`img.src = URL.createObjectURL(file);`
			`img.onload = () => {`
			`// 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;`
			`ctx.drawImage(img, 0, 0);`
			`ctx.lineWidth = 5;`
			`ctx.font = "30px serif"; // Zwiększono rozmiar czcionki`

			`// Draw bounding boxes`
			`boxes.forEach(([x1, y1, x2, y2, object_type, prob]) => {`
			const label = `${object_type}`;

			`// Przypisz różne kolory do różnych klas`
			`let boxColor;`
			`switch (object_type) {`
			`case "b_fully_ripened":`
			`boxColor = "#ff0000"; // Czerwony dla b_fully_ripened`
			`break;`
			`case "b_half_ripened":`
			`boxColor = "#00ff00"; // Zielony dla b_half_ripened`
			`break;`
			`case "b_green":`
			`boxColor = "#0000ff"; // Niebieski dla b_green`
			`break;`
			`case "l_fully_ripened":`
			`boxColor = "#ffcc00"; // Pomarańczowy dla l_fully_ripened`
			`break;`
			`case "l_half_ripened":`
			`boxColor = "#9900cc"; // Fioletowy dla l_half_ripened`
			`break;`
			`case "l_green":`
			`boxColor = "#ff9900"; // Pomarańczowy dla l_green`
			`break;`
			`default:`
			`boxColor = "#000000"; // Domyślny kolor dla nieznanych klas`
			`break;`
Weather api added 2024-01-16 15:30:46 +01:00			`}`
Add legend and box colors 2024-01-20 22:09:57 +01:00
			`ctx.strokeStyle = boxColor;`
			`ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);`
			`ctx.fillStyle = boxColor;`
			`const width = ctx.measureText(label).width;`
			`ctx.fillRect(x1, y1, width + 10, 25);`
			`ctx.fillStyle = "#000000";`
			`ctx.fillText(label, x1 + width + 15, y1 + 28); // Przesunięcie etykiety`
			`});`

			`// Draw legend`
			`drawLegend(ctx);`
			`}`
			`}`

			`function drawLegend(ctx) {`
			`const legendContainer = document.createElement("div");`
			`legendContainer.id = "legend";`

			`const legendTitle = document.createElement("h3");`
			`legendTitle.textContent = "Legend";`

			`legendContainer.appendChild(legendTitle);`

			`const legendItems = [`
			`{ label: "b_fully_ripened", color: "#ff0000" },`
			`{ label: "b_half_ripened", color: "#00ff00" },`
			`{ label: "b_green", color: "#0000ff" },`
			`{ label: "l_fully_ripened", color: "#ffcc00" },`
			`{ label: "l_half_ripened", color: "#9900cc" },`
			`{ label: "l_green", color: "#ff9900" },`
			`];`

			`legendItems.forEach(item => {`
			`const legendItem = document.createElement("div");`
			`legendItem.classList.add("legend-item");`

			`const legendColor = document.createElement("div");`
			`legendColor.classList.add("legend-color");`
			`legendColor.style.backgroundColor = item.color;`

			`const legendLabel = document.createElement("div");`
			`legendLabel.classList.add("legend-label");`
			`legendLabel.textContent = item.label;`

			`legendItem.appendChild(legendColor);`
			`legendItem.appendChild(legendLabel);`

			`legendContainer.appendChild(legendItem);`
			`});`

			`document.body.appendChild(legendContainer);`
			`}`

Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`async function updateWeatherInfo(location, cropType) {`
			`const apiKey = "1fc6a52c96331d035a828cc0c1606241";`
			const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`;
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`try {`
			`const weatherResponse = await fetch(apiUrl);`
			`const weatherData = await weatherResponse.json();`
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`if (weatherData.main && weatherData.main.temp) {`
			`const temperatureKelvin = weatherData.main.temp;`
			`const temperatureCelsius = temperatureKelvin - 273.15;`
			`const tempRound = Math.round(temperatureCelsius);`
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`const weatherCondition = weatherData.weather[0].main;`
			`const isRaining = weatherCondition === 'Rain';`
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			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.`;
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`if (tempRound < 15) {`
			`additionalInfo += ' So you need to cover your tomatoes!';`
			`}`

			`weatherInfo.innerText = additionalInfo;`
			`} else {`
			`weatherInfo.innerText = "Unable to fetch weather data.";`
			`}`
Weather api added 2024-01-16 15:30:46 +01:00
remove variety, adjust buttons 2024-01-19 12:16:55 +01:00			`} catch (error) {`
			`console.error("Error fetching weather data:", error);`
			`weatherInfo.innerText = "Error fetching weather data.";`
			`}`
Weather api added 2024-01-16 15:30:46 +01:00			`}`


			`</script>`
modify index, add responsive features 2024-01-18 23:28:35 +01:00			`<script>`
			`// Dark mode toggle functionality`
			`function toggleDarkMode() {`
			`const body = document.body;`
			`body.classList.toggle('dark-mode');`

			`// Change the text content of the toggle icon`
			`const toggleIcon = document.getElementById('darkModeToggle');`
			`toggleIcon.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';`
			`}`
			`</script>`
Weather api added 2024-01-16 15:30:46 +01:00			`</body>`
initial commit 2023-12-28 22:09:32 +01:00			`</html>`