Convert Streamlit app to Gradio

app.py

@@ -1,28 +1,25 @@
 import os
-import streamlit as st  # type: ignore
-
+import gradio as gr
 from dotenv import load_dotenv
 from PyPDF2 import PdfReader
 
-from langchain_classic.text_splitter import RecursiveCharacterTextSplitter
+from langchain_text_splitters import RecursiveCharacterTextSplitter
 from langchain_cohere import CohereEmbeddings, ChatCohere
 from langchain_community.vectorstores import FAISS
 from langchain_classic.chains import ConversationalRetrievalChain
-from langchain_classic.memory import ConversationBufferMemory
 
 load_dotenv()
 
-st.set_page_config(
-    page_title="Chat with Documents",
-    page_icon="📚"
-)
 
+# =========================================================
+# 1. EXTRACT TEXT FROM PDF FILES
+# =========================================================
 
-def get_pdf_text(pdf_docs):
+def get_pdf_text(pdf_files):
     text = ""
 
-    for pdf in pdf_docs:
-        pdf_reader = PdfReader(pdf)
+    for pdf_file in pdf_files:
+        pdf_reader = PdfReader(pdf_file)
 
         for page in pdf_reader.pages:
             text += page.extract_text() or ""
@@ -30,6 +27,10 @@ def get_pdf_text(pdf_docs):
     return text
 
 
+# =========================================================
+# 2. SPLIT TEXT INTO CHUNKS
+# =========================================================
+
 def get_text_chunks(text):
     text_splitter = RecursiveCharacterTextSplitter(
         separators=["\n\n", "\n", " ", ""],
@@ -41,180 +42,556 @@ def get_text_chunks(text):
     return text_splitter.split_text(text)
 
 
+# =========================================================
+# 3. CREATE COHERE EMBEDDINGS
+# =========================================================
+
 def get_embeddings():
     return CohereEmbeddings(
-        model='embed-english-v3.0',
+        model="embed-english-v3.0",
         user_agent="langchain"
     )
 
 
+# =========================================================
+# 4. CREATE CONVERSATIONAL RETRIEVAL CHAIN
+# =========================================================
+
 def get_conversational_chain(vectorstore):
     llm = ChatCohere(
         model="command-r-08-2024",
         temperature=0
     )
 
-    memory = ConversationBufferMemory(
-        memory_key="chat_history",
-        return_messages=True,
-        output_key="answer"
-    )
-
     conversational_chain = ConversationalRetrievalChain.from_llm(
         llm=llm,
         retriever=vectorstore.as_retriever(),
-        memory=memory,
-        return_source_documents=True
+        return_source_documents=False
     )
 
     return conversational_chain
 
 
-def handle_userinput(user_question):
-    response = st.session_state.conversational_chain.invoke(
-        {"question": user_question}
-    )
+# =========================================================
+# 5. PROCESS UPLOADED DOCUMENTS
+# =========================================================
 
-    answer = response["answer"]
+def process_documents(pdf_files):
 
-    st.session_state.chat_history = (
-        st.session_state.conversational_chain.memory
-        .load_memory_variables({})["chat_history"]
-    )
+    if not pdf_files:
+        return (
+            None,
+            [],
+            "Please upload at least one PDF."
+        )
 
-    for i, message in enumerate(st.session_state.chat_history):
-        if message.type == "human":
-            with st.chat_message("user"):
-                st.write(message.content)
-        else:
-            with st.chat_message("assistant"):
-                st.write(message.content)
-
-
-def main():
-    st.markdown(
-        """
-        <style>
-        .main {
-            background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
-        }
-        .block-container {
-            padding-top: 2rem;
-            padding-bottom: 2rem;
-        }
-        .hero {
-            background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
-            padding: 2rem 2rem;
-            border-radius: 22px;
-            box-shadow: 0 12px 30px rgba(29, 78, 216, 0.18);
-            margin-bottom: 1.5rem;
-            margin-top: 1.5rem;
-        }
-        .hero h1 {
-            color: white !important;
-            font-size: 2.5rem !important;
-            font-weight: 800 !important;
-            margin: 0 !important;
-        }
-        .hero p {
-            color: #dbeafe !important;
-            font-size: 1.05rem !important;
-            margin-top: 0.5rem !important;
-            margin-bottom: 0 !important;
-        }
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
+    if not os.getenv("COHERE_API_KEY"):
+        return (
+            None,
+            [],
+            "Error: Cohere API key is missing."
+        )
 
-    st.markdown(
-        """
-        <div class="hero">
-            <h1> AI Chatbot for Your Documents</h1>
-            <p>Upload a PDF and ask questions in natural language.</p>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
+    try:
+        raw_text = get_pdf_text(pdf_files)
+
+        if not raw_text.strip():
+            return (
+                None,
+                [],
+                "No extractable text found in the PDFs."
+            )
+
+        chunks = get_text_chunks(raw_text)
 
-    if "conversational_chain" not in st.session_state:
-        st.session_state.conversational_chain = None
+        if not chunks:
+            return (
+                None,
+                [],
+                "No text chunks were created."
+            )
 
-    if "chat_history" not in st.session_state:
-        st.session_state.chat_history = []
+        embeddings = get_embeddings()
 
-    with st.sidebar:
-        st.header("Upload Documents")
+        vectorstore = FAISS.from_texts(
+            texts=chunks,
+            embedding=embeddings
+        )
+
+        chain = get_conversational_chain(vectorstore)
 
-        pdf_docs = st.file_uploader(
-            "Upload your PDF files",
-            type=["pdf"],
-            accept_multiple_files=True
+        return (
+            chain,
+            [],
+            "Documents processed successfully! You can now ask questions."
         )
 
-        if st.button("Process Documents"):
-            if not pdf_docs:
-                st.warning("Please upload at least one PDF.")
-            elif not os.getenv("COHERE_API_KEY"):
-                st.error("Cohere API key is missing.")
-            else:
-                try:
-                    with st.spinner("Processing documents..."):
-                        raw_text = get_pdf_text(pdf_docs)
+    except Exception as e:
+        return (
+            None,
+            [],
+            f"Error processing documents: {str(e)}"
+        )
+
+
+# =========================================================
+# 6. CONVERT GRADIO CHAT HISTORY TO LANGCHAIN FORMAT
+# =========================================================
 
-                        if not raw_text.strip():
-                            st.error("No extractable text found in the PDFs.")
-                            return
+def convert_chat_history(history):
+    chat_history = []
+    pending_question = None
 
-                        chunks = get_text_chunks(raw_text)
+    for message in history or []:
 
-                        embeddings = get_embeddings()
+        if isinstance(message, dict):
+            role = message.get("role")
+            content = message.get("content", "")
 
-                        vectorstore = FAISS.from_texts(
-                            texts=chunks,
-                            embedding=embeddings
-                        )
+            # Convert list-based content into a string
+            if isinstance(content, list):
+                content = " ".join(
+                    str(item.get("text", ""))
+                    if isinstance(item, dict)
+                    else str(item)
+                    for item in content
+                )
 
-                        st.session_state.conversational_chain = (
-                            get_conversational_chain(vectorstore)
-                        )
+            content = str(content)
 
-                        st.session_state.chat_history = []
+            if role == "user":
+                pending_question = content
 
-                    st.success("Documents processed successfully!")
+            elif role == "assistant" and pending_question is not None:
+                chat_history.append(
+                    (pending_question, content)
+                )
+                pending_question = None
 
-                except Exception as e:
-                    st.error(f"Error processing documents: {e}")
+        elif isinstance(message, (list, tuple)) and len(message) == 2:
+            user_message, assistant_message = message
 
-    user_question = st.chat_input("Ask a question about your PDFs")
+            if user_message:
+                chat_history.append(
+                    (
+                        str(user_message),
+                        str(assistant_message or "")
+                    )
+                )
 
-    if user_question:
-        if st.session_state.conversational_chain is None:
-            st.warning("Please upload and process your documents first.")
+    return chat_history
+
+
+# =========================================================
+# 7. HANDLE USER QUESTIONS
+# =========================================================
+
+def handle_user_question(question, history, chain):
+
+    history = list(history or [])
+
+    if not question or not question.strip():
+        return history, ""
+
+    question = question.strip()
+
+    if chain is None:
+        history.append({
+            "role": "user",
+            "content": question
+        })
+
+        history.append({
+            "role": "assistant",
+            "content": "Please upload and process your PDFs first."
+        })
+
+        return history, ""
+
+    try:
+        # Convert previous messages into LangChain format
+        chat_history = convert_chat_history(history)
+
+        # Ask the question
+        response = chain.invoke({
+            "question": question,
+            "chat_history": chat_history
+        })
+
+        answer = response.get(
+            "answer",
+            "No answer was generated."
+        )
+
+        # Ensure the answer is a string
+        if isinstance(answer, list):
+            answer = " ".join(
+                str(item.get("text", ""))
+                if isinstance(item, dict)
+                else str(item)
+                for item in answer
+            )
         else:
-            with st.chat_message("user"):
-                st.write(user_question)
-
-            with st.chat_message("assistant"):
-                with st.spinner("Thinking..."):
-                    try:
-                        response = (
-                            st.session_state.conversational_chain.invoke(
-                                {"question": user_question}
-                            )
-                        )
-                        st.write(response["answer"])
-
-                        st.session_state.chat_history = (
-                            st.session_state.conversational_chain
-                            .memory.load_memory_variables(
-                                {}
-                            )["chat_history"]
-                        )
-
-                    except Exception as e:
-                        st.error(f"Error generating answer: {e}")
+            answer = str(answer)
+
+        # Add the new conversation to Gradio history
+        history.append({
+            "role": "user",
+            "content": question
+        })
+
+        history.append({
+            "role": "assistant",
+            "content": answer
+        })
+
+        return history, ""
+
+    except Exception as e:
+        history.append({
+            "role": "user",
+            "content": question
+        })
+
+        history.append({
+            "role": "assistant",
+            "content": f"Error generating answer: {str(e)}"
+        })
+
+        return history, ""
+
+
+# =========================================================
+# 8. CLEAR CHAT
+# =========================================================
+
+def clear_chat():
+    return []
+
+
+# =========================================================
+# 9. CUSTOM CSS - RESPONSIVE DESIGN
+# =========================================================
+
+custom_css = """
+/* Overall application */
+.gradio-container {
+    background: #0e0f14 !important;
+    color: #f8fafc !important;
+    max-width: 100% !important;
+    min-height: 100vh;
+    padding: 16px !important;
+}
+
+/* Main row */
+#main-row {
+    display: flex !important;
+    align-items: flex-start !important;
+    gap: 20px !important;
+    max-width: 1500px;
+    margin: 0 auto !important;
+}
+
+/* Sidebar */
+#sidebar {
+    background: #24252f !important;
+    border: 1px solid #343642 !important;
+    border-radius: 14px !important;
+    padding: 16px !important;
+    height: fit-content !important;
+    min-height: 0 !important;
+    align-self: flex-start !important;
+    margin-top: 40px;
+}
+
+/* Sidebar heading */
+#sidebar h2 {
+    font-size: 1.15rem !important;
+    margin: 0 0 12px 0 !important;
+    color: #ffffff !important;
+}
+
+/* Compact PDF uploader */
+#sidebar [data-testid="file-upload"] {
+    min-height: 110px !important;
+}
+
+/* Process button */
+#process-button {
+    margin-top: 10px !important;
+    border-radius: 8px !important;
+    transition: transform 0.2s ease,
+                box-shadow 0.2s ease;
+}
+
+/* Button hover effect */
+#process-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+/* Status box */
+#status {
+    margin-top: 10px !important;
+}
+
+/* Main content */
+#main-panel {
+    padding: 0 8px !important;
+    min-width: 0 !important;
+}
+
+/* Hero header */
+#hero {
+    background: linear-gradient(
+        120deg,
+        #0f172a 0%,
+        #1d4ed8 100%
+    );
+    padding: 28px 32px;
+    border-radius: 18px;
+    box-shadow: 0 10px 30px rgba(29, 78, 216, 0.18);
+    margin: 24px 0 18px 0;
+    transition: box-shadow 0.2s ease;
+}
+
+/* Hero hover effect */
+#hero:hover {
+    box-shadow: 0 12px 34px rgba(29, 78, 216, 0.28);
+}
+
+/* Hero title */
+#hero h1 {
+    color: white !important;
+    font-size: clamp(1.5rem, 2.5vw, 2.3rem) !important;
+    font-weight: 800 !important;
+    line-height: 1.25 !important;
+    margin: 0 !important;
+}
+
+/* Hero description */
+#hero p {
+    color: #dbeafe !important;
+    font-size: 1rem !important;
+    margin: 10px 0 0 0 !important;
+}
+
+/* Chat window */
+#chatbot {
+    border-radius: 12px !important;
+    min-height: 280px !important;
+    height: calc(100vh - 390px) !important;
+    max-height: 650px !important;
+    overflow: auto !important;
+}
+
+/* Question input */
+#question-box {
+    margin-top: 12px !important;
+}
+
+/* Input field */
+#question-box textarea {
+    min-height: 48px !important;
+    border-radius: 10px !important;
+}
+
+/* Clear button */
+#main-panel button {
+    border-radius: 8px !important;
+    transition: background 0.2s ease;
+}
+
+/* Hide Gradio footer */
+footer {
+    display: none !important;
+}
+
+/* Tablet screens */
+@media (max-width: 900px) {
+    .gradio-container {
+        padding: 12px !important;
+    }
+
+    #main-row {
+        gap: 14px !important;
+    }
+
+    #sidebar {
+        margin-top: 30px;
+        padding: 12px !important;
+    }
+
+    #hero {
+        padding: 22px;
+    }
+
+    #chatbot {
+        height: 55vh !important;
+    }
+}
+
+/* Mobile screens */
+@media (max-width: 700px) {
+    .gradio-container {
+        padding: 8px !important;
+    }
+
+    #main-row {
+        flex-direction: column !important;
+        gap: 12px !important;
+    }
+
+    #sidebar {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin-top: 0 !important;
+        padding: 14px !important;
+    }
+
+    #main-panel {
+        width: 100% !important;
+        max-width: 100% !important;
+        padding: 0 !important;
+    }
+
+    #hero {
+        margin: 8px 0 14px 0;
+        padding: 20px;
+        border-radius: 14px;
+    }
+
+    #hero h1 {
+        font-size: 1.5rem !important;
+    }
+
+    #hero p {
+        font-size: 0.9rem !important;
+    }
+
+    #chatbot {
+        height: 55vh !important;
+        min-height: 300px !important;
+        max-height: none !important;
+    }
+
+    #question-box {
+        margin-top: 10px !important;
+    }
+}
+"""
+
+
+# =========================================================
+# 10. BUILD GRADIO INTERFACE
+# =========================================================
+
+with gr.Blocks(
+    title="Chat with Documents",
+    theme=gr.themes.Base(),
+    css=custom_css
+) as demo:
+
+    # Store the conversational chain
+    chain_state = gr.State(None)
+
+    with gr.Row(
+        elem_id="main-row",
+        equal_height=False
+    ):
+
+        # LEFT SIDEBAR
+        with gr.Column(
+            scale=1,
+            min_width=250,
+            elem_id="sidebar"
+        ):
+
+            gr.Markdown("## Upload Documents")
+
+            pdf_upload = gr.File(
+                file_types=[".pdf"],
+                file_count="multiple",
+                type="filepath",
+                height=120
+            )
+
+            process_button = gr.Button(
+                "Process Documents",
+                variant="primary",
+                elem_id="process-button"
+            )
+
+            status = gr.Textbox(
+                label="Status",
+                interactive=False,
+                lines=2,
+                elem_id="status"
+            )
+
+        # RIGHT CHAT AREA
+        with gr.Column(
+            scale=4,
+            min_width=300,
+            elem_id="main-panel"
+        ):
+
+            # Header
+            gr.HTML("""
+                <div id="hero">
+                    <h1>AI Chatbot for Your Documents</h1>
+                    <p>
+                        Upload a PDF and ask questions in natural language.
+                    </p>
+                </div>
+            """)
+
+            # Chatbot
+            chatbot = gr.Chatbot(
+                label="Chat with your PDFs",
+                height=500,
+                elem_id="chatbot"
+            )
+
+            # Question input
+            question = gr.Textbox(
+                label="Ask a question",
+                placeholder="Ask a question about your PDFs",
+                lines=1,
+                max_lines=1,
+                elem_id="question-box"
+            )
+
+            # Clear chat button
+            clear_button = gr.Button(
+                "Clear Chat"
+            )
+
+    # Process PDF documents
+    process_button.click(
+        fn=process_documents,
+        inputs=[pdf_upload],
+        outputs=[chain_state, chatbot, status]
+    )
+
+    # Press Enter to send a question
+    question.submit(
+        fn=handle_user_question,
+        inputs=[question, chatbot, chain_state],
+        outputs=[chatbot, question]
+    )
+
+    # Clear conversation
+    clear_button.click(
+        fn=clear_chat,
+        inputs=[],
+        outputs=[chatbot]
+    )
+
 
+# =========================================================
+# 11. LAUNCH APPLICATION
+# =========================================================
 
 if __name__ == "__main__":
-    main()
+    demo.queue().launch()