Rebuild with beautiful Gradio UI for HuggingFace Spaces

app.py

@@ -1,6 +1,6 @@
 import os
 import tempfile
-import streamlit as st
+import gradio as gr
 import fitz  # PyMuPDF
 import pandas as pd
 from docx import Document
@@ -11,29 +11,16 @@ from langchain.embeddings.base import Embeddings
 from langchain_chroma import Chroma
 from groq import Groq
 
-# ---------- Page Config ----------
-st.set_page_config(
-    page_title="RAG Document Assistant",
-    page_icon="📄",
-    layout="wide"
-)
-
-st.title("📄 RAG Document Assistant")
-st.markdown("Upload documents, ask questions, get AI-powered answers from your files.")
-
-
 # ---------- Embedding Model ----------
-@st.cache_resource(show_spinner="Loading embedding model (first time only)...")
-def load_embedding_model():
-    # Use /tmp for Databricks compatibility, falls back to home cache
-    for cache_dir in ["/tmp/sentence_transformers", os.path.join(os.path.expanduser("~"), ".cache", "sentence_transformers")]:
-        try:
-            os.makedirs(cache_dir, exist_ok=True)
-            model = SentenceTransformer("all-MiniLM-L6-v2", cache_folder=cache_dir)
-            return model
-        except Exception:
-            continue
-    return SentenceTransformer("all-MiniLM-L6-v2")
+_embedding_model = None
+
+def get_embedding_model():
+    global _embedding_model
+    if _embedding_model is None:
+        cache_dir = "/tmp/sentence_transformers"
+        os.makedirs(cache_dir, exist_ok=True)
+        _embedding_model = SentenceTransformer("all-MiniLM-L6-v2", cache_folder=cache_dir)
+    return _embedding_model
 
 
 class BGEEmbeddings(Embeddings):
@@ -49,347 +36,459 @@ class BGEEmbeddings(Embeddings):
 
 # ---------- Document Parsers ----------
 def parse_pdf(file_path):
-    """Parse PDF - extract text from each page"""
     documents = []
     pdf = fitz.open(file_path)
     for page_num in range(len(pdf)):
         page = pdf.load_page(page_num)
         text = page.get_text().strip()
         if text:
-            documents.append(
-                LCDocument(
-                    page_content=text,
-                    metadata={"source": os.path.basename(file_path), "page": page_num + 1}
-                )
-            )
+            documents.append(LCDocument(
+                page_content=text,
+                metadata={"source": os.path.basename(file_path), "page": page_num + 1}
+            ))
     return documents
 
 
 def parse_docx(file_path):
-    """Parse Word document"""
     doc = Document(file_path)
-    text = "\n".join(para.text for para in doc.paragraphs if para.text.strip())
+    text = "\n".join(p.text for p in doc.paragraphs if p.text.strip())
     return [LCDocument(page_content=text, metadata={"source": os.path.basename(file_path), "page": 1})]
 
 
 def parse_excel(file_path):
-    """Parse Excel file - each sheet becomes a document"""
     documents = []
     excel = pd.ExcelFile(file_path)
     for sheet in excel.sheet_names:
         df = pd.read_excel(file_path, sheet_name=sheet)
         text = df.astype(str).to_string(index=False)
-        documents.append(
-            LCDocument(page_content=text, metadata={"source": os.path.basename(file_path), "sheet": sheet})
-        )
+        documents.append(LCDocument(
+            page_content=text,
+            metadata={"source": os.path.basename(file_path), "sheet": sheet}
+        ))
     return documents
 
 
 def parse_csv(file_path):
-    """Parse CSV file"""
     df = pd.read_csv(file_path)
     text = df.astype(str).to_string(index=False)
     return [LCDocument(page_content=text, metadata={"source": os.path.basename(file_path), "page": 1})]
 
 
 def parse_txt(file_path):
-    """Parse text file"""
     with open(file_path, "r", encoding="utf-8", errors="ignore") as f:
         text = f.read()
     return [LCDocument(page_content=text, metadata={"source": os.path.basename(file_path), "page": 1})]
 
 
-# ---------- Get API Key from Secrets or UI ----------
-groq_api_key = ""
-try:
-    groq_api_key = st.secrets["GROQ_API_KEY"]
-except:
-    groq_api_key = os.getenv("GROQ_API_KEY", "")
+def parse_file(file_path):
+    ext = os.path.splitext(file_path)[1].lower()
+    if ext == ".pdf":
+        return parse_pdf(file_path)
+    elif ext == ".docx":
+        return parse_docx(file_path)
+    elif ext in [".xlsx", ".xls"]:
+        return parse_excel(file_path)
+    elif ext == ".csv":
+        return parse_csv(file_path)
+    elif ext == ".txt":
+        return parse_txt(file_path)
+    return []
 
-# ---------- Sidebar ----------
-with st.sidebar:
-    st.header("⚙️ Configuration")
-    st.markdown("**Supported formats:** PDF, DOCX, XLSX, CSV, TXT")
-    st.markdown("---")
-    if not groq_api_key:
-        groq_api_key = st.text_input(
-            "🔑 Groq API Key",
-            type="password",
-            placeholder="Enter your Groq API key...",
-            help="Get yours at https://console.groq.com"
-        )
-    else:
-        st.success("✅ API Key configured")
-    st.markdown("---")
-    st.markdown("Built with LangChain + ChromaDB + Groq")
-
-
-# ---------- Session State ----------
-if "documents" not in st.session_state:
-    st.session_state.documents = []
-if "vector_store" not in st.session_state:
-    st.session_state.vector_store = None
-if "chat_history" not in st.session_state:
-    st.session_state.chat_history = []
-
-
-# ---------- File Upload ----------
-st.header("1️⃣ Upload Documents")
-
-# Show current document count
-if st.session_state.documents:
-    st.info(f"📚 Current knowledge base: {len(st.session_state.documents)} document(s)")
-
-uploaded_files = st.file_uploader(
-    "Drop your files here",
-    type=["pdf", "docx", "xlsx", "csv", "txt"],
-    accept_multiple_files=True
-)
-
-# Show two buttons if we already have documents
-col1, col2 = st.columns(2)
-
-with col1:
-    process_btn = st.button("🔄 Process Documents", type="primary", disabled=not uploaded_files)
-
-with col2:
-    if st.session_state.documents:
-        add_btn = st.button("➕ Add to Existing", disabled=not uploaded_files)
-    else:
-        add_btn = False
-
-# Determine mode: new or add
-process_mode = None
-if process_btn:
-    process_mode = "new"
-elif add_btn:
-    process_mode = "add"
-
-if uploaded_files and process_mode:
-    # Load embedding model (cached after first load)
-    with st.spinner("Loading embedding model..."):
-        embedding_model = load_embedding_model()
-    
-    all_documents = []
-    progress = st.progress(0)
-    status = st.status("Processing documents...", expanded=True)
 
-    for i, uploaded_file in enumerate(uploaded_files):
-        ext = os.path.splitext(uploaded_file.name)[1].lower()
+# ---------- Global State ----------
+vector_store = None
+processed_files = []
 
-        # Save to temp file
-        with tempfile.NamedTemporaryFile(delete=False, suffix=ext) as tmp:
-            tmp.write(uploaded_file.read())
-            tmp_path = tmp.name
 
-        try:
-            if ext == ".pdf":
-                docs = parse_pdf(tmp_path)
-            elif ext == ".docx":
-                docs = parse_docx(tmp_path)
-            elif ext == ".xlsx":
-                docs = parse_excel(tmp_path)
-            elif ext == ".csv":
-                docs = parse_csv(tmp_path)
-            elif ext == ".txt":
-                docs = parse_txt(tmp_path)
-            else:
-                docs = []
-                status.write(f"⚠️ Unsupported: {uploaded_file.name}")
+# ---------- Process Documents ----------
+def process_documents(files):
+    global vector_store, processed_files
 
-            all_documents.extend(docs)
-            status.write(f"✅ Parsed: {uploaded_file.name} ({len(docs)} chunk(s))")
+    if not files:
+        return "⚠️ Please upload at least one document.", ""
+
+    all_documents = []
+    file_names = []
+    status_lines = []
 
+    for file in files:
+        try:
+            docs = parse_file(file.name)
+            all_documents.extend(docs)
+            name = os.path.basename(file.name)
+            file_names.append(name)
+            status_lines.append(f"✅ {name} → {len(docs)} section(s)")
         except Exception as e:
-            status.write(f"❌ Error with {uploaded_file.name}: {e}")
+            status_lines.append(f"❌ {os.path.basename(file.name)} → Error: {e}")
+
+    if not all_documents:
+        return "❌ No text could be extracted from the uploaded files.", ""
+
+    # Chunk
+    splitter = RecursiveCharacterTextSplitter(
+        chunk_size=1000, chunk_overlap=200,
+        separators=["\n\n", "\n", ". ", " ", ""]
+    )
+    chunks = []
+    for doc in all_documents:
+        if len(doc.page_content.strip()) > 50:
+            chunks.extend(splitter.create_documents([doc.page_content], metadatas=[doc.metadata]))
+        else:
+            chunks.append(doc)
 
-        finally:
-            try:
-                os.remove(tmp_path)
-            except (PermissionError, FileNotFoundError):
-                pass
+    # Build vector store
+    model = get_embedding_model()
+    embedding_fn = BGEEmbeddings(model)
+    vector_store = Chroma.from_documents(
+        documents=chunks,
+        embedding=embedding_fn,
+        collection_name="rag_docs"
+    )
 
-        progress.progress((i + 1) / len(uploaded_files))
+    processed_files.extend(file_names)
+    status_lines.append(f"\n📦 {len(chunks)} chunks indexed into vector store")
+    status_lines.append(f"🟢 Ready to answer questions!")
 
-    if all_documents:
-        # Chunk documents
-        status.write("🧠 Chunking documents...")
+    files_list = "\n".join([f"• {f}" for f in processed_files])
+    return "\n".join(status_lines), files_list
 
-        text_splitter = RecursiveCharacterTextSplitter(
-            chunk_size=1000,
-            chunk_overlap=200,
-            separators=["\n\n", "\n", ". ", " ", ""]
-        )
 
-        chunked_documents = []
+def add_documents(files):
+    global vector_store, processed_files
+
+    if not files:
+        return "⚠️ Please upload files to add.", "\n".join([f"• {f}" for f in processed_files])
+
+    if vector_store is None:
+        return process_documents(files)
+
+    all_documents = []
+    file_names = []
+    status_lines = []
+
+    for file in files:
+        try:
+            docs = parse_file(file.name)
+            all_documents.extend(docs)
+            name = os.path.basename(file.name)
+            file_names.append(name)
+            status_lines.append(f"✅ {name} → {len(docs)} section(s) added")
+        except Exception as e:
+            status_lines.append(f"❌ {os.path.basename(file.name)} → {e}")
+
+    if all_documents:
+        splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=200)
+        chunks = []
         for doc in all_documents:
             if len(doc.page_content.strip()) > 50:
-                chunks = text_splitter.create_documents(
-                    [doc.page_content],
-                    metadatas=[doc.metadata]
-                )
-                chunked_documents.extend(chunks)
+                chunks.extend(splitter.create_documents([doc.page_content], metadatas=[doc.metadata]))
             else:
-                chunked_documents.append(doc)
+                chunks.append(doc)
 
-        embedding_fn = BGEEmbeddings(embedding_model)
+        model = get_embedding_model()
+        vector_store.add_documents(chunks)
+        processed_files.extend(file_names)
+        status_lines.append(f"📦 {len(chunks)} new chunks added!")
 
-        if process_mode == "add" and st.session_state.vector_store:
-            # Add to existing vector store
-            status.write("📦 Adding to existing knowledge base...")
-            st.session_state.vector_store.add_documents(chunked_documents)
-            st.session_state.documents.extend(all_documents)
-            status.update(label="✅ Documents added!", state="complete")
-            st.success(f"Added {len(all_documents)} document(s) ({len(chunked_documents)} chunks) to existing knowledge base.")
-        else:
-            # Build new vector store
-            status.write("📦 Building vector store...")
-            vector_store = Chroma.from_documents(
-                documents=chunked_documents,
-                embedding=embedding_fn,
-                collection_name="rag_docs"
+    files_list = "\n".join([f"• {f}" for f in processed_files])
+    return "\n".join(status_lines), files_list
+
+
+# ---------- Chat ----------
+def chat(message, history, groq_api_key):
+    global vector_store
+
+    if not groq_api_key or groq_api_key.strip() == "":
+        groq_api_key = os.getenv("GROQ_API_KEY", "")
+
+    if not groq_api_key:
+        history.append((message, "⚠️ Please enter your Groq API key in the settings panel."))
+        return "", history
+
+    if vector_store is None:
+        history.append((message, "📂 Please upload and process documents first before asking questions."))
+        return "", history
+
+    try:
+        retriever = vector_store.as_retriever(search_type="similarity", search_kwargs={"k": 5})
+        relevant_docs = retriever.invoke(message)
+
+        context = "\n\n---\n\n".join([
+            f"[Source: {doc.metadata.get('source', 'unknown')}, Page: {doc.metadata.get('page', 'N/A')}]\n{doc.page_content}"
+            for doc in relevant_docs
+        ])
+
+        client = Groq(api_key=groq_api_key)
+        response = client.chat.completions.create(
+            model="llama-3.1-8b-instant",
+            messages=[
+                {
+                    "role": "system",
+                    "content": (
+                        "You are an intelligent document assistant. Answer questions based on the provided context. "
+                        "Be concise, accurate, and cite the source document when possible. "
+                        "If the answer is not in the context, say so clearly.\n\n"
+                        f"Context:\n{context}"
+                    )
+                },
+                {"role": "user", "content": message}
+            ],
+            temperature=0.3,
+            max_tokens=1024
+        )
+
+        answer = response.choices[0].message.content
+
+        sources = list(set([
+            f"{doc.metadata.get('source', 'unknown')} (p.{doc.metadata.get('page', 'N/A')})"
+            for doc in relevant_docs
+        ]))
+        sources_text = "\n\n📚 **Sources:** " + " | ".join(sources)
+
+        history.append((message, answer + sources_text))
+
+    except Exception as e:
+        history.append((message, f"❌ Error: {str(e)}"))
+
+    return "", history
+
+
+def clear_all():
+    global vector_store, processed_files
+    vector_store = None
+    processed_files = []
+    return [], "", "", "🗑️ Knowledge base cleared."
+
+
+# ---------- UI ----------
+CSS = """
+/* Overall theme */
+.gradio-container {
+    font-family: 'Inter', sans-serif !important;
+    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
+    min-height: 100vh;
+}
+
+/* Header */
+.header-box {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    padding: 24px 32px;
+    margin-bottom: 20px;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
+}
+
+/* Panels */
+.panel {
+    background: rgba(255,255,255,0.05) !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+    border-radius: 16px !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+/* Buttons */
+.btn-primary {
+    background: linear-gradient(90deg, #667eea, #764ba2) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5) !important;
+}
+
+.btn-secondary {
+    background: rgba(255,255,255,0.1) !important;
+    border: 1px solid rgba(255,255,255,0.2) !important;
+    border-radius: 10px !important;
+    color: white !important;
+}
+
+/* Chatbot */
+.chatbot-container {
+    border-radius: 16px !important;
+    border: 1px solid rgba(255,255,255,0.1) !important;
+}
+
+/* Status boxes */
+.status-box {
+    background: rgba(16, 185, 129, 0.1) !important;
+    border: 1px solid rgba(16, 185, 129, 0.3) !important;
+    border-radius: 10px !important;
+}
+
+/* Input box */
+input[type="text"], input[type="password"], textarea {
+    background: rgba(255,255,255,0.08) !important;
+    border: 1px solid rgba(255,255,255,0.15) !important;
+    border-radius: 10px !important;
+    color: white !important;
+}
+
+/* File upload */
+.upload-area {
+    border: 2px dashed rgba(102, 126, 234, 0.5) !important;
+    border-radius: 12px !important;
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+"""
+
+with gr.Blocks(
+    css=CSS,
+    title="RAG Document Assistant",
+    theme=gr.themes.Soft(
+        primary_hue="violet",
+        secondary_hue="purple",
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Inter")
+    )
+) as demo:
+
+    # ---- Header ----
+    gr.HTML("""
+    <div class="header-box">
+        <h1 style="color:white; font-size:2.2em; margin:0; font-weight:700;">
+            📄 RAG Document Assistant
+        </h1>
+        <p style="color:rgba(255,255,255,0.85); margin:8px 0 0 0; font-size:1.1em;">
+            Upload documents · Ask questions · Get AI-powered answers
+        </p>
+    </div>
+    """)
+
+    with gr.Row():
+        # ---- Left Panel ----
+        with gr.Column(scale=1, elem_classes="panel"):
+            gr.HTML("<h3 style='color:#a78bfa; margin:0 0 12px 0;'>⚙️ Configuration</h3>")
+
+            groq_key = gr.Textbox(
+                label="🔑 Groq API Key",
+                placeholder="Enter your Groq API key...",
+                type="password",
+                info="Get yours free at console.groq.com"
             )
-            st.session_state.documents = all_documents
-            st.session_state.vector_store = vector_store
-            status.update(label="✅ Processing complete!", state="complete")
-            st.success(f"Processed {len(all_documents)} document(s) into {len(chunked_documents)} chunks.")
 
+            gr.HTML("<hr style='border-color:rgba(255,255,255,0.1); margin:16px 0;'>")
+            gr.HTML("<h3 style='color:#a78bfa; margin:0 0 12px 0;'>📂 Upload Documents</h3>")
 
-# ---------- Document Preview ----------
-if st.session_state.documents:
-    st.header("2️⃣ Document Preview")
-    with st.expander(f"📋 View parsed documents ({len(st.session_state.documents)} total)", expanded=False):
-        for i, doc in enumerate(st.session_state.documents):
-            st.markdown(f"**Document {i+1}** — `{doc.metadata.get('source', 'unknown')}`")
-            st.text(doc.page_content[:500] + ("..." if len(doc.page_content) > 500 else ""))
-            st.markdown("---")
+            file_upload = gr.File(
+                label="Drop files here",
+                file_count="multiple",
+                file_types=[".pdf", ".docx", ".xlsx", ".csv", ".txt"],
+                elem_classes="upload-area"
+            )
 
+            with gr.Row():
+                process_btn = gr.Button("🚀 Process", variant="primary", elem_classes="btn-primary")
+                add_btn = gr.Button("➕ Add More", elem_classes="btn-secondary")
 
-# ---------- Chat / Q&A ----------
-if st.session_state.vector_store:
-    st.header("3️⃣ Ask Questions")
+            process_status = gr.Textbox(
+                label="📊 Status",
+                lines=6,
+                interactive=False,
+                elem_classes="status-box"
+            )
 
-    if not groq_api_key:
-        st.warning("⚠️ Enter your Groq API key in the sidebar to enable Q&A.")
-    else:
-        # Display chat history
-        for msg in st.session_state.chat_history:
-            with st.chat_message(msg["role"]):
-                st.markdown(msg["content"])
-
-        # Add documents inline with chat
-        with st.expander("📎 Add more documents to knowledge base"):
-            new_files = st.file_uploader(
-                "Upload additional documents",
-                type=["pdf", "docx", "xlsx", "csv", "txt"],
-                accept_multiple_files=True,
-                key="chat_upload"
+            gr.HTML("<hr style='border-color:rgba(255,255,255,0.1); margin:16px 0;'>")
+            gr.HTML("<h3 style='color:#a78bfa; margin:0 0 8px 0;'>📚 Knowledge Base</h3>")
+
+            files_list = gr.Textbox(
+                label="Indexed Documents",
+                lines=4,
+                interactive=False,
+                placeholder="No documents loaded yet..."
             )
-            if new_files and st.button("➕ Add to Knowledge Base"):
-                with st.spinner("Adding documents..."):
-                    embedding_model = load_embedding_model()
-                    new_docs = []
-                    for uploaded_file in new_files:
-                        ext = os.path.splitext(uploaded_file.name)[1].lower()
-                        with tempfile.NamedTemporaryFile(delete=False, suffix=ext) as tmp:
-                            tmp.write(uploaded_file.read())
-                            tmp_path = tmp.name
-                        try:
-                            if ext == ".pdf":
-                                docs = parse_pdf(tmp_path)
-                            elif ext == ".docx":
-                                docs = parse_docx(tmp_path)
-                            elif ext == ".xlsx":
-                                docs = parse_excel(tmp_path)
-                            elif ext == ".csv":
-                                docs = parse_csv(tmp_path)
-                            elif ext == ".txt":
-                                docs = parse_txt(tmp_path)
-                            else:
-                                docs = []
-                            new_docs.extend(docs)
-                        except Exception as e:
-                            st.error(f"❌ Error: {e}")
-                        finally:
-                            try:
-                                os.remove(tmp_path)
-                            except:
-                                pass
-
-                    if new_docs:
-                        text_splitter = RecursiveCharacterTextSplitter(
-                            chunk_size=1000, chunk_overlap=200,
-                            separators=["\n\n", "\n", ". ", " ", ""]
-                        )
-                        chunked = []
-                        for doc in new_docs:
-                            if len(doc.page_content.strip()) > 50:
-                                chunks = text_splitter.create_documents(
-                                    [doc.page_content], metadatas=[doc.metadata]
-                                )
-                                chunked.extend(chunks)
-                            else:
-                                chunked.append(doc)
-
-                        st.session_state.vector_store.add_documents(chunked)
-                        st.session_state.documents.extend(new_docs)
-                        st.success(f"✅ Added {len(new_docs)} document(s)!")
-                        st.rerun()
-
-        # Chat input
-        user_question = st.chat_input("Ask a question about your documents...")
-
-        if user_question:
-            st.session_state.chat_history.append({"role": "user", "content": user_question})
-
-            with st.chat_message("user"):
-                st.markdown(user_question)
-
-            with st.chat_message("assistant"):
-                with st.spinner("Thinking..."):
-                    # Retrieve relevant chunks
-                    retriever = st.session_state.vector_store.as_retriever(
-                        search_type="similarity",
-                        search_kwargs={"k": 5}
-                    )
-                    relevant_docs = retriever.invoke(user_question)
-
-                    # Build context
-                    context = "\n\n---\n\n".join([
-                        f"[Source: {doc.metadata.get('source', 'unknown')}, "
-                        f"Page: {doc.metadata.get('page', 'N/A')}]\n{doc.page_content}"
-                        for doc in relevant_docs
-                    ])
-
-                    # Query Groq
-                    client = Groq(api_key=groq_api_key)
-                    response = client.chat.completions.create(
-                        model="llama-3.1-8b-instant",
-                        messages=[
-                            {
-                                "role": "system",
-                                "content": (
-                                    "You are a helpful assistant that answers questions based on the provided document context. "
-                                    "Use only the information from the context below. If the answer is not in the context, "
-                                    "say so clearly. Cite the source document and page when possible.\n\n"
-                                    f"Context:\n{context}"
-                                )
-                            },
-                            {"role": "user", "content": user_question}
-                        ],
-                        temperature=0.3,
-                        max_tokens=1024
-                    )
 
-                    answer = response.choices[0].message.content
-                    st.markdown(answer)
+            clear_btn = gr.Button("🗑️ Clear All", variant="stop", elem_classes="btn-secondary")
+
+            gr.HTML("""
+            <div style='margin-top:16px; padding:12px; background:rgba(167,139,250,0.1);
+                        border-radius:10px; border:1px solid rgba(167,139,250,0.2);'>
+                <p style='color:rgba(255,255,255,0.6); font-size:0.8em; margin:0;'>
+                    <b style='color:#a78bfa;'>Supported:</b> PDF · DOCX · XLSX · CSV · TXT<br>
+                    <b style='color:#a78bfa;'>Powered by:</b> LangChain · ChromaDB · Groq LLaMA 3.1
+                </p>
+            </div>
+            """)
+
+        # ---- Right Panel (Chat) ----
+        with gr.Column(scale=2, elem_classes="panel"):
+            gr.HTML("<h3 style='color:#a78bfa; margin:0 0 12px 0;'>💬 Ask Questions</h3>")
+
+            chatbot = gr.Chatbot(
+                label="",
+                height=520,
+                show_label=False,
+                avatar_images=("👤", "🤖"),
+                bubble_full_width=False,
+                elem_classes="chatbot-container"
+            )
 
-                    # Show sources
-                    with st.expander("📚 Sources"):
-                        for doc in relevant_docs:
-                            st.markdown(
-                                f"- **{doc.metadata.get('source', 'unknown')}** "
-                                f"(Page {doc.metadata.get('page', 'N/A')})"
-                            )
+            with gr.Row():
+                msg_input = gr.Textbox(
+                    placeholder="Ask anything about your documents...",
+                    label="",
+                    show_label=False,
+                    scale=5,
+                    container=False
+                )
+                send_btn = gr.Button("Send ➤", variant="primary", scale=1, elem_classes="btn-primary")
+
+            gr.HTML("""
+            <div style='text-align:center; margin-top:8px;'>
+                <span style='color:rgba(255,255,255,0.3); font-size:0.75em;'>
+                    Press Enter or click Send · Powered by Groq LLaMA 3.1 8B
+                </span>
+            </div>
+            """)
+
+            with gr.Accordion("💡 Example Questions", open=False):
+                gr.Examples(
+                    examples=[
+                        ["What is this document about?"],
+                        ["Summarize the key points"],
+                        ["What are the main conclusions?"],
+                        ["List all important dates mentioned"],
+                        ["Who are the key people mentioned?"],
+                    ],
+                    inputs=msg_input,
+                    label=""
+                )
 
-                    st.session_state.chat_history.append({"role": "assistant", "content": answer})
+    # ---- Events ----
+    process_btn.click(
+        fn=process_documents,
+        inputs=[file_upload],
+        outputs=[process_status, files_list]
+    )
+
+    add_btn.click(
+        fn=add_documents,
+        inputs=[file_upload],
+        outputs=[process_status, files_list]
+    )
+
+    send_btn.click(
+        fn=chat,
+        inputs=[msg_input, chatbot, groq_key],
+        outputs=[msg_input, chatbot]
+    )
+
+    msg_input.submit(
+        fn=chat,
+        inputs=[msg_input, chatbot, groq_key],
+        outputs=[msg_input, chatbot]
+    )
+
+    clear_btn.click(
+        fn=clear_all,
+        outputs=[chatbot, files_list, process_status, process_status]
+    )
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -1,4 +1,4 @@
-streamlit>=1.28.0
+gradio>=4.0.0
 langchain>=0.2.0
 langchain-community>=0.2.0
 langchain-text-splitters>=0.2.0