Update app.py

app.py

@@ -1,141 +1,3 @@
-# import streamlit as st
-# import base64
-# import openai 
-
-# # Function to encode the image to base64
-# def encode_image(image_file):
-#     return base64.b64encode(image_file.getvalue()).decode("utf-8")
-
-# # 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('MTSS:grey[.ai]')
-# st.header('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 = 100  # 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.toggle("Add details about the image. ", value=False)
-
-# if show_details:
-#     # Text input for additional details about the image, shown only if toggle is True
-#     additional_details = st.text_area(
-#         "The details could include specific information that is important to include in the alt text or reflect why the image is being used:",
-#         disabled=not show_details
-#     )
-
-# # Toggle for modifying the prompt for complex images
-# complex_image = st.toggle("Is this a complex image? ", value=False)
-
-# if complex_image:
-#     # Text input for additional details about the image, shown only if toggle is True
-#     complex_image_details = st.caption(
-#         "By clicking this toggle, it will inform MTSS.ai to create a description that exceeds the 125 character limit. "
-#         "Add the description in a placeholder behind the image and 'Description in the content placeholder' in the alt text box. "
-#     )
-
-# # Button to trigger the analysis
-# analyze_button = st.button("Analyze the Image", type="secondary")
-
-# # Optimized prompt for complex images
-# complex_image_prompt_text = (
-#     "As an expert in image accessibility and alternative text, thoroughly describe the image provided. "
-#     "Provide a brief description using not more than 500 characters that convey the essential information conveyed by the image in eight or fewer clear and concise sentences. "
-#     "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."
-# )
-
-# # Check if an image has been uploaded, if the API key is available, and if the button has been pressed
-# 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
-#         else:
-#             prompt_text = (
-#                 "As an expert in image accessibility and alternative text, succinctly describe the image provided in less than 125 characters. "
-#                 "Provide a brief description using not more than 125 characters that convey the essential information conveyed by the image in three or fewer clear and concise sentences for use as alt text. "
-#                 "Skip phrases like 'image of' or 'picture of.' "
-#                 "Your description should form a clear, well-structured, and factual paragraph that avoids bullet points and newlines, 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}"
-#             )
-
-    
-#         # Create the payload for the completion request
-#         messages = [
-#             {
-#                 "role": "user",
-#                 "content": [
-#                     {"type": "text", "text": prompt_text},
-#                     {
-#                         "type": "image_url",
-#                         "image_url": f"data:image/jpeg;base64,{base64_image}",
-#                     },
-#                 ],
-#             }
-#         ]
-    
-#         # Make the request to the OpenAI API
-#         try:
-#             # Without Stream
-            
-#             # response = openai.chat.completions.create(
-#             #     model="gpt-4-vision-preview", messages=messages, max_tokens=250, stream=False
-#             # )
-    
-#             # Stream the response
-#             full_response = ""
-#             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=250, 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.")
-
-
 import streamlit as st
 import base64
 import openai 
@@ -147,71 +9,130 @@ 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
-st.image('MTSS.ai_Logo.png', width=300)  # Adjusted for consistency
+#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.header('VisionText™ | Accessibility')
-st.subheader(':green[_Image Alt Text Generator_]')
+# st.title('MTSS:grey[.ai]')
+# st.header('VisionText™ | Accessibility')
+st.header('VisionText™ | Image Alt Text Generator')
+# st.subheader(':green[_Image Alt Text Generator_]')
 
 # Retrieve the OpenAI API Key from secrets
 openai.api_key = st.secrets["openai_api_key"]
 
-# Initialize placeholders for user inputs
-additional_details = ""
-complex_image_details = ""
-
-# Place the file uploader at the start
+# File uploader allows user to add their own image
 uploaded_file = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
 
-# Define toggles and input areas for additional details
-show_details = st.toggle("Add details about the image.", value=False)
+if uploaded_file:
+    # Display the uploaded image with specified width
+    image_width = 100  # 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.toggle("Add details about the image. ", value=False)
+
 if show_details:
+    # Text input for additional details about the image, shown only if toggle is True
     additional_details = st.text_area(
-        "The details could include specific information that is important to include in the alt text or reflect why the image is being used:"
+        "The details could include specific information that is important to include in the alt text or reflect why the image is being used:",
+        disabled=not show_details
     )
 
-complex_image = st.toggle("Is this a complex image?", value=False)
+# Toggle for modifying the prompt for complex images
+complex_image = st.toggle("Is this a complex image? ", value=False)
 
-# Analyze button
-analyze_button = st.button("Analyze the Image")
+if complex_image:
+    # Text input for additional details about the image, shown only if toggle is True
+    complex_image_details = st.caption(
+        "By clicking this toggle, it will inform MTSS.ai to create a description that exceeds the 125 character limit. "
+        "Add the description in a placeholder behind the image and 'Description in the content placeholder' in the alt text box. "
+    )
 
-# Always visible response area initialized with a placeholder message
-response_placeholder = st.empty()
+# Button to trigger the analysis
+analyze_button = st.button("Analyze the Image", type="secondary")
+
+# Optimized prompt for complex images
+complex_image_prompt_text = (
+    "As an expert in image accessibility and alternative text, thoroughly describe the image provided. "
+    "Provide a brief description using not more than 500 characters that convey the essential information conveyed by the image in eight or fewer clear and concise sentences. "
+    "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."
+)
+
+# Check if an image has been uploaded, if the API key is available, and if the button has been pressed
+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
+        else:
+            prompt_text = (
+                "As an expert in image accessibility and alternative text, succinctly describe the image provided in less than 125 characters. "
+                "Provide a brief description using not more than 125 characters that convey the essential information conveyed by the image in three or fewer clear and concise sentences for use as alt text. "
+                "Skip phrases like 'image of' or 'picture of.' "
+                "Your description should form a clear, well-structured, and factual paragraph that avoids bullet points and newlines, 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}"
+            )
 
-# Display uploaded image and analyze only if an image is uploaded and the button is pressed
-if uploaded_file:
-    # Display the uploaded image with specified width
-    with st.expander("Image Preview", expanded=True):
-        st.image(uploaded_file, caption=uploaded_file.name, width=100)  # Adjusted width for consistency
-
-    if analyze_button:
-        with st.spinner("Analyzing the image..."):
-            # Encode the image
-            base64_image = encode_image(uploaded_file)
-
-            # Prepare the prompt text based on the complexity toggle and additional details
-            prompt_text = "Your prompt here based on the toggles' states."
-
-            # Example payload for the OpenAI API call
-            messages = [
-                {
-                    "role": "user",
-                    "content": prompt_text,
-                    "image_url": f"data:image/jpeg;base64,{base64_image}",
-                }
-            ]
-
-            try:
-                # Simulate an OpenAI API call and response
-                full_response = "Simulated response based on the analysis."
-
-                # Update the response text area
-                response_placeholder.text_area('Response:', value=full_response, height=250, key="response_text_area")
-                st.success('Analysis complete.')
-            except Exception as e:
-                st.error(f"An error occurred: {e}")
+    
+        # Create the payload for the completion request
+        messages = [
+            {
+                "role": "user",
+                "content": [
+                    {"type": "text", "text": prompt_text},
+                    {
+                        "type": "image_url",
+                        "image_url": f"data:image/jpeg;base64,{base64_image}",
+                    },
+                ],
+            }
+        ]
+    
+        # Make the request to the OpenAI API
+        try:
+            # Without Stream
+            
+            # response = openai.chat.completions.create(
+            #     model="gpt-4-vision-preview", messages=messages, max_tokens=250, stream=False
+            # )
+    
+            # Stream the response
+            full_response = ""
+            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=250, 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:
-    # If no image is uploaded, show a waiting message or keep it empty
-    response_placeholder.text_area('Response:', value="Upload an image to analyze.", height=250, key="response_text_area")
-    if analyze_button:
-        st.warning("Please upload an image first.")
+    # Warnings for user action required
+    if not uploaded_file and analyze_button:
+        st.warning("Please upload an image.")
+