Spaces:

Opera8
/

Ttslive

Sleeping

App Files Files Community

Opera8 commited on 26 days ago

Commit

56c74ce

verified ·

1 Parent(s): 58f76b4

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +197 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,197 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <title>Gemini Real-time TTS</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+        .container { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 600px; }
+        h1 { text-align: center; color: #333; }
+        textarea { width: 100%; padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 15px; box-sizing: border-box; resize: vertical; }
+        .button-container { display: flex; gap: 10px; }
+        button { flex-grow: 1; padding: 12px; font-size: 18px; border: none; border-radius: 5px; color: white; cursor: pointer; transition: background-color 0.2s; }
+        #speak-button { background-color: #007bff; }
+        #stop-button { background-color: #dc3545; }
+        button:disabled { background-color: #a0cfff; cursor: not-allowed; }
+        #stop-button:disabled { background-color: #f5c6cb; }
+        #status { margin-top: 15px; text-align: center; color: #555; font-style: italic; }
+        #audio-player-container { margin-top: 20px; }
+        audio { width: 100%; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎙️ پخش صدای آنی Gemini</h1>
+        <textarea id="text-input" rows="4" placeholder="متن خود را اینجا وارد کنید..."></textarea>
+        <div class="button-container">
+            <button id="speak-button">صحبت کن</button>
+            <button id="stop-button" disabled>توقف</button>
+        </div>
+        <div id="status">در حال اتصال به سرور...</div>
+        <div id="audio-player-container" style="display: none;">
+            <p>پخش مجدد:</p>
+            <audio id="audio-player" controls></audio>
+        </div>
+    </div>
+<script>
+    const textInput = document.getElementById('text-input');
+    const speakButton = document.getElementById('speak-button');
+    const stopButton = document.getElementById('stop-button');
+    const statusDiv = document.getElementById('status');
+    const audioPlayerContainer = document.getElementById('audio-player-container');
+    const audioPlayer = document.getElementById('audio-player');
+    let audioContext;
+    let audioQueue = [];
+    let sourceNodes = [];
+    let isPlaying = false;
+    let isStopped = false;
+    let nextStartTime = 0;
+    let socket;
+    function initializeAudio() {
+        if (!audioContext || audioContext.state === 'suspended') {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 });
+        }
+        nextStartTime = audioContext.currentTime;
+    }
+    function getWebSocketURL() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${protocol}//${window.location.host}/ws`;
+    }
+    function connectWebSocket() {
+        const wsURL = getWebSocketURL();
+        socket = new WebSocket(wsURL);
+        socket.onopen = () => {
+            statusDiv.textContent = "آماده دریافت متن";
+            speakButton.disabled = false;
+        };
+        socket.onmessage = async (event) => {
+            if (typeof event.data === 'string') {
+                const message = JSON.parse(event.data);
+                if (message.event === "STREAM_ENDED") {
+                    handleStreamEnd(message.url);
+                } else if (message.event === "ERROR") {
+                    statusDiv.textContent = `خطا: ${message.message}`;
+                    resetUI();
+                }
+            } else {
+                if (isStopped) return;
+                const arrayBuffer = await event.data.arrayBuffer();
+                const pcmData = new Int16Array(arrayBuffer);
+                audioQueue.push(pcmData);
+                if (!isPlaying) {
+                    playFromQueue();
+                }
+            }
+        };
+        socket.onclose = () => {
+            statusDiv.textContent = "اتصال قطع شد. تلاش مجدد...";
+            resetUI(true);
+            setTimeout(connectWebSocket, 3000);
+        };
+    }
+    async function playFromQueue() {
+        if (audioQueue.length === 0 || isStopped) {
+            isPlaying = false;
+            return;
+        }
+        isPlaying = true;
+        while (audioQueue.length > 0) {
+            const pcmData = audioQueue.shift();
+            const float32Data = new Float32Array(pcmData.length);
+            for (let i = 0; i < pcmData.length; i++) {
+                float32Data[i] = pcmData[i] / 32768.0;
+            }
+            const audioBuffer = audioContext.createBuffer(1, float32Data.length, audioContext.sampleRate);
+            audioBuffer.getChannelData(0).set(float32Data);
+            const source = audioContext.createBufferSource();
+            source.buffer = audioBuffer;
+            source.connect(audioContext.destination);
+            const currentTime = audioContext.currentTime;
+            if (nextStartTime < currentTime) {
+                nextStartTime = currentTime;
+            }
+            source.start(nextStartTime);
+            sourceNodes.push(source);
+            nextStartTime += audioBuffer.duration;
+        }
+        isPlaying = false;
+    }
+    function handleStreamEnd(audioUrl) {
+        if (audioUrl) {
+            audioPlayer.src = audioUrl;
+            audioPlayerContainer.style.display = 'block';
+        }
+        const checkPlaybackEnd = setInterval(() => {
+            if (audioQueue.length === 0 && audioContext.currentTime > nextStartTime) {
+                if(!isStopped) {
+                    statusDiv.textContent = "پخش تمام شد.";
+                    resetUI();
+                }
+                clearInterval(checkPlaybackEnd);
+            }
+        }, 100);
+    }
+    function resetUI(isConnectionError = false) {
+        speakButton.disabled = isConnectionError;
+        stopButton.disabled = true;
+        isPlaying = false;
+    }
+    speakButton.addEventListener('click', () => {
+        const text = textInput.value.trim();
+        if (!text || !socket || socket.readyState !== WebSocket.OPEN) return;
+        initializeAudio();
+        isStopped = false;
+        audioQueue = [];
+        sourceNodes.forEach(source => source.stop());
+        sourceNodes = [];
+        socket.send(text);
+        speakButton.disabled = true;
+        stopButton.disabled = false;
+        statusDiv.textContent = "در حال دریافت و پخش صدا...";
+        audioPlayerContainer.style.display = 'none';
+        audioPlayer.src = "";
+    });
+    stopButton.addEventListener('click', () => {
+        isStopped = true;
+        audioQueue = [];
+        sourceNodes.forEach(source => source.stop());
+        sourceNodes = [];
+        statusDiv.textContent = "پخش متوقف شد.";
+        resetUI();
+    });
+    window.addEventListener('load', connectWebSocket);
+</script>
+</body>
+</html>