| description = """ | |
| ## 🕉️ **Project Title: RamayanaGPT – A RAG-based Chatbot for Valmiki Ramayana** | |
| --- | |
| ### 🔍 **Project Overview** | |
| **RamayanaGPT** is a knowledge-based conversational chatbot designed to answer questions from the *Valmiki Ramayana*. It leverages advanced **Retrieval-Augmented Generation (RAG)** principles to provide accurate and context-rich responses by referencing canonical verses (*shlokas*) and their explanations. This project integrates **MongoDB Atlas**, **LlamaIndex**, **Groq LLM**, and **Gradio UI**, offering an intuitive and scholarly digital assistant for users curious about the ancient epic. | |
| --- | |
| ### 🏗️ **Key Components** | |
| #### 1. **Vector Store: MongoDB Atlas** | |
| * The *Valmiki Ramayana* dataset is stored in a MongoDB Atlas collection. | |
| * Each document consists of metadata fields: `kanda`, `sarga`, `shloka`, and `shloka_text`, with an `explanation` used for semantic retrieval. | |
| * MongoDB Atlas Vector Search is configured using `MongoDBAtlasVectorSearch` for efficient similarity-based queries. | |
| #### 2. **Embeddings: Hugging Face** | |
| * Embedding model: `intfloat/multilingual-e5-base` from HuggingFace. | |
| * Converts shloka and explanation texts into vector representations for similarity search. | |
| #### 3. **Language Model: Groq API** | |
| * Model used: `llama-3.1-8b-instant`. | |
| * API key is provided at runtime by the user. | |
| * Integrates with the query engine to synthesize responses based on context-relevant documents. | |
| #### 4. **Prompt Engineering** | |
| * A custom `PromptTemplate` guides the LLM to: | |
| * Provide an introduction. | |
| * Quote relevant shlokas. | |
| * Explain them. | |
| * Give a closing summary relevant to the query. | |
| * Prompt ensures scholarly tone and contextual accuracy. | |
| #### 5. **Vector Index** | |
| * Built once during app startup using `VectorStoreIndex.from_vector_store()`. | |
| * Shared across user queries to prevent repeated MongoDB connections (for efficiency and speed). | |
| #### 6. **User Interface: Gradio** | |
| * Tabbed interface using `gr.Blocks` with a clean `Soft` theme and Google Fonts. | |
| * Users input their Groq API key. | |
| * After key submission: | |
| * API key input and button are hidden. | |
| * Chat interface is shown using `gr.ChatInterface`. | |
| * Uses `gr.State` to hold the Groq API key during the session. | |
| --- | |
| ### ⚙️ **Technical Stack** | |
| | Component | Technology | | |
| | --------------- | ----------------------------------- | | |
| | Backend LLM | Groq (LLaMA 3.1 8B via API) | | |
| | Embedding Model | Hugging Face (multilingual-e5-base) | | |
| | Vector Store | MongoDB Atlas Vector Search | | |
| | Query Engine | LlamaIndex | | |
| | Prompt Engine | LlamaIndex PromptTemplate | | |
| | UI Framework | Gradio (Blocks + ChatInterface) | | |
| | Deployment | Python app using `app.py` | | |
| --- | |
| ### ✅ **Features Implemented** | |
| * [x] Connection to MongoDB Atlas (once during app startup). | |
| * [x] API key input and secure state handling using `gr.State`. | |
| * [x] Vector search over embedded shloka data. | |
| * [x] Chat interface with dynamic UI (hides API key and button post-auth). | |
| * [x] RAG-based responses tailored to Valmiki Ramayana structure. | |
| * [x] Modular, clean design for future extensibility (e.g., Bhagavad Gita, Mahabharata). | |
| --- | |
| """ | |
| groq_api_key = """ | |
| ### 🔑 How to Get a Groq API Key | |
| 1. **Go to** [https://console.groq.com/keys](https://console.groq.com/keys) | |
| 2. **Log in or Sign Up** for a Groq account. | |
| 3. Click **"API Keys"** from the dashboard. | |
| 4. Click **"Create Key"**, name it, and generate. | |
| 5. **Copy the API key** and store it securely. | |
| 6. **Paste** the key into the RamayanaGPT app to start chatting. | |
| --- | |
| ⚠️ **Don't share** your API key. Revoke and regenerate if needed. | |
| """ | |
| footer = """ | |
| <div style="background-color: #1d2938; color: white; padding: 10px; width: 100%; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: .2rem 35px; box-sizing: border-box; font-size: 16px;"> | |
| <div style="text-align: left;"> | |
| <p style="margin: 0;">© 2025 </p> | |
| </div> | |
| <div style="text-align: center; flex-grow: 1;"> | |
| <p style="margin: 0;"> This website is made with ❤ by SARATH CHANDRA</p> | |
| </div> | |
| <div class="social-links" style="display: flex; gap: 20px; justify-content: flex-end; align-items: center;"> | |
| <a href="https://github.com/21bq1a4210" target="_blank" style="text-align: center;"> | |
| <img src="data:image/png;base64,{}" alt="GitHub" width="40" height="40" style="display: block; margin: 0 auto;"> | |
| <span style="font-size: 14px;">GitHub</span> | |
| </a> | |
| <a href="https://www.linkedin.com/in/sarath-chandra-bandreddi-07393b1aa/" target="_blank" style="text-align: center;"> | |
| <img src="data:image/png;base64,{}" alt="LinkedIn" width="40" height="40" style="display: block; margin: 0 auto;"> | |
| <span style="font-size: 14px;">LinkedIn</span> | |
| </a> | |
| <a href="https://21bq1a4210.github.io/MyPortfolio-/" target="_blank" style="text-align: center;"> | |
| <img src="data:image/png;base64,{}" alt="Portfolio" width="40" height="40" style="display: block; margin-right: 40px;"> | |
| <span style="font-size: 14px;">Portfolio</span> | |
| </a> | |
| </div> | |
| </div> | |
| """ |