|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
<h2>Step 2: Edit Transcription & Style</h2> |
|
|
|
|
|
<div class="form-section"> |
|
|
|
|
|
<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 (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 (JSON)</label> |
|
|
<textarea name="srt_json" id="srt_json"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<label for="caption_mode">Caption mode</label> |
|
|
<select name="caption_mode"> |
|
|
<option value="desktop">Desktop</option> |
|
|
<option value="mobile">Mobile</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="submit" 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'; |
|
|
} |
|
|
|
|
|
|
|
|
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"); |
|
|
populateDropdown('bg_color', '/static/colors.txt', "grey"); |
|
|
populateDropdown('text_color', '/static/colors.txt', "white"); |
|
|
populateDropdown('highlight_color', '/static/colors.txt', "LightBlue"); |
|
|
|
|
|
toggleTranscriptionFields(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
