update evaluation plot

app.py

@@ -4,6 +4,7 @@ import torch.nn as nn
 import torchaudio
 import numpy as np  # type: ignore
 import gradio as gr  # type: ignore
+import pandas as pd
 from transformers import pipeline
 from huggingface_hub import hf_hub_download
 from torchaudio.models import Conformer
@@ -220,37 +221,50 @@ with gr.Blocks() as tab_architecture:
             gr.Image("conformer.png", show_label=False, show_download_button=False)
 
 
+import gradio as gr
+import pandas as pd
+
+data_wer = {
+    "Model": ["Whisper", "Conformer"],
+    "WER": [11, 50],
+}
+
+data_cer = {
+    "Model": ["Whisper", "Conformer"],
+    'CER': [0, 20]
+}
+
+df_WER = pd.DataFrame(data_wer)
+df_CER = pd.DataFrame(data_cer)
+
 # --- Tab 4: Tabel Hasil Evaluasi ---
 with gr.Blocks() as tab_results:
-    gr.HTML("""
-    <h1 style='text-align:center;'>📊 Hasil Evaluasi Model</h1>
-    <table style="width:80%; margin:20px auto; border-collapse:separate; border-spacing:0; font-family:sans-serif;">
-        <thead style="background-color:#eb7434; color:white;">
-            <tr>
-                <th style="padding:15px 20px; text-align:center;">Dataset</th>
-                <th style="padding:15px 20px; text-align:center;">WER (Word Error Rate)</th>
-                <th style="padding:15px 20px; text-align:center;">CER (Character Error Rate)</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td style="padding:15px 20px; text-align:center;">SLR35 (Javanese)</td>
-                <td style="padding:15px 20px; text-align:center;">15.2%</td>
-                <td style="padding:15px 20px; text-align:center;">9.8%</td>
-            </tr>
-            <tr>
-                <td style="padding:15px 20px; text-align:center;">SLR41 (Indonesian)</td>
-                <td style="padding:15px 20px; text-align:center;">12.4%</td>
-                <td style="padding:15px 20px; text-align:center;">8.1%</td>
-            </tr>
-            <tr>
-                <td style="padding:15px 20px; text-align:center;">SLR44 (Multilingual)</td>
-                <td style="padding:15px 20px; text-align:center;">17.3%</td>
-                <td style="padding:15px 20px; text-align:center;">11.0%</td>
-            </tr>
-        </tbody>
-    </table>
-    """)
+    gr.Markdown("## 📊 Best Error Rate (WER / CER)")
+    with gr.Row():
+        gr.BarPlot(
+            df_WER,
+            x="Model",
+            y="WER",
+            title="Best WER by Model",
+            tooltip=["Model", "WER"],
+            y_lim=(0, 100),
+            container=False,
+            height=400,
+            width=300
+        )
+
+        gr.BarPlot(
+            df_CER,
+            x="Model",
+            y="CER",
+            title="Best CER by Model",
+            tooltip=["Model", "CER"],
+            y_lim=(0, 100),
+            container=False,
+            height=400,
+            width=300
+        )
+
 
 # --- Tab 5: Fine-tuning Info ---
 with gr.Blocks() as tab_authors: