try HTML approach

interfaces/cap_minor.py

@@ -72,8 +72,30 @@ def predict(text, model_id, tokenizer_id):
 
     probs = torch.nn.functional.softmax(logits, dim=1).cpu().numpy().flatten()
     output_pred = {f"[{'999' if str(CAP_MIN_NUM_DICT[i]) == '999' else str(CAP_MIN_NUM_DICT[i])[:-2]}]{convert_minor_to_major(CAP_MIN_NUM_DICT[i])} [{CAP_MIN_NUM_DICT[i]}]{CAP_MIN_LABEL_NAMES[CAP_MIN_NUM_DICT[i]]}": probs[i] for i in np.argsort(probs)[::-1]}
+
+
+    output_pred = dict(sorted(output_pred.items(), key=lambda item: item[1]))
+    first_n_items = take(5, output_pred.items())
+
+    html = ""
+    first = True
+    for label, prob in first_n_items.items():
+        bar_color = "#e0d890" if first else "#ccc"
+        text_color = "black"
+        bar_width = int(prob * 100)
+
+        html += f"""
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+            <span style="color: {text_color};">{label}</span>
+            <span style="color: {text_color};">{int(prob * 100)}%</span>
+        </div>
+        <div style="height: 4px; background-color: {bar_color}; width: {bar_width}%; margin-bottom: 8px;"></div>
+        """
+        first = False
+    
+    
     output_info = f'<p style="text-align: center; display: block">Prediction was made using the <a href="https://huggingface.co/{model_id}">{model_id}</a> model.</p>'
-    return output_pred, output_info
+    return html, output_info
 
 def predict_cap(text, language, domain):
     domain = domains[domain]
@@ -86,13 +108,10 @@ def predict_cap(text, language, domain):
         
     return predict(text, model_id, tokenizer_id)
 
-css = '''
-.info {text-align: center; font-size: 3em; !important}
-'''
 demo = gr.Interface(
     title="CAP Minor Topics Babel Demo",
     fn=predict_cap,
     inputs=[gr.Textbox(lines=6, label="Input"),
             gr.Dropdown(languages, label="Language"),
             gr.Dropdown(domains.keys(), label="Domain")],
-    outputs=[gr.Label(num_top_classes=5, label="Output", elem_classes="info"), gr.Markdown()])
+    outputs=[gr.HTML(label="Output"), gr.Markdown()])