Update logic and add font

.gitignore

@@ -0,0 +1,78 @@
+# Python build
+.eggs/
+gradio.egg-info
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+build/
+__tmp/*
+
+# JS build
+gradio/templates/cdn
+gradio/templates/frontend
+
+# Secrets
+.env
+
+# Gradio run artifacts
+*.db
+*.sqlite3
+gradio/launches.json
+flagged/
+gradio_cached_examples/
+tmp.zip
+
+# Tests
+.coverage
+coverage.xml
+test.txt
+**/snapshots/**/*.png
+playwright-report/
+
+# Demos
+demo/tmp.zip
+demo/files/*.avi
+demo/files/*.mp4
+demo/all_demos/demos/*
+demo/all_demos/requirements.txt
+demo/*/config.json
+demo/annotatedimage_component/*.png
+
+# Etc
+.idea/*
+.DS_Store
+*.bak
+workspace.code-workspace
+*.h5
+
+# dev containers
+.pnpm-store/
+
+# log files
+.pnpm-debug.log
+
+# Local virtualenv for devs
+.venv*
+
+# FRP
+gradio/frpc_*
+.vercel
+
+# js
+node_modules
+public/build/
+test-results
+client/js/test.js
+.config/test.py
+
+# storybook
+storybook-static
+build-storybook.log
+js/storybook/theme.css
+
+# playwright
+.config/playwright
+!.config/playwright/index.html
+!.config/playwright/index.ts

app.py

@@ -2,52 +2,98 @@ import gradio as gr
 from PIL import Image, ImageDraw, ImageFont, ImageSequence
 import numpy as np
 
-def create_grid(image, grid_size=3, frame_count=9):
-    img = Image.open(image.name)
+def create_grid(image_file, grid_x, grid_y, font_size, font_color, position, border_size, border_color):
+    image_file.file.seek(0)  # Seek to the beginning of the file
 
-    # Get the total number of frames in the gif
-    total_frames = img.n_frames
+    # Open the image from bytes
+    img = Image.open(image_file.name)
 
-    # Calculate the frames to use for the grid
-    selected_frames_indices = np.linspace(0, total_frames - 1, frame_count, dtype=int)
+    total_frames = img.n_frames
+    selected_frames_count = grid_x * grid_y
 
-    # Create a blank image to hold the grid
-    grid_dim = (img.width * grid_size, img.height * grid_size)
-    grid_img = Image.new("RGBA", grid_dim, "white")
+    # Select evenly spaced frames
+    selected_frames_indices = np.linspace(0, total_frames - 1, selected_frames_count).astype(int)
+    selected_frames = [img.seek(i) or img.copy() for i in selected_frames_indices]
 
-    # Font setup for numbering frames
+    # Modify frames by adding border and number
+    modified_frames = []
     try:
-        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 40)
+        font = ImageFont.truetype("Lato-Regular.ttf", font_size)
     except IOError:
+        print("Font not found, using default font.")
         font = ImageFont.load_default()
 
-    draw = ImageDraw.Draw(grid_img)
+    positions = {
+        "Top Left": (20, 20),
+        "Top Right": (img.width - 20 - font_size, 20),
+        "Bottom Left": (20, img.height - 20 - font_size),
+        "Bottom Right": (img.width - 20 - font_size, img.height - 20 - font_size)
+    }
+
+    for i, frame in enumerate(selected_frames):
+        # Add border
+        border_width = border_size
+        frame_with_border = Image.new('RGB', (frame.width + 2*border_width, frame.height + 2*border_width), border_color.lower())
+        frame_with_border.paste(frame, (border_width, border_width))
+        
+        # Add number
+        draw = ImageDraw.Draw(frame_with_border)
+        text = str(i + 1)
+        text_position = (border_width + positions[position][0], border_width + positions[position][1])
+        draw.text(text_position, text, font=font, fill=font_color)
+        
+        modified_frames.append(frame_with_border)
 
-    # Extract frames and place them in the grid
-    for i, frame_index in enumerate(selected_frames_indices):
-        img.seek(frame_index)
-        frame = img.copy()
-        x_offset = (i % grid_size) * img.width
-        y_offset = (i // grid_size) * img.height
+    # Combine modified frames into a grid
+    grid_width = modified_frames[0].width * grid_x
+    grid_height = modified_frames[0].height * grid_y
+    grid_img = Image.new('RGB', (grid_width, grid_height), border_color.lower())
+    for i, frame in enumerate(modified_frames):
+        x_offset = (i % grid_x) * frame.width
+        y_offset = (i // grid_x) * frame.height
         grid_img.paste(frame, (x_offset, y_offset))
 
-        # Draw frame number
-        text = str(i + 1)
-        text_position = (x_offset + 20, y_offset + 20)
-        text_color = "black" if np.mean(np.array(frame)[:,:3]) > 128 else "white"
-        draw.text(text_position, text, fill=text_color, font=font)
-
-    return grid_img
-
-iface = gr.Interface(
-    fn=create_grid, 
-    inputs=[
-        gr.inputs.File(label="Upload a GIF"), 
-        gr.inputs.Number(label="Grid Size", default=3, min_value=1, max_value=10),
-        gr.inputs.Number(label="Frame Count", default=9, min_value=1, max_value=50)
-    ], 
-    outputs=gr.outputs.Image(label="Generated Grid"),
-    live=False
-)
-
-iface.launch()
+    output_info = f"Grid size: {grid_x} x {grid_y}\n\nSelected Frames: {selected_frames_count} / {total_frames} ({selected_frames_count / total_frames * 100:.2f}%)"
+    return grid_img, output_info
+def gif_info(image_file, grid_x, grid_y, font_size, font_color, position, border_size, border_color):
+    image_file.file.seek(0)
+    img = Image.open(image_file.name)
+    total_frames = img.n_frames
+    frame_rate = img.info.get('duration', 100) / 1000.0  # Convert to seconds
+
+    # Generate grid using create_grid function
+    grid_img, output_info = create_grid(image_file, grid_x, grid_y, font_size, font_color, position, border_size, border_color)
+    
+    gif_details = f"![image](/file={image_file.name})\n\n**Total Frames:** {total_frames}\n\n**Frame Rate:** {frame_rate} sec/frame\n\n{output_info}"
+
+    return grid_img, gif_details
+
+with gr.Blocks() as app:
+    gr.Markdown('## GIF Grid Generator')
+    gr.Markdown('Upload a GIF to generate a grid from its frames. Use the sliders to adjust the grid size and text settings.')
+    with gr.Row():
+        with gr.Column():
+            control_image = gr.File(label="Upload a GIF", type="file", elem_id="file_upload", file_types=[".gif"])
+            gif_details = gr.Markdown("Upload a gif")
+            grid_x_slider = gr.Slider(minimum=1, maximum=10, step=1, value=3, label="Grid X Size")
+            grid_y_slider = gr.Slider(minimum=1, maximum=10, step=1, value=3, label="Grid Y Size")
+            font_color_dropdown = gr.Dropdown(choices=["Black", "White", "Red", "Green", "Blue"], value="White", label="Numbering Color")
+            position_radio = gr.Radio(choices=["Top Left", "Top Right", "Bottom Left", "Bottom Right"], value="Top Left", label="Numbering Position")
+            font_size_slider = gr.Slider(minimum=10, maximum=100, step=5, value=40, label="Font Size")
+            border_color_dropdown = gr.Dropdown(choices=["Black", "White", "Red", "Green", "Blue"], value="White", label="Border Color")
+            border_size_slider = gr.Slider(minimum=0, maximum=100, step=5, value=10, label="Border Size")
+        with gr.Column():
+            result_image = gr.Image(label="Generated Grid")
+
+    # Use .change() method to listen for changes in any of the controls
+    control_image.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    grid_x_slider.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    grid_y_slider.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    font_size_slider.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    font_color_dropdown.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    position_radio.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    border_size_slider.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+    border_color_dropdown.change(gif_info, inputs=[control_image, grid_x_slider, grid_y_slider, font_size_slider, font_color_dropdown, position_radio, border_size_slider, border_color_dropdown], outputs=[result_image, gif_details])
+
+if __name__ == "__main__":
+    app.launch()