app.py

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)

# Custom CSS
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)

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

# Get API key from environment variable
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 TTS voices
openai_voices = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"]

# Main content
# st.markdown('<div class="container"><div class="content-section">', unsafe_allow_html=True)
st.markdown('<h2 class="subheader">Text to Speech Converter</h2>', unsafe_allow_html=True)

col1, col2 = st.columns([3, 2])

output_filename = None  # Initialize output_filename in a broader scope
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
                progress_bar = st.progress(0)
                status_text = st.empty()

                # Translate the text using GPT-4
                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)

                # Generate speech using OpenAI TTS
                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.")

# Download section
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)

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