Spaces:
Running
Running
File size: 3,119 Bytes
5e051aa 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed 9d5578b 3e1a9ed 5e051aa 3e1a9ed 5e051aa 3e1a9ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html>
<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>
|