Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gemini Audio Generator</title> | |
| <style> | |
| body { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; } | |
| h1 { text-align: center; } | |
| textarea { width: 100%; height: 150px; margin-bottom: 10px; padding: 10px; box-sizing: border-box; } | |
| button { display: block; width: 100%; padding: 10px; font-size: 16px; cursor: pointer; } | |
| #audio-output { margin-top: 20px; text-align: center; } | |
| #loading { display: none; text-align: center; margin-top: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Gemini TTS Web App</h1> | |
| <p>Enter text below and click "Generate Audio" to hear it read aloud.</p> | |
| <textarea id="text-input" placeholder="Enter your text here..."></textarea> | |
| <button id="generate-button">Generate Audio</button> | |
| <div id="loading">Generating audio...</div> | |
| <div id="audio-output"></div> | |
| <script type="module"> | |
| import * as GoogleGenAI from 'https://cdn.jsdelivr.net/npm/@google/genai@1.21.0/+esm' | |
| // For development only: Replace with your Gemini API key | |
| // In a production environment, use a backend server to prevent exposing your key. | |
| const API_KEY = "AIzaSyDtmPxzbYrXtzt0AHQagk0Y-DG57jUnpk0"; | |
| const ai = new GoogleGenAI({ apiKey: API_KEY }); | |
| const textInput = document.getElementById("text-input"); | |
| const generateButton = document.getElementById("generate-button"); | |
| const audioOutputDiv = document.getElementById("audio-output"); | |
| const loadingIndicator = document.getElementById("loading"); | |
| generateButton.addEventListener("click", async () => { | |
| const text = textInput.value; | |
| if (!text) { | |
| alert("Please enter some text."); | |
| return; | |
| } | |
| loadingIndicator.style.display = "block"; | |
| generateButton.disabled = true; | |
| audioOutputDiv.innerHTML = ""; // Clear previous audio | |
| try { | |
| // Use the gemini-2.5-flash-tts model for text-to-speech | |
| const model = ai.getGenerativeModel({ | |
| model: "gemini-2.5-flash-tts" | |
| }); | |
| // Generate audio from text | |
| const response = await model.generateContent({ | |
| contents: [{ parts: [{ text: text }] }] | |
| }); | |
| const audioResponse = response.audio; | |
| const audioBlob = new Blob([audioResponse.data], { type: audioResponse.mimeType }); | |
| const audioUrl = URL.createObjectURL(audioBlob); | |
| // Create and play an audio element | |
| const audioElement = document.createElement("audio"); | |
| audioElement.controls = true; | |
| audioElement.src = audioUrl; | |
| audioOutputDiv.appendChild(audioElement); | |
| audioElement.play(); | |
| } catch (error) { | |
| alert("Error generating audio:", error); | |
| console.error("Error generating audio:", error); | |
| audioOutputDiv.innerHTML = `<p>Error: ${error.message}</p>`; | |
| } finally { | |
| loadingIndicator.style.display = "none"; | |
| generateButton.disabled = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |