Creating_a_thumbnail (#1296)

Thank you @JvSdv!

.gitignore

@@ -232,6 +232,7 @@ fabric.properties
 .idea/caches/build_file_checksums.ser
 
 assets/
+/.vscode
 out
 .DS_Store
 .setup-done-before
@@ -243,4 +244,4 @@ video_creation/data/videos.json
 video_creation/data/envvars.txt
 
 config.toml
-video_creation/data/videos.json
+video_creation/data/videos.json

GUI/settings.html

@@ -213,6 +213,38 @@
                             backgrounds</a></span>
                 </div>
             </div>
+            <div class="row mb-2">
+                <label for="background_thumbnail" class="col-4">Background Thumbnail</label>
+                <div class="col-8">
+                    <div class="form-check form-switch">
+                        <input name="background_thumbnail" class="form-check-input" type="checkbox" value="True"
+                            data-toggle="tooltip"
+                            data-original-title='If checked a thumbnail will be added to the video (put a thumbnail.png file in the assets/backgrounds directory for it to be used.)'>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-2">
+                <label for="background_thumbnail_font_family" class="col-4">Background Thumbnail Font Family (.ttf)</label>
+                <div class="col-8">
+                    <input name="background_thumbnail_font_family" type="text" class="form-control"
+                        placeholder="arial" value="{{ data.background_thumbnail_font_family }}">
+                </div>
+            </div>
+            <div class="row mb-2">
+                <label for="background_thumbnail_font_size" class="col-4">Background Thumbnail Font Size (px)</label>
+                <div class="col-8">
+                    <input name="background_thumbnail_font_size" type="number" class="form-control"
+                        placeholder="96" value="{{ data.background_thumbnail_font_size }}">
+                </div>
+            </div>
+            <!-- need to create a color picker -->
+            <div class="row mb-2">
+                <label for="background_thumbnail_font_color" class="col-4">Background Thumbnail Font Color (rgb)</label>
+                <div class="col-8">
+                    <input name="background_thumbnail_font_color" type="text" class="form-control"
+                        placeholder="255,255,255" value="{{ data.background_thumbnail_font_color }}">
+                </div>
+            </div>
 
             <!-- TTS Settings -->
             <p class="h4">TTS Settings</p>

utils/.config.template.toml

@@ -33,7 +33,10 @@ fps = { optional = true, default = 30, example = 30, explanation = "Sets the FPS
 background_choice = { optional = true, default = "minecraft", example = "rocket-league", options = ["minecraft", "gta", "rocket-league", "motor-gta", "csgo-surf", "cluster-truck", "minecraft-2","multiversus","fall-guys","steep", ""], explanation = "Sets the background for the video based on game name" }
 #background_audio = { optional = true, type = "bool", default = false, example = false, options = [true, false,], explanation = "Sets a audio to play in the background (put a background.mp3 file in the assets/backgrounds directory for it to be used.)" }
 #background_audio_volume = { optional = true, type = "float", default = 0.3, example = 0.1, explanation="Sets the volume of the background audio. only used if the background_audio is also set to true" }
-
+background_thumbnail = { optional = true, type = "bool", default = false, example = false, options = [true, false,], explanation = "Generate a thumbnail for the video (put a thumbnail.png file in the assets/backgrounds directory.)" }
+background_thumbnail_font_family = { optional = true, default = "arial", example = "arial", explanation = "Font family for the thumbnail text" }
+background_thumbnail_font_size = { optional = true, type = "int", default = 96, example = 96, explanation = "Font size in pixels for the thumbnail text" }
+background_thumbnail_font_color = { optional = true, default = "255,255,255", example = "255,255,255", explanation = "Font color in RGB format for the thumbnail text" }
 
 [settings.tts]
 voice_choice = { optional = false, default = "googletranslate", options = ["streamlabspolly", "tiktok", "googletranslate", "awspolly", "pyttsx", ], example = "tiktok", explanation = "The voice platform used for TTS generation. This can be left blank and you will be prompted to choose at runtime." }

utils/thumbnail.py

@@ -0,0 +1,37 @@
+from PIL import ImageDraw, ImageFont
+
+
+def create_thumbnail(thumbnail, font_family, font_size, font_color, width, height, title):
+
+    font = ImageFont.truetype(font_family + ".ttf", font_size)
+    Xaxis = width - (width * 0.2) # 20% of the width
+    sizeLetterXaxis = font_size * 0.5 # 50% of the font size  
+    XaxisLetterQty = round(Xaxis / sizeLetterXaxis) # Quantity of letters that can fit in the X axis
+    MarginYaxis = (height * 0.12) # 12% of the height
+    MarginXaxis = (width * 0.05) # 5% of the width
+    # 1.1 rem
+    LineHeight = font_size * 1.1
+    # rgb = "255,255,255" transform to list
+    rgb = font_color.split(",")
+    rgb = (int(rgb[0]), int(rgb[1]), int(rgb[2]))
+
+    arrayTitle = []
+    for word in title.split():
+        if len(arrayTitle) == 0:
+            # colocar a primeira palavra no arrayTitl# put the first word in the arrayTitle
+            arrayTitle.append(word)
+        else:
+            # if the size of arrayTitle is less than qtLetters
+            if len(arrayTitle[-1]) + len(word) < XaxisLetterQty:
+                arrayTitle[-1] = arrayTitle[-1] + " " + word
+            else:
+                arrayTitle.append(word)
+
+    draw = ImageDraw.Draw(thumbnail)
+    # loop for put the title in the thumbnail
+    for i in range(0, len(arrayTitle)):
+        # 1.1 rem
+        draw.text((MarginXaxis, MarginYaxis + (LineHeight * i)),
+                  arrayTitle[i], rgb, font=font)
+
+    return thumbnail

video_creation/final_video.py

@@ -3,7 +3,10 @@ import multiprocessing
 import os
 import re
 from os.path import exists
+import shutil
 from typing import Tuple, Any
+from PIL import Image
+
 from moviepy.audio.AudioClip import concatenate_audioclips, CompositeAudioClip
 from moviepy.audio.io.AudioFileClip import AudioFileClip
 from moviepy.video.VideoClip import ImageClip
@@ -18,7 +21,9 @@ from utils.cleanup import cleanup
 from utils.console import print_step, print_substep
 from utils.video import Video
 from utils.videos import save_data
+from utils.thumbnail import create_thumbnail
 from utils import settings
+from utils.thumbnail import create_thumbnail
 
 console = Console()
 W, H = 1080, 1920
@@ -157,14 +162,75 @@ def make_final_video(
     final = CompositeVideoClip([background_clip, image_concat])
     title = re.sub(r"[^\w\s-]", "", reddit_obj["thread_title"])
     idx = re.sub(r"[^\w\s-]", "", reddit_obj["thread_id"])
+    title_thumb = reddit_obj["thread_title"]
 
-    filename = f"{name_normalize(title)[:251]}.mp4"
+    filename = f"{name_normalize(title)[:251]}"
     subreddit = settings.config["reddit"]["thread"]["subreddit"]
 
     if not exists(f"./results/{subreddit}"):
         print_substep("The results folder didn't exist so I made it")
         os.makedirs(f"./results/{subreddit}")
 
+    # create a tumbnail for the video
+    settingsbackground = settings.config["settings"]["background"]
+
+    if settingsbackground["background_thumbnail"]:
+        if not exists(f"./results/{subreddit}/thumbnails"):
+            print_substep(
+                "The results/thumbnails folder didn't exist so I made it")
+            os.makedirs(f"./results/{subreddit}/thumbnails")
+        # get the first file with the .png extension from assets/backgrounds and use it as a background for the thumbnail
+        first_image = next(
+            (
+                file
+                for file in os.listdir("assets/backgrounds")
+                if file.endswith(".png")
+            ),
+            None,
+        )
+        if first_image is None:
+            print_substep("No png files found in assets/backgrounds", "red")
+
+    if settingsbackground["background_thumbnail"] and first_image:
+        font_family = settingsbackground["background_thumbnail_font_family"]
+        font_size = settingsbackground["background_thumbnail_font_size"]
+        font_color = settingsbackground["background_thumbnail_font_color"]
+        thumbnail = Image.open(f"assets/backgrounds/{first_image}")
+        width, height = thumbnail.size
+        thumbnailSave = create_thumbnail(thumbnail, font_family, font_size, font_color, width, height, title_thumb)
+        thumbnailSave.save(f"./assets/temp/{id}/thumbnail.png")
+        print_substep(f"Thumbnail - Building Thumbnail in assets/temp/{id}/thumbnail.png")
+
+    # create a tumbnail for the video
+    settingsbackground = settings.config["settings"]["background"]
+
+    if settingsbackground["background_thumbnail"]:
+        if not exists(f"./results/{subreddit}/thumbnails"):
+            print_substep(
+                "The results/thumbnails folder didn't exist so I made it")
+            os.makedirs(f"./results/{subreddit}/thumbnails")
+        # get the first file with the .png extension from assets/backgrounds and use it as a background for the thumbnail
+        first_image = next(
+            (
+                file
+                for file in os.listdir("assets/backgrounds")
+                if file.endswith(".png")
+            ),
+            None,
+        )
+        if first_image is None:
+            print_substep("No png files found in assets/backgrounds", "red")
+
+    if settingsbackground["background_thumbnail"] and first_image:
+        font_family = settingsbackground["background_thumbnail_font_family"]
+        font_size = settingsbackground["background_thumbnail_font_size"]
+        font_color = settingsbackground["background_thumbnail_font_color"]
+        thumbnail = Image.open(f"assets/backgrounds/{first_image}")
+        width, height = thumbnail.size
+        thumbnailSave = create_thumbnail(thumbnail, font_family, font_size, font_color, width, height, title_thumb)
+        thumbnailSave.save(f"./assets/temp/{id}/thumbnail.png")
+        print_substep(f"Thumbnail - Building Thumbnail in assets/temp/{id}/thumbnail.png")
+
     # if settings.config["settings"]['background']["background_audio"] and exists(f"assets/backgrounds/background.mp3"):
     #    audioclip = mpe.AudioFileClip(f"assets/backgrounds/background.mp3").set_duration(final.duration)
     #    audioclip = audioclip.fx( volumex, 0.2)
@@ -172,13 +238,13 @@ def make_final_video(
     #    # lowered_audio = audio_background.multiply_volume( # todo get this to work
     #    #    VOLUME_MULTIPLIER)  # lower volume by background_audio_volume, use with fx
     #    final.set_audio(final_audio)
-    # if 
+    # if
     final = Video(final).add_watermark(
         text=f"Background credit: {background_config[2]}", opacity=0.4, redditid=reddit_obj
     )
-    
 
-   
+
+
     final.write_videofile(
         f"assets/temp/{id}/temp.mp4",
         fps=int(settings.config["settings"]["fps"]),
@@ -191,9 +257,13 @@ def make_final_video(
         f"assets/temp/{id}/temp.mp4",
         0,
         length,
-        targetname=f"results/{subreddit}/{filename}",
+        targetname=f"results/{subreddit}/{filename}.mp4",
     )
-    save_data(subreddit, filename, title, idx, background_config[2])
+    #get the thumbnail image from assets/temp/id/thumbnail.png and save it in results/subreddit/thumbnails
+    if settingsbackground["background_thumbnail"] and exists(f"assets/temp/{id}/thumbnail.png"):
+        shutil.move(f"assets/temp/{id}/thumbnail.png", f"./results/{subreddit}/thumbnails/{filename}.png")
+
+    save_data(subreddit, filename+".mp4", title, idx, background_config[2])
     print_step("Removing temporary files 🗑")
     cleanups = cleanup(id)
     print_substep(f"Removed {cleanups} temporary files 🗑")