File size: 9,268 Bytes
94fcb7c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f76d77f
 
e47c925
ea6a4e1
f76d77f
 
 
 
 
7557518
a507e51
94fcb7c
ac833ba
 
8ec3355
0e270a9
8ec3355
 
 
 
 
94fcb7c
 
e47c925
b3484d2
94fcb7c
a2d596c
94fcb7c
 
4996d49
a2d596c
94fcb7c
a2d596c
 
4ab8249
94fcb7c
a688783
e73f3f8
94fcb7c
dd32d54
94fcb7c
 
235a4b4
94fcb7c
 
 
 
 
 
 
8ec3355
94fcb7c
 
 
 
e73f3f8
e47c925
94fcb7c
e47c925
94fcb7c
dd32d54
94fcb7c
 
 
 
8ec3355
 
94fcb7c
e73f3f8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
# 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 

# 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 logo 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_]')

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

# Toggle for showing additional details input
show_details = st.toggle("Add details about the image.", value=False)

# Text input for additional details about the image, shown based on the toggle state
additional_details = ""
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 = 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"])

if uploaded_file:
    # Display the uploaded image with specified width in an expander
    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.')
else:
    if not uploaded_file and analyze_button:
        st.warning("Please upload an image to proceed with the analysis.")