app.py

import streamlit as st
# import base64
import openai 
from io import BytesIO
import requests

# import os
# from pathlib import Path
# from dotenv import load_dotenv
# load_dotenv()

# Streamlit page setup
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 + Alt Text')

# Retrieve the OpenAI API Key from secrets
openai.api_key = st.secrets["openai_api_key"]

# Set the OpenAI API key
# Retrieve OpenAI API key from environment variables
# openai_api_key = os.getenv('OPENAI_API_KEY')
# if not openai_api_key:
#     raise ValueError("OPENAI_API_KEY not set in environment variables")
# Set the OpenAI API key
# openai.api_key = openai_api_key

# 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,
        size="1024x1024",
        quality="standard",
        n=1,
    )
    image_url = response.data[0].url
    return image_url

# 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")

# 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

# 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 to download
    response = requests.get(st.session_state['generated_image_url'])
    if response.status_code == 200:
        # Create a download button and provide the image content as a byte stream
        st.download_button(
            label="Download Image",
            data=response.content,
            file_name="generated_image.jpg",
            mime="image/jpeg"
        )

# 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.")