import gradio as gr
from vectorDB import vectordbText
from retriever import retriverText
from fileingestor import fileingestorText
from generator import generatorText
from orchestrator import orchestratorText
# Define the HTML template for embedding an external Hugging Face Space
# Replace <space-url> with your actual Space URLs (e.g., "https://hf.co/spaces/user/app-name")
def embed_space(space_url: str, height: int = 800) -> gr.HTML:
    """Creates a Gradio HTML component to embed an external HF Space via iframe."""
    iframe_html = f"""
    <iframe
        src="{space_url}?view=inline"
        width="100%"
        height="{height}px"
        allow="microphone; camera; clipboard-read; clipboard-write;"
        frameborder="0"
    ></iframe>
    """
    return gr.HTML(iframe_html)

# --- Define the Layout ---
with gr.Blocks(theme=gr.themes.Monochrome(), fill_width = True) as dashboard_app:
    gr.Markdown(
        """
        # 🚀 ChaBo: Modular chatbot framework 
        Discover the essential microservices hub designed for the modular development and efficient deployment of Retrieval-Augmented Generation (RAG) chatbots
        """
    )
    
    with gr.Tabs():
        
        # 1. About us 
        # This is info page
        with gr.Tab("About ChaBo"):
            with gr.Row(elem_classes = "centered-content-row"):
                gr.Markdown("""## ChaBo: A modular chatbot framework 
                This framework is designed around a microservices architecture \
                allowing different conversational components (like Vector database, Retrieval, Generator and other components)\
                to be developed, deployed, and scaled independently. \
                This design promotes flexibility and robust, complex chatbot development \
                by enabling developers to easily swap out or upgrade individual services.         

                **Note**: As of now this is more adapted towards delpoyment of these services \
                    individually as individual spaces on HF infra, soon we will be releasing \
                    the docker-compose method for dedicated deployment             
                """)
  
        # 2. Vector DB
        with gr.Tab("Vector Database: Qdrant"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("### What is a Vector Database?")
                    gr.Markdown("""
                    A Vector Database is a specialized database designed to efficiently store, manage, \
                    and retrieve **vector embeddings**—high-dimensional numerical representations of \
                    unstructured data like text, images, or audio.It is the cornerstone of modern AI \ 
                    applications like semantic search and Retrieval-Augmented Generation (RAG). \
                    Unlike traditional databases, a vector database excels at **Nearest Neighbor Search (NNS)**, \
                    allowing it to quickly find semantically similar data points, which is essential for \
                    grounding large language models with external knowledge.
                    """)
                    gr.Markdown(vectordbText)
                    gr.Image(
                        value="qdrant.png", # <- Change this file path
                        label="Qdrant Dashboard",             
                        show_label=True,
                        container=False,)
        
            
        # 3. Retriever and Reranker (Embedded via iframe)
        with gr.Tab("Retriever and Reranker"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("### What is Retriever ?")
                    gr.Markdown("""It is the crucial process of efficiently finding and extracting relevant \
                        information from a vast knowledge base to ground and inform the chatbot's final answer.""")
                    gr.Markdown(retriverText)
                    embed_space("https://giz-chatfed-retriever0-3.hf.space", height=700)
        
        # 4. File Ingestor (Embedding via iframe)
        with gr.Tab("File Ingestor"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("### What is File Ingestor")
                    gr.Markdown("""In certain chatbot use-cases it might be that user input can be a file upload,\
                        on top of existing Vector Database. In this case it's important that we ingest this \
                        file and use it for next for  relevant use """)
                    gr.Markdown(fileingestorText)
                    embed_space("https://giz-eudr-chabo-ingestor.hf.space", height=700)
        
        # 5. Generator
        with gr.Tab("Generator"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("### What is Generator?")
                    gr.Markdown("""Drawing upon the relevant context provided by the retrieval \
                        the Generator is the module responsible for producing the final, coherent, and natural-sounding \
                        text response that directly addresses the user's query.""")
                    gr.Markdown(generatorText)
        
        # 6. Orchestrator (Embedding via iframe)
        with gr.Tab("Orchestrator"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("### What is Orchestrator ?")
                    gr.Markdown(""" The Orchestrator is the central command module, defining the exact \
                        steps and flow of data: it sequences the initial user prompt, directs the query \
                        to the correct vector retrieval module, manages the document reranking (if applicable),\
                        and finally routes the retrieved context and original prompt to the Generator module \
                        for final answer generation. """)
                    embed_space("https://giz-eudr-chabo-orchestrator.hf.space/gradio/")
                    gr.Markdown(orchestratorText)  

        # 7. HuggingFace Chat UI (Embedding via iframe)
        with gr.Tab("HuggingFace Chat UI"):
            with gr.Row(elem_classes = "centered-content-row"):
                with gr.Column(scale=1):
                    gr.Markdown("## What is HuggingFace Chat UI ?")
                    gr.Markdown("""The Hugging Face Chat UI is a streamlined, open-source web interface \
                        specifically designed for building and deploying conversational AI applications. \
                        It offers a powerful, ready-to-use frontend for RAG pipelines and LLMs, \
                        enabling rapid prototyping and deployment on platforms like Hugging Face Spaces""")
                    embed_space("https://giz-asistente-eudr.hf.space", height=700) 
       

dashboard_app.css = """
        .centered-content-row {
            max-width: 1000px; /* Adjust this value for your desired max width */
            margin: 0 auto;    /* Centers the container horizontally */
        }
        """
# Launch the app
dashboard_app.launch()