Spaces:
Sleeping
Sleeping
File size: 7,373 Bytes
b9ffe28 3f62146 b9ffe28 3f62146 b9ffe28 3f62146 b9ffe28 3f62146 b9ffe28 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 3f62146 944aab6 f4a4255 944aab6 3f62146 b9ffe28 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
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() |