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;">&copy; 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>
"""