Spaces:

Krish-05
/

chatbot_guvi

Sleeping

App Files Files Community

Krish-05 commited on Jul 20, 2025

Commit

0bc4633

verified ·

1 Parent(s): 46ddf37

Update streamlit_app.py

Browse files

Files changed (1) hide show

streamlit_app.py +276 -36

streamlit_app.py CHANGED Viewed

@@ -10,43 +10,283 @@ 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="🤖")
-st.title("🤖 Ollama AI Assistant")
-st.markdown("Enter your prompt below and get a response from the Ollama model running via FastAPI.")
-# Text area for user input
-user_prompt = st.text_area("Enter your prompt here:", height=150, placeholder="e.g., Explain quantum computing in simple terms.")
-# Button to trigger the API call
-if st.button("Get Response"):
-    if user_prompt:
         # Display a loading message
-        with st.spinner("Thinking... Please wait as the model generates a response."):
-            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)
-                # 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.success("Response from AI Assistant:")
-                    st.info(llm_response)
-                else:
-                    st.error(f"Error: Could not get a response from the FastAPI server. Status code: {response.status_code}")
-                    st.error(f"Details: {response.text}")
-            except requests.exceptions.ConnectionError:
-                st.error("Error: Could not connect to the FastAPI server. Please ensure it is running.")
-                st.info(f"Attempted to connect to: {FASTAPI_URL}")
-            except Exception as e:
-                st.error(f"An unexpected error occurred: {e}")
-    else:
-        st.warning("Please enter a prompt before clicking 'Get Response'.")
-st.markdown("---")
-st.markdown("Powered by Ollama, FastAPI, and Streamlit.")

 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
+)