add validation for other video formats; double cache size; adapt to device_type change in transcriber
fc6dd1b
| <html> | |
| <head> | |
| <title>Process Video</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: #f0f0f0; | |
| padding: 2rem; | |
| } | |
| form { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| max-width: 900px; | |
| margin: auto; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| h2 { | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-section { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 3rem; | |
| } | |
| .column { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .column h3 { | |
| color: #4CAF50; | |
| border-bottom: 2px solid #4CAF50; | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| label { | |
| font-weight: bold; | |
| margin-top: 1rem; | |
| display: block; | |
| } | |
| input[type="text"], | |
| input[type="number"], | |
| select, | |
| textarea { | |
| width: 100%; | |
| padding: 0.5rem; | |
| border: 1px solid #ccc; | |
| border-radius: 6px; | |
| margin-top: 0.2rem; | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| } | |
| textarea { | |
| height: 320px; | |
| font-family: monospace; | |
| background-color: #f9f9f9; | |
| border: 1px solid #ccc; | |
| line-height: 1.4; | |
| white-space: pre-wrap; | |
| resize: vertical; | |
| } | |
| .radio-container { | |
| display: flex; | |
| gap: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .radio-option { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| input[type="submit"] { | |
| background: #4CAF50; | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .centered-link { | |
| text-align: center; | |
| margin-top: 2em; | |
| } | |
| @media (max-width: 800px) { | |
| .form-section { | |
| flex-direction: column; | |
| } | |
| .column { | |
| margin-bottom: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="/process_video/" method="post" onsubmit="submitButton.disabled = true; return true;"> | |
| <h2>Step 2: Edit Transcription & Style</h2> | |
| <div class="form-section"> | |
| <!-- Left Column --> | |
| <div class="column"> | |
| <h3>Highlighting Mode</h3> | |
| <div class="radio-container"> | |
| <div class="radio-option"> | |
| <label for="mode_normal">Normal</label> | |
| <input type="radio" name="highlight_mode" value="false" id="mode_normal" checked onchange="toggleTranscriptionFields()"> | |
| </div> | |
| <div class="radio-option"> | |
| <label for="mode_highlight">Word-level</label> | |
| <input type="radio" name="highlight_mode" value="true" id="mode_highlight" onchange="toggleTranscriptionFields()"> | |
| </div> | |
| </div> | |
| <div id="normal_input"> | |
| <label for="srt_string">Transcription Preview (SRT)</label> | |
| <textarea name="srt_string" id="srt_string">{{ transcription_text }}</textarea> | |
| </div> | |
| <div id="highlight_input" style="display: none;"> | |
| <label for="srt_json">Transcription Preview (JSON)</label> | |
| <textarea name="srt_json" id="srt_json"></textarea> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="column"> | |
| <h3>Visual Parameters</h3> | |
| <label for="fontsize">Font size</label> | |
| <input type="number" name="fontsize" value="42"> | |
| <label for="font">Font</label> | |
| <select id="font" name="font"> | |
| <option>Loading fonts...</option> | |
| </select> | |
| <label for="bg_color">Background color</label> | |
| <select id="bg_color" name="bg_color"> | |
| <option>Loading colors...</option> | |
| </select> | |
| <label for="text_color">Text color</label> | |
| <select id="text_color" name="text_color"> | |
| <option>Loading colors...</option> | |
| </select> | |
| <label for="highlight_color">Highlight color</label> | |
| <select id="highlight_color" name="highlight_color"> | |
| <option>Loading colors...</option> | |
| </select> | |
| </div> | |
| </div> | |
| <input type="hidden" name="video_path" value="{{ video_path }}"> | |
| <input type="hidden" name="temp_dir_path" value="{{ temp_dir_path }}"> | |
| <input type="hidden" name="device_type" value="{{ device_type }}"> | |
| <input type="submit" name="submitButton" value="Submit"> | |
| </form> | |
| <div class="centered-link"> | |
| <a href="/transcribe_video/">Transcribe Another Video</a> | |
| </div> | |
| <script> | |
| function populateDropdown(id, url, defaultValue = null) { | |
| fetch(url) | |
| .then(response => response.text()) | |
| .then(data => { | |
| const select = document.getElementById(id); | |
| select.innerHTML = ''; | |
| const lines = data.split('\n').map(x => x.trim()).filter(Boolean); | |
| lines.forEach(item => { | |
| const opt = document.createElement('option'); | |
| opt.value = item; | |
| opt.textContent = item; | |
| if (item === defaultValue) opt.selected = true; | |
| select.appendChild(opt); | |
| }); | |
| }) | |
| .catch(error => console.error(`Error loading ${url}:`, error)); | |
| } | |
| function toggleTranscriptionFields() { | |
| const isHighlight = document.getElementById('mode_highlight').checked; | |
| document.getElementById('normal_input').style.display = isHighlight ? 'none' : 'block'; | |
| document.getElementById('highlight_input').style.display = isHighlight ? 'block' : 'none'; | |
| } | |
| // Safely pretty print transcription_json if available | |
| window.addEventListener("DOMContentLoaded", () => { | |
| const jsonText = `{{ transcription_json | tojson | safe }}`; | |
| try { | |
| const parsed = JSON.parse(jsonText); | |
| document.getElementById("srt_json").value = JSON.stringify(parsed, null, 1); | |
| } catch (e) { | |
| console.warn("Invalid JSON:", e); | |
| document.getElementById("srt_json").value = jsonText; | |
| } | |
| populateDropdown('font', '/static/fonts.txt', "Helvetica-Bold"); | |
| populateDropdown('bg_color', '/static/colors.txt', "transparent"); | |
| populateDropdown('text_color', '/static/colors.txt', "white"); | |
| populateDropdown('highlight_color', '/static/colors.txt', "LightBlue"); | |
| toggleTranscriptionFields(); // Set proper display state | |
| }); | |
| </script> | |
| </body> | |
| </html> | |