Spaces:

salomonsky
/

news

Running

App Files Files Community

salomonsky commited on Jun 22, 2025

Commit

1912ecc

verified ·

1 Parent(s): b0b63c8

Update app.py

Browse files

Files changed (1) hide show

app.py +134 -267

app.py CHANGED Viewed

@@ -3,20 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Creador de Video con gTTS</title>
     <style>
         :root {
-            --primary-color: #2c3e50;
-            --secondary-color: #16a085;
             --background-color: #ecf0f1;
             --text-color: #34495e;
             --white-color: #ffffff;
             --border-color: #bdc3c7;
-            --error-color: #e74c3c;
-            --success-color: #27ae60;
-            --disabled-color: #95a5a6;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             background-color: var(--background-color);
@@ -25,310 +22,180 @@
             padding: 20px;
             display: flex;
             justify-content: center;
-            align-items: flex-start;
             min-height: 100vh;
         }
         .container {
             width: 100%;
-            max-width: 700px;
             background-color: var(--white-color);
-            padding: 20px 30px 30px;
             border-radius: 12px;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-            margin: 20px 0;
         }
         h1 {
             text-align: center;
             color: var(--primary-color);
             margin-bottom: 25px;
         }
-        h2 {
-            color: var(--secondary-color);
-            border-bottom: 2px solid var(--secondary-color);
-            padding-bottom: 5px;
             margin-top: 20px;
-            margin-bottom: 15px;
-            font-size: 1.2em;
         }
-        .controls { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
-        textarea, select { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--border-color); font-size: 16px; box-sizing: border-box; background-color: #fff; }
-        textarea:focus, select:focus { outline: none; border-color: var(--secondary-color); box-shadow: 0 0 5px rgba(22, 160, 133, 0.5); }
-        textarea { min-height: 100px; resize: vertical; }
-        .file-label { display: block; background-color: #f8f9fa; border: 2px dashed var(--border-color); padding: 20px; text-align: center; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; }
-        .file-label:hover { background-color: #e9ecef; border-color: var(--secondary-color); }
-        input[type="file"] { display: none; }
-        #file-count { margin-top: 10px; font-weight: bold; color: var(--primary-color); }
-        .button-group { display: flex; flex-direction: column; gap: 10px; }
-        #generate-btn, #download-btn { padding: 15px 25px; font-size: 18px; font-weight: bold; color: var(--white-color); border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; display: block; width: 100%; text-align: center; text-decoration: none; }
-        #generate-btn { background-color: var(--secondary-color); }
-        #download-btn { background-color: var(--success-color); }
-        #generate-btn:hover:not(:disabled) { background-color: #117a65; transform: translateY(-2px); }
-        #download-btn:hover:not(:disabled) { background-color: #229954; transform: translateY(-2px); }
-        #generate-btn:disabled, #download-btn:disabled { background-color: var(--disabled-color); cursor: not-allowed; transform: none; }
-        #video-container { margin: 20px auto 0; position: relative; overflow: hidden; border-radius: 8px; display: none; background-color: #000; }
-        #video-container.aspect-16-9 { width: 100%; aspect-ratio: 16 / 9; }
-        #video-container.aspect-9-16 { height: 65vh; max-height: 700px; aspect-ratio: 9 / 16; max-width: 100%; }
-        #video-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; }
-        #video-container img.fit-cover { object-fit: cover; }
-        #video-container img.fit-contain { object-fit: contain; }
-        #video-container img.active { opacity: 1; }
-        #status { text-align: center; margin-top: 15px; font-size: 16px; font-weight: 500; min-height: 24px; }
-        #download-note { text-align: center; font-size: 0.8em; color: #7f8c8d; margin-top: 5px; }
         .status-error { color: var(--error-color); }
-        .status-success { color: var(--success-color); }
-        .status-processing { color: var(--secondary-color); }
-        .kenburns-zoom { animation: 7s linear 1; }
-        .zoom-tr { animation-name: zoom-tr; }
-        .zoom-tl { animation-name: zoom-tl; }
-        .kenburns-pan { animation: 7s linear 1; }
-        .pan-down { animation-name: pan-down; }
-        .pan-up { animation-name: pan-up; }
-        @keyframes zoom-tr { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.2) translate(-10%, 10%); } }
-        @keyframes zoom-tl { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.2) translate(10%, -10%); } }
-        @keyframes pan-down { 0% { transform: translateY(-12%); } 100% { transform: translateY(12%); } }
-        @keyframes pan-up { 0% { transform: translateY(12%); } 100% { transform: translateY(-12%); } }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Creador de Video con gTTS</h1>
-        <div class="controls">
-            <div>
-                <h2>Paso 1: Escribe tu texto</h2>
-                <textarea id="text-input" placeholder="Escribe el texto que se convertirá en audio aquí..."></textarea>
-            </div>
-            <div style="display: flex; gap: 15px;">
-                <div style="flex: 1;">
-                    <h2>Paso 2: Idioma</h2>
-                    <select id="lang-select">
-                        <option value="es-MX" selected>Español (México)</option>
-                        <option value="es-ES">Español (España)</option>
-                        <option value="en-US">Inglés (USA)</option>
-                    </select>
-                </div>
-                <div style="flex: 1;">
-                    <h2>Paso 3: Formato</h2>
-                    <select id="aspect-ratio">
-                        <option value="9:16">9:16 (Vertical)</option>
-                        <option value="16:9">16:9 (Horizontal)</option>
-                    </select>
-                </div>
-            </div>
-            <div>
-                <h2>Paso 4: Sube tus imágenes (1-20)</h2>
-                 <label for="image-input" class="file-label">
-                    <span>Haz clic para seleccionar</span>
-                    <div id="file-count">0 imágenes seleccionadas</div>
-                </label>
-                <input type="file" id="image-input" multiple accept="image/*">
-            </div>
-        </div>
-        <div class="button-group">
-            <button id="generate-btn">Generar y Reproducir</button>
-            <a id="download-btn" href="#" style="display: none;" disabled>Descargar Video</a>
-            <p id="download-note" style="display: none;">Nota: El video descargado será silencioso. El audio de gTTS es para la vista previa.</p>
-        </div>
         <div id="status"></div>
-        <audio id="audio-player" style="display:none;"></audio>
-        <div id="video-container"></div>
-        <canvas id="hidden-canvas" style="display: none;"></canvas>
     </div>
     <script>
         const textInput = document.getElementById('text-input');
         const langSelect = document.getElementById('lang-select');
-        const aspectRatioSelect = document.getElementById('aspect-ratio');
-        const imageInput = document.getElementById('image-input');
         const generateBtn = document.getElementById('generate-btn');
-        const downloadBtn = document.getElementById('download-btn');
-        const downloadNote = document.getElementById('download-note');
-        const videoContainer = document.getElementById('video-container');
         const statusDiv = document.getElementById('status');
-        const fileCountDiv = document.getElementById('file-count');
-        const canvas = document.getElementById('hidden-canvas');
-        const audioPlayer = document.getElementById('audio-player');
-        const SLIDE_ANIMATION_DURATION = 7000;
-        const ZOOM_ANIMATIONS = ['zoom-tr', 'zoom-tl'];
-        const PAN_ANIMATIONS = ['pan-down', 'pan-up'];
-        let imageElements = [];
-        let slideInterval = null;
-        let recordingInterval = null;
-        let currentImageIndex = 0;
-        let mediaRecorder;
-        let recordedChunks = [];
-        imageInput.addEventListener('change', () => {
-            const fileCount = imageInput.files.length;
-            fileCountDiv.textContent = `${fileCount} ${fileCount === 1 ? 'imagen seleccionada' : 'imágenes seleccionadas'}`;
-        });
-        const setStatus = (message, type = '') => {
-            statusDiv.textContent = message;
-            statusDiv.className = type ? `status-${type}` : '';
-        };
-        const stopAllProcesses = () => {
-            audioPlayer.pause();
-            if (slideInterval) clearInterval(slideInterval);
-            if (recordingInterval) clearInterval(recordingInterval);
-            if (mediaRecorder && mediaRecorder.state === 'recording') mediaRecorder.stop();
-            slideInterval = null;
-            recordingInterval = null;
-            generateBtn.disabled = false;
-        };
-        const fetchAudioViaProxy = async (text, lang) => {
-            setStatus('Obteniendo audio de gTTS...', 'processing');
             const gttsUrl = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(text)}&tl=${lang}&client=tw-ob`;
             const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(gttsUrl)}`;
             try {
                 const response = await fetch(proxyUrl);
-                if (!response.ok) throw new Error(`Error en la red: ${response.statusText}`);
-                const blob = await response.blob();
-                return URL.createObjectURL(blob);
-            } catch (error) {
-                setStatus(`Error al obtener audio gTTS: ${error.message}. Intenta de nuevo.`, 'error');
-                return null;
-            }
-        };
-        const displayNextImage = () => {
-            if (imageElements.length === 0) return;
-            imageElements.forEach(img => img.classList.remove('active'));
-            const activeIndex = currentImageIndex % imageElements.length;
-            const currentImg = imageElements[activeIndex];
-            const isHorizontal = currentImg.naturalWidth > currentImg.naturalHeight;
-            let animationClass, fitClass;
-            if (isHorizontal && aspectRatioSelect.value === '9:16') {
-                fitClass = 'fit-contain';
-                animationClass = 'kenburns-pan ' + PAN_ANIMATIONS[currentImageIndex % PAN_ANIMATIONS.length];
-            } else {
-                fitClass = 'fit-cover';
-                animationClass = 'kenburns-zoom ' + ZOOM_ANIMATIONS[currentImageIndex % ZOOM_ANIMATIONS.length];
-            }
-            currentImg.className = `${fitClass} ${animationClass}`;
-            setTimeout(() => currentImg.classList.add('active'), 50);
-            currentImageIndex++;
-        };
-        const startSlideshow = (audioDuration) => {
-            const numImages = imageElements.length;
-            let slideDuration = audioDuration * 1000 / numImages;
-            if (slideDuration < SLIDE_ANIMATION_DURATION) slideDuration = SLIDE_ANIMATION_DURATION;
-            videoContainer.style.display = 'block';
-            const aspectRatio = aspectRatioSelect.value;
-            videoContainer.className = aspectRatio === '16:9' ? 'aspect-16-9' : 'aspect-9-16';
-            currentImageIndex = 0;
-            displayNextImage();
-            slideInterval = setInterval(displayNextImage, slideDuration);
-        };
-        const startRecording = () => {
-            const ctx = canvas.getContext('2d');
-            const stream = canvas.captureStream(30);
-            recordedChunks = [];
-            mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
-            mediaRecorder.ondataavailable = event => {
-                if (event.data.size > 0) recordedChunks.push(event.data);
-            };
-            mediaRecorder.onstop = () => {
-                const blob = new Blob(recordedChunks, { type: 'video/webm' });
-                const url = URL.createObjectURL(blob);
-                downloadBtn.href = url;
-                downloadBtn.download = 'video_generado.webm';
-                downloadBtn.style.display = 'block';
-                downloadNote.style.display = 'block';
-                downloadBtn.disabled = false;
-                setStatus('¡Video listo para descargar!', 'success');
-            };
-            mediaRecorder.start();
-            recordingInterval = setInterval(() => {
-                const activeImg = document.querySelector('#video-container img.active');
-                if (activeImg) ctx.drawImage(activeImg, 0, 0, canvas.width, canvas.height);
-            }, 1000 / 30);
-        };
-        generateBtn.addEventListener('click', async () => {
-            stopAllProcesses();
-            const text = textInput.value.trim();
-            const files = imageInput.files;
-            if (!text || files.length === 0 || files.length > 20) {
-                setStatus('Revisa el texto y que hayas subido de 1 a 20 imágenes.', 'error');
-                return;
-            }
-            generateBtn.disabled = true;
-            downloadBtn.style.display = 'none';
-            downloadNote.style.display = 'none';
-            downloadBtn.disabled = true;
-            const audioUrl = await fetchAudioViaProxy(text, langSelect.value);
-            if (!audioUrl) {
                 generateBtn.disabled = false;
-                return;
             }
-            audioPlayer.src = audioUrl;
-            setStatus('Preparando imágenes...', 'processing');
-            videoContainer.innerHTML = '';
-            const imageLoadPromises = Array.from(files).map(file => {
-                return new Promise(resolve => {
-                    const img = document.createElement('img');
-                    img.src = URL.createObjectURL(file);
-                    img.onload = () => resolve(img);
-                    videoContainer.appendChild(img);
-                });
-            });
-            imageElements = await Promise.all(imageLoadPromises);
-            audioPlayer.oncanplaythrough = () => {
-                setStatus('Reproduciendo y grabando video...', 'processing');
-                const [w, h] = aspectRatioSelect.value.split(':').map(Number);
-                canvas.width = w === 9 ? 720 : 1280;
-                canvas.height = w === 9 ? 1280 : 720;
-                startSlideshow(audioPlayer.duration);
-                startRecording();
-                audioPlayer.play();
-            };
-            audioPlayer.onended = () => stopAllProcesses();
-            audioPlayer.onerror = () => {
-                setStatus('Error al cargar el audio.', 'error');
-                stopAllProcesses();
-            };
         });
-        window.addEventListener('beforeunload', stopAllProcesses);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generador de MP3 con gTTS</title>
     <style>
         :root {
+            --primary-color: #34495e;
+            --secondary-color: #27ae60;
             --background-color: #ecf0f1;
             --text-color: #34495e;
             --white-color: #ffffff;
             --border-color: #bdc3c7;
+            --error-color: #c0392b;
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             background-color: var(--background-color);
             padding: 20px;
             display: flex;
             justify-content: center;
+            align-items: center;
             min-height: 100vh;
         }
         .container {
             width: 100%;
+            max-width: 600px;
             background-color: var(--white-color);
+            padding: 30px;
             border-radius: 12px;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
         h1 {
             text-align: center;
             color: var(--primary-color);
             margin-bottom: 25px;
         }
+        textarea, select {
+            width: 100%;
+            padding: 12px;
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            font-size: 16px;
+            box-sizing: border-box;
+            margin-bottom: 20px;
+        }
+        textarea:focus, select:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 5px rgba(39, 174, 96, 0.4);
+        }
+        textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+        #generate-btn {
+            padding: 15px 25px;
+            font-size: 18px;
+            font-weight: bold;
+            color: var(--white-color);
+            background-color: var(--secondary-color);
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+            display: block;
+            width: 100%;
+        }
+        #generate-btn:hover:not(:disabled) {
+            background-color: #229954;
+            transform: translateY(-2px);
+        }
+        #generate-btn:disabled {
+            background-color: #95a5a6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .output-area {
+            margin-top: 25px;
+            text-align: center;
+        }
+        #audio-preview {
+            width: 100%;
+            display: none;
+        }
+        #download-link {
+            display: none;
+            margin-top: 15px;
+            padding: 12px 20px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            font-weight: bold;
+            transition: background-color 0.3s;
+        }
+        #download-link:hover {
+            background-color: #2980b9;
+        }
+        #status {
+            text-align: center;
             margin-top: 20px;
+            font-weight: 500;
+            min-height: 24px;
         }
         .status-error { color: var(--error-color); }
+        .status-processing { color: var(--primary-color); }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Generador de MP3 con gTTS</h1>
+        <textarea id="text-input" placeholder="Escribe aquí el texto para convertir a audio..."></textarea>
+        <select id="lang-select">
+            <option value="es-MX" selected>Español (México)</option>
+            <option value="es-ES">Español (España)</option>
+            <option value="en-US">Inglés (USA)</option>
+            <option value="fr-FR">Francés (Francia)</option>
+            <option value="it-IT">Italiano (Italia)</option>
+            <option value="de-DE">Alemán (Alemania)</option>
+        </select>
+        <button id="generate-btn">Generar y Descargar MP3</button>
         <div id="status"></div>
+        <div class="output-area">
+            <audio id="audio-preview" controls></audio>
+            <a id="download-link" href="#" download="audio_gtts.mp3">Descargar Archivo MP3</a>
+        </div>
     </div>
     <script>
         const textInput = document.getElementById('text-input');
         const langSelect = document.getElementById('lang-select');
         const generateBtn = document.getElementById('generate-btn');
         const statusDiv = document.getElementById('status');
+        const audioPreview = document.getElementById('audio-preview');
+        const downloadLink = document.getElementById('download-link');
+        let currentAudioUrl = null;
+        generateBtn.addEventListener('click', async () => {
+            const text = textInput.value.trim();
+            const lang = langSelect.value;
+            if (!text) {
+                statusDiv.textContent = 'Por favor, escribe un texto.';
+                statusDiv.className = 'status-error';
+                return;
+            }
+            // Limpiar estado anterior
+            generateBtn.disabled = true;
+            statusDiv.textContent = 'Contactando con el servicio de gTTS...';
+            statusDiv.className = 'status-processing';
+            audioPreview.style.display = 'none';
+            downloadLink.style.display = 'none';
+            if (currentAudioUrl) {
+                URL.revokeObjectURL(currentAudioUrl);
+                currentAudioUrl = null;
+            }
+            // Construir las URLs
             const gttsUrl = `https://translate.google.com/translate_tts?ie=UTF-8&q=${encodeURIComponent(text)}&tl=${lang}&client=tw-ob`;
             const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(gttsUrl)}`;
             try {
                 const response = await fetch(proxyUrl);
+                if (!response.ok) {
+                    throw new Error(`Error de red. El servidor proxy respondió con estado: ${response.status}`);
+                }
+                const blob = await response.blob();
+                // Google puede devolver un error como HTML. Verificamos que sea un audio.
+                if (!blob.type.startsWith('audio/')) {
+                    throw new Error('La respuesta de gTTS no fue un archivo de audio. El texto podría ser muy largo o contener caracteres no válidos.');
+                }
+                currentAudioUrl = URL.createObjectURL(blob);
+                audioPreview.src = currentAudioUrl;
+                audioPreview.style.display = 'block';
+                downloadLink.href = currentAudioUrl;
+                downloadLink.style.display = 'inline-block';
+                statusDiv.textContent = '¡Audio MP3 generado con éxito!';
+                statusDiv.className = '';
+            } catch (error) {
+                statusDiv.textContent = `Error: ${error.message}`;
+                statusDiv.className = 'status-error';
+            } finally {
                 generateBtn.disabled = false;
             }
         });
     </script>
 </body>
 </html>