add highlight color option, edit bg_color selection

main.py

@@ -115,11 +115,12 @@ async def process_video_api(video_path: str = Form(...),
                             bg_color: Optional[str] = Form("#070a13b3"),
                             text_color: Optional[str] = Form("white"),
                             highlight_mode: Optional[bool] = Form(False),
+                            highlight_color: Optional[str] = Form("LightBlue"),
                             caption_mode: Optional[str] = Form("desktop"),
                             temp_dir: TemporaryDirectory = Depends(get_temp_dir)
                             ):
     try:
-        output_path = process_video(video_path, srt_string, srt_json, fontsize, font, bg_color, text_color, highlight_mode, caption_mode)
+        output_path = process_video(video_path, srt_string, srt_json, fontsize, font, bg_color, text_color, highlight_mode, highlight_color, caption_mode)
         with open(os.path.join(temp_dir.name, f"{video_path.split('.')[0]}.srt"), 'w+') as temp_srt_file:
             logging.info("Processing the video...")
             temp_srt_file.write(srt_string)    

static/process_settings.html

@@ -24,9 +24,9 @@
     }
 
     .form-section {
-        display: flex;
-        flex-direction: row;
-        gap: 3rem;
+      display: flex;
+      flex-direction: row;
+      gap: 3rem;
     }
 
     .column {
@@ -115,29 +115,29 @@
 
     <div class="form-section">
       <!-- Left Column -->
-        <div class="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 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">
@@ -152,13 +152,20 @@
         </select>
 
         <label for="bg_color">Background color</label>
-        <input type="text" name="bg_color" value="#00FFFF00">
+        <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>
@@ -213,7 +220,9 @@
       }
 
       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(); // Set proper display state
     });

utils/process_video.py

@@ -1,19 +1,20 @@
-import logging, os, json
+import logging, os
 from utils.subtitler import subtitler
 
 def process_video(invideo_file: str,
-                  srt_string:str,
-                  srt_json: str,
-                  fontsize:str,
-                  font:str,
-                  bg_color:str,
-                  text_color:str,
-                  highlight_mode: bool,
-                  caption_mode:str
-                  ):
+                srt_string:str,
+                srt_json: str,
+                fontsize:str,
+                font:str,
+                bg_color:str,
+                text_color:str,
+                highlight_mode: bool,
+                highlight_color: str,
+                caption_mode:str
+                ):
     invideo_path_parts = os.path.normpath(invideo_file).split(os.path.sep)
     VIDEO_NAME = os.path.basename(invideo_file)
     OUTVIDEO_PATH = os.path.join(os.path.normpath('/'.join(invideo_path_parts[:-1])), f"result_{VIDEO_NAME}")
     logging.info("Subtitling...")
-    subtitler(invideo_file, srt_string, srt_json, OUTVIDEO_PATH, fontsize, font, bg_color, text_color, highlight_mode, caption_mode)
+    subtitler(invideo_file, srt_string, srt_json, OUTVIDEO_PATH, fontsize, font, bg_color, text_color, highlight_mode, highlight_color, caption_mode)
     return OUTVIDEO_PATH

utils/subtitler.py

@@ -37,6 +37,7 @@ def subtitler(video_file: str,
             bg_color: str,
             text_color: str,
             highlight_mode: bool,
+            highlight_color: str,
             caption_mode: str
             ):
     """Add subtitles to a video, with optional word-level highlighting."""
@@ -55,7 +56,7 @@ def subtitler(video_file: str,
             line_end = float(line["end"])
             line_text = line["text"]
 
-            base_clip = TextClip(line_text, fontsize=fontsize, color=text_color, font=font, method='label')
+            base_clip = TextClip(line_text, fontsize=fontsize, font=font, color=text_color, bg_color=bg_color, method='label')
             base_clip = base_clip.set_start(line_start).set_end(line_end)
 
             # Center the full line
@@ -73,7 +74,7 @@ def subtitler(video_file: str,
 
                 # Create a background-only word clip
                 word_clip = TextClip(word, fontsize=fontsize, color=text_color, stroke_color=text_color, stroke_width=2, font=font,
-                        method='label', bg_color="LightBlue")
+                        method='label', bg_color=highlight_color)
                 word_clip = word_clip.set_start(word_start).set_end(word_end)
                 word_clip = word_clip.set_position((current_x - 7.5, subtitle_y_position))
                 subtitle_clips.append(word_clip)