fix issues

app.py

@@ -47,11 +47,25 @@ def predict_image(image: Image.Image):
         pred_class = class_names[pred_class_idx]
         confidence = float(preds[pred_class_idx])
 
-        # Format per-class probabilities
-        prob_text = "\n".join([f"{class_names[i]}: {float(preds[i]):.2f}" for i in range(len(class_names))])
+        # Create HTML for per-class probabilities with progress bars
+        prob_html = ""
+        for i in range(len(class_names)):
+            class_name = class_names[i]
+            prob = float(preds[i])
+            prob_html += f'<div style="display: flex; align-items: center; margin-bottom: 10px;">'
+            prob_html += f'<span style="width: 100px; font-weight: bold;">{class_name}: {prob:.2f}</span>'
+            prob_html += f'<progress value="{prob}" max="1" style="width: 200px; margin-left: 10px; height: 20px;"></progress>'
+            prob_html += f'</div>'
 
-        # Return formatted output with titles
-        output = f"### Prediction Class: {pred_class}\n### Confidence: {confidence:.2f}\n### Per-class probabilities\n{prob_text}"
+        # Return formatted HTML output with titles
+        output = f"""
+        <div style="font-family: Arial, sans-serif;">
+            <h3>Prediction Class: {pred_class}</h3>
+            <h3>Confidence: {confidence:.2f}</h3>
+            <h3>Per-class probabilities</h3>
+            {prob_html}
+        </div>
+        """
         return output
     except Exception as e:
         logger.error(f"Error during prediction: {str(e)}")
@@ -59,11 +73,11 @@ def predict_image(image: Image.Image):
 
 # Create Gradio interface with custom CSS
 logger.info("Initializing Gradio interface")
-with gr.Blocks(css=".large-output { height: 200px !important; overflow: visible !important; }") as iface:
+with gr.Blocks(css=".large-output { height: 400px !important; overflow: visible !important; }") as iface:
     gr.Markdown("# ♻️ Garbage Classification Application")
     gr.Markdown("Upload an image of garbage (plastic, organic, or metal):")
     img_input = gr.Image(type="pil")
-    output = gr.Markdown(label="Prediction Result", elem_classes="large-output")
+    output = gr.HTML(label="Prediction Result", elem_classes="large-output")
     gr.Button("Classify").click(
         fn=predict_image,
         inputs=img_input,