Update app.py

app.py

@@ -59,10 +59,11 @@ def visualize(image, det_res, fer_res):
 
 def summarize_emotions(fer_res):
     """
-    Maakt een HTML-tekst met een grote, vetgedrukte samenvatting (NL) in groen.
+    Maakt een Markdown-tekst met een grote, vetgedrukte samenvatting (NL).
+    Bij meerdere gezichten wordt de meest voorkomende emotie uitgelicht.
     """
     if not fer_res:
-        return '<div style="color: green;">## <b>Geen gezicht gedetecteerd</b></div>'
+        return "## **Geen gezicht gedetecteerd**"
 
     names_en = [FacialExpressionRecog.getDesc(x) for x in fer_res]
     names_nl = [to_dutch(n) for n in names_en]
@@ -70,12 +71,8 @@ def summarize_emotions(fer_res):
     top, top_n = counts[0]
     details = ", ".join([f"{name} ({n})" for name, n in counts])
 
-    return f'''
-    <div style="color: green;">
-        <h1><b>{top}</b></h1>
-        <p><i>Gedetecteerde emoties: {details}</i></p>
-    </div>
-    '''
+    # Grote headline + toelichting (kleur regelen we via CSS)
+    return f"# **{top}**\n\n_Gedetecteerde emoties: {details}_"
 
 def detect_expression(input_image):
     image = cv.cvtColor(input_image, cv.COLOR_RGB2BGR)
@@ -112,9 +109,10 @@ example_list = [[p] for p in example_paths]
 CACHE_EXAMPLES = bool(example_list)
 # =============================================================
 
-# Gradio Interface (NL)
+# Gradio Interface (NL) + groene kleur voor de emotietekst
 custom_css = """
 .example * { font-style: italic; font-size: 18px !important; color: #0ea5e9 !important; }
+#emotie-uitslag { color: #16a34a; }  /* GROEN */
 #emotie-uitslag h1, #emotie-uitslag h2, #emotie-uitslag h3 { margin: 0.25rem 0; }
 """
 
@@ -129,17 +127,19 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
                 submit_btn = gr.Button("Verstuur", variant="primary")
                 clear_btn = gr.Button("Wissen")
         with gr.Column(scale=1):
+            # Eerst de afbeelding, daaronder de (groene) emotie-uitslag
             output_image = gr.Image(type="numpy", label="Resultaat gezichtsuitdrukking")
             emotion_md = gr.Markdown(
                 value="## **Nog geen resultaat**",
-                elem_id="emotie-uitslag",
-                unsafe_allow_html=True
+                elem_id="emotie-uitslag"
             )
 
+    # Output(s) leegmaken bij nieuwe upload
     def _clear_output_on_new_image():
         return None, "## **Nog geen resultaat**"
     input_image.change(fn=_clear_output_on_new_image, outputs=[output_image, emotion_md])
 
+    # Knop-actie(s)
     submit_btn.click(fn=detect_expression, inputs=input_image, outputs=[output_image, emotion_md])
     clear_btn.click(fn=lambda: (None, None, "## **Nog geen resultaat**"),
                     outputs=[input_image, output_image, emotion_md])