Spaces:

marquesafonso
/

multilang-asr-captioner

Running

App Files Files Community

marquesafonso commited on Aug 5

Commit

2140c28

1 Parent(s): 80b7d93

improve UI, add json indent and textare backgroung; responsiveness (wip)

Browse files

Files changed (1) hide show

static/process_settings.html +188 -84

static/process_settings.html CHANGED Viewed

@@ -1,118 +1,222 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Process Video</title>
-    <style>
-        body { font-family: Arial; background: #f0f0f0; padding: 2rem; }
-        form { background: white; padding: 2rem; border-radius: 10px; max-width: 700px; margin: auto; }
-        label, select, input, textarea { display: block; width: 100%; margin-bottom: 1rem; }
-        textarea { height: 200px; font-family: monospace; }
-        input[type="submit"] { background: #4CAF50; color: white; padding: 0.8rem; border: none; cursor: pointer; }
-        .radio-container {
-        display: flex;
-        gap: 1rem;
-        margin-bottom: 1rem;
-        }
-        .radio-option {
         display: flex;
-        flex-direction: column;
-        align-items: center;
-        }
-    </style>
 </head>
 <body>
-    <form action="/process_video/" method="post">
-        <h2>Step 2: Edit Transcription & Style</h2>
-        <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>
-        <!-- Textareas -->
-        <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">{{ transcription_json }}</textarea>
-        </div>
         <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><br>
         <label for="bg_color">Background color</label>
-        <input type="text" name="bg_color" value="#070a13b3">
         <label for="text_color">Text color</label>
         <select id="text_color" name="text_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>
-        <input type="hidden" name="video_path" value="{{ video_path }}">
-        <input type="hidden" name="temp_dir_path" value="{{ temp_dir_path }}">
-        <input type="submit" value="Render & Download">
-    </form>
-    <div style="text-align: center; margin-top: 2em;">
-        <a href="/transcribe_video">Transcribe Another Video</a>
     </div>
-    <script>
-    // Load dropdown options with optional default
     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);
-            });
-    }
-    // Set your default font and color here:
-    const DEFAULT_FONT = "Helvetica";
-    const DEFAULT_COLOR = "white";
-    // Populate dropdowns with defaults
-    populateDropdown('font', '/static/fonts.txt', DEFAULT_FONT);
-    populateDropdown('text_color', '/static/colors.txt', DEFAULT_COLOR);
     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';
     }
-</script>
 </body>
 </html>

 <!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">
+      <!-- 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 (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>
+      <!-- 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>
+        <input type="text" name="bg_color" value="#00FFFF00">
         <label for="text_color">Text color</label>
         <select id="text_color" name="text_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';
     }
+    // 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");
+      populateDropdown('text_color', '/static/colors.txt', "white");
+      toggleTranscriptionFields(); // Set proper display state
+    });
+  </script>
 </body>
 </html>