markdown.py

description = """
**DB Assistant** is an interactive **AI-powered SQL agent** built with **Gradio** and **LangChain**.  
It enables users to connect to any relational database, ask natural language questions, and receive data-driven answers in real time — no manual SQL writing required.

---
"""

key_features = """
- **Natural Language to SQL Conversion**  
  Ask questions like _“Which genre has the longest tracks?”_ or _“List the top 5 customers by purchase amount.”_  
  The assistant automatically generates and executes optimized SQL queries against your connected database.

- **Live SQL Agent Streaming**  
  The model’s reasoning, query generation, and intermediate steps are streamed to the interface, allowing you to see exactly how the LLM builds and refines its queries.

- **Collapsible Debug Panels (AI & Tool Messages)**  
  Intermediate tool calls and SQL executions are neatly displayed in collapsible **accordions**, making the output transparent yet organized.

- **Multi-Provider LLM Support**  
  Choose from a variety of providers:
  - 🧠 **Google GenAI** (Gemini 2.x)
  - 💬 **OpenAI** (GPT-4, GPT-4o, GPT-3.5)
  - 🦣 **Anthropic** (Claude-3 series)
  - ☁️ **Azure OpenAI**, **AWS Bedrock**, **xAI**, **DeepSeek**, **Perplexity**, and more.  
  The interface automatically updates the available model list based on your provider choice.

- **Secure Database Connectivity**  
  Connect to SQL databases via a simple connection string — supporting **SQLite**, **PostgreSQL**, **MySQL**, and others through LangChain’s `SQLDatabase` utility.

- **Transparent Query Execution**  
  The agent inspects tables, analyzes schemas, and constructs precise SQL queries, always respecting safety rules (no DML statements like INSERT, UPDATE, DELETE, DROP).

- **Intuitive Gradio Interface**  
  Built with `gr.Blocks()` for clean layout:
  - **Left Panel:** LLM setup and database connection  
  - **Right Panel:** Interactive chatbot and conversation history  
  - **Expandable sections** for metadata and project credits

---
"""

tech_stack_overview = """
| Component | Purpose |
|------------|----------|
| **LangChain** | Framework for connecting LLMs with external data tools |
| **SQLDatabaseToolkit** | Provides database inspection, schema parsing, and safe query execution |
| **Gradio** | Creates a user-friendly web UI for chatting with the agent |
| **Python** | Core application logic and integration |
| **Markdown + HTML** | Enhanced output formatting with collapsible accordions |
| **Base64 Encoding** | Used to embed custom logo images directly in the interface |

---
"""

how_it_works= """
1. **Setup LLM**  
   Select your preferred provider and model, enter the corresponding API key, and click **Setup LLM**.

2. **Connect Database**  
   Paste your SQL connection string (e.g., `sqlite:///Chinook.db` or `postgresql+psycopg2://user:pass@host/db`) and click **Connect**.  
   The app automatically lists available tables.

3. **Ask Questions**  
   Type a natural language question in the chat box — the agent:
   - Retrieves the database schema,
   - Generates SQL queries,
   - Executes them safely,
   - Returns a human-readable explanation and result summary.

4. **Inspect Reasoning**  
   Expand the *AI Message* or *Tool Message* accordions to see exactly what the model did under the hood (SQL statements, schema checks, etc.).

---
"""

example = """
**User:**  
> Which genre on average has the longest tracks?

**AI Assistant:**  
- 📊 Generates a SQL query joining `Track` and `Genre` tables  
- 🧩 Computes average `Milliseconds` per genre  
- 🧠 Returns:

> On average, the genre with the longest tracks is **"Sci-Fi & Fantasy"**,  
> followed by **"Science Fiction"**, **"Drama"**, and **"TV Shows"**.

---
"""

use_cases = """
- Data analysts and engineers exploring new databases  
- BI professionals needing quick insights without SQL writing  
- Educators demonstrating database–AI integration  
- Developers testing and debugging database schemas via conversational interface

---
"""

#### 🪄 Future Enhancements
enhancements = """
- ✅ Add visualizations (bar charts, pie charts) for query results  
- ✅ Support multiple database sessions  
- ✅ Enable query caching and history tracking  
- ✅ Integrate authentication for enterprise deployments  

---
"""

#### 💡 Credits
credits = """
Developed using:
- **LangChain Community Modules**
- **Gradio UI Framework**
- **Python 3.12+**

This project bridges the gap between **conversational AI** and **structured data analytics**, giving everyone a personal **SQL-powered data assistant** at their fingertips. 🤖💾

---

"""

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>
"""