app.py

import random 
import gradio as gr 
import numpy as np 
from elevenlabs import voices, generate, set_api_key, UnauthenticatedRateLimitError

def pad_buffer(audio):
    # Pad buffer to multiple of 2 bytes
    buffer_size = len(audio)
    element_size = np.dtype(np.int16).itemsize
    if buffer_size % element_size != 0:
        audio = audio + b'\0' * (element_size - (buffer_size % element_size))
    return audio 

def generate_voice(text, voice_name):
    try:
        audio = generate(
            text[:250], # Limit to 250 characters
            voice=voice_name, 
            model="eleven_multilingual_v2"
        )
        return (44100, np.frombuffer(pad_buffer(audio), dtype=np.int16))
    except UnauthenticatedRateLimitError as e:
        raise gr.Error("Thanks for trying out ElevenLabs TTS! You've reached the free tier limit. Please provide an API key to continue.") 
    except Exception as e:
        raise gr.Error(e)
    

badges = """
"""
menu = """
<style>
    /* Existing styles */
    .gradio-container-3-40-1 .prose a {
        color: #ffffff!important;
        text-decoration: auto!important;
    }
    .menu-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        padding: 10px;
        color: white;
        font-family: 'sans-serif';
    }
    .menu-bar a, .menu-bar a:visited {
        color: white;
        text-decoration: none;
    }
    .menu-icon {
        font-size: 24px;
        background-color: #ffffff;
        border-radius: 50%;
        padding: 5px;
    }
    .menu-items {
        display: flex;
        gap: 15px;
        color: white;
    }
    .menu-item {
        padding: 8px 16px;
        background-color: #555;
        border-radius: 4px;
        transition: background-color 0.3s;
        font-weight: bold;
        font-size: 12px;
    }
    .menu-item:hover {
        background-color: #777;
    }

    /* Responsive styles for mobile */
    @media (max-width: 768px) {
        .menu-item {
            font-size: 12px;  /* Shrink text size */
        }
        .menu-icon {
            font-size: 18px;  /* Shrink icon size */
        }
    }
</style>

<div class="menu-bar">
    <a href="#" class="menu-icon">🎵</a>
    <div class="menu-items">
        <span class="menu-item"><a href="#">Dashboard</a></span>
        <span class="menu-item"><a href="#">Premium</a></span>
        <span class="menu-item"><a href="#">Account</a></span>
        <span class="menu-item"><a href="#">Voices</a></span>
    </div>
</div>

"""

description = """
<style>
    .notification {
        text-align: left;  /* Left-align the text */
        background-color: #ffffff;  /* White Background */
        color: #000;  /* Black text */
        padding: 20px;  /* Padding */
        margin: 20px;  /* Margin */
        margin-bottom: 40px;  /* Additional space below the notification */
        border: 2px solid #000000;  /* Black border */
        border-radius: 20px;  /* Rounded corners */
        font-size: 18px;  /* Font size */
        font-family: 'Arial', sans-serif;  /* Font family */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);  /* Subtle box shadow for depth */
    }
</style>

<div class="notification">
    Welcome to AI Tutor Text to Voice, single foundational model supporting 28 languages including: English, Chinese, Spanish, Hindi, Portuguese, French, German, Japanese, Arabic, Korean, Indonesian, Italian, Dutch, Turkish, Polish, Swedish, Filipino, Malay, Romanian, Ukrainian, Greek, Czech, Danish, Finnish, Bulgarian, Croatian, Slovak, and Tamil.
</div>

"""


with gr.Blocks() as block:
    gr.Markdown('')
    gr.Markdown(menu)  # Added the menu here
    gr.Markdown(badges)
    gr.Markdown(description)
    
    input_text = gr.Textbox(
        label="Input Text (250 characters max)", 
        lines=2, 
        value="Hello! 你好! Hola! नमस्ते! Bonjour! こんにちは! مرحبا! 안녕하세요! Ciao! Cześć! Привіт! Γειά σας! Здравей! வணக்கம்!",
        elem_id="input_text"
    )

    all_voices = voices() 
    input_voice = gr.Dropdown(
        [ voice.name for voice in all_voices ], 
        value="Bella",
        label="Voice", 
        elem_id="input_voice"
    )

    run_button = gr.Button(
        text="Generate Voice", 
        type="button"
    )

    out_audio = gr.Audio(
        label="Generated Voice",
        type="numpy", 
        elem_id="out_audio",
        format="mp3"
    )
        
    inputs = [input_text, input_voice]
    outputs = [out_audio]
    
    run_button.click(
        fn=generate_voice, 
        inputs=inputs, 
        outputs=outputs, 
        queue=True
    )

block.queue(concurrency_count=5).launch(debug=True)