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>
    .menu-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #333;
        padding: 10px;
        color: white;
        font-family: 'sans-serif';  /* Use sans-serif font */
    }
    .menu-icon {
        font-size: 24px;
        background-color: #ffffff;
        border-radius: 50%;
        padding: 5px;
        text-decoration: none;  /* Remove underline from emoji */
    }
    .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;  /* Make text bold */
    }
    .menu-item a, .menu-icon a {
        color: white;
        text-decoration: none;  /* Remove underline */
    }
    .menu-item:hover {
        background-color: #777;
    }
</style>

<div class="menu-bar">
    <a href="#" class="menu-icon">🎵</a>  <!-- Make emoji clickable -->
    <div class="menu-items">
        <span class="menu-item"><a href="#">Dashboard</a></span>
        <span class="menu-item"><a href="#">Premium Apps</a></span>
        <span class="menu-item"><a href="#">My Account</a></span>
        <span class="menu-item"><a href="#">Train Voice</a></span>
    </div>
</div>

"""

description = """
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. Sign up on [ElevenLabs](https://elevenlabs.io) to get fast access, long-form generation, voice cloning, API keys, and more!
"""


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)