Upload 5 files

.env

@@ -0,0 +1 @@
+GEMINI_API_KEY="AIzaSyAEClWf-cTS67e8JDAa8f_25DfaMistvRo"

main.py

@@ -0,0 +1,197 @@
+import os
+import mimetypes
+import struct
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+from dotenv import load_dotenv
+from google import genai
+from google.genai import types
+
+# Memuat variabel dari file .env
+load_dotenv()
+
+api_key = os.getenv("GEMINI_API_KEY")
+if not api_key:
+    raise ValueError("GEMINI_API_KEY tidak ditemukan di file .env")
+
+# Inisialisasi Google GenAI Client
+client = genai.Client(api_key=api_key)
+
+app = FastAPI(title="Gemini AI TTS Studio Pro - Web Edition")
+
+# Setup template engine
+templates = Jinja2Templates(directory="templates")
+
+# Matrix Data
+VOICE_GENDER = {
+    "Charon": "Male", "Fenrir": "Male",
+    "Kore": "Female", "Aoede": "Female", "Leda": "Female"
+}
+
+CONTEXT_MATRIX = {
+    "Funny": {
+        "Scene": "Stand-up comedy club or a lively local coffee shop discussion",
+        "Context": "{gender} voice, highly expressive, comedic timing, laughing naturally inside sentences, playful tone, high dynamic range, sarcastic giggles"
+    },
+    "Serious": {
+        "Scene": "Formal presentation and news anchoring room",
+        "Context": "{gender} voice, authoritative, highly professional tone, clear articulation, strict executive pacing"
+    },
+    "Dramatic": {
+        "Scene": "A cinematic and intense storytelling arena",
+        "Context": "{gender} voice, theatrical style, deep breathing pauses, heavy emotional weight, movie trailer vibe"
+    },
+    "Empathetic": {
+        "Scene": "Warm psychological counseling studio",
+        "Context": "{gender} voice, soft and soothing tone, gentle breath control, deeply comforting, intimate close-mic feel"
+    },
+    "Excited": {
+        "Scene": "High-energy sports stadium or product launch stage",
+        "Context": "{gender} voice, enthusiastic delivery, bright and vibrant tone, dynamic pitch shifting, stadium hype vibe"
+    },
+    "Energetic": {
+        "Scene": "Fast-paced corporate hype or tech commercial arena",
+        "Context": "{gender} voice, highly motivational, punching keywords, crisp delivery, driving power"
+    },
+    "Calm": {
+        "Scene": "Meditation oasis and relaxation sanctuary",
+        "Context": "{gender} voice, slow rhythmic breathing, tranquil flat tone, whisper-like softness, serene ambient vibe"
+    },
+    "Narrative": {
+        "Scene": "Audiobook production house",
+        "Context": "{gender} voice, classic storytelling flow, rhythmic prose delivery, engaging and immersive reading tone"
+    }
+}
+
+class MatrixRequest(BaseModel):
+    voice: str
+    emotion: str
+    pace: str
+    accent: str
+
+class TTSRequest(BaseModel):
+    transcript: str
+    voice: str
+    emotion: str
+    pace: str
+    accent: str
+    scene: str
+    context: str
+    temperature: float
+
+def convert_to_wav(audio_data: bytes) -> bytes:
+    bits_per_sample = 16
+    sample_rate = 24000
+    num_channels = 1
+    data_size = len(audio_data)
+    bytes_per_sample = bits_per_sample // 8
+    block_align = num_channels * bytes_per_sample
+    byte_rate = sample_rate * block_align
+    chunk_size = 36 + data_size
+    header = struct.pack(
+        "<4sI4s4sIHHIIHH4sI",
+        b"RIFF", chunk_size, b"WAVE", b"fmt ", 16, 1,
+        num_channels, sample_rate, byte_rate, block_align,
+        bits_per_sample, b"data", data_size,
+    )
+    return header + audio_data
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request, "voices": list(VOICE_GENDER.keys()), "emotions": list(CONTEXT_MATRIX.keys())})
+
+@app.post("/api/matrix")
+async def get_matrix(data: MatrixRequest):
+    gender = VOICE_GENDER.get(data.voice, "Neutral")
+    matrix = CONTEXT_MATRIX.get(data.emotion, CONTEXT_MATRIX["Funny"])
+    
+    base_scene = matrix["Scene"]
+    base_context = matrix["Context"].format(gender=gender)
+    
+    if data.pace == "Slow":
+        base_context += ", deliberate pauses for comedic anticipation"
+    elif data.pace == "Fast":
+        base_context += ", hyper-active conversational speed"
+        
+    if data.accent == "Jawa":
+        base_scene += " with an authentic Javanese cultural nuance"
+        base_context += ", speak with a clear, thick Javanese comedic accent ('medok' style), friendly and warm local curves"
+    elif data.accent == "Sunda":
+        base_scene += " with an authentic Sundanese cultural nuance"
+        base_context += ", speak with a clear, thick Sundanese comedic accent, utilizing soft lilt and flexible melodic rise and fall"
+    else:
+        base_scene += f" ({data.accent} setting)"
+        base_context += f", localized {data.accent} vocal pattern"
+        
+    return {"scene": base_scene, "context": base_context}
+
+@app.post("/api/generate-tts")
+async def generate_tts(data: TTSRequest):
+    if not data.transcript.strip():
+        raise HTTPException(status_code=400, detail="Transcript tidak boleh kosong")
+
+    accent_map = {
+        "American": "American (Gen)",
+        "British": "British (RP)",
+        "Australian": "Australian",
+        "Neutral": "Neutral",
+        "Jawa": "Indonesian with heavy Javanese regional dialect profile",
+        "Sunda": "Indonesian with heavy Sundanese regional dialect profile"
+    }
+
+    prompt = f"""You are a professional voice actor. Act the following transcript naturally with extreme emotional realism based on the text cues.
+
+Vocal Environment: {data.scene}
+Primary Acting Style: {data.emotion}
+Speed Profile: {data.pace}
+Accent Target: {accent_map.get(data.accent, data.accent)}
+Detailed Execution Guide: {data.context}
+
+Transcript:
+{data.transcript}"""
+
+    try:
+        model = "gemini-2.5-flash-preview-tts"
+        contents = [types.Content(role="user", parts=[types.Part.from_text(text=prompt)])]
+        config = types.GenerateContentConfig(
+            temperature=data.temperature,
+            response_modalities=["audio"],
+            speech_config=types.SpeechConfig(
+                voice_config=types.VoiceConfig(
+                    prebuilt_voice_config=types.PrebuiltVoiceConfig(voice_name=data.voice)
+                )
+            ),
+        )
+
+        # Mengumpulkan generator stream
+        raw_audio_buffer = bytearray()
+        is_wav_bawaan = False
+
+        for chunk in client.models.generate_content_stream(model=model, contents=contents, config=config):
+            if chunk.parts and chunk.parts[0].inline_data and chunk.parts[0].inline_data.data:
+                inline_data = chunk.parts[0].inline_data
+                raw_audio_buffer.extend(inline_data.data)
+                ext = mimetypes.guess_extension(inline_data.mime_type)
+                if ext and ext in ['.wav', '.mp3']:
+                    is_wav_bawaan = True
+
+        if len(raw_audio_buffer) == 0:
+            raise HTTPException(status_code=500, detail="Data audio kosong dari Gemini API.")
+
+        final_data = bytes(raw_audio_buffer) if is_wav_bawaan else convert_to_wav(bytes(raw_audio_buffer))
+        
+        return StreamingResponse(
+            iter([final_data]), 
+            media_type="audio/wav",
+            headers={"Content-Disposition": "attachment; filename=generated_tts.wav"}
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.111.0
+uvicorn==0.30.1
+python-dotenv==1.0.1
+google-genai

templates/index.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini AI TTS Studio Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { background-color: #0d1117; color: #e6edf3; }
+        .card { background-color: #161b22; border: 1px solid #30363d; }
+        .input-field { background-color: #21262d; border: 1px solid #30363d; color: #e6edf3; }
+        .input-field:focus { border-color: #58a6ff; outline: none; }
+    </style>
+</head>
+<body class="p-6 font-sans">
+    <div class="max-w-7xl mx-auto">
+        <header class="card p-4 rounded-xl flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-bold text-[#58a6ff]">✦ Gemini AI TTS Studio Pro</h1>
+            <p class="text-sm text-[#8b949e]">Advanced Text-to-Speech • Web Edition v1.4</p>
+        </header>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div class="lg:col-span-1 space-y-6">
+                <div class="card p-5 rounded-xl">
+                    <h2 class="text-lg font-bold text-[#58a6ff] mb-4 flex items-center">🎙️ Voice Settings</h2>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm text-[#8b949e] mb-1">Voice Player</label>
+                            <select id="voice" class="input-field w-full p-2.5 rounded-lg text-sm" onchange="updateMatrix()">
+                                {% for voice in voices %}
+                                <option value="{{ voice }}">{{ voice }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm text-[#8b949e] mb-1">Emotion Style</label>
+                            <select id="emotion" class="input-field w-full p-2.5 rounded-lg text-sm" onchange="updateMatrix()">
+                                {% for emotion in emotions %}
+                                <option value="{{ emotion }}">{{ emotion }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm text-[#8b949e] mb-1">Speaking Pace</label>
+                            <select id="pace" class="input-field w-full p-2.5 rounded-lg text-sm" onchange="updateMatrix()">
+                                <option value="Slow">Slow</option>
+                                <option value="Natural" selected>Natural</option>
+                                <option value="Fast">Fast</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm text-[#8b949e] mb-1">Accent Profile</label>
+                            <select id="accent" class="input-field w-full p-2.5 rounded-lg text-sm" onchange="updateMatrix()">
+                                <option value="Jawa">Jawa</option>
+                                <option value="Sunda">Sunda</option>
+                                <option value="American">American</option>
+                                <option value="British">British</option>
+                                <option value="Australian">Australian</option>
+                                <option value="Neutral">Neutral</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card p-5 rounded-xl">
+                    <h2 class="text-lg font-bold text-[#58a6ff] mb-4 flex items-center">🎬 AI Smart Direction</h2>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-xs text-[#8b949e] mb-1">Generated Scene Direction</label>
+                            <input type="text" id="scene" class="input-field w-full p-2.5 rounded-lg text-xs bg-opacity-50" readonly>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-[#8b949e] mb-1">Performance Context</label>
+                            <textarea id="context" rows="3" class="input-field w-full p-2.5 rounded-lg text-xs bg-opacity-50 resize-none" readonly></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card p-5 rounded-xl">
+                    <h2 class="text-lg font-bold text-[#58a6ff] mb-4 flex items-center">⚡ Advanced Settings</h2>
+                    <label class="block text-sm text-[#8b949e] mb-1">Temperature: <span id="temp-val" class="text-[#58a6ff]">1.15</span></label>
+                    <input type="range" id="temperature" min="0" max="2" step="0.05" value="1.15" class="w-full h-1.5 bg-[#21262d] rounded-lg appearance-none cursor-pointer accent-[#58a6ff]" oninput="document.getElementById('temp-val').innerText = this.value">
+                </div>
+            </div>
+
+            <div class="lg:col-span-2 flex flex-col space-y-6">
+                <div class="card p-5 rounded-xl flex-1 flex flex-col">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-bold text-[#58a6ff]">📝 Transcript Content</h2>
+                        <span id="char-count" class="text-xs text-[#8b949e]">0 chars</span>
+                    </div>
+                    <textarea id="transcript" class="input-field w-full flex-1 p-4 rounded-xl text-base font-normal resize-none mb-4" oninput="countChars()">Hhhh... Capek aku tuh, ampun! (mendesah berat) Lagian kamu lagakna sok tahu pisan toh! Hehehe... (tertawa kecil mengejek) Sekarang rasakan sendiri akibatnya! CUKUP YA! JANGAN PERNAH BERANI-BERANI KAMU DATANG LAGI!!! Pergi sana... Huhu... (menangis manja) Tega-teganga kamu melakukan ini semua padaku... jahat!</textarea>
+                    
+                    <button onclick="generateAudio()" id="btn-submit" class="w-full bg-[#58a6ff] hover:bg-[#79b8ff] text-[#0d1117] font-bold py-3 px-6 rounded-xl transition duration-200">
+                        🚀 Generate Audio
+                    </button>
+                </div>
+
+                <div id="player-card" class="card p-5 rounded-xl hidden">
+                    <h2 class="text-base font-bold text-[#79b8ff] mb-3">🎵 Output Audio Player</h2>
+                    <audio id="audio-player" controls class="w-full rounded-md accent-[#58a6ff]"></audio>
+                </div>
+
+                <div class="card p-5 rounded-xl h-48 flex flex-col">
+                    <div class="flex justify-between items-center mb-2">
+                        <h2 class="text-sm font-bold text-[#58a6ff]">📋 Activity Log Studio</h2>
+                        <button onclick="document.getElementById('log-box').innerHTML=''" class="text-xs text-[#8b949e] hover:text-[#e6edf3]">Clear Logs</button>
+                    </div>
+                    <div id="log-box" class="input-field flex-1 p-3 rounded-lg font-mono text-xs overflow-y-auto text-[#8b949e] space-y-1">
+                        <div>✨ Studio Humor Akting Berhasil Dimuat. Siap Menghasilkan Ekspresi Teatrikal!</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function logMsg(msg) {
+            const logBox = document.getElementById('log-box');
+            const entry = document.createElement('div');
+            entry.innerText = msg;
+            logBox.appendChild(entry);
+            logBox.scrollTop = logBox.scrollHeight;
+        }
+
+        function countChars() {
+            const text = document.getElementById('transcript').value;
+            document.getElementById('char-count').innerText = `${text.length} chars`;
+        }
+
+        async function updateMatrix() {
+            const payload = {
+                voice: document.getElementById('voice').value,
+                emotion: document.getElementById('emotion').value,
+                pace: document.getElementById('pace').value,
+                accent: document.getElementById('accent').value
+            };
+            try {
+                const response = await fetch('/api/matrix', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                const resData = await response.json();
+                document.getElementById('scene').value = resData.scene;
+                document.getElementById('context').value = resData.context;
+            } catch (err) {
+                console.error("Gagal memperbarui matriks arah", err);
+            }
+        }
+
+        async function generateAudio() {
+            const btn = document.getElementById('btn-submit');
+            const transcript = document.getElementById('transcript').value;
+            if(!transcript.trim()) return alert("Transcript tidak boleh kosong!");
+
+            btn.disabled = true;
+            btn.innerText = "⏳ Generating...";
+            btn.classList.add('opacity-50');
+            logMsg("🚀 Connecting to Gemini API via Backend...");
+
+            const payload = {
+                transcript: transcript,
+                voice: document.getElementById('voice').value,
+                emotion: document.getElementById('emotion').value,
+                pace: document.getElementById('pace').value,
+                accent: document.getElementById('accent').value,
+                scene: document.getElementById('scene').value,
+                context: document.getElementById('context').value,
+                temperature: parseFloat(document.getElementById('temperature').value)
+            };
+
+            try {
+                const response = await fetch('/api/generate-tts', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                if(!response.ok) throw new Error("Terjadi kesalahan sistem di server API.");
+
+                const blob = await response.blob();
+                const audioUrl = URL.createObjectURL(blob);
+                
+                const playerCard = document.getElementById('player-card');
+                const player = document.getElementById('audio-player');
+                
+                player.src = audioUrl;
+                playerCard.classList.remove('hidden');
+                
+                logMsg("✅ File audio berhasil diterima!");
+                logMsg("🎉 Done! Audio generated successfully.");
+                player.play();
+
+            } catch (error) {
+                logMsg(`❌ Error: ${error.message}`);
+                alert(error.message);
+            } finally {
+                btn.disabled = false;
+                btn.innerText = "🚀 Generate Audio";
+                btn.classList.remove('opacity-50');
+            }
+        }
+
+        // Jalankan saat pertama kali dibuka
+        window.onload = () => {
+            updateMatrix();
+            countChars();
+        };
+    </script>
+</body>
+</html>