Add enhanced Gradio UI with tabs, table view and model details formatting

main.py

@@ -103,17 +103,79 @@ async def init_models():
         # For now, let's log and continue, Gradio will show an empty list
         pass
 
-# Définir la fonction pour Gradio qui récupère les modèles chargés
+# Définir les fonctions pour Gradio qui récupèrent les modèles chargés
 def get_loaded_models_list():
     """Retourne la liste des métadonnées des modèles actuellement chargés."""
     # Extraire les métadonnées de chaque entrée dans model_pipelines
     return [item['metadata'] for item in model_pipelines.values()]
 
+def format_model_info(metadata_list):
+    """Formate les informations des modèles pour un affichage plus convivial."""
+    if not metadata_list:
+        return "Aucun modèle chargé actuellement."
+    
+    # Créer une version formatée des informations des modèles
+    formatted_info = ""
+    for i, model in enumerate(metadata_list):
+        formatted_info += f"### Modèle {i+1}\n"
+        formatted_info += f"**ID:** {model.get('model_id', 'N/A')}\n"
+        formatted_info += f"**Fichier:** {model.get('hf_filename', 'N/A')}\n"
+        formatted_info += f"**Dernière mise à jour:** {model.get('updated_at', 'N/A')}\n\n"
+    
+    return formatted_info
+
 # Créer l'interface Gradio
-gradio_app = gr.Blocks(title="Tamis AI - Modèles Chargés")
+gradio_app = gr.Blocks(title="Tamis AI - Modèles Chargés", theme=gr.themes.Soft())
 with gradio_app:
+    gr.Markdown("# 🤖 Tamis AI - Interface d'administration")
     gr.Markdown("## Modèles actuellement chargés dans l'API")
-    gr.JSON(get_loaded_models_list, label="Modèles Chargés")
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            # Visualisation des modèles avec des cartes
+            with gr.Tab("Vue détaillée"):
+                markdown_output = gr.Markdown(value="Chargement des modèles...", elem_id="model_details")
+            
+            # Affichage en tableau
+            with gr.Tab("Vue tableau"):
+                model_table = gr.Dataframe(
+                    headers=["ID", "Fichier", "Dernière mise à jour"],
+                    datatype=["str", "str", "str"],
+                    elem_id="model_table"
+                )
+                
+            # Vue JSON (pour référence)
+            with gr.Tab("Vue JSON (debug)"):
+                json_output = gr.JSON(label="Données brutes")
+        
+        with gr.Column(scale=1):
+            refresh_btn = gr.Button("Rafraîchir", variant="primary")
+            status = gr.Textbox(label="Statut", value="Prêt", interactive=False)
+    
+    # Fonction pour mettre à jour tous les composants d'affichage
+    def update_all_displays():
+        models = get_loaded_models_list()
+        formatted_text = format_model_info(models)
+        
+        # Préparer les données pour le tableau
+        table_data = []
+        for model in models:
+            table_data.append([
+                model.get('model_id', 'N/A'),
+                model.get('hf_filename', 'N/A'),
+                model.get('updated_at', 'N/A')
+            ])
+        
+        return formatted_text, table_data, models, "Modèles mis à jour"
+    
+    # Connecter les événements
+    refresh_btn.click(
+        fn=update_all_displays,
+        outputs=[markdown_output, model_table, json_output, status]
+    )
+    
+    # Initialiser les affichages au chargement
+    gradio_app.load(fn=update_all_displays, outputs=[markdown_output, model_table, json_output, status])
 
 # Monter l'application Gradio à la racine dans FastAPI
 app = mount_gradio_app(