Update app.py

app.py

@@ -173,10 +173,48 @@ else:
 example_list = [[p] for p in example_paths]
 CACHE_EXAMPLES = bool(example_list)
 
-# CSS (groene emotietekst)
+# Uitlegblok (HTML) – netjes opgemaakt
+INFO_HTML = """
+<div>
+  <h3>Hoe werkt deze gezichtsuitdrukking-herkenner?</h3>
+  <p>Dit model kan automatisch acht emoties herkennen in een foto van een gezicht:</p>
+  <ul>
+    <li>neutraal</li>
+    <li>blij</li>
+    <li>verdrietig</li>
+    <li>verrast</li>
+    <li>boos</li>
+    <li>walging</li>
+    <li>angstig</li>
+    <li>minachting</li>
+  </ul>
+  <p>Je kunt hierboven een eigen foto uploaden of een voorbeeld aanklikken. Het systeem doorloopt twee stappen:</p>
+  <ol>
+    <li><b>Gezichtsdetectie</b> – met <i>YuNet</i> wordt het gezicht in de afbeelding gelokaliseerd.</li>
+    <li><b>Emotieherkenning</b> – het gevonden gezicht wordt door <i>MobileFaceNet</i> geanalyseerd om de meest waarschijnlijke emotie te voorspellen.</li>
+  </ol>
+  <p>Deze modellen zijn getraind met <b>machine learning</b>. Voor dit type taak <b>is supervised training gebruikt</b>:
+  er is gewerkt met een grote dataset van gezichten waarbij elke foto een label (zoals “blij” of “boos”) heeft. Tijdens het trainen leert het model welke combinaties van gezichtskenmerken bij welke emotie horen.</p>
+  <p>Door heel veel voorbeelden te zien, kan het model ook bij nieuwe foto’s een inschatting maken. Het kijkt niet naar één detail, maar naar patronen in het hele gezicht.</p>
+</div>
+"""
+
+# CSS (groene emotietekst + uitlegblok styling)
 custom_css = """
 #emotie-uitslag { color: #16a34a; }
 #emotie-uitslag h1, #emotie-uitslag h2, #emotie-uitslag h3 { margin: 0.25rem 0; }
+
+/* Uitlegblok onder de mugshots */
+#uitleg-blok {
+  background: #f3f4f6;        /* lichtgrijs */
+  border: 1px solid #e5e7eb;  /* subtiele rand */
+  border-radius: 10px;
+  padding: 12px 14px;
+}
+#uitleg-blok h3 { margin: 6px 0 8px 0; }
+#uitleg-blok p  { margin: 6px 0; }
+#uitleg-blok ul { margin: 6px 0 6px 18px; }
+#uitleg-blok ol { margin: 6px 0 6px 18px; }
 """
 
 with gr.Blocks(css=custom_css) as demo:
@@ -194,11 +232,11 @@ with gr.Blocks(css=custom_css) as demo:
             output_image = gr.Image(type="numpy", label="Resultaat gezichtsuitdrukking")
             emotion_md = gr.Markdown("## **Nog geen resultaat**", elem_id="emotie-uitslag")
 
-    # Rij 2: Links mugshots (Examples), Rechts statistieken
+    # Rij 2: Links mugshots (Examples + uitleg), Rechts statistieken
     with gr.Row():
         with gr.Column():
             gr.Markdown("**Voorbeelden (klik om te testen):**")
-            examples_component = gr.Examples(
+            gr.Examples(
                 examples=example_list,
                 inputs=input_image,
                 outputs=[output_image, emotion_md],   # <- 2 outputs
@@ -206,6 +244,9 @@ with gr.Blocks(css=custom_css) as demo:
                 examples_per_page=20,
                 cache_examples=CACHE_EXAMPLES
             )
+            # Uitlegblok onder de mugshots
+            gr.HTML(INFO_HTML, elem_id="uitleg-blok")
+
         with gr.Column():
             stats_image = gr.Image(
                 label="Statistieken",