Spaces:

Krish-05
/

chatbot_guvi

Sleeping

App Files Files Community

Krish-05 commited on Jul 20, 2025

Commit

8e43129

verified ·

1 Parent(s): 0bc4633

Update streamlit_app.py

Browse files

Files changed (1) hide show

streamlit_app.py +34 -257

streamlit_app.py CHANGED Viewed

@@ -1,292 +1,69 @@
 import streamlit as st
 import requests
 import json
-import time # For simulating loading
-# Configuration for the FastAPI backend
-# When running in Docker, 'localhost' from Streamlit's perspective
-# refers to the container itself.
-FASTAPI_HOST = "localhost"
-FASTAPI_PORT = 7860
-FASTAPI_URL = f"http://{FASTAPI_HOST}:{FASTAPI_PORT}/ask"
 st.set_page_config(page_title="Ollama AI Assistant", page_icon="🤖", layout="wide")
-# --- Custom CSS for styling (mimicking Tailwind where possible) ---
-# Streamlit doesn't directly support Tailwind classes on its native widgets,
-# so we'll inject custom CSS to try and match the look.
-# For elements rendered via st.markdown with unsafe_allow_html=True,
-# we can use the provided Tailwind CDN.
-st.markdown(
-    """
-    <head>
-        <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
-        <link
-            rel="stylesheet"
-            as="style"
-            onload="this.rel='stylesheet'"
-            href="https://fonts.googleapis.com/css2?display=swap&family=Inter:wght@400;500;700;900&family=Noto+Sans:wght@400;500;700;900"
-        />
-        <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-        <style>
-            /* Apply Inter font to the whole body for consistency */
-            body {
-                font-family: 'Inter', 'Noto Sans', sans-serif;
-            }
-            /* Custom styling for Streamlit's native text area and button to blend in */
-            .stTextArea > div > div > textarea {
-                border-radius: 0.5rem; /* rounded-lg */
-                background-color: #f0f2f4; /* bg-[#f0f2f4] */
-                color: #111418; /* text-[#111418] */
-                border: none;
-                padding: 1rem; /* px-4 py-3 */
-                font-size: 1rem; /* text-base */
-                line-height: 1.5rem; /* leading-normal */
-                resize: vertical; /* Allow vertical resize */
-            }
-            .stButton > button {
-                border-radius: 0.5rem; /* rounded-lg */
-                background-color: #197fe5; /* bg-[#197fe5] */
-                color: white; /* text-white */
-                font-weight: 500; /* font-medium */
-                padding: 0.5rem 1rem; /* px-4 py-2 */
-                font-size: 0.875rem; /* text-sm */
-                line-height: 1.25rem; /* leading-normal */
-                border: none;
-                cursor: pointer;
-                transition: background-color 0.2s;
-            }
-            .stButton > button:hover {
-                background-color: #156ac0; /* Darker shade on hover */
-            }
-            /* Custom styling for Streamlit's success/error/info messages */
-            .stAlert {
-                border-radius: 0.5rem;
-                padding: 1rem;
-                margin-bottom: 1rem;
-            }
-            .stAlert.success {
-                background-color: #d4edda;
-                color: #155724;
-                border-color: #c3e6cb;
-            }
-            .stAlert.info {
-                background-color: #d1ecf1;
-                color: #0c5460;
-                border-color: #bee5eb;
-            }
-            .stAlert.error {
-                background-color: #f8d7da;
-                color: #721c24;
-                border-color: #f5c6cb;
-            }
-            .stAlert.warning {
-                background-color: #fff3cd;
-                color: #856404;
-                border-color: #ffeeba;
-            }
-            /* Main layout container adjustments for Streamlit */
-            .main .block-container {
-                padding-left: 2.5rem; /* px-10 */
-                padding-right: 2.5rem; /* px-10 */
-                padding-top: 1.25rem; /* py-5 */
-                padding-bottom: 1.25rem; /* py-5 */
-                max-width: 960px; /* max-w-[960px] */
-                margin-left: auto;
-                margin-right: auto;
-            }
-            .reportview-container .main {
-                background-color: white;
-            }
-        </style>
-    </head>
-    """,
-    unsafe_allow_html=True
-)
-# --- Initialize chat history in session state ---
 if 'chat_history' not in st.session_state:
     st.session_state.chat_history = [
         {"role": "assistant", "message": "Hello! How can I assist you today?"}
     ]
-# --- Header Section ---
-st.markdown(
-    """
-    <div class="relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden" style='font-family: Inter, "Noto Sans", sans-serif;'>
-        <div class="layout-container flex h-full grow flex-col">
-            <header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f4] px-10 py-3">
-                <div class="flex items-center gap-4 text-[#111418]">
-                    <div class="size-4">
-                        <svg viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
-                            ></path>
-                        </svg>
-                    </div>
-                    <h2 class="text-[#111418] text-lg font-bold leading-tight tracking-[-0.015em]">Ollama AI Assistant</h2>
-                </div>
-                <div class="flex flex-1 justify-end gap-8">
-                    <div class="flex items-center gap-9">
-                        <a class="text-[#111418] text-sm font-medium leading-normal" href="#">Home</a>
-                        <a class="text-[#111418] text-sm font-medium leading-normal" href="#">About</a>
-                        <a class="text-[#111418] text-sm font-medium leading-normal" href="#">Contact</a>
-                    </div>
-                    <button
-                        class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 bg-[#f0f2f4] text-[#111418] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
-                    >
-                        <div class="text-[#111418]" data-icon="Question" data-size="20px" data-weight="regular">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
-                                <path
-                                    d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
-                                ></path>
-                            </svg>
-                        </div>
-                    </button>
-                    <div
-                        class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
-                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC5KnfW55B9wImWCPuTc-su9IqknYT6UByWvZiMMcykiONoep2xgQzZVy3-rO3Eg5es87eMIdQjykY7rhMDLxqclYZyBbAPBOt2O7w1CwDPv07CBM_xm6bb69JPvr47GHBN8TAJTaPvEsazBM4FdVPdpqOuL0NkEempaK4qxmKrQZdLomFGEolqi6jx2w03c656tRpmsE8dOFAK12G9JbduRuDXSw3EhOQLLNaJZTwpU6TXnmIc0z3Mq3oKR27GeCTKaQvy1Rgin11U");'
-                    ></div>
-                </div>
-            </header>
-            <div class="px-40 flex flex-1 justify-center py-5">
-                <div class="layout-content-container flex flex-col max-w-[960px] flex-1">
-                    <h2 class="text-[#111418] tracking-light text-[28px] font-bold leading-tight px-4 text-center pb-3 pt-5">Welcome to the Chatbot</h2>
-                    <p class="text-[#111418] text-base font-normal leading-normal pb-3 pt-1 px-4 text-center">
-                        Start chatting with our AI assistant. Type your message below and press send.
-                    </p>
-    """,
-    unsafe_allow_html=True
-)
-# --- Chat Display Area ---
-chat_display_container = st.container()
-with chat_display_container:
-    for chat in st.session_state.chat_history:
-        if chat["role"] == "assistant":
-            st.markdown(
-                f"""
-                <div class="flex items-end gap-3 p-4">
-                    <div
-                        class="bg-center bg-no-repeat aspect-square bg-cover rounded-full w-10 shrink-0"
-                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBKHyf9huD3r49CwxpDcgRD4Ks1kSV0CxqU2WM_1p5TIcqUHVdNtLTsHIqBLBWVloYC-Zo9mzohtE_MrpMEcOkMkY0QBmPNSq4BRYd9fn0h3FRJtIesg86T8LbeM3Eq2C4IYsnrGSof88GoEho-X6vJkj9S-csVf7cwDfgUsv6qtacgVPsKIMNAAlLHYxGONGfUaa8U2XNfBPrZ0ieLOsKlK0BDsOG4JH6slntUBVimLXxb7cn96F");'
-                    ></div>
-                    <div class="flex flex-1 flex-col gap-1 items-start">
-                        <p class="text-[#637588] text-[13px] font-normal leading-normal max-w-[360px]">AI Assistant</p>
-                        <p class="text-base font-normal leading-normal flex max-w-[360px] rounded-lg px-4 py-3 bg-[#f0f2f4] text-[#111418]">{chat["message"]}</p>
-                    </div>
-                </div>
-                """,
-                unsafe_allow_html=True
-            )
-        else: # role == "user"
-            st.markdown(
-                f"""
-                <div class="flex items-end gap-3 p-4 justify-end">
-                    <div class="flex flex-1 flex-col gap-1 items-end">
-                        <p class="text-[#637588] text-[13px] font-normal leading-normal max-w-[360px] text-right">You</p>
-                        <p class="text-base font-normal leading-normal flex max-w-[360px] rounded-lg px-4 py-3 bg-[#197fe5] text-white">{chat["message"]}</p>
-                    </div>
-                    <div
-                        class="bg-center bg-no-repeat aspect-square bg-cover rounded-full w-10 shrink-0"
-                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBnmIGyzlGKCR0gv4IOuNULvdR6AgNnZYMSi6whrzgaOZabk8OYAVghLVv8XTaihjo7VHEEhlvA_zxPtn8Tq8gRHOswzwsC2Xy7HQuQ8wlZLcYyTUeJvj5sJwNPtvaqtn9QCAMwymfrao07KZ9EIw1hQT2FU4szlvMuttkBguNWJ1LnxsmQQwhltofj5A48jZcjo8w3ldVkuheoWJ-NMI3m1U-e6_YLtGuPDN_SEQrKSHUyGCdscSL2ZgB9DlrTR8WU8jaHOxcZRldy");'
-                    ></div>
-                </div>
-                """,
-                unsafe_allow_html=True
-            )
 # --- Input Area ---
-# Use a form to handle input and button click
 with st.form("chat_form", clear_on_submit=True):
-    col1, col2 = st.columns([0.9, 0.1])
-    with col1:
-        user_prompt = st.text_area(
-            "Type your message here...",
-            height=60,
-            placeholder="e.g., Explain quantum computing in simple terms.",
-            label_visibility="collapsed", # Hide the default label
-            key="user_input_text_area" # Add a key for the text area
-        )
-    with col2:
-        # Custom button styling using markdown
-        send_button_html = """
-        <button type="submit" class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 bg-[#197fe5] text-white gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5">
-            <span class="truncate">Send</span>
-        </button>
-        """
-        submitted = st.form_submit_button(label="Send", use_container_width=True)
     if submitted and user_prompt:
-        # Add user message to chat history
         st.session_state.chat_history.append({"role": "user", "message": user_prompt})
-        # Display a loading message
-        loading_message = st.empty()
-        loading_message.markdown(
-            """
-            <div class="flex items-end gap-3 p-4">
-                <div
-                    class="bg-center bg-no-repeat aspect-square bg-cover rounded-full w-10 shrink-0"
-                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBKHyf9huD3r49CwxpDcgRD4Ks1kSV0CxqU2WM_1p5TIcqUHVdNtLTsHIqBLBWVloYC-Zo9mzohtE_MrpMEcOkMkY0QBmPNSq4BRYd9fn0h3FRJtIesg86T8LbeM3Eq2C4IYsnrGSof88GoEho-X6vJkj9S-csVf7cwDfgUsv6qtacgVPsKIMNAAlLHYxGONGfUaa8U2XNfBPrZ0ieLOsKlK0BDsOG4JH6slntUBVimLXxb7cn96F");'
-                ></div>
-                <div class="flex flex-1 flex-col gap-1 items-start">
-                    <p class="text-[#637588] text-[13px] font-normal leading-normal max-w-[360px]">AI Assistant</p>
-                    <p class="text-base font-normal leading-normal flex max-w-[360px] rounded-lg px-4 py-3 bg-[#f0f2f4] text-[#111418]">Thinking... Please wait as the model generates a response.</p>
-                </div>
-            </div>
-            """,
-            unsafe_allow_html=True
-        )
         try:
-            # Prepare the request payload
             payload = {"text": user_prompt}
             headers = {"Content-Type": "application/json"}
-            # Make the POST request to the FastAPI endpoint
             response = requests.post(FASTAPI_URL, data=json.dumps(payload), headers=headers)
-            # Clear the loading message
-            loading_message.empty()
-            # Check if the request was successful (status code 200)
             if response.status_code == 200:
-                data = response.json()
-                llm_response = data.get("response", "No response received.")
-                st.session_state.chat_history.append({"role": "assistant", "message": llm_response})
             else:
-                error_message = f"Error: Could not get a response from the FastAPI server. Status code: {response.status_code}. Details: {response.text}"
-                st.error(error_message)
-                st.session_state.chat_history.append({"role": "assistant", "message": f"Error: {error_message}"})
         except requests.exceptions.ConnectionError:
-            error_message = f"Error: Could not connect to the FastAPI server. Please ensure it is running at {FASTAPI_URL}."
-            st.error(error_message)
-            st.session_state.chat_history.append({"role": "assistant", "message": f"Error: {error_message}"})
         except Exception as e:
-            error_message = f"An unexpected error occurred: {e}"
-            st.error(error_message)
-            st.session_state.chat_history.append({"role": "assistant", "message": f"Error: {error_message}"})
-        # Rerun to update chat history display
         st.experimental_rerun()
     elif submitted and not user_prompt:
         st.warning("Please enter a prompt before clicking 'Send'.")
 # --- Footer ---
-st.markdown(
-    """
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="flex items-center justify-center whitespace-nowrap px-10 py-3 mt-auto">
-        <p class="text-[#637588] text-sm font-normal leading-normal">Powered by Ollama, FastAPI, and Streamlit.</p>
-    </div>
-    """,
-    unsafe_allow_html=True
-)

 import streamlit as st
 import requests
 import json
+# FastAPI configuration
+FASTAPI_URL = "http://localhost:7860/ask"
 st.set_page_config(page_title="Ollama AI Assistant", page_icon="🤖", layout="wide")
+# --- Session state for chat history ---
 if 'chat_history' not in st.session_state:
     st.session_state.chat_history = [
         {"role": "assistant", "message": "Hello! How can I assist you today?"}
     ]
+# --- App Header ---
+st.title("🤖 Ollama AI Assistant")
+st.caption("Start chatting with our AI assistant. Type your message below and press send.")
+# --- Chat Display ---
+st.markdown("---")
+for chat in st.session_state.chat_history:
+    if chat["role"] == "assistant":
+        with st.chat_message("assistant", avatar="🤖"):
+            st.write(chat["message"])
+    else:
+        with st.chat_message("user"):
+            st.write(chat["message"])
 # --- Input Area ---
 with st.form("chat_form", clear_on_submit=True):
+    user_prompt = st.text_area(
+        "Type your message here...",
+        height=100,
+        placeholder="e.g., Explain quantum computing in simple terms.",
+        label_visibility="collapsed",
+        key="user_input_text_area"
+    )
+    submitted = st.form_submit_button("Send")
     if submitted and user_prompt:
         st.session_state.chat_history.append({"role": "user", "message": user_prompt})
+        with st.chat_message("assistant", avatar="🤖"):
+            st.write("Thinking...")
         try:
             payload = {"text": user_prompt}
             headers = {"Content-Type": "application/json"}
             response = requests.post(FASTAPI_URL, data=json.dumps(payload), headers=headers)
             if response.status_code == 200:
+                llm_response = response.json().get("response", "No response received.")
             else:
+                llm_response = f"Error: FastAPI server returned {response.status_code}. Details: {response.text}"
         except requests.exceptions.ConnectionError:
+            llm_response = f"Error: Cannot connect to the FastAPI server at {FASTAPI_URL}."
         except Exception as e:
+            llm_response = f"Unexpected error: {e}"
+        st.session_state.chat_history.append({"role": "assistant", "message": llm_response})
         st.experimental_rerun()
     elif submitted and not user_prompt:
         st.warning("Please enter a prompt before clicking 'Send'.")
 # --- Footer ---
+st.markdown("---")
+st.caption("Powered by Ollama, FastAPI, and Streamlit.")