Update page2.py

page2.py

@@ -5,6 +5,11 @@ from streamlit_chat import message
 from PIL import Image
 import base64
 import io
+from IPython.display import display
+from IPython.display import Markdown
+
+import pathlib
+import textwrap
 from langchain.chains import LLMChain
 from langchain.prompts import PromptTemplate
 from langchain.memory import ConversationBufferMemory
@@ -12,7 +17,39 @@ from langchain.memory.chat_message_histories import StreamlitChatMessageHistory
 
 # Streamlit app
 def image():
-
+    st.markdown("""
+                        <style>
+                            .anim-typewriter {
+                                animation: typewriter 3s steps(40) 1s 1 normal both, blinkTextCursor 800ms steps(40) infinite normal;
+                                overflow: hidden;
+                                white-space: nowrap;
+                                border-right: 4px solid;
+                                font-family: serif;
+                                font-size: 1.1em;
+                            }
+                            @keyframes typewriter {
+                                from {
+                                    width: 0;
+                                }
+                                to {
+                                    width: 100%;
+                                    height: 100%
+                                }
+                            }
+                            @keyframes blinkTextCursor {
+                                from {
+                                    border-right-color: rgba(255, 255, 255, 0.75);
+                                }
+                                to {
+                                    border-right-color: transparent;
+                                }
+                            }
+                        </style>
+                    """, unsafe_allow_html=True)
+    text1 = "Hello 👋, upload an image and ask questions related to it!"
+    animated = f'<div class="line-1 anim-typewriter">{text1}</div>'
+    with st.chat_message("assistant").markdown(animated, unsafe_allow_html=True):
+        st.markdown(animated, unsafe_allow_html=True)
     def process_image(uploaded_file):
         # Display the uploaded image
         image = Image.open(uploaded_file)
@@ -36,8 +73,7 @@ def image():
         if uploaded_file is not None:
             image_url = process_image(uploaded_file)
 
-    with st.chat_message("assistant"):
-        st.write("Hello 👋, upload an image and ask questions related to it!")
+
     if 'messages' not in st.session_state:
         st.session_state['messages'] = []
 
@@ -63,9 +99,92 @@ def image():
                     "content": prompt
                 }
             )
-        with st.spinner('Generating...'):
-            response = llm.invoke([message])
-            text_output = response.content
+        spinner_html = """
+                <div class="col-3">
+                <div class="snippet" data-title="dot-pulse">
+                  <div class="stage">
+                    <div class="dot-pulse"></div>
+                  </div>
+                </div>
+              </div>
+                """
+
+        spinner_css = """
+                .dot-pulse {
+          position: relative;
+          left: -9999px;
+
+          width: 10px;
+          height: 10px;
+          border-radius: 5px;
+          background-color: #9880ff;
+          color: #9880ff;
+          box-shadow: 9999px 0 0 -5px;
+          animation: dot-pulse 1.5s infinite linear;
+          animation-delay: 0.25s;
+        }
+        .dot-pulse::before, .dot-pulse::after {
+          content: "";
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          width: 10px;
+          height: 10px;
+          border-radius: 5px;
+          background-color: #9880ff;
+          color: #9880ff;
+        }
+        .dot-pulse::before {
+          box-shadow: 9984px 0 0 -5px;
+          animation: dot-pulse-before 1.5s infinite linear;
+          animation-delay: 0s;
+        }
+        .dot-pulse::after {
+          box-shadow: 10014px 0 0 -5px;
+          animation: dot-pulse-after 1.5s infinite linear;
+          animation-delay: 0.5s;
+        }
+
+        @keyframes dot-pulse-before {
+          0% {
+            box-shadow: 9984px 0 0 -5px;
+          }
+          30% {
+            box-shadow: 9984px 0 0 2px;
+          }
+          60%, 100% {
+            box-shadow: 9984px 0 0 -5px;
+          }
+        }
+        @keyframes dot-pulse {
+          0% {
+            box-shadow: 9999px 0 0 -5px;
+          }
+          30% {
+            box-shadow: 9999px 0 0 2px;
+          }
+          60%, 100% {
+            box-shadow: 9999px 0 0 -5px;
+          }
+        }
+        @keyframes dot-pulse-after {
+          0% {
+            box-shadow: 10014px 0 0 -5px;
+          }
+          30% {
+            box-shadow: 10014px 0 0 2px;
+          }
+          60%, 100% {
+            box-shadow: 10014px 0 0 -5px;
+          }
+        }
+                """
+
+        st.markdown(f'<style>{spinner_css}</style>', unsafe_allow_html=True)
+        st.markdown(spinner_html, unsafe_allow_html=True)
+        response = llm.invoke([message])
+        text_output = response.content
+        st.markdown('<style>.dot-pulse { visibility: hidden; }</style>', unsafe_allow_html=True)
 
         with st.chat_message("assistant").markdown(text_output):
             st.session_state.messages.append(