Upload folder using huggingface_hub

.env

@@ -0,0 +1 @@
+GOOGLE_API_KEY=AIzaSyAwFDQXJD3DWkCthwE1EQO9VC3ctrTcrPQ

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+7817_1.csv filter=lfs diff=lfs merge=lfs -text
+chroma_db/chroma.sqlite3 filter=lfs diff=lfs merge=lfs -text

7817_1.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92cf56b1520f970d37d237d0e4f393efffbdab14ba15d52b14e8868f7d5eb3ba
+size 18386219

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Ensure the vector store and data are present
+# preprocessed_docs.json and chroma_db/ should be part of the build
+
+EXPOSE 7860
+
+# We'll use gunicorn for the Space
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -1,10 +1,34 @@
----
-title: Retail Product Assistant
-emoji: 📈
-colorFrom: pink
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Retail Product Knowledge Assistant (RAG Model)
+
+This project builds a Retrieval-Augmented Generation (RAG) model using retail product data (Kindle reviews and details). It uses a vector database to store product information and an LLM to answer questions naturally.
+
+## Tech Stack
+- **LLM**: Google Gemini (via `langchain-google-genai`)
+- **Embeddings**: HuggingFace (`all-MiniLM-L6-v2`)
+- **Vector Store**: ChromaDB
+- **Framework**: LangChain
+
+## Setup
+1. **API Key**: Add your Google Gemini API Key to the `.env` file:
+   ```env
+   GOOGLE_API_KEY=your_actual_key_here
+   ```
+2. **Build Knowledge Base**:
+   Run the following command to process the data and build the vector database:
+   ```bash
+   python main.py
+   ```
+   (It will automatically detect if the database needs to be built).
+
+## Usage
+Run `main.py` and ask questions about the products, such as:
+- "Which Kindle model has the best resolution?"
+- "What do users say about the battery life of the Paperwhite?"
+- "Is the Kindle Voyage worth the extra money?"
+
+## Files
+- `7817_1.csv`: Raw product data.
+- `preprocess.py`: Cleans and formats data into JSON.
+- `rag_model.py`: Contains the logic for the RAG pipeline.
+- `main.py`: Interactive CLI for user queries.
+- `chroma_db/`: Directory where the vector store is persisted.

app.py

@@ -0,0 +1,56 @@
+from flask import Flask, render_template, request, jsonify
+from rag_model import get_qa_chain, build_rag_system, PERSIST_DIRECTORY, HuggingFaceEmbeddings, Chroma
+from dotenv import load_dotenv
+import os
+load_dotenv(override=True)
+print(f"App: API Key loaded (starting with {os.getenv('GOOGLE_API_KEY', 'None')[:5]}...)")
+
+app = Flask(__name__)
+
+# Load or Build Vector Store
+if not os.path.exists(PERSIST_DIRECTORY):
+    print("Vector store not found. Building...")
+    vectorstore = build_rag_system()
+else:
+    print("Loading existing vector store...")
+    embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+    vectorstore = Chroma(persist_directory=PERSIST_DIRECTORY, embedding_function=embeddings)
+
+qa_chain = get_qa_chain(vectorstore)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/ask', methods=['POST'])
+def ask():
+    data = request.json
+    query = data.get('query')
+    print(f"Processing query: {query}")
+    
+    if not query:
+        return jsonify({"error": "No query provided"}), 400
+    
+    if not qa_chain:
+        return jsonify({"error": "QA chain not initialized. Check GOOGLE_API_KEY."}), 500
+
+    try:
+        result = qa_chain({"query": query})
+        answer = result['result']
+        sources = []
+        seen = set()
+        for doc in result['source_documents']:
+            source_name = doc.metadata.get('name', 'Unknown')
+            if source_name not in seen:
+                sources.append(source_name)
+                seen.add(source_name)
+        
+        return jsonify({
+            "answer": answer,
+            "sources": sources[:3]  # Return top 3 unique names
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

chroma_db/73f185a9-e985-49ef-8c16-8c9acf109315/data_level0.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97636bb963ce51b1990b3b4290dfe132e5277521604170865da20675fd900624
+size 5328004

chroma_db/73f185a9-e985-49ef-8c16-8c9acf109315/header.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6194ad38681db82ca87feaaa099b3e8791f8ded2e54d1241e9719b8a6a18257d
+size 100

chroma_db/73f185a9-e985-49ef-8c16-8c9acf109315/index_metadata.pickle

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:def0c5e5c125cba2afce37ddc75157a85026da9bc703e60fbada61868841bfcd
+size 292608

chroma_db/73f185a9-e985-49ef-8c16-8c9acf109315/length.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:657bb227bf74711a4e2f80351342c7aa997ce5fa6cfc277b922045d277e649ca
+size 12716

chroma_db/73f185a9-e985-49ef-8c16-8c9acf109315/link_lists.bin

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62e9fa8b0f27e850d27b6db438cf3b7fb6a3fbf0607eef1452e5afd77845972a
+size 26996

chroma_db/chroma.sqlite3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f519a0f46127579cddc14f876ca632155b6ab254c22c1f746d7e14bdc677d66d
+size 32440320

main.py

@@ -0,0 +1,45 @@
+from rag_model import get_qa_chain, HuggingFaceEmbeddings, Chroma
+import os
+
+def main():
+    PERSIST_DIRECTORY = "chroma_db"
+    
+    if not os.path.exists(PERSIST_DIRECTORY):
+        print("Knowledge base not built. Building now...")
+        from rag_model import build_rag_system
+        vectorstore = build_rag_system()
+    else:
+        print("Loading existing knowledge base...")
+        embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+        vectorstore = Chroma(persist_directory=PERSIST_DIRECTORY, embedding_function=embeddings)
+
+    qa_chain = get_qa_chain(vectorstore)
+    
+    if not qa_chain:
+        print("Failed to initialize QA chain. Check your GOOGLE_API_KEY in .env")
+        return
+
+    print("\n--- Retail Product Knowledge Assistant ---")
+    print("Type 'exit' to quit.")
+    
+    while True:
+        query = input("\nAsk a question about our products: ")
+        if query.lower() == 'exit':
+            break
+            
+        print("Thinking...")
+        try:
+            result = qa_chain({"query": query})
+            print(f"\nAnswer: {result['result']}")
+            print("\nSources (Top Reviews):")
+            seen_sources = set()
+            for doc in result["source_documents"]:
+                source_info = f"{doc.metadata['name']} (Brand: {doc.metadata['brand']})"
+                if source_info not in seen_sources:
+                    print(f"- {source_info}")
+                    seen_sources.add(source_info)
+        except Exception as e:
+            print(f"An error occurred: {e}")
+
+if __name__ == "__main__":
+    main()

preprocess.py

@@ -0,0 +1,56 @@
+import pandas as pd
+import json
+
+def preprocess_data(file_path):
+    # Load the CSV
+    df = pd.read_csv(file_path)
+    
+    # Select relevant columns
+    # name, brand, categories, reviews.text, reviews.title, reviews.rating
+    relevant_cols = ['name', 'brand', 'categories', 'reviews.text', 'reviews.title', 'reviews.rating']
+    
+    # Drop rows with missing reviews
+    df = df.dropna(subset=['reviews.text', 'name'])
+    
+    documents = []
+    for _, row in df.iterrows():
+        name = row['name']
+        brand = row.get('brand', 'Unknown')
+        categories = row.get('categories', 'N/A')
+        text = row['reviews.text']
+        title = row.get('reviews.title', '')
+        rating = row.get('reviews.rating', 'N/A')
+        
+        # Parse price
+        price_str = "Price info not available"
+        prices_raw = row.get('prices')
+        if pd.notna(prices_raw):
+            try:
+                # The CSV might have escaped quotes
+                prices_data = json.loads(prices_raw.replace('""', '"'))
+                if isinstance(prices_data, list) and len(prices_data) > 0:
+                    best_price = min([p.get('amountMin', float('inf')) for p in prices_data])
+                    currency = prices_data[0].get('currency', 'USD')
+                    if best_price != float('inf'):
+                        price_str = f"{best_price} {currency}"
+            except:
+                pass
+
+        doc_content = f"Product: {name}\nBrand: {brand}\nCategories: {categories}\nPrice: {price_str}\nReview Title: {title}\nRating: {rating}\nReview Content: {text}"
+        
+        metadata = {
+            "name": name,
+            "brand": brand,
+            "rating": str(rating),
+            "price": price_str
+        }
+        
+        documents.append({"content": doc_content, "metadata": metadata})
+    
+    return documents
+
+if __name__ == "__main__":
+    docs = preprocess_data("7817_1.csv")
+    with open("preprocessed_docs.json", "w") as f:
+        json.dump(docs, f, indent=2)
+    print(f"Preprocessed {len(docs)} documents.")

rag_model.py

@@ -0,0 +1,113 @@
+import os
+import json
+from dotenv import load_dotenv
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langchain_community.vectorstores import Chroma
+from langchain_community.embeddings import HuggingFaceEmbeddings
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+from langchain_classic.chains import RetrievalQA
+from langchain_core.prompts import PromptTemplate
+from langchain_core.documents import Document
+
+load_dotenv(override=True)
+
+# Configuration
+GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
+if GOOGLE_API_KEY:
+    print(f"RAG Model: API Key loaded (starting with {GOOGLE_API_KEY[:5]}...)")
+else:
+    print("RAG Model: No API Key found in environment!")
+DATA_FILE = "preprocessed_docs.json"
+PERSIST_DIRECTORY = "chroma_db"
+
+def build_rag_system():
+    if not os.path.exists(DATA_FILE):
+        print("Data file not found. Please run preprocess.py first.")
+        return None
+
+    with open(DATA_FILE, "r") as f:
+        docs_data = json.load(f)
+
+    print(f"Loading {len(docs_data)} documents...")
+    
+    # Prepare documents for LangChain
+    documents = [Document(page_content=d["content"], metadata=d["metadata"]) for d in docs_data]
+
+    # Split documents into chunks (optional, but good practice)
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=100)
+    chunks = text_splitter.split_documents(documents)
+
+    print(f"Created {len(chunks)} chunks.")
+
+    # Initialize Embeddings
+    print("Initializing embeddings (HuggingFace)...")
+    embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+
+    # Initialize Vector Store
+    print("Building vector store...")
+    vectorstore = Chroma.from_documents(
+        documents=chunks,
+        embedding=embeddings,
+        persist_directory=PERSIST_DIRECTORY
+    )
+    vectorstore.persist()
+    print("Vector store built and persisted.")
+
+    return vectorstore
+
+def get_qa_chain(vectorstore):
+    if not GOOGLE_API_KEY:
+        print("Warning: GOOGLE_API_KEY not found. LLM functionality will not work.")
+        return None
+
+    llm = ChatGoogleGenerativeAI(model="gemini-flash-latest", google_api_key=GOOGLE_API_KEY)
+    
+    # Custom Prompt
+    template = """You are a helpful and expert Retail Product Assistant. 
+
+    Context (Product Details & Reviews):
+    {context}
+
+    Rules:
+    1. If the user says "hi", "hello" or greets you, greet them back warmly and mention 2-3 popular products from the context to get started.
+    2. Use the provided context to answer specific questions.
+    3. If the answer is not in the context, politely say you don't have that specific information.
+    4. Maintain a professional yet friendly tone.
+    5. Always use Markdown for formatting (bolding, lists, etc.) to make it easy to read.
+    6. Use bullet points if listing features or pros/cons.
+    7. IMPORTANT: Convert all prices from USD to Indian Rupees (INR) using an approximate exchange rate of 1 USD = ₹83 INR. Always display the price in INR (₹).
+
+    Question: {question}
+    Answer:"""
+    
+    QA_CHAIN_PROMPT = PromptTemplate.from_template(template)
+
+    qa_chain = RetrievalQA.from_chain_type(
+        llm=llm,
+        chain_type="stuff",
+        retriever=vectorstore.as_retriever(),
+        return_source_documents=True,
+        chain_type_kwargs={"prompt": QA_CHAIN_PROMPT}
+    )
+    
+    return qa_chain
+
+if __name__ == "__main__":
+    # Check if vector store exists
+    if os.path.exists(PERSIST_DIRECTORY):
+        print("Vector store already exists. Loading...")
+        embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+        vectorstore = Chroma(persist_directory=PERSIST_DIRECTORY, embedding_function=embeddings)
+    else:
+        vectorstore = build_rag_system()
+
+    if vectorstore:
+        qa_chain = get_qa_chain(vectorstore)
+        if qa_chain:
+            query = "Which Kindle model has the best resolution according to reviews?"
+            print(f"\nQuestion: {query}")
+            result = qa_chain({"query": query})
+            print(f"\nAnswer: {result['result']}")
+            print("\nSources:")
+            for doc in result["source_documents"][:2]:
+                print(f"- {doc.metadata['name']} (Rating: {doc.metadata['rating']})")

requirements.txt

@@ -0,0 +1,13 @@
+flask
+python-dotenv
+langchain
+langchain-community
+langchain-google-genai
+langchain-text-splitters
+langchain-classic
+chromadb
+sentence-transformers
+pandas
+google-generativeai
+huggingface_hub
+gunicorn

static/css/style.css

@@ -0,0 +1,253 @@
+:root {
+    --primary-color: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg-dark: #0f172a;
+    --bg-card: rgba(30, 41, 59, 0.7);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --accent-glow: rgba(99, 102, 241, 0.2);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    background-image:
+        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.15) 0, transparent 50%);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+}
+
+.container {
+    width: 100%;
+    max-width: 900px;
+    z-index: 1;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 3rem;
+    animation: fadeInDown 0.8s ease-out;
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    background: linear-gradient(to right, #818cf8, #c084fc);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+p.subtitle {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+}
+
+.chat-card {
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+    border-radius: 1.5rem;
+    padding: 2rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    animation: fadeInUp 0.8s ease-out;
+}
+
+.chat-history {
+    height: 400px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-right: 0.5rem;
+}
+
+.chat-history::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-history::-webkit-scrollbar-thumb {
+    background: var(--glass-border);
+    border-radius: 10px;
+}
+
+.message {
+    padding: 1rem;
+    border-radius: 1rem;
+    max-width: 85%;
+    line-height: 1.5;
+}
+
+.user-message {
+    background: var(--primary-color);
+    align-self: flex-end;
+    border-bottom-right-radius: 0.2rem;
+}
+
+.bot-message {
+    background: rgba(51, 65, 85, 0.5);
+    align-self: flex-start;
+    border-bottom-left-radius: 0.2rem;
+    border: 1px solid var(--glass-border);
+}
+
+.bot-message p {
+    margin-bottom: 0.5rem;
+}
+
+.bot-message p:last-child {
+    margin-bottom: 0;
+}
+
+.bot-message ul,
+.bot-message ol {
+    margin-left: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.bot-message li {
+    margin-bottom: 0.25rem;
+}
+
+.input-group {
+    display: flex;
+    gap: 0.75rem;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--glass-border);
+}
+
+input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-main);
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    outline: none;
+}
+
+button {
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+button:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px var(--accent-glow);
+}
+
+.sources {
+    margin-top: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    border-top: 1px solid var(--glass-border);
+    padding-top: 0.5rem;
+}
+
+.source-tag {
+    display: inline-block;
+    background: rgba(99, 102, 241, 0.15);
+    padding: 0.2rem 0.6rem;
+    border-radius: 0.4rem;
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    color: #a5b4fc;
+}
+
+.suggestions {
+    margin: 0.5rem 0;
+}
+
+.suggestions p {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+}
+
+.suggestion-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.chip {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    color: var(--text-main);
+    padding: 0.4rem 0.8rem;
+    border-radius: 2rem;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: auto;
+}
+
+.chip:hover {
+    background: rgba(99, 102, 241, 0.2);
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.loading-dots:after {
+    content: '...';
+    display: inline-block;
+    width: 0;
+    animation: dots 1.5s steps(4, end) infinite;
+    overflow: hidden;
+    vertical-align: bottom;
+}
+
+@keyframes dots {
+    to {
+        width: 1.25em;
+    }
+}

static/js/main.js

@@ -0,0 +1,75 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const chatHistory = document.getElementById('chat-history');
+    const queryInput = document.getElementById('query-input');
+    const sendBtn = document.getElementById('send-btn');
+
+    const appendMessage = (content, isUser, sources = []) => {
+        const msgDiv = document.createElement('div');
+        msgDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
+
+        // Parse markdown if it's from the bot
+        const parsedContent = isUser ? content : marked.parse(content);
+        let html = `<div class="content">${parsedContent}</div>`;
+
+        if (!isUser && sources.length > 0) {
+            html += '<div class="sources"><strong>Sources:</strong><br>';
+            sources.forEach(src => {
+                html += `<span class="source-tag">${src}</span>`;
+            });
+            html += '</div>';
+        }
+
+        msgDiv.innerHTML = html;
+        chatHistory.appendChild(msgDiv);
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+    };
+
+    const handleQuery = async (forcedQuery = null) => {
+        const query = (forcedQuery || queryInput.value).trim();
+        if (!query) return;
+
+        appendMessage(query, true);
+        queryInput.value = '';
+
+        // Add loading indicator
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'message bot-message loading-indicator';
+        loadingDiv.innerHTML = '<span class="loading-dots">Thinking</span>';
+        chatHistory.appendChild(loadingDiv);
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+
+        try {
+            const response = await fetch('/ask', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query })
+            });
+
+            const data = await response.json();
+
+            // Remove loading
+            chatHistory.removeChild(loadingDiv);
+
+            if (data.answer) {
+                appendMessage(data.answer, false, data.sources);
+            } else {
+                appendMessage("Sorry, I encountered an error: " + (data.error || "Unknown error"), false);
+            }
+        } catch (error) {
+            chatHistory.removeChild(loadingDiv);
+            appendMessage("Connection error. Is the server running?", false);
+        }
+    };
+
+    // Suggestion chips
+    document.querySelectorAll('.chip').forEach(chip => {
+        chip.addEventListener('click', () => {
+            handleQuery(chip.getAttribute('data-query'));
+        });
+    });
+
+    sendBtn.addEventListener('click', () => handleQuery());
+    queryInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') handleQuery();
+    });
+});

templates/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Retail Assistant | Product Knowledge RAG</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1><i class="fas fa-robot"></i> Retail Genius</h1>
+            <p class="subtitle">AI-Powered Product Knowledge Assistant</p>
+        </header>
+
+        <main class="chat-card">
+            <div id="chat-history" class="chat-history">
+                <div class="message bot-message">
+                    <i class="fas fa-hand-wave"></i> Hello! I'm your retail knowledge assistant. Ask me anything about
+                    our products, pricing, or customer reviews!
+                </div>
+            </div>
+
+            <div class="suggestions">
+                <p><i class="fas fa-lightbulb"></i> Try asking:</p>
+                <div class="suggestion-chips">
+                    <button class="chip" data-query="Which Kindle has the best resolution?">Kindle Resolution</button>
+                    <button class="chip" data-query="Compare Paperwhite vs Voyage battery life.">Paperwhite vs
+                        Voyage</button>
+                    <button class="chip" data-query="What do reviews say about the Fire TV?">Fire TV Reviews</button>
+                    <button class="chip" data-query="Is there a Kindle with physical buttons?">Physical
+                        Buttons?</button>
+                </div>
+            </div>
+
+            <div class="input-group">
+                <input type="text" id="query-input" placeholder="Ask a question..." autocomplete="off">
+                <button id="send-btn"><i class="fas fa-paper-plane"></i></button>
+            </div>
+        </main>
+    </div>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+
+</html>