Add legend and box colors

index.html

@@ -38,7 +38,7 @@
             padding-right: 10%;
             padding-left: 10%;
             font-size: 24px;
-            width: 100%;
+            width: 80%;
             position: relative;
             display: flex;
             justify-content: center;
@@ -75,7 +75,7 @@
 
         canvas {
             border: 1px solid var(--dark-color);
-            max-width: 100%;
+            max-height: 600px;
             display: block;
             margin: auto;
             margin-top: 20px;
@@ -160,6 +160,39 @@
             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) {
             
@@ -282,23 +315,93 @@
         canvas.width = img.width;
         canvas.height = img.height;
         ctx.drawImage(img, 0, 0);
-                ctx.strokeStyle = "#00FF00";
         ctx.lineWidth = 5;
-                ctx.font = "20px serif";
+        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 = "#00ff00";
+            ctx.fillStyle = boxColor;
             const width = ctx.measureText(label).width;
             ctx.fillRect(x1, y1, width + 10, 25);
             ctx.fillStyle = "#000000";
-                    ctx.fillText(label, x1, y1 + 18);
+            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}`;

object_detector.py

@@ -172,6 +172,5 @@ def adjust_boxes_for_orientation(boxes, orientation, img_width, img_height):
             x1, y1, x2, y2, result.names[class_id], prob
         ])
     return output
-
  """
 serve(app, host='0.0.0.0', port=8080)