Spaces:

marquesafonso
/

multilang-asr-captioner

Sleeping

File size: 6,307 Bytes

<!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" 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>