Spaces:
Sleeping
Sleeping
| 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() |