Update app.py

app.py

@@ -116,6 +116,7 @@
 
 
 
+
 import streamlit as st
 import base64
 import openai 
@@ -127,26 +128,42 @@ def encode_image(image_file):
 # Streamlit page setup
 st.set_page_config(page_title="MTSS Image Accessibility Alt Text Generator", layout="centered", initial_sidebar_state="collapsed")
 
+#Add the image with a specified width
+image_width = 300  # Set the desired width in pixels
+st.image('MTSS.ai_Logo.png', width=image_width)
+
+st.title('VisionText™ | Accessibility')
+st.subheader(':green[_Image Alt Text Generator_]')
+
+# Retrieve the OpenAI API Key from secrets
+openai.api_key = st.secrets["openai_api_key"]
+
 # File uploader allows user to add their own image
 uploaded_file = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
 
+if uploaded_file:
+    # Display the uploaded image with specified width
+    image_width = 150  # Set the desired width in pixels
+    with st.expander("Image", expanded=True):
+        st.image(uploaded_file, caption=uploaded_file.name, width=image_width, use_column_width=False)
+
 # Toggle for showing additional details input
-show_details = st.checkbox("Optional: Add details about the image. " 
+show_details = st.toggle("Optional: Add details about the image. " 
                          "The details could include specific information that is important to include in the alt text or reflect why the image is being used.", value=False)
 
 # Toggle for modifying the prompt for complex images
-complex_image = st.checkbox("Is this a complex image? " 
-                         "By checking this box, it will inform MTSS.ai to create a robust description that exceeds the 124 character limit. You will add the description to a placeholder behind the image. Add 'Description in the content placeholder' in the alt text box.", value=False)
+complex_image = st.toggle("Is this a complex image? " 
+                         "By checking this box, it will inform MTSS.ai to create a robust description that exceeds the 125 character limit. You will add the description to a placeholder behind the image. Add 'Description in the content placeholder' in the alt text box.", value=False)
 
 if show_details:
-    # Text input for additional details about the image, shown only if checkbox is True
+    # Text input for additional details about the image, shown only if toggle is True
     additional_details = st.text_area(
         "Add any additional details or context about the image here:",
         disabled=not show_details
     )
 
 # Button to trigger the analysis
-analyze_button = st.button("Analyze the Image")
+analyze_button = st.button("Analyze the Image", type="secondary")
 
 # Optimized prompt for complex images
 complex_image_prompt_text = (
@@ -162,7 +179,7 @@ if uploaded_file is not None and analyze_button:
     with st.spinner("Analyzing the image ..."):
         # Encode the image
         base64_image = encode_image(uploaded_file)
-    
+
         # Determine which prompt to use based on the complexity of the image
         if complex_image:
             prompt_text = complex_image_prompt_text
@@ -173,10 +190,13 @@ if uploaded_file is not None and analyze_button:
                 "Skip phrases like 'image of' or 'picture of.' "
                 "Your description should form a clear, well-structured, and factual paragraph that avoids bullet points, focusing on creating a seamless narrative that serves as effective alternative text for accessibility purposes."
             )
-
+    
         if show_details and additional_details:
-            prompt_text += f"\n\nAdditional Context Provided by the User:\n{additional_details}"
+            prompt_text += (
+                f"\n\nAdditional Context Provided by the User:\n{additional_details}"
+            )
 
+    
         # Create the payload for the completion request
         messages = [
             {
@@ -190,14 +210,40 @@ if uploaded_file is not None and analyze_button:
                 ],
             }
         ]
-
+    
         # Make the request to the OpenAI API
         try:
+            # Without Stream
+            
+            # response = openai.chat.completions.create(
+            #     model="gpt-4-vision-preview", messages=messages, max_tokens=500, stream=False
+            # )
+    
+            # Stream the response
             full_response = ""
-            for completion in openai.ChatCompletion.create(
+            message_placeholder = st.empty()
+            for completion in openai.chat.completions.create(
                 model="gpt-4-vision-preview", messages=messages, 
                 max_tokens=250, stream=True
             ):
+            #     # Check if there is content to display
+            #     if completion.choices[0].delta.content is not None:
+            #         full_response += completion.choices[0].delta.content
+            #         message_placeholder.markdown(full_response + "▌")
+            # # Final update to placeholder after the stream ends
+            # message_placeholder.markdown(full_response) # stream text
+            
+                # Check if there is content to display
                 if completion.choices[0].delta.content is not None:
                     full_response += completion.choices[0].delta.content
 
+            # Display the response in a text area
+            st.text_area('Response:', value=full_response, height=400, key="response_text_area")
+            
+            st.success('Powered by MTSS GPT. AI can make mistakes. Consider checking important information.')
+        except Exception as e:
+            st.error(f"An error occurred: {e}")
+else:
+    # Warnings for user action required
+    if not uploaded_file and analyze_button:
+        st.warning("Please upload an image.")