Spaces:

NHLOCAL
/

gemini-subtitle-creator

Running

App Files Files Community

NHLOCAL commited on Aug 10

Commit

2ad4451

1 Parent(s): b4402e1

שיפור: כפתור לעורך הכתוביות, ניסוח ועיצוב קל

Browse files

Files changed (1) hide show

templates/index.html +37 -55

templates/index.html CHANGED Viewed

@@ -10,6 +10,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     <style>
         :root {
@@ -55,13 +57,13 @@
         .file-input-wrapper input[type="file"] { display: none; }
         .file-name { margin-top: 1rem; font-weight: 600; color: var(--md-sys-color-secondary); }
         #results-section { display: none; margin-top: 2rem; }
-        .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
         .results-header h2 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
         .view-toggle { display: flex; border: 1px solid var(--md-sys-color-outline); border-radius: 99px; overflow: hidden; }
         .view-btn { background: transparent; border: none; padding: 6px 16px; cursor: pointer; font-weight: 600; font-family: 'Assistant', sans-serif; font-size: 0.9rem; color: var(--md-sys-color-primary); transition: all 0.2s ease-in-out; }
         .view-btn.active { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
-        #results-output { width: 100%; height: 300px; padding: 1rem; border: 1px solid var(--md-sys-color-outline); border-radius: var(--border-radius-small); font-family: monospace; background-color: var(--md-sys-color-surface); font-size: 0.9rem; resize: vertical; }
-        .buttons-container { display: flex; gap: 1rem; margin-top: 1rem; justify-content: center; }
         #status-container { margin-top: 1.5rem; display: none; }
         #status-message { text-align: center; padding: 1rem; font-weight: 600; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; }
         #status-message.loading { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
@@ -73,8 +75,8 @@
         footer a { color: var(--md-sys-color-primary); text-decoration: none; font-weight: 600; }
         footer a:hover { text-decoration: underline; }
         .github-link { margin-left: 8px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
-        .github-link svg { width: 16px; height: 16px; fill: var(--md-sys-color-primary); transition: fill 0.2s ease-in-out; }
-        .github-link:hover svg { fill: #5a3f92; }
     </style>
 </head>
 <body>
@@ -125,7 +127,7 @@
                             <span class="material-symbols-outlined">rocket_launch</span> התחל תמלול
                         </button>
                         <a href="https://tools.ze-kal.top/tools/subtitle_editor.html" target="_blank" class="btn btn-secondary" title="עריכה, סנכרון ותיקון של קובץ כתוביות קיים" style="padding: 16px 32px; font-size: 1.2rem;">
-                            <span class="material-symbols-outlined">edit_note</span> עריכת כתוביות
                         </a>
                     </div>
                 </form>
@@ -158,17 +160,20 @@
                 <div class="results-header">
                     <h2>תוצאות התמלול</h2>
                     <div class="view-toggle">
-                        <button id="view-srt-btn" class="view-btn">SRT</button>
                         <button id="view-txt-btn" class="view-btn">טקסט</button>
                     </div>
                 </div>
                 <textarea id="results-output" readonly></textarea>
                 <div class="buttons-container">
                     <a id="download-srt-button" class="btn btn-primary">
-                        <span class="material-symbols-outlined">download</span> הורד קובץ SRT
                     </a>
                     <a id="download-txt-button" class="btn btn-secondary">
-                        <span class="material-symbols-outlined">article</span> הורד קובץ טקסט
                     </a>
                 </div>
             </section>
@@ -177,7 +182,6 @@
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // --- Element Selection ---
             const form = document.getElementById('transcribe-form');
             const apiKeyInput = document.getElementById('api-key-input');
             const audioFileInput = document.getElementById('audio-file-input');
@@ -195,17 +199,14 @@
             const chunkInfoSection = document.getElementById('chunk-info-section');
             const chunkInfoMessage = document.getElementById('chunk-info-message');
             const chunkTimestampsOutput = document.getElementById('chunk-timestamps-output');
-            // Result view elements
             const resultsOutput = document.getElementById('results-output');
             const viewSrtBtn = document.getElementById('view-srt-btn');
             const viewTxtBtn = document.getElementById('view-txt-btn');
-            // --- State variables ---
             let audioFile = null;
             let srtContent = '';
             let textContent = null;
-            // --- UI and State Functions ---
             function checkInputs() {
                 submitButton.disabled = !(apiKeyInput.value.trim() && audioFile);
             }
@@ -218,8 +219,19 @@
                 statusMessage.className = isError ? 'error' : 'loading';
             }
             function resetUI() {
-                submitButton.disabled = false;
                 statusContainer.style.display = 'none';
                 resultsSection.style.display = 'none';
                 chunkInfoSection.style.display = 'none';
@@ -237,7 +249,6 @@
                 localStorage.setItem('geminiApiKey', apiKeyInput.value);
             }
-            // --- Event Listeners ---
             loadApiKey();
             apiKeyInput.addEventListener('input', () => { saveApiKey(); checkInputs(); });
@@ -251,13 +262,13 @@
                 modelCustomInput.style.display = (modelSelect.value === 'custom') ? 'block' : 'none';
             });
-            // Drag and Drop
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 audioDropZone.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
             });
-            audioDropZone.addEventListener('dragover', () => audioDropZone.classList.add('drag-over'));
             audioDropZone.addEventListener('dragleave', () => audioDropZone.classList.remove('drag-over'));
             audioDropZone.addEventListener('drop', e => {
                 audioDropZone.classList.remove('drag-over');
                 const droppedFile = e.dataTransfer.files[0];
                 if (droppedFile && droppedFile.type.startsWith('audio/')) {
@@ -271,12 +282,8 @@
                 checkInputs();
             });
-            // --- Download and View Logic ---
             downloadTxtButton.addEventListener('click', async () => {
-                if (!srtContent) {
-                    alert('אין תוכן תמלול להמרה.');
-                    return;
-                }
                 try {
                     const response = await fetch('/convert-to-text', {
                         method: 'POST',
@@ -293,58 +300,42 @@
                     a.download = `${originalFileName}_transcript.txt`;
                     document.body.appendChild(a); a.click(); document.body.removeChild(a);
                     URL.revokeObjectURL(url);
-                } catch (error) {
-                    alert(`אירעה שגיאה בהמרת הקובץ: ${error.message}`);
-                }
             });
             viewSrtBtn.addEventListener('click', () => {
                 if (viewSrtBtn.classList.contains('active')) return;
                 viewSrtBtn.classList.add('active'); viewTxtBtn.classList.remove('active');
                 resultsOutput.value = srtContent;
-                resultsOutput.dir = 'ltr'; resultsOutput.style.textAlign = 'left';
             });
             viewTxtBtn.addEventListener('click', async () => {
                 if (viewTxtBtn.classList.contains('active')) return;
                 viewTxtBtn.classList.add('active'); viewSrtBtn.classList.remove('active');
-                resultsOutput.dir = 'rtl'; resultsOutput.style.textAlign = 'right';
                 if (textContent !== null) { resultsOutput.value = textContent; return; }
                 if (!srtContent) { resultsOutput.value = ''; return; }
                 resultsOutput.value = 'ממיר לתצוגת טקסט...';
                 try {
                     const response = await fetch('/convert-to-text', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ srt_data: srtContent })
                     });
                     if (!response.ok) throw new Error((await response.json()).detail || 'שגיאה בהמרת הקובץ');
                     const data = await response.json();
                     textContent = data.text;
                     resultsOutput.value = textContent;
-                } catch (error) {
-                    resultsOutput.value = `אירעה שגיאה בהמרת התצוגה: ${error.message}`;
-                }
             });
-            // --- Form Submission and Streaming ---
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 if (submitButton.disabled) return;
                 resetUI();
-                // Disable form elements during processing
-                submitButton.disabled = true;
-                audioFileInput.disabled = true;
-                audioDropZone.classList.add('disabled');
                 updateStatus('מתחיל את התהליך...', 0);
                 let modelName = modelSelect.value === 'custom' ? modelCustomInput.value.trim() : modelSelect.value;
                 if (modelSelect.value === 'custom' && !modelName) {
                     updateStatus('יש להזין שם מודל מותאם אישית', 100, true);
-                    submitButton.disabled = false; audioFileInput.disabled = false; audioDropZone.classList.remove('disabled');
                     return;
                 }
                 const formData = new FormData();
@@ -356,7 +347,6 @@
                 try {
                     const response = await fetch('/transcribe-stream', { method: 'POST', body: formData });
                     if (!response.ok) throw new Error((await response.json()).detail || `שגיאת שרת: ${response.status}`);
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
                     let buffer = '';
@@ -382,8 +372,6 @@
                                 srtContent = event.data;
                                 textContent = null;
                                 resultsOutput.value = srtContent;
-                                resultsOutput.dir = 'ltr';
-                                resultsOutput.style.textAlign = 'left';
                                 viewSrtBtn.classList.add('active');
                                 viewTxtBtn.classList.remove('active');
@@ -400,15 +388,11 @@
                             }
                         }
                     }
-                    submitButton.disabled = false;
-                    audioFileInput.disabled = false;
-                    audioDropZone.classList.remove('disabled');
                 } catch (error) {
                     console.error('Transcription error:', error);
                     updateStatus(`אירעה שגיאה: ${error.message}`, 100, true);
-                    submitButton.disabled = false;
-                    audioFileInput.disabled = false;
-                    audioDropZone.classList.remove('disabled');
                 }
             });
         });
@@ -416,9 +400,7 @@
     <footer>
         <p>
             <a href="https://github.com/NHLOCAL/" target="_blank" class="github-link">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.835 2.809 1.305 3.493.998.108-.776.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
             </a>
             נוצר על ידי <a href="https://nhlocal.github.io" target="_blank">Nh Local</a>
         </p>

     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+    <!-- Font Awesome for brand icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
         :root {
         .file-input-wrapper input[type="file"] { display: none; }
         .file-name { margin-top: 1rem; font-weight: 600; color: var(--md-sys-color-secondary); }
         #results-section { display: none; margin-top: 2rem; }
+        .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; }
         .results-header h2 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
         .view-toggle { display: flex; border: 1px solid var(--md-sys-color-outline); border-radius: 99px; overflow: hidden; }
         .view-btn { background: transparent; border: none; padding: 6px 16px; cursor: pointer; font-weight: 600; font-family: 'Assistant', sans-serif; font-size: 0.9rem; color: var(--md-sys-color-primary); transition: all 0.2s ease-in-out; }
         .view-btn.active { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
+        #results-output { width: 100%; height: 300px; padding: 1rem; border: 1px solid var(--md-sys-color-outline); border-radius: var(--border-radius-small); font-family: monospace; background-color: var(--md-sys-color-surface); font-size: 0.9rem; resize: vertical; direction: rtl; text-align: right; }
+        .buttons-container { display: flex; gap: 1rem; margin-top: 1rem; justify-content: center; flex-wrap: wrap; }
         #status-container { margin-top: 1.5rem; display: none; }
         #status-message { text-align: center; padding: 1rem; font-weight: 600; border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; }
         #status-message.loading { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
         footer a { color: var(--md-sys-color-primary); text-decoration: none; font-weight: 600; }
         footer a:hover { text-decoration: underline; }
         .github-link { margin-left: 8px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; }
+        .github-link i { font-size: 18px; color: var(--md-sys-color-primary); transition: color 0.2s ease-in-out; vertical-align: middle; }
+        .github-link:hover i { color: #5a3f92; }
     </style>
 </head>
 <body>
                             <span class="material-symbols-outlined">rocket_launch</span> התחל תמלול
                         </button>
                         <a href="https://tools.ze-kal.top/tools/subtitle_editor.html" target="_blank" class="btn btn-secondary" title="עריכה, סנכרון ותיקון של קובץ כתוביות קיים" style="padding: 16px 32px; font-size: 1.2rem;">
+                            <span class="material-symbols-outlined">edit_note</span> עורך כתוביות
                         </a>
                     </div>
                 </form>
                 <div class="results-header">
                     <h2>תוצאות התמלול</h2>
                     <div class="view-toggle">
+                        <button id="view-srt-btn" class="view-btn">כתוביות</button>
                         <button id="view-txt-btn" class="view-btn">טקסט</button>
                     </div>
                 </div>
                 <textarea id="results-output" readonly></textarea>
                 <div class="buttons-container">
                     <a id="download-srt-button" class="btn btn-primary">
+                        <span class="material-symbols-outlined">download</span> הורד כתוביות (SRT)
                     </a>
+                     <a href="https://tools.ze-kal.top/tools/subtitle_editor.html" target="_blank" class="btn btn-secondary" title="עריכה, סנכרון ותיקון של קובץ כתוביות קיים">
+                            <span class="material-symbols-outlined">edit_note</span> ערוך כתוביות
+                        </a>
                     <a id="download-txt-button" class="btn btn-secondary">
+                        <span class="material-symbols-outlined">article</span> הורד כטקסט
                     </a>
                 </div>
             </section>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const form = document.getElementById('transcribe-form');
             const apiKeyInput = document.getElementById('api-key-input');
             const audioFileInput = document.getElementById('audio-file-input');
             const chunkInfoSection = document.getElementById('chunk-info-section');
             const chunkInfoMessage = document.getElementById('chunk-info-message');
             const chunkTimestampsOutput = document.getElementById('chunk-timestamps-output');
             const resultsOutput = document.getElementById('results-output');
             const viewSrtBtn = document.getElementById('view-srt-btn');
             const viewTxtBtn = document.getElementById('view-txt-btn');
             let audioFile = null;
             let srtContent = '';
             let textContent = null;
             function checkInputs() {
                 submitButton.disabled = !(apiKeyInput.value.trim() && audioFile);
             }
                 statusMessage.className = isError ? 'error' : 'loading';
             }
+            function setFormEnabled(enabled) {
+                submitButton.disabled = !enabled;
+                audioFileInput.disabled = !enabled;
+                if (enabled) {
+                    audioDropZone.classList.remove('disabled');
+                    checkInputs(); // Re-check if submit should be enabled
+                } else {
+                    audioDropZone.classList.add('disabled');
+                }
+            }
             function resetUI() {
+                setFormEnabled(true);
                 statusContainer.style.display = 'none';
                 resultsSection.style.display = 'none';
                 chunkInfoSection.style.display = 'none';
                 localStorage.setItem('geminiApiKey', apiKeyInput.value);
             }
             loadApiKey();
             apiKeyInput.addEventListener('input', () => { saveApiKey(); checkInputs(); });
                 modelCustomInput.style.display = (modelSelect.value === 'custom') ? 'block' : 'none';
             });
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                 audioDropZone.addEventListener(eventName, e => { e.preventDefault(); e.stopPropagation(); });
             });
+            audioDropZone.addEventListener('dragover', () => { if (!audioFileInput.disabled) audioDropZone.classList.add('drag-over') });
             audioDropZone.addEventListener('dragleave', () => audioDropZone.classList.remove('drag-over'));
             audioDropZone.addEventListener('drop', e => {
+                if (audioFileInput.disabled) return;
                 audioDropZone.classList.remove('drag-over');
                 const droppedFile = e.dataTransfer.files[0];
                 if (droppedFile && droppedFile.type.startsWith('audio/')) {
                 checkInputs();
             });
             downloadTxtButton.addEventListener('click', async () => {
+                if (!srtContent) { alert('אין תוכן תמלול להמרה.'); return; }
                 try {
                     const response = await fetch('/convert-to-text', {
                         method: 'POST',
                     a.download = `${originalFileName}_transcript.txt`;
                     document.body.appendChild(a); a.click(); document.body.removeChild(a);
                     URL.revokeObjectURL(url);
+                } catch (error) { alert(`אירעה שגיאה בהמרת הקובץ: ${error.message}`); }
             });
             viewSrtBtn.addEventListener('click', () => {
                 if (viewSrtBtn.classList.contains('active')) return;
                 viewSrtBtn.classList.add('active'); viewTxtBtn.classList.remove('active');
                 resultsOutput.value = srtContent;
             });
             viewTxtBtn.addEventListener('click', async () => {
                 if (viewTxtBtn.classList.contains('active')) return;
                 viewTxtBtn.classList.add('active'); viewSrtBtn.classList.remove('active');
                 if (textContent !== null) { resultsOutput.value = textContent; return; }
                 if (!srtContent) { resultsOutput.value = ''; return; }
                 resultsOutput.value = 'ממיר לתצוגת טקסט...';
                 try {
                     const response = await fetch('/convert-to-text', {
+                        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ srt_data: srtContent })
                     });
                     if (!response.ok) throw new Error((await response.json()).detail || 'שגיאה בהמרת הקובץ');
                     const data = await response.json();
                     textContent = data.text;
                     resultsOutput.value = textContent;
+                } catch (error) { resultsOutput.value = `אירעה שגיאה בהמרת התצוגה: ${error.message}`; }
             });
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 if (submitButton.disabled) return;
                 resetUI();
+                setFormEnabled(false);
                 updateStatus('מתחיל את התהליך...', 0);
                 let modelName = modelSelect.value === 'custom' ? modelCustomInput.value.trim() : modelSelect.value;
                 if (modelSelect.value === 'custom' && !modelName) {
                     updateStatus('יש להזין שם מודל מותאם אישית', 100, true);
+                    setFormEnabled(true);
                     return;
                 }
                 const formData = new FormData();
                 try {
                     const response = await fetch('/transcribe-stream', { method: 'POST', body: formData });
                     if (!response.ok) throw new Error((await response.json()).detail || `שגיאת שרת: ${response.status}`);
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
                     let buffer = '';
                                 srtContent = event.data;
                                 textContent = null;
                                 resultsOutput.value = srtContent;
                                 viewSrtBtn.classList.add('active');
                                 viewTxtBtn.classList.remove('active');
                             }
                         }
                     }
+                    setFormEnabled(true);
                 } catch (error) {
                     console.error('Transcription error:', error);
                     updateStatus(`אירעה שגיאה: ${error.message}`, 100, true);
+                    setFormEnabled(true);
                 }
             });
         });
     <footer>
         <p>
             <a href="https://github.com/NHLOCAL/" target="_blank" class="github-link">
+                <i class="fa-brands fa-github"></i>
             </a>
             נוצר על ידי <a href="https://nhlocal.github.io" target="_blank">Nh Local</a>
         </p>