Text To Voice Master Prompt by PLUG

import React, { useState, useRef } from 'react';
import { Play, Loader2, Mic, Activity, Gauge, Clock, BookOpen } from 'lucide-react';

const VOICES = [
  { id: 'Charon', name: 'အောင်အောင်', gender: 'Male' }, { id: 'Fenrir', name: 'ရဲရင့်', gender: 'Male' },
  { id: 'Orus', name: 'မင်းခန့်', gender: 'Male' }, { id: 'Enceladus', name: 'ဇေယျာ', gender: 'Male' },
  { id: 'Iapetus', name: 'ထက်မြတ်', gender: 'Male' }, { id: 'Algenib', name: 'မျိုးမင်း', gender: 'Male' },
  { id: 'Rasalgethi', name: 'စည်သူ', gender: 'Male' }, { id: 'Schedar', name: 'ကောင်းကင်', gender: 'Male' },
  { id: 'Alnilam', name: 'သီဟ', gender: 'Male' }, { id: 'Sadachbia', name: 'ဝေယံ', gender: 'Male' },
  { id: 'Kore', name: 'စုစု', gender: 'Female' }, { id: 'Aoede', name: 'သန္တာ', gender: 'Female' },
  { id: 'Leda', name: 'လှိင်', gender: 'Female' }, { id: 'Callirrhoe', name: 'အေးအေး', gender: 'Female' },
  { id: 'Autonoe', name: 'မြမြ', gender: 'Female' }, { id: 'Despina', name: 'နန်းဆု', gender: 'Female' },
  { id: 'Erinome', name: 'ရွှေရည်', gender: 'Female' }, { id: 'Laomedeia', name: 'သီရိ', gender: 'Female' },
  { id: 'Achernar', name: 'မေမီ', gender: 'Female' }, { id: 'Gacrux', name: 'နှင်းနှင်း', gender: 'Female' }
];

const EMOTIONS = [
  { id: 'Neutral', label: 'ပုံမှန်', emoji: '😐' }, { id: 'Happy', label: 'ပျော်ရွှင်သော', emoji: '😊' },
  { id: 'Sad', label: 'ဝမ်းနည်းသော', emoji: '😢' }, { id: 'Angry', label: 'ဒေါသထွက်သော', emoji: '😠' },
  { id: 'Calm', label: 'တည်ငြိမ်သော', emoji: '😌' }, { id: 'Energetic', label: 'တက်ကြွသော', emoji: '⚡️' },
  { id: 'Whisper', label: 'တိုးတိုးပြော', emoji: '🤫' }, { id: 'Storytelling', label: 'ပုံပြင်ပြော', emoji: '📖' },
  { id: 'Professional', label: 'လုပ်ငန်းသုံး', emoji: '👔' }, { id: 'Casual', label: 'ပေါ့ပေါ့ပါးပါး', emoji: '☕️' },
  { id: 'Fearful', label: 'ကြောက်ရွံသော', emoji: '😨' }, { id: 'Surprised', label: 'အံ့သြသော', emoji: '😲' },
  { id: 'Excited', label: 'စိတ်လှုပ်ရှားသော', emoji: '🤩' }, { id: 'Romantic', label: 'ချစ်စရာကောင်းသော', emoji: '🥰' },
  { id: 'Sarcastic', label: 'ခနဲ့တဲ့တဲ့', emoji: '😏' }, { id: 'Serious', label: 'လေးနက်သော', emoji: '🧐' },
  { id: 'Confident', label: 'ယုံကြည်မှုရှိသော', emoji: '😎' }, { id: 'Shy', label: 'ရှက်တတ်သော', emoji: '😳' },
  { id: 'Hopeful', label: 'မျှော်လင့်ချက်ရှိသော', emoji: '🤞' }, { id: 'Tired', label: 'ပင်ပန်းနေသော', emoji: '😫' }
];

export default function App() {
  const [activeTab, setActiveTab] = useState('generator');
  const [text, setText] = useState("မင်္ဂလာပါ၊ Text to voice by PLUG မှ ကြိုဆိုပါတယ်။");
  const [selectedVoice, setSelectedVoice] = useState('Charon');
  const [isGenerating, setIsGenerating] = useState(false);

  return (
    <div className="min-h-screen bg-gray-950 text-white p-6 font-sans">
      <header className="max-w-6xl mx-auto flex justify-between items-center pb-8 border-b border-white/10">
        <h1 className="text-2xl font-black">Text to voice by PLUG</h1>
        <div className="flex gap-2 bg-gray-900 p-1 rounded-full">
            <button onClick={() => setActiveTab('generator')} className={`px-6 py-2 rounded-full ${activeTab === 'generator' ? 'bg-blue-600' : ''`}>အသံ ဖန်တီးရန်</button>
            <button onClick={() => setActiveTab('history')} className={`px-6 py-2 rounded-full ${activeTab === 'history' ? 'bg-blue-600' : ''`}>မှတ်တမ်း</button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto grid lg:grid-cols-3 gap-8 mt-8">
        {activeTab === 'generator' && (
          <>
            <div className="lg:col-span-2 space-y-4">
              <textarea value={text} onChange={(e) => setText(e.target.value)} className="w-full h-[400px] bg-gray-900 border border-white/10 rounded-2xl p-6 outline-none" />
              <button onClick={() => setIsGenerating(!isGenerating)} className="w-full py-5 bg-blue-600 rounded-2xl font-bold flex justify-center gap-2">
                {isGenerating ? <Loader2 className="animate-spin" /> : <Play />} အသံ ဖန်တီးရန်
              </button>
            </div>
            
            <div className="bg-gray-900 border border-white/10 rounded-2xl p-6 h-fit space-y-6">
              <div>
                <label className="text-sm font-bold mb-3 block">အသံသရုပ်ဆောင် (၂၀)</label>
                <select onChange={(e) => setSelectedVoice(e.target.value)} className="w-full bg-black p-3 rounded-lg border border-white/10">
                    {VOICES.map(v => <option key={v.id} value={v.id}>{v.name} ({v.gender})</option>)}
                </select>
              </div>
            </div>
          </>
        )}
      </main>
    </div>
  );
}