|
import streamlit as st |
|
from openai import OpenAI |
|
import os |
|
import base64 |
|
from pathlib import Path |
|
|
|
st.set_page_config(page_title="SpeakEasy", layout="wide") |
|
|
|
def img_to_bytes(img_path): |
|
img_bytes = Path(img_path).read_bytes() |
|
encoded = base64.b64encode(img_bytes).decode() |
|
return encoded |
|
|
|
def img_to_html(img_path, width='25', height='25'): |
|
img_html = f"<img src='data:image/png;base64,{img_to_bytes(img_path)}' width='{width}' height='{height}' class='img-fluid'>" |
|
return img_html |
|
|
|
st.markdown(""" |
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> |
|
""", unsafe_allow_html=True) |
|
|
|
|
|
st.markdown(""" |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
color: #000000; |
|
} |
|
|
|
.stApp { |
|
background-color: #F0F4F8; |
|
} |
|
.container { |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 0 2rem; |
|
} |
|
.header { |
|
background-color: #1E40AF; |
|
padding: 1.5rem 0; |
|
margin-bottom: 2rem; |
|
} |
|
.header h1 { |
|
color: #FFFFFF; |
|
font-size: 2.5rem; |
|
font-weight: 600; |
|
margin-bottom: 0.2rem; |
|
} |
|
.header p { |
|
color: #E5E7EB; |
|
font-size: 1.1rem; |
|
font-weight: 300; |
|
} |
|
.content-section { |
|
background-color: white; |
|
border-radius: 12px; |
|
padding: 2rem; |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
color: #000000; |
|
} |
|
.stButton>button { |
|
background-color: #3B82F6; |
|
color: white; |
|
font-weight: 500; |
|
border-radius: 8px; |
|
border: none; |
|
padding: 0.7rem 1.5rem; |
|
transition: background-color 0.3s ease; |
|
} |
|
.stButton>button:hover { |
|
background-color: #2563EB; |
|
} |
|
.upload-box { |
|
border: 2px dashed #CBD5E1; |
|
border-radius: 8px; |
|
padding: 2rem; |
|
text-align: center; |
|
color: #64748B; |
|
transition: border-color 0.3s ease; |
|
} |
|
.upload-box:hover { |
|
border-color: #3B82F6; |
|
} |
|
.footer { |
|
background-color: #1E40AF; |
|
color: #FFFFFF; |
|
text-align: center; |
|
padding: 2rem 0; |
|
margin-top: 3rem; |
|
} |
|
.footer a { |
|
color: #93C5FD; |
|
text-decoration: none; |
|
margin: 0 10px; |
|
transition: color 0.3s ease; |
|
} |
|
.footer a:hover { |
|
color: #BFDBFE; |
|
} |
|
.footer img { |
|
filter: brightness(0) invert(1); |
|
opacity: 0.7; |
|
transition: opacity 0.3s ease; |
|
} |
|
.footer img:hover { |
|
opacity: 1; |
|
} |
|
.subheader { |
|
color: #1E40AF; |
|
font-size: 1.8rem; |
|
font-weight: 600; |
|
margin-bottom: 1.5rem; |
|
} |
|
.stTextInput>div>div>input, .stTextArea textarea { |
|
border-radius: 8px; |
|
border: 1px solid #E2E8F0; |
|
background-color: white !important; |
|
color: #333333 !important; |
|
} |
|
|
|
.stTextArea label { |
|
color: #000000; /* Replace #desired-color with the color you want */ |
|
} |
|
|
|
.stSelectbox>div>div>select { |
|
border-radius: 8px; |
|
border: 1px solid #E2E8F0; |
|
} |
|
|
|
|
|
.progress-bar { |
|
height: 10px; |
|
background-color: #E2E8F0; |
|
border-radius: 5px; |
|
overflow: hidden; |
|
} |
|
.progress-bar-fill { |
|
height: 100%; |
|
background-color: #3B82F6; |
|
transition: width 0.5s ease-in-out; |
|
} |
|
.custom-select { |
|
display: block; |
|
font-size: 16px; |
|
font-family: 'Inter', sans-serif; |
|
font-weight: 400; |
|
color: #333; |
|
line-height: 1.3; |
|
padding: .6em 1.4em .5em .8em; |
|
width: 100%; |
|
max-width: 100%; |
|
box-sizing: border-box; |
|
margin: 0; |
|
border: 1px solid #E2E8F0; |
|
box-shadow: 0 1px 0 1px rgba(0,0,0,.04); |
|
border-radius: 8px; |
|
-moz-appearance: none; |
|
-webkit-appearance: none; |
|
appearance: none; |
|
background-color: #fff; |
|
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'); |
|
background-repeat: no-repeat, repeat; |
|
background-position: right .7em top 50%, 0 0; |
|
background-size: .65em auto, 100%; |
|
} |
|
.custom-select::-ms-expand { |
|
display: none; |
|
} |
|
.custom-select:hover { |
|
border-color: #3B82F6; |
|
} |
|
.custom-select:focus { |
|
border-color: #3B82F6; |
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
color: #222; |
|
outline: none; |
|
} |
|
.custom-select option { |
|
font-weight:normal; |
|
color: #333333; |
|
} |
|
|
|
.stTextArea textarea { |
|
border-radius: 8px; |
|
border: 1px solid #E2E8F0; |
|
background-color: white !important; |
|
color: #000000 !important; |
|
} |
|
|
|
.stTextArea textarea::placeholder { |
|
color: #000000 !important; |
|
opacity: 1 !important; |
|
} |
|
|
|
</style> |
|
""", unsafe_allow_html=True) |
|
|
|
|
|
logo_html = img_to_html('clear_productonics_logo.png', width='50', height='50') |
|
|
|
st.markdown(f""" |
|
<div class="header"> |
|
<div class="container-fluid" style="display: flex; align-items: center; padding: 20px;"> |
|
{logo_html} |
|
<div style="margin-left: 10px;"> |
|
<h1 style="margin: 0;">SpeakEasy</h1> |
|
<p style="margin: 0;">Professional Text-to-Speech Conversion</p> |
|
</div> |
|
</div> |
|
</div> |
|
""", unsafe_allow_html=True) |
|
|
|
|
|
api_key = os.getenv("OPENAI_API_KEY") |
|
|
|
if not api_key: |
|
st.error("OpenAI API Key not found. Please set it in your .env file.") |
|
else: |
|
st.sidebar.success("API Key loaded successfully!") |
|
|
|
|
|
openai_voices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"] |
|
|
|
|
|
|
|
st.markdown('<h2 class="subheader">Text to Speech Converter</h2>', unsafe_allow_html=True) |
|
|
|
col1, col2 = st.columns([3, 2]) |
|
|
|
output_filename = None |
|
with col2: |
|
uploaded_file = st.file_uploader("Upload a text file", type=["txt"]) |
|
with col1: |
|
text_input = st.text_area("Enter text or paste content", height=150) |
|
|
|
|
|
col1_1, col1_2 = st.columns(2) |
|
with col1_1: |
|
st.markdown(""" |
|
<label for="language">Language</label> |
|
<select class="custom-select" id="language" name="language"> |
|
<option value="English">English</option> |
|
<option value="Hindi">Hindi</option> |
|
<option value="Spanish">Spanish</option> |
|
<option value="French">French</option> |
|
<option value="German">German</option> |
|
</select> |
|
""", unsafe_allow_html=True) |
|
|
|
with col1_2: |
|
voice_options = "".join([f'<option value="{voice}">{voice}</option>' for voice in openai_voices]) |
|
st.markdown(f""" |
|
<label for="voice">Voice</label> |
|
<select class="custom-select" id="voice" name="voice"> |
|
{voice_options} |
|
</select> |
|
""", unsafe_allow_html=True) |
|
|
|
if st.button("Convert to Speech"): |
|
if not api_key: |
|
st.error("OpenAI API Key not found. Please set it in your .env file.") |
|
elif text_input or uploaded_file: |
|
text = text_input if text_input else uploaded_file.read().decode("utf-8").strip() |
|
client = OpenAI(api_key=api_key) |
|
|
|
try: |
|
|
|
progress_bar = st.progress(0) |
|
status_text = st.empty() |
|
|
|
|
|
status_text.text("Translating text...") |
|
progress_bar.progress(25) |
|
translation_response = client.chat.completions.create( |
|
model="gpt-4-0613", |
|
messages=[ |
|
{"role": "system", "content": f"Translate all text given to {language}"}, |
|
{"role": "user", "content": text}, |
|
], |
|
max_tokens=300 |
|
) |
|
translated_text = translation_response.choices[0].message.content |
|
progress_bar.progress(50) |
|
|
|
|
|
status_text.text("Generating speech...") |
|
speech_response = client.audio.speech.create( |
|
model="tts-1", |
|
voice=voice, |
|
input=translated_text |
|
) |
|
progress_bar.progress(75) |
|
|
|
output_filename = f"output_{language.lower()}_{voice.lower()}.mp3" |
|
with open(output_filename, "wb") as f: |
|
f.write(speech_response.content) |
|
|
|
progress_bar.progress(100) |
|
status_text.text("Speech generated successfully!") |
|
|
|
st.write(f"Speech generated successfully for {language} with {voice} voice") |
|
st.audio(output_filename, format='audio/mp3') |
|
except Exception as e: |
|
st.error(f"An error occurred: {str(e)}") |
|
else: |
|
st.warning("Please provide some text for speech generation.") |
|
|
|
|
|
if output_filename: |
|
st.markdown("---") |
|
st.markdown('<h2 class="subheader">Download Your Audio</h2>', unsafe_allow_html=True) |
|
col3, col4 = st.columns([1, 4]) |
|
with col3: |
|
st.image("https://img.icons8.com/fluency-systems-filled/96/3B82F6/download.png", width=60) |
|
with col4: |
|
st.markdown('<h2 class="subheader">Ready to Download</h2>', unsafe_allow_html=True) |
|
st.markdown( |
|
""" |
|
<div class="progress-bar"> |
|
<div class="progress-bar-fill" style="width: 100%;"></div> |
|
</div> |
|
""", |
|
unsafe_allow_html=True |
|
) |
|
st.download_button("Download Audio", data=open(output_filename, 'rb').read(), file_name=output_filename) |
|
|
|
st.markdown('</div></div>', unsafe_allow_html=True) |
|
|
|
|
|
st.markdown( |
|
""" |
|
<div class="footer"> |
|
<div class="container"> |
|
<p>© 2024 SpeakEasy by Apps Consultants Inc. All rights reserved.</p> |
|
<p> |
|
<a href="#">Home</a> | |
|
<a href="#">Features</a> | |
|
<a href="#">Pricing</a> | |
|
<a href="#">About</a> | |
|
<a href="#">Contact</a> |
|
</p> |
|
<p> |
|
<a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" width="24"></a> |
|
<a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" width="24"></a> |
|
<a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" width="24"></a> |
|
<a href="#"><img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" width="24"></a> |
|
</p> |
|
</div> |
|
</div> |
|
""", |
|
unsafe_allow_html=True |
|
) |
