I have a would you rather python creator. but the placement is not alligned properly and also it should first show the top image and top text. and after a configureable amount of time it should show the second image. and then after a other configureable amount of time it should wait and after that a timer in the middle should appear and if it hits 0 it should show the percentages (make the rest still visible). and there is a black box in the middle right now. 

here is the code:
import tkinter as tk
from tkinter import ttk, filedialog
from moviepy.editor import VideoFileClip, TextClip, ColorClip, CompositeVideoClip, ImageClip
from moviepy.config import change_settings
import numpy as np
from PIL import Image, ImageEnhance
import os

# Configure ImageMagick
change_settings({"IMAGEMAGICK_BINARY": r"C:\Program Files\ImageMagick-7.1.1-Q16-HDRI\magick.exe"})

class WouldYouRatherGenerator:
    def __init__(self):
        self.window = tk.Tk()
        self.window.title("Would You Rather Generator")
        
        # Video dimensions (9:16 ratio)
        self.width = 1080
        self.height = 1920
        self.middle_y = self.height // 2
        
        # Store image paths
        self.image1_path = None
        self.image2_path = None
        
        self.setup_ui()
    
    def setup_ui(self):
        main_frame = ttk.Frame(self.window, padding="10")
        main_frame.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))

        # Option 1 section
        ttk.Label(main_frame, text="Option 1").grid(row=0, column=0, sticky=tk.W)
        self.option1 = ttk.Entry(main_frame, width=50)
        self.option1.grid(row=1, column=0, columnspan=2, pady=5)

        ttk.Label(main_frame, text="Option 1 Image").grid(row=2, column=0, sticky=tk.W)
        self.image1_label = ttk.Label(main_frame, text="No image selected")
        self.image1_label.grid(row=2, column=1, sticky=tk.W)
        ttk.Button(main_frame, text="Browse...", command=lambda: self.select_image(1)).grid(row=2, column=2)

        ttk.Label(main_frame, text="Percentage 1").grid(row=3, column=0, sticky=tk.W)
        self.percent1 = ttk.Entry(main_frame, width=10)
        self.percent1.grid(row=3, column=1, sticky=tk.W, pady=5)
        self.percent1.insert(0, "1.02")

        # Option 2 section
        ttk.Label(main_frame, text="Option 2").grid(row=4, column=0, sticky=tk.W)
        self.option2 = ttk.Entry(main_frame, width=50)
        self.option2.grid(row=5, column=0, columnspan=2, pady=5)

        ttk.Label(main_frame, text="Option 2 Image").grid(row=6, column=0, sticky=tk.W)
        self.image2_label = ttk.Label(main_frame, text="No image selected")
        self.image2_label.grid(row=6, column=1, sticky=tk.W)
        ttk.Button(main_frame, text="Browse...", command=lambda: self.select_image(2)).grid(row=6, column=2)

        ttk.Label(main_frame, text="Percentage 2").grid(row=7, column=0, sticky=tk.W)
        self.percent2 = ttk.Entry(main_frame, width=10)
        self.percent2.grid(row=7, column=1, sticky=tk.W, pady=5)
        self.percent2.insert(0, "99.72")

        # Timing controls section
        ttk.Label(main_frame, text="Initial Pause (seconds)").grid(row=8, column=0, sticky=tk.W)
        self.initial_pause = ttk.Entry(main_frame, width=10)
        self.initial_pause.grid(row=8, column=1, sticky=tk.W, pady=5)
        self.initial_pause.insert(0, "2")

        ttk.Label(main_frame, text="Timer Start Delay (seconds)").grid(row=9, column=0, sticky=tk.W)
        self.timer_delay = ttk.Entry(main_frame, width=10)
        self.timer_delay.grid(row=9, column=1, sticky=tk.W, pady=5)
        self.timer_delay.insert(0, "1")

        # Generate button
        ttk.Button(main_frame, text="Generate Video", command=self.generate_video).grid(row=10, column=0, columnspan=3, pady=20)

    def select_image(self, option_num):
        file_path = filedialog.askopenfilename(
            filetypes=[("Image files", "*.png *.jpg *.jpeg *.gif *.bmp")]
        )
        if file_path:
            if option_num == 1:
                self.image1_path = file_path
                self.image1_label.config(text=os.path.basename(file_path))
            else:
                self.image2_path = file_path
                self.image2_label.config(text=os.path.basename(file_path))

    def process_image(self, image_path, y_position, duration, start_time=0):
        try:
            img = Image.open(image_path)
            
            if img.mode != 'RGB':
                img = img.convert('RGB')
            
            target_width = int(self.width * 0.7)
            aspect_ratio = img.width / img.height
            new_height = int(target_width / aspect_ratio)
            
            img = img.resize((target_width, new_height), Image.Resampling.LANCZOS)
            
            enhancer = ImageEnhance.Contrast(img)
            img = enhancer.enhance(1.2)
            enhancer = ImageEnhance.Brightness(img)
            img = enhancer.enhance(1.1)
            
            img_array = np.array(img)
            
            clip = ImageClip(img_array).set_duration(duration)
            
            if start_time > 0:
                clip = clip.set_start(start_time)
            
            x_position = (self.width - target_width) // 2
            
            return clip.set_position((x_position, y_position))
            
        except Exception as e:
            print(f"Error processing image: {str(e)}")
            return None

    def create_styled_text(self, text, y_position, duration, start_time=0, is_percentage=False, is_timer=False):
        if is_percentage:
            size = 160
            color = 'yellow'
            stroke_width = 2
        elif is_timer:
            size = 200
            color = 'white'
            stroke_width = 3
        else:
            size = 100
            color = 'white'
            stroke_width = 2
        
        text_clip = TextClip(
            text,
            font='Arial-Bold',
            color=color,
            size=(self.width - 40, None),
            fontsize=size,
            method='caption',
            align='center',
            stroke_color='black',
            stroke_width=stroke_width
        ).set_duration(duration)
        
        if start_time > 0:
            text_clip = text_clip.set_start(start_time)
        
        return text_clip.set_position(('center', y_position))

    def create_timer_clips(self, start_time, base_duration):
        timer_clips = []
        for i in range(5, -1, -1):
            clip_duration = 1.0 if i > 0 else base_duration - 5
            timer_clip = self.create_styled_text(
                str(i),
                self.middle_y - 100,
                clip_duration,
                start_time + (5 - i),
                is_timer=True
            )
            timer_clips.append(timer_clip)
        return timer_clips

    def generate_video(self):
        try:
            initial_pause = float(self.initial_pause.get())
            timer_delay = float(self.timer_delay.get())
            total_duration = initial_pause + timer_delay + 6  # Initial pause + timer delay + 5 second countdown + 1 second for percentages
            
            # Create background clips
            red_clip = ColorClip((self.width, self.height//2), color=(255, 0, 0)).set_duration(total_duration)
            blue_clip = ColorClip((self.width, self.height//2), color=(0, 0, 255)).set_duration(total_duration)
            
            clips = [
                blue_clip.set_position((0, self.middle_y)),
                red_clip.set_position((0, 0))
            ]
            
            # Positioning
            img1_y = 150
            text1_y = self.middle_y - 400
            percent1_y = self.middle_y - 200
            
            img2_y = self.middle_y + 500
            text2_y = self.middle_y + 200
            percent2_y = self.middle_y + 50
            
            # Add top half elements immediately
            if self.image1_path:
                img1_clip = self.process_image(self.image1_path, img1_y, total_duration)
                if img1_clip:
                    clips.append(img1_clip)
            
            option1_txt = self.create_styled_text(
                self.option1.get().upper(),
                text1_y,
                total_duration
            )
            clips.append(option1_txt)
            
            # Add bottom half elements after initial pause
            if self.image2_path:
                img2_clip = self.process_image(self.image2_path, img2_y, total_duration, initial_pause)
                if img2_clip:
                    clips.append(img2_clip)
            
            option2_txt = self.create_styled_text(
                self.option2.get().upper(),
                text2_y,
                total_duration,
                initial_pause
            )
            clips.append(option2_txt)
            
            # Add timer clips
            timer_start = initial_pause + timer_delay
            timer_clips = self.create_timer_clips(timer_start, total_duration)
            clips.extend(timer_clips)
            
            # Add percentages at the end
            percentages_start = timer_start + 6  # After countdown finishes
            pct1_txt = self.create_styled_text(
                f"{self.percent1.get()}%",
                percent1_y,
                total_duration - percentages_start,
                percentages_start,
                is_percentage=True
            )
            
            pct2_txt = self.create_styled_text(
                f"{self.percent2.get()}%",
                percent2_y,
                total_duration - percentages_start,
                percentages_start,
                is_percentage=True
            )
            clips.extend([pct1_txt, pct2_txt])
            
            # Add dividing line and circle
            yellow_line = ColorClip((self.width, 8), color=(255, 255, 0)).set_duration(total_duration)
            black_line = ColorClip((self.width, 4), color=(0, 0, 0)).set_duration(total_duration)
            
            yellow_line = yellow_line.set_position((0, self.middle_y - 4))
            black_line = black_line.set_position((0, self.middle_y))
            
            circle = ColorClip((80, 80), color=(0, 0, 0)).set_duration(total_duration)
            circle = circle.set_position((self.width//2 - 40, self.middle_y - 40))
            
            clips.extend([yellow_line, black_line, circle])
            
            # Create final video
            final_clip = CompositeVideoClip(clips, size=(self.width, self.height))
            
            final_clip.write_videofile(
                "would_you_rather.mp4",
                fps=30,
                codec='libx264',
                audio=False,
                threads=4
            )
            print("Video generated successfully!")
            
        except Exception as e:
            print(f"Error generating video: {str(e)}")
            raise e
        finally:
            if 'final_clip' in locals():
                final_clip.close()
    
    def run(self):
        self.window.mainloop()

if __name__ == "__main__":
    app = WouldYouRatherGenerator()
    app.run()