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