shenoyrj commited on
Commit
c01d185
1 Parent(s): ab4ed00

changed name for app

Browse files
Files changed (1) hide show
  1. app.py +354 -0
app.py ADDED
@@ -0,0 +1,354 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+ from openai import OpenAI
3
+ import os
4
+ import base64
5
+ from pathlib import Path
6
+
7
+ st.set_page_config(page_title="SpeakEasy", layout="wide")
8
+
9
+ def img_to_bytes(img_path):
10
+ img_bytes = Path(img_path).read_bytes()
11
+ encoded = base64.b64encode(img_bytes).decode()
12
+ return encoded
13
+
14
+ def img_to_html(img_path, width='25', height='25'):
15
+ img_html = f"<img src='data:image/png;base64,{img_to_bytes(img_path)}' width='{width}' height='{height}' class='img-fluid'>"
16
+ return img_html
17
+
18
+ st.markdown("""
19
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
20
+ """, unsafe_allow_html=True)
21
+
22
+ # Custom CSS
23
+ st.markdown("""
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ color: #000000;
30
+ }
31
+
32
+ .stApp {
33
+ background-color: #F0F4F8;
34
+ }
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 0 2rem;
39
+ }
40
+ .header {
41
+ background-color: #1E40AF;
42
+ padding: 1.5rem 0;
43
+ margin-bottom: 2rem;
44
+ }
45
+ .header h1 {
46
+ color: #FFFFFF;
47
+ font-size: 2.5rem;
48
+ font-weight: 600;
49
+ margin-bottom: 0.2rem;
50
+ }
51
+ .header p {
52
+ color: #E5E7EB;
53
+ font-size: 1.1rem;
54
+ font-weight: 300;
55
+ }
56
+ .content-section {
57
+ background-color: white;
58
+ border-radius: 12px;
59
+ padding: 2rem;
60
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
61
+ color: #000000;
62
+ }
63
+ .stButton>button {
64
+ background-color: #3B82F6;
65
+ color: white;
66
+ font-weight: 500;
67
+ border-radius: 8px;
68
+ border: none;
69
+ padding: 0.7rem 1.5rem;
70
+ transition: background-color 0.3s ease;
71
+ }
72
+ .stButton>button:hover {
73
+ background-color: #2563EB;
74
+ }
75
+ .upload-box {
76
+ border: 2px dashed #CBD5E1;
77
+ border-radius: 8px;
78
+ padding: 2rem;
79
+ text-align: center;
80
+ color: #64748B;
81
+ transition: border-color 0.3s ease;
82
+ }
83
+ .upload-box:hover {
84
+ border-color: #3B82F6;
85
+ }
86
+ .footer {
87
+ background-color: #1E40AF;
88
+ color: #FFFFFF;
89
+ text-align: center;
90
+ padding: 2rem 0;
91
+ margin-top: 3rem;
92
+ }
93
+ .footer a {
94
+ color: #93C5FD;
95
+ text-decoration: none;
96
+ margin: 0 10px;
97
+ transition: color 0.3s ease;
98
+ }
99
+ .footer a:hover {
100
+ color: #BFDBFE;
101
+ }
102
+ .footer img {
103
+ filter: brightness(0) invert(1);
104
+ opacity: 0.7;
105
+ transition: opacity 0.3s ease;
106
+ }
107
+ .footer img:hover {
108
+ opacity: 1;
109
+ }
110
+ .subheader {
111
+ color: #1E40AF;
112
+ font-size: 1.8rem;
113
+ font-weight: 600;
114
+ margin-bottom: 1.5rem;
115
+ }
116
+ .stTextInput>div>div>input, .stTextArea textarea {
117
+ border-radius: 8px;
118
+ border: 1px solid #E2E8F0;
119
+ background-color: white !important;
120
+ color: #333333 !important;
121
+ }
122
+
123
+ .stTextArea label {
124
+ color: #000000; /* Replace #desired-color with the color you want */
125
+ }
126
+
127
+ .stSelectbox>div>div>select {
128
+ border-radius: 8px;
129
+ border: 1px solid #E2E8F0;
130
+ }
131
+
132
+
133
+ .progress-bar {
134
+ height: 10px;
135
+ background-color: #E2E8F0;
136
+ border-radius: 5px;
137
+ overflow: hidden;
138
+ }
139
+ .progress-bar-fill {
140
+ height: 100%;
141
+ background-color: #3B82F6;
142
+ transition: width 0.5s ease-in-out;
143
+ }
144
+ .custom-select {
145
+ display: block;
146
+ font-size: 16px;
147
+ font-family: 'Inter', sans-serif;
148
+ font-weight: 400;
149
+ color: #333;
150
+ line-height: 1.3;
151
+ padding: .6em 1.4em .5em .8em;
152
+ width: 100%;
153
+ max-width: 100%;
154
+ box-sizing: border-box;
155
+ margin: 0;
156
+ border: 1px solid #E2E8F0;
157
+ box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
158
+ border-radius: 8px;
159
+ -moz-appearance: none;
160
+ -webkit-appearance: none;
161
+ appearance: none;
162
+ background-color: #fff;
163
+ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
164
+ background-repeat: no-repeat, repeat;
165
+ background-position: right .7em top 50%, 0 0;
166
+ background-size: .65em auto, 100%;
167
+ }
168
+ .custom-select::-ms-expand {
169
+ display: none;
170
+ }
171
+ .custom-select:hover {
172
+ border-color: #3B82F6;
173
+ }
174
+ .custom-select:focus {
175
+ border-color: #3B82F6;
176
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
177
+ color: #222;
178
+ outline: none;
179
+ }
180
+ .custom-select option {
181
+ font-weight:normal;
182
+ color: #333333;
183
+ }
184
+
185
+ .stTextArea textarea {
186
+ border-radius: 8px;
187
+ border: 1px solid #E2E8F0;
188
+ background-color: white !important;
189
+ color: #000000 !important;
190
+ }
191
+
192
+ .stTextArea textarea::placeholder {
193
+ color: #000000 !important;
194
+ opacity: 1 !important;
195
+ }
196
+
197
+ </style>
198
+ """, unsafe_allow_html=True)
199
+
200
+ # Header
201
+ logo_html = img_to_html('clear_productonics_logo.png', width='50', height='50')
202
+
203
+ st.markdown(f"""
204
+ <div class="header">
205
+ <div class="container-fluid" style="display: flex; align-items: center; padding: 20px;">
206
+ {logo_html}
207
+ <div style="margin-left: 10px;">
208
+ <h1 style="margin: 0;">SpeakEasy</h1>
209
+ <p style="margin: 0;">Professional Text-to-Speech Conversion</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ """, unsafe_allow_html=True)
214
+
215
+ # Get API key from environment variable
216
+ api_key = os.getenv("OPENAI_API_KEY")
217
+
218
+ if not api_key:
219
+ st.error("OpenAI API Key not found. Please set it in your .env file.")
220
+ else:
221
+ st.sidebar.success("API Key loaded successfully!")
222
+
223
+ # OpenAI TTS voices
224
+ openai_voices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"]
225
+
226
+ # Main content
227
+ # st.markdown('<div class="container"><div class="content-section">', unsafe_allow_html=True)
228
+ st.markdown('<h2 class="subheader">Text to Speech Converter</h2>', unsafe_allow_html=True)
229
+
230
+ col1, col2 = st.columns([3, 2])
231
+
232
+ output_filename = None # Initialize output_filename in a broader scope
233
+ with col2:
234
+ uploaded_file = st.file_uploader("Upload a text file", type=["txt"])
235
+ with col1:
236
+ text_input = st.text_area("Enter text or paste content", height=150)
237
+
238
+
239
+ col1_1, col1_2 = st.columns(2)
240
+ with col1_1:
241
+ st.markdown("""
242
+ <label for="language">Language</label>
243
+ <select class="custom-select" id="language" name="language">
244
+ <option value="English">English</option>
245
+ <option value="Hindi">Hindi</option>
246
+ <option value="Spanish">Spanish</option>
247
+ <option value="French">French</option>
248
+ <option value="German">German</option>
249
+ </select>
250
+ """, unsafe_allow_html=True)
251
+
252
+ with col1_2:
253
+ voice_options = "".join([f'<option value="{voice}">{voice}</option>' for voice in openai_voices])
254
+ st.markdown(f"""
255
+ <label for="voice">Voice</label>
256
+ <select class="custom-select" id="voice" name="voice">
257
+ {voice_options}
258
+ </select>
259
+ """, unsafe_allow_html=True)
260
+
261
+ if st.button("Convert to Speech"):
262
+ if not api_key:
263
+ st.error("OpenAI API Key not found. Please set it in your .env file.")
264
+ elif text_input or uploaded_file:
265
+ text = text_input if text_input else uploaded_file.read().decode("utf-8").strip()
266
+ client = OpenAI(api_key=api_key)
267
+
268
+ try:
269
+ # Progress bar
270
+ progress_bar = st.progress(0)
271
+ status_text = st.empty()
272
+
273
+ # Translate the text using GPT-4
274
+ status_text.text("Translating text...")
275
+ progress_bar.progress(25)
276
+ translation_response = client.chat.completions.create(
277
+ model="gpt-4-0613",
278
+ messages=[
279
+ {"role": "system", "content": f"Translate all text given to {language}"},
280
+ {"role": "user", "content": text},
281
+ ],
282
+ max_tokens=300
283
+ )
284
+ translated_text = translation_response.choices[0].message.content
285
+ progress_bar.progress(50)
286
+
287
+ # Generate speech using OpenAI TTS
288
+ status_text.text("Generating speech...")
289
+ speech_response = client.audio.speech.create(
290
+ model="tts-1",
291
+ voice=voice,
292
+ input=translated_text
293
+ )
294
+ progress_bar.progress(75)
295
+
296
+ output_filename = f"output_{language.lower()}_{voice.lower()}.mp3"
297
+ with open(output_filename, "wb") as f:
298
+ f.write(speech_response.content)
299
+
300
+ progress_bar.progress(100)
301
+ status_text.text("Speech generated successfully!")
302
+
303
+ st.write(f"Speech generated successfully for {language} with {voice} voice")
304
+ st.audio(output_filename, format='audio/mp3')
305
+ except Exception as e:
306
+ st.error(f"An error occurred: {str(e)}")
307
+ else:
308
+ st.warning("Please provide some text for speech generation.")
309
+
310
+ # Download section
311
+ if output_filename:
312
+ st.markdown("---")
313
+ st.markdown('<h2 class="subheader">Download Your Audio</h2>', unsafe_allow_html=True)
314
+ col3, col4 = st.columns([1, 4])
315
+ with col3:
316
+ st.image("https://img.icons8.com/fluency-systems-filled/96/3B82F6/download.png", width=60)
317
+ with col4:
318
+ st.markdown('<h2 class="subheader">Ready to Download</h2>', unsafe_allow_html=True)
319
+ st.markdown(
320
+ """
321
+ <div class="progress-bar">
322
+ <div class="progress-bar-fill" style="width: 100%;"></div>
323
+ </div>
324
+ """,
325
+ unsafe_allow_html=True
326
+ )
327
+ st.download_button("Download Audio", data=open(output_filename, 'rb').read(), file_name=output_filename)
328
+
329
+ st.markdown('</div></div>', unsafe_allow_html=True)
330
+
331
+ # Footer
332
+ st.markdown(
333
+ """
334
+ <div class="footer">
335
+ <div class="container">
336
+ <p>© 2024 SpeakEasy by Apps Consultants Inc. All rights reserved.</p>
337
+ <p>
338
+ <a href="#">Home</a> |
339
+ <a href="#">Features</a> |
340
+ <a href="#">Pricing</a> |
341
+ <a href="#">About</a> |
342
+ <a href="#">Contact</a>
343
+ </p>
344
+ <p>
345
+ <a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" width="24"></a>
346
+ <a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" width="24"></a>
347
+ <a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" width="24"></a>
348
+ <a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" width="24"></a>
349
+ </p>
350
+ </div>
351
+ </div>
352
+ """,
353
+ unsafe_allow_html=True
354
+ )