import gradio as gr import subprocess import uuid import os os.makedirs("outputs", exist_ok=True) def speak(text): if not text.strip(): return None out_file = f"outputs/{uuid.uuid4().hex}.wav" cmd = [ "pocket-tts", "--text", text, "--output", out_file ] try: subprocess.run(cmd, check=True) return out_file except Exception: return None css = """ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&display=swap'); /* GLOBAL */ body { background: #0b0f17 !important; color: white; font-family: Inter, sans-serif; } /* CONTAINER */ .gradio-container { max-width: 1100px !important; margin: auto !important; } /* TITLE (force left) */ h1, #title { font-family: 'Nunito', sans-serif; font-size: 34px; font-weight: 800; text-align: left !important; margin-left: 6px; } /* FORCE REAL SPLIT LAYOUT */ .gr-row { display: flex !important; gap: 18px; } /* PANELS */ .gr-column { flex: 1 !important; } /* GLASS CARD */ .panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 18px; backdrop-filter: blur(14px); } /* TEXTBOX */ textarea { border-radius: 14px !important; } /* BUTTON - REMOVE ALL GLOW */ button { border-radius: 14px !important; background: #2a2f3a !important; color: white !important; font-weight: 700 !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,0.08) !important; } /* REMOVE GRADIENT HALO / RING EFFECT */ button::before, button::after { display: none !important; background: none !important; box-shadow: none !important; } /* REMOVE FOCUS RING */ button:focus { outline: none !important; box-shadow: none !important; } """ with gr.Blocks(css=css) as demo: gr.Markdown("# Pocket Voice UI", elem_id="title") with gr.Row(): with gr.Column(elem_classes=["panel"]): text = gr.Textbox( label="Prompt", lines=12, placeholder="Type what you want the voice to say..." ) btn = gr.Button("Generate") with gr.Column(elem_classes=["panel"]): audio = gr.Audio(label="Output", type="filepath") btn.click(speak, text, audio) demo.launch()