Update app.py

app.py

@@ -136,7 +136,6 @@
 #         st.warning("Please upload an image.")
 
 
-
 import streamlit as st
 import base64
 import openai 
@@ -148,9 +147,8 @@ 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 logo image with a specified width
-image_width = 300  # Set the desired width in pixels
-st.image('MTSS.ai_Logo.png', width=image_width)
+# Add the image with a specified width
+st.image('MTSS.ai_Logo.png', width=300)  # Adjusted for consistency
 
 st.header('VisionText™ | Accessibility')
 st.subheader(':green[_Image Alt Text Generator_]')
@@ -158,51 +156,62 @@ st.subheader(':green[_Image Alt Text Generator_]')
 # Retrieve the OpenAI API Key from secrets
 openai.api_key = st.secrets["openai_api_key"]
 
-# Initialize an empty string for the full_response to ensure the text area is always displayed
-full_response = "Awaiting analysis..."
+# Initialize placeholders for user inputs
+additional_details = ""
+complex_image_details = ""
 
-# Toggle for showing additional details input
-show_details = st.toggle("Add details about the image.", value=False)
+# Place the file uploader at the start
+uploaded_file = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
 
-# Text input for additional details about the image, shown based on the toggle state
-additional_details = ""
+# Define toggles and input areas for additional details
+show_details = st.toggle("Add details about the image.", value=False)
 if show_details:
     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:"
     )
 
-# Toggle for modifying the prompt for complex images
 complex_image = st.toggle("Is this a complex image?", value=False)
 
-# Button to trigger the analysis
+# Analyze button
 analyze_button = st.button("Analyze the Image")
 
-# Display the response in a text area
-response_text_area = st.text_area('Response:', value=full_response, height=250, key="response_text_area")
-
-# File uploader allows user to add their own image
-uploaded_file = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
+# Always visible response area initialized with a placeholder message
+response_placeholder = st.empty()
 
+# 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 in an expander
+    # Display the uploaded image with specified width
     with st.expander("Image Preview", expanded=True):
-        st.image(uploaded_file, caption=uploaded_file.name, width=100, use_column_width=False)
-
-# Ensure that analysis only proceeds when an image is uploaded and the analyze button is pressed
-if uploaded_file is not None and analyze_button:
-    with st.spinner("Analyzing the image..."):
-        # Encode the image for analysis
-        base64_image = encode_image(uploaded_file)
-
-        # Logic to set prompt_text based on complex_image toggle state and append additional_details if provided
-
-        # Your OpenAI API call and handling logic here to update full_response based on the analysis
-
-        # Update the response text area with the new full_response
-        response_text_area.text_area('Response:', value=full_response, height=250, key="response_text_area")
-
-        st.success('Analysis complete. Review the generated text for accuracy.')
+        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}")
 else:
-    if not uploaded_file and analyze_button:
-        st.warning("Please upload an image to proceed with the analysis.")
-
+    # 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.")