Update app.py

app.py

@@ -10,14 +10,14 @@ import requests
 # load_dotenv()
 
 # Streamlit page setup
-st.set_page_config(page_title="Pixel Generator", layout="centered", initial_sidebar_state="collapsed")
+st.set_page_config(page_title="PromptCanvas™", 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.header('PromptCanvas™ | Images')
-st.subheader('Image Builder')
+st.subheader('Image Builder + Alt Text')
 
 # Retrieve the OpenAI API Key from secrets
 openai.api_key = st.secrets["openai_api_key"]
@@ -30,47 +30,182 @@ openai.api_key = st.secrets["openai_api_key"]
 # Set the OpenAI API key
 # openai.api_key = openai_api_key
 
-def generate_images(prompt): #def generate_images(image_description, num_images):
+# def generate_images(prompt): #def generate_images(image_description, num_images):
+#     response = openai.images.generate(
+#         model="dall-e-3",
+#         prompt = prompt,
+#         size="1024x1024",
+#         quality="standard",
+#         n = 1,
+#     )
+#     image_url = response.data[0].url
+#     return image_url
+
+# # Use a unique key for the text area to avoid conflicts with other session_state usages
+# image_description_prompt = st.text_area("Enter a description for the image you want to generate", key="image_description")
+
+# if st.button("Generate Images"):
+#     with st.spinner("Analyzing the image ..."):
+#         # Generate the image and store its URL in session_state
+#         st.session_state['generated_image_url'] = generate_images(image_description_prompt)
+
+# # Check if the 'generated_image_url' key exists in session_state and display the image and download button
+# if 'generated_image_url' in st.session_state and st.session_state['generated_image_url']:
+#     st.image(st.session_state['generated_image_url'], caption="Generated Image")
+
+#     # Fetch the image from the URL to enable downloading
+#     response = requests.get(st.session_state['generated_image_url'])
+#     if response.status_code == 200:
+#         img_bytes = BytesIO(response.content)
+#         st.download_button(
+#             label="Download Image",
+#             data=img_bytes,
+#             file_name="generated_image.png",
+#             mime="image/png",
+#             type="primary"
+#         )
+#         st.success('Powered by MTSS GPT. AI can make mistakes. Consider checking important information.')
+
+def generate_images(prompt):
     response = openai.images.generate(
         model="dall-e-3",
-        prompt = prompt,
+        prompt=prompt,
         size="1024x1024",
         quality="standard",
-        n = 1,
+        n=1,
     )
     image_url = response.data[0].url
     return image_url
 
-# prompt = st.text_area("Enter a description for the image you want to generate")
-
-# #create a button
-# if st.button("Generate Images"):
-#     with st.spinner("Analyzing the image ..."):
-#         generate_image=generate_images(prompt)  #generate_image=generate_images(prompt, num_of_images)
-#         st.image(generate_image)
-
-# Use a unique key for the text area to avoid conflicts with other session_state usages
-image_description_prompt = st.text_area("Enter a description for the image you want to generate", key="image_description")
+# Input for image description
+# prompt = st.text_input("Enter a description for the image you want to generate")
+prompt = st.text_area("Enter a description for the image you want to generate")
 
-if st.button("Generate Images"):
-    with st.spinner("Analyzing the image ..."):
-        # Generate the image and store its URL in session_state
-        st.session_state['generated_image_url'] = generate_images(image_description_prompt)
+# Generate Image button
+if st.button("Generate Image"):
+    generated_image_url = generate_images(prompt)
+    if generated_image_url:
+        # st.image(generated_image_url, caption="Generated Image")
+        # Store the generated image URL in the session state
+        st.session_state['generated_image_url'] = generated_image_url
 
-# Check if the 'generated_image_url' key exists in session_state and display the image and download button
-if 'generated_image_url' in st.session_state and st.session_state['generated_image_url']:
+# Display the generated image if it's in the session state
+if 'generated_image_url' in st.session_state:
     st.image(st.session_state['generated_image_url'], caption="Generated Image")
-
-    # Fetch the image from the URL to enable downloading
+    
+    # Fetch the image to download
     response = requests.get(st.session_state['generated_image_url'])
     if response.status_code == 200:
-        img_bytes = BytesIO(response.content)
+        # Create a download button and provide the image content as a byte stream
         st.download_button(
             label="Download Image",
-            data=img_bytes,
-            file_name="generated_image.png",
-            mime="image/png",
-            type="primary"
+            data=response.content,
+            file_name="generated_image.jpg",
+            mime="image/jpeg"
         )
-        st.success('Powered by MTSS GPT. AI can make mistakes. Consider checking important information.')
+
+# Show the following options only if an image has been generated
+if 'generated_image_url' in st.session_state:
+    
+    # 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. "
+        )
+
+    # Analyze Image button
+    # 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 analyze_button:
+
+        with st.spinner("Analyzing the image ..."):
+
+            # 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": st.session_state['generated_image_url'],
+                        },
+                    ],
+                }
+            ]
+        
+            # 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=1200, 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)
+
+                # # 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 st.session_state['generated_image_url'] and analyze_button:
+    #         st.warning("Please upload an image.")
+
+