Chat_bot_Rag/components/ui.py

import gradio as gr
from config.settings import DEFAULT_MODEL, QDRANT_COLLECTION_NAME, AVAILABLE_MODELS
from translations.lang_mappings import UI_TRANSLATIONS, UI_SUPPORTED_LANGUAGES
from utils.katex_script import KATEX_CSS_JS

def update_ui_language_elements(language):
    """Met à jour les éléments de l'interface utilisateur en fonction de la langue sélectionnée"""
    pass  # Implémentez selon vos besoins

def build_interface(
    process_query_fn, 
    reset_conversation_fn, 
    change_model_fn, 
    change_collection_fn,
    update_ui_language_fn
):
    """Construit l'interface utilisateur avec Gradio."""
    with gr.Blocks(css=KATEX_CSS_JS, theme=gr.themes.Soft(primary_hue="blue")) as interface:
        gr.Markdown("# 📚 Assistant documentaire intelligent")
        
        with gr.Row():
            with gr.Column(scale=2):
                # Chatbot principal
                chat_interface = gr.Chatbot(
                    height=600,
                    show_label=False,
                    layout="bubble",
                    elem_id="chatbot"
                )
                
                with gr.Row():
                    msg = gr.Textbox(
                        show_label=False,
                        placeholder="Posez votre question...",
                        container=False,
                        scale=4
                    )
                    submit_btn = gr.Button("Envoyer", variant="primary", scale=1)
                
                clear_btn = gr.Button("Effacer la conversation")
                source_info = gr.Markdown("", elem_id="sources_info")
                
            with gr.Column(scale=1):
                with gr.Accordion("Options", open=True):
                    # Sélecteur de modèle
                    model_selector = gr.Dropdown(
                        choices=AVAILABLE_MODELS,
                        value=DEFAULT_MODEL,
                        label="Modèle Ollama",
                        info="Choisir le modèle de language à utiliser"
                    )
                    model_status = gr.Markdown(f"Modèle actuel: **{DEFAULT_MODEL}**")
                    
                    # Sélecteur de langue
                    language_selector = gr.Dropdown(
                        choices=UI_SUPPORTED_LANGUAGES,
                        value=UI_SUPPORTED_LANGUAGES[0],
                        label="Langue des réponses",
                        info="Choisir la langue dans laquelle l'assistant répondra"
                    )
                    
                    # Sélecteur de collection Qdrant
                    collection_name_input = gr.Textbox(
                        value=QDRANT_COLLECTION_NAME,
                        label="Collection Qdrant",
                        info="Nom de la collection de documents à utiliser"
                    )
                    collection_status = gr.Markdown(f"Collection actuelle: **{QDRANT_COLLECTION_NAME}**")
                    
                    # Bouton d'application de la collection
                    apply_collection_btn = gr.Button("Appliquer la collection")
                    
                    streaming = gr.Checkbox(
                        label="Mode streaming", 
                        value=True,
                        info="Voir les réponses s'afficher progressivement"
                    )
                    show_sources = gr.Checkbox(label="Afficher les sources", value=True)
                    max_images = gr.Slider(
                        minimum=1,
                        maximum=10,
                        value=3,
                        step=1,
                        label="Nombre max d'images"
                    )
                
                gr.Markdown("---")
                
                gr.Markdown("### 🖼️ Images pertinentes")
                image_gallery = gr.Gallery(
                    label="Images pertinentes", 
                    show_label=False,
                    columns=2,
                    height=300,
                    object_fit="contain"
                )
                
                gr.Markdown("### 📊 Tableaux")
                tables_display = gr.HTML()
        
        # Connecter le changement de modèle
        model_selector.change(
            fn=change_model_fn,
            inputs=model_selector,
            outputs=model_status
        )
        
        # Connecter le changement de collection
        apply_collection_btn.click(
            fn=change_collection_fn,
            inputs=collection_name_input,
            outputs=collection_status
        )
        
        # Fonction pour effacer l'entrée
        def clear_input():
            return ""
        
        # Configuration des actions principales
        msg.submit(
            process_query_fn,
            inputs=[msg, chat_interface, streaming, show_sources, max_images, language_selector],
            outputs=[chat_interface, source_info, image_gallery, tables_display]
        ).then(clear_input, None, msg)
        
        submit_btn.click(
            process_query_fn,
            inputs=[msg, chat_interface, streaming, show_sources, max_images, language_selector],
            outputs=[chat_interface, source_info, image_gallery, tables_display]
        ).then(clear_input, None, msg)
        
        clear_btn.click(
            reset_conversation_fn,
            outputs=[chat_interface, source_info, image_gallery, tables_display]
        )
        
        # Style KaTeX et amélioration du design
        gr.Markdown("""
        <style>
        .gradio-container {max-width: 1200px !important}
        #chatbot {height: 600px; overflow-y: auto;}
        #sources_info {margin-top: 10px; color: #666;}
        
        /* Improved styles for equations */
        .katex { font-size: 1.1em !important; }
        .math-inline { background: #f8f9fa; padding: 2px 5px; border-radius: 4px; }
        .math-display { background: #f8f9f9; margin: 10px 0; padding: 10px; border-radius: 5px; overflow-x: auto; text-align: center; }
        
        /* Table styles */
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 15px 0;
            font-size: 0.9em;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .table-container {
            overflow-x: auto;
            margin-top: 10px;
        }
        </style>
        
        <!-- Loading KaTeX -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
        <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"></script>
        
        <script>
        // Script pour rendre les équations mathématiques avec KaTeX
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                if (window.renderMathInElement) {
                    renderMathInElement(document.body, {
                        delimiters: [
                            {left: '$$', right: '$$', display: true},
                            {left: '$', right: '$', display: false}
                        ],
                        throwOnError: false
                    });
                }
            }, 1000);
        });
        </script>
        """)
        
    return interface