HURA 0.2.0

README.md

@@ -48,6 +48,7 @@ Welcome to HexaGrid Creator, the ultimate tool for transforming your images into
 - **Pre-rendered Maps:** Access a library of ready-to-use hexagon maps for quick customization.
 - **Add Margins:** Add customizable margins around your images for a polished print-ready look.
 - **Sketch Pad Integration:** Directly sketch on images to modify or replace them before further processing.
+- **HURA:** Generate HURA (Hexagonal Uniformly Redundant Arrays) patterns for sketches and masks
 
 
 ### Why You'll Love It
@@ -68,6 +69,7 @@ Welcome to HexaGrid Creator, the ultimate tool for transforming your images into
 - **TRELLIS Depth & 3D Model Generation:** Create detailed depth maps and 3D models, complete with GLB and Gaussian file extraction.
 - **Add Margins:** Fine-tune image margins for a professional finish.
 - **Sketch Pad Integration:** Use the built-in sketch pad to edit images on the fly before processing.
+- **HURA:** Generate HURA (Hexagonal Uniformly Redundant Arrays) patterns for sketches and masks
 
 Join the hive and start creating with HexaGrid Creator today!
 

app.py

@@ -1,4 +1,4 @@
-from ast import Str
+#from ast import Constant
 from tokenize import String
 import gradio as gr
 from numba.core.types import string
@@ -25,6 +25,7 @@ from trellis.pipelines import TrellisImageTo3DPipeline
 from trellis.representations import Gaussian, MeshExtractResult
 from trellis.utils import render_utils, postprocessing_utils
 from pathlib import Path
+import utils.hex_hura as hex_hura
 
 import logging
 #logging.getLogger("transformers.modeling_utils").setLevel(logging.ERROR)
@@ -746,6 +747,7 @@ def on_input_image_change(image_path):
         return None, gr.update()
     img, img_path = convert_to_rgba_png(image_path)
     width, height = img.size
+    hex_components["set_height_width_hura_image"](width, height)
     return [img_path, gr.update(width=width, height=height)]
 
 def update_sketch_dimensions(input_image, sketch_image):
@@ -761,18 +763,21 @@ def update_sketch_dimensions(input_image, sketch_image):
         return [sk_img, gr.update()]
     
 
-def composite_with_control_sync(input_image, sketch_image, slider_value):
+def composite_with_control_sync(input_image, new_image, slider_value):
+    
     # Load the images using open_image() if they are provided as file paths.
-    in_img = open_image(input_image) if isinstance(input_image, str) else input_image
-    sk_img_path, _ = get_image_from_dict(sketch_image)
-    sk_img = open_image(sk_img_path)
+    new_img_path, _ = get_image_from_dict(new_image)
+    if input_image is None:
+        return new_img_path
+    in_img = open_image(input_image) if isinstance(input_image, (dict,str)) else input_image
+    new_img = open_image(new_img_path)
 
-    # Resize sketch image if dimensions don't match input image.
-    if in_img.size != sk_img.size:
-        sk_img = sk_img.resize(in_img.size, Image.LANCZOS)
+    # Resize new image if dimensions don't match input image.
+    if in_img.size != new_img.size:
+        new_img = new_img.resize(in_img.size, Image.LANCZOS)
 
     # Now composite using the original alpha_composite_with_control function.
-    result_img = alpha_composite_with_control(in_img, sk_img, slider_value)
+    result_img = alpha_composite_with_control(in_img, new_img, slider_value)
     return result_img
 
 def replace_with_sketch_image(sketch_image, replace_current_lut_example_img: bool = False):
@@ -1168,14 +1173,16 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
             HexaGrid Creator is a web-based application that allows you to apply a hexagon grid overlay to any image. You can customize the size, color, and opacity of the hexagons, as well as the background and border colors. The result is a visually striking image that looks like it was made from hexagonal tiles!
 
             ### What Can You Do?
-            - **Generate Hexagon Grids:** Create beautiful hexagon grid overlays on any image with fully customizable parameters. (also square and triangles)
-            - **AI-Powered Image Generation:** Use advanced AI models to generate images based on your prompts and apply hexagon grids to them.
-            - **Color Exclusion:** Select and exclude specific colors from your hexagon grid for a cleaner and more refined look.
-            - **Interactive Customization:** Adjust hexagon size, border size, rotation, background color, and more in real-time.
-            - **Depth and 3D Model Generation:** Generate depth maps and 3D models from your images for enhanced visualization.
-            - **Image Filter [Look-Up Table (LUT)] Application:** Apply filters (LUTs) to your images for color grading and enhancement.
-            - **Pre-rendered Maps:** Access a library of pre-rendered hexagon maps for quick and easy customization.
-            - **Add Margins:** Add customizable margins around your images for a polished finish.
+            - **Generate Hexagon Grids:** Create stunning hexagon, square, or triangle grid overlays with fully customizable parameters.
+            - **AI-Powered Image Generation:** Use advanced AI models and LoRA weights to generate images from your prompts and apply unique grid overlays.
+            - **Color Exclusion:** Pick and exclude specific colors from your hexagon grid for improved clarity.
+            - **Interactive Customization:** Adjust grid size, border size, rotation, background color, and more—all in real-time.
+            - **Depth & 3D Model Generation:** Generate depth maps and interactive 3D models (with GLB and Gaussian extraction) for enhanced visualization.
+            - **Image Filter [LUT] Application:** Apply advanced color grading filters with live previews using LUT files.
+            - **Pre-rendered Maps:** Access a library of ready-to-use hexagon maps for quick customization.
+            - **Add Margins:** Add customizable margins around your images for a polished print-ready look.
+            - **Sketch Pad Integration:** Directly sketch on images to modify or replace them before further processing.
+            - **HURA:** Generate HURA (Hexagonal Uniformly Redundant Arrays) patterns for sketches and masks
 
             ### Why You'll Love It
             - **Fun and Easy to Use:** With an intuitive interface and real-time previews, creating hexagon grids has never been this fun!
@@ -1194,6 +1201,8 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
             - **Image Filter [Look-Up Table (LUT)] Application:** Apply filters (LUTs) to your images for color grading and enhancement.
             - **Depth and 3D Model Generation:** Create depth maps and 3D models from your images for enhanced visualization.
             - **Add Margins:** Customize margins around your images for a polished finish.
+            - **Sketch Pad Integration:** Use the built-in sketch pad to edit images on the fly before processing.
+            - **HURA:** Generate HURA (Hexagonal Uniformly Redundant Arrays) patterns for sketches and masks
 
             Join the hive and start creating with HexaGrid Creator today!
         
@@ -1300,11 +1309,32 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                     composite_button = gr.Button("Composite to Input Image", elem_classes="solid")
                     composite_sketch_button = gr.Button("Composite to Sketh", elem_classes="solid")
             with gr.Accordion("Blur", open = False):
-                with gr.Row():                    
+                with gr.Row():
                     blur_amount = gr.Slider(label="Blur Amount", minimum=0, maximum=100, value=5, interactive=True)
                 with gr.Row():
                     blur_button = gr.Button("Blur Input Image", elem_classes="solid")
                     blur_sketch_button = gr.Button("Blur Sketch", elem_classes="solid")
+            with gr.Accordion("Generate Hex Hura Background", open = False):
+                hex_components = hex_hura.render()
+                with gr.Row():
+                    hura_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="HURA Transparancy", elem_id="hura_alpha_composite_slider", interactive=True)
+                with gr.Row():
+                    hura_button = gr.Button("Composite Input Image", elem_classes="solid")
+                    hura_sketch_button = gr.Button("Composite Sketh Image", elem_classes="solid")
+
+                hura_sketch_button.click(
+                    fn=composite_with_control_sync,
+                    inputs=[sketch_image, hex_components["target_image"], hura_alpha_composite_slider],
+                    outputs=[sketch_image],
+                    scroll_to_output=True
+                )
+                hura_button.click(
+                    fn=composite_with_control_sync,
+                    inputs=[input_image, hex_components["target_image"], hura_alpha_composite_slider],
+                    outputs=[input_image],
+                    scroll_to_output=True
+                )
+
     with gr.Tabs(selected="hex_gen") as input_tabs:
         with gr.Tab("HexaGrid Generation", id="hex_gen") as hexa_gen_tab:
             with gr.Column(elem_classes="outline-important"):

utils/hex_hura.py

@@ -1,12 +1,109 @@
+# HURA (Hexagonal Uniformly Redundant Arrays) are used for aperture masks and imaging, and encoding.
+# check it out https://ntrs.nasa.gov/citations/19850026627
+# by Surn (Charles Fettinger) 4/5/2025
 from PIL import Image
 import math
+import gradio as gr
+from tempfile import NamedTemporaryFile
 
-v = 139
-r = 5
+from transformers.models.deprecated.vit_hybrid import image_processing_vit_hybrid
+import utils.constants as constants
+import utils.color_utils as color_utils
+
+
+class HuraConfig:
+    """Configuration for Hexagonal Uniformly Redundant Array pattern generation."""
+    
+    def __init__(self):
+        # Core parameters
+        self.v = 139  # Prime number parameter (affects pattern complexity)
+        self.r = 42   # Pattern frequency parameter
+        self.version = "0.2.0"
+        
+        # Pattern generation constants
+        self.hex_ratio = 0.5773503  # sqrt(3)/3
+        self.pattern_scale = 21.0   # Controls pattern frequency
+        self.vignette_inner = 0.97
+        self.vignette_outer = 1.01
+        
+        # Colors
+        self.default_colors = [
+            (255, 0, 0),   # Red
+            (0, 255, 0),   # Green
+            (0, 0, 255)    # Blue
+        ]
+        
+        # Prime number calculation
+        self.prime_range_start = 1
+        self.prime_range_end = 5001
+        self._primes_cache = None  # Will be lazily loaded
+    
+    def get_v(self):
+        """Get the current V parameter value."""
+        return self.v
+        
+    def set_v(self, value):
+        """Set the V parameter value."""
+        if not isinstance(value, (int, float)) or value < 1:
+            raise ValueError(f"V value must be a positive float, got {value}")
+        self.v = value
+        
+    def get_r(self):
+        """Get the current R parameter value."""
+        return self.r
+        
+    def set_r(self, value):
+        """Set the R parameter value."""
+        if not isinstance(value, (int, float)) or value < 1:
+            raise ValueError(f"R value must be a positive float, got {value}")
+        self.r = value
+    
+    def get_primes(self):
+        """Get or calculate the list of primes in the configured range."""
+        if self._primes_cache is None:
+            self._primes_cache = get_primes_in_range(self.prime_range_start, self.prime_range_end)
+        return self._primes_cache
+    
+    def find_nearest_prime(self, value):
+        """Find the nearest prime number to the given value."""
+        return min(self.get_primes(), key=lambda x: abs(x - value))
+    
+    def reset_colors(self):
+        """Reset default colors to original values."""
+        self.default_colors = [
+            (255, 0, 0),   # Red
+            (0, 255, 0),   # Green
+            (0, 0, 255)    # Blue
+        ]
+        return self.default_colors
+
+# Initialize the HuraConfig instance
+config = HuraConfig()
+
+# For backwards compatibility - consider deprecating these
+__version__ = config.version
+_V = config.v
+_R = config.r
+
+def get_v():
+    return config.get_v()
+
+def set_v(val):
+    config.set_v(val)
+
+def get_r():
+    return config.get_r()
+
+def set_r(val):
+    config.set_r(val)
+
+state_colors = []
 
-# Define the smoothstep function for vignette effect
 def smoothstep(edge0, edge1, x):
-    """Smoothly interpolate between edge0 and edge1 based on x."""
+    """
+    Smoothstep function for vignette effect.
+    Smoothly interpolate between edge0 and edge1 based on x.
+    """
     if edge0 == edge1:
         return 0.0 if x < edge0 else 1.0
     t = min(max((x - edge0) / (edge1 - edge0), 0.0), 1.0)
@@ -15,16 +112,24 @@ def smoothstep(edge0, edge1, x):
 # Define the hexagon function to compute coordinates
 def hexagon(p):
     """
-    Compute hexagon coordinates and distances for a given point p.
-    Returns (h_x, h_y, e, f) where h_x and h_y are integer coordinates.
+    Compute hexagon coordinates and metrics for point p.
+    
+    Args:
+        p (tuple): Normalized point (x,y) in [-aspect,aspect] � [-1,1] range
+        
+    Returns:
+        tuple: (hex_x, hex_y, edge_distance, center_distance)
+            - hex_x, hex_y: Integer coordinates of the hexagon cell
+            - edge_distance: Distance to nearest edge (0-1)
+            - center_distance: Distance to cell center (0-1)
     """
     # Transform to hexagonal coordinate system
-    q = (p[0] * 2.0 * 0.5773503, p[1] + p[0] * 0.5773503)
+    q = (p[0] * 2.0 * config.hex_ratio, p[1] + p[0] * config.hex_ratio)
     pi = (math.floor(q[0]), math.floor(q[1]))
     pf = (q[0] - pi[0], q[1] - pi[1])
-    v = (pi[0] + pi[1]) % 3.0
-    ca = 1.0 if v >= 1.0 else 0.0
-    cb = 1.0 if v >= 2.0 else 0.0
+    mod_val = (pi[0] + pi[1]) % 3.0  # renamed from v
+    ca = 1.0 if mod_val >= 1.0 else 0.0
+    cb = 1.0 if mod_val >= 2.0 else 0.0
     ma = (1.0 if pf[1] >= pf[0] else 0.0, 1.0 if pf[0] >= pf[1] else 0.0)
     temp = (
         1.0 - pf[1] + ca * (pf[0] + pf[1] - 1.0) + cb * (pf[1] - 2.0 * pf[0]),
@@ -38,38 +143,41 @@ def hexagon(p):
     h_xy = (pi[0] + ca - cb * ma[0], pi[1] + ca - cb * ma[1])
     return (h_xy[0], h_xy[1], e, f)
 
-def ura(p, r=1.0, v=10.0):
+# important note: this is not a true hexagonal pattern, but a hexagonal grid
+def ura(p):
     """
-    Generate a grayscale value based on hexagonal coordinates, emulating the HLSL URA function.
-    
-    Parameters:
-        p (tuple): A 2-tuple (x, y) of coordinates.
-        r (float): Multiplier for p[0]. Default is 1.0.
-        v (float): Modulus value controlling the pattern frequency. Default is 10.0.
+    Generate binary pattern value based on Uniformly Redundant Array algorithm.
     
+    Args:
+        p (tuple): Hexagon coordinates (x,y)
+        
     Returns:
-        float: 1.0 if no pattern match is found, otherwise 0.0.
-    """
-    import math
-    l = math.fmod(p[1] + r * p[0], v)
+        float: 1.0 for pattern, 0.0 for background
+
+    future consideration.. add animation
+    #ifdef INCREMENT_R
+        float l = mod(p.y + floor(time*1.5)*p.x, v);
+    #else
+        float l = mod(p.y + r*p.x, v);
+    """    
+    r = get_r()
+    v = get_v()
+    l = math.fmod(abs(p[1]) + r * abs(p[0]), v)
     rz = 1.0
-    for i in range(1, int(v/2)):
+    for i in range(1, int(v/2) + 1):
         if math.isclose(math.fmod(i * i, v), l, abs_tol=1e-6):
             rz = 0.0
             break
     return rz
 
-# Define the color palette
-default_colors = [
-    (255, 0, 0),   # Red
-    (0, 255, 0),   # Green
-    (0, 0, 255)    # Blue
-]
-
 # Generate the image with colorful_hexagonal pattern
-def generate_image_color(width, height, colors=default_colors):
+def generate_image_color(width, height, colors=None):
     """Generate an RGB image with a colorful hexagonal pattern."""
     img = Image.new('RGB', (width, height))
+    if colors is None or colors == []:
+        colors = config.default_colors
+    r = config.get_r()
+    v = config.get_v()
     aspect = width / height
     for j in range(height):
         for i in range(width):
@@ -81,14 +189,15 @@ def generate_image_color(width, height, colors=default_colors):
             p_y = q_y * 2.0 - 1.0
             p = (p_x, p_y)
             # Scale coordinates for pattern frequency
-            h = hexagon((p[0] * 21.0, p[1] * 21.0))
+            h = hexagon((p[0] * config.pattern_scale, p[1] * config.pattern_scale))
             h_xy = (int(h[0]), int(h[1]))
             # Assign color based on hexagon coordinates
-            color_index = (h_xy[0] + h_xy[1]) % len(colors)
+            rz = math.fmod(abs(h_xy[0]) + r * abs(h_xy[1]),v) 
+            color_index = int(rz % len(colors))
             col = colors[color_index]
             # Apply vignette effect
             q = (q_x * 2.0 - 1.0, q_y * 2.0 - 1.0)
-            vignette = smoothstep(1.01, 0.97, max(abs(q[0]), abs(q[1])))
+            vignette = smoothstep(config.vignette_outer, config.vignette_inner, max(abs(q[0]), abs(q[1])))
             col = tuple(int(c * vignette) for c in col)
             # Set the pixel color
             img.putpixel((i, j), col)
@@ -104,7 +213,7 @@ def generate_image_grayscale(width, height):
             p_x = (q_x * 2.0 - 1.0) * aspect
             p_y = q_y * 2.0 - 1.0
             p = (p_x, p_y)
-            h = hexagon((p[0] * 21.0, p[1] * 21.0))
+            h = hexagon((p[0] * config.pattern_scale, p[1] * config.pattern_scale))
             rz = ura(h[:2])
             smooth = smoothstep(-0.2, 0.13, h[2])
             if rz > 0.5:
@@ -112,16 +221,223 @@ def generate_image_grayscale(width, height):
             else:
                 col = 1.0 - smooth
             q = (q_x * 2.0 - 1.0, q_y * 2.0 - 1.0)
-            vignette = smoothstep(1.01, 0.97, max(abs(q[0]), abs(q[1])))
+            vignette = smoothstep(config.vignette_outer, config.vignette_inner, max(abs(q[0]), abs(q[1])))
             col *= vignette
-            color = int(col * 255)
+            color = int(abs(col) * 255)
             img.putpixel((i, j), (color, color, color))
     return img
 
-# Example usage
-#if __name__ == "__main__":
-#    # Set image dimensions
-#    width, height = 800, 600
-#    img = generate_image(width, height)
-#    img.save('colorful_hexagon_pattern.png')
-#    print("Image saved as 'colorful_hexagon_pattern.png'")
+def get_primes_in_range(start: int, end: int) -> list:
+    """
+    Return a list of prime numbers between start and end (inclusive).
+
+    Uses the Sieve of Eratosthenes for efficiency.
+
+    Parameters:
+        start (int): The starting number of the range.
+        end (int): The ending number of the range.
+
+    Returns:
+        list: A list of prime numbers between start and end.
+    """
+    if end < 2:
+        return []    
+    sieve = [True] * (end + 1)
+    sieve[0] = sieve[1] = False
+    for i in range(2, int(end ** 0.5) + 1):
+        if sieve[i]:
+            for j in range(i * i, end + 1, i):
+                sieve[j] = False
+    return [i for i in range(start, end + 1) if sieve[i]]
+
+def find_nearest_prime(value):
+    """Find the closest prime number to the given value."""
+    return config.find_nearest_prime(value)
+
+def generate_pattern_background(pattern_type="color", width=1024, height=768, v_value=_V, r_value=_R, colors=None):
+    # Generate a hexagonal pattern image with the given parameters.
+    # Do not pass gr.State values here
+    # Set the parameters
+    set_v(v_value)
+    set_r(r_value)
+    print(f"Generating pattern with V: {v_value}, R: {r_value}, Colors: {colors}")
+    color_count = 3
+    
+    if pattern_type == "color":
+        if colors is None:
+            img = generate_image_color(width, height)
+        else:
+            img = generate_image_color(width, height, colors)
+            color_count = len(colors)
+    else:  # grayscale
+        img = generate_image_grayscale(width, height)
+        color_count = 1
+    
+    # Save to temporary file and return path
+    with NamedTemporaryFile(delete=False,prefix=f"hura_{str(color_count)}_v{str(v_value)}_r{str(r_value)}_", suffix=".png") as tmp:
+        img.save(tmp.name, format="PNG")
+        constants.temp_files.append(tmp.name)
+        return tmp.name
+
+
+def create_color_swatch_html(colors):
+    """Create HTML for displaying color swatches"""
+    swatches = ''.join(
+        f'<div style="width: 50px; height: 50px; background-color: rgb{c}; '
+        f'border: 1px solid #ccc;"></div>' 
+        for c in colors
+    )
+    return f'<div style="display: flex; gap: 10px;">{swatches}</div>'
+
+def _add_color(color, color_list):
+    if color is None:
+        return color_list, color_list, ""
+    
+    # Convert hex color to RGB
+    rgb_color = color_utils.hex_to_rgb(color)
+    color_list = color_list + [rgb_color]
+    
+    # Create HTML to display color swatches
+    html = create_color_swatch_html(color_list)
+    return color_list, html
+
+def _init_colors():
+    """Initialize the color swatches HTML display based on config colors"""
+    updated_list = list(config.default_colors)
+    # Rebuild the HTML swatches from the updated list
+    html = create_color_swatch_html(updated_list)
+    return html
+
+def reset_colors():
+    """Reset the color list to the default colors."""
+    colors = config.reset_colors()
+    html = create_color_swatch_html(colors)
+    return colors, html
+
+def _generate_pattern_from_state(pt, width, height, v_val, r_val, colors_list):
+    # colors_list is automatically the raw value from the gr.State input
+    return generate_pattern_background(pt, width, height, v_val, r_val, colors_list)
+
+def render() -> dict:
+    """
+    Renders a colorful or grayscale hexagonal pattern creation interface
+    
+    Returns:
+        dict: A dictionary containing:
+            - target_image (gr.Image): The generated pattern image component
+            - run_generate_hex_pattern (function): Function to generate a pattern with given dimensions
+            - set_height_width_hura_image (function): Function to update the slider values
+            - width_slider (gr.Slider): The width slider component
+            - height_slider (gr.Slider): The height slider component
+    """
+    
+    # Initialize state
+    global state_colors
+    state_colors = gr.State(config.default_colors)
+    init_colors_html = _init_colors()
+    
+
+    target_image = gr.Image(label="Generated Pattern", type="filepath")
+    with gr.Row():
+        pattern_type = gr.Radio(
+            label="Pattern Type",
+            choices=["color", "grayscale"],
+            value="grayscale",
+            type="value"
+        )        
+        with gr.Column():
+            with gr.Row():
+                width_slider = gr.Slider(minimum=256, maximum=2560, value=1024, label="Width", step=8)
+                height_slider = gr.Slider(minimum=256, maximum=2560, value=768, label="Height", step=8)
+            v_value_slider = gr.Slider(minimum=config.prime_range_start, maximum=config.prime_range_end, value=config.v, label="V Value (Prime Number)", step=1)
+            r_value_slider = gr.Slider(minimum=1, maximum=100, value=config.r, label="R Value")
+        show_borders_chbox = gr.Checkbox(label="Show Borders", value=True)
+    
+    with gr.Row(visible=False) as color_row:
+        color_picker = gr.ColorPicker(label="Pick a Color")
+        add_button = gr.Button("Add Color")
+        with gr.Column():
+            color_display = gr.HTML(label="Color Swatches", value=init_colors_html)
+        with gr.Row():
+            delete_colors_button = gr.Button("Delete Colors")
+            reset_colors_button = gr.Button("Reset Colors")
+    with gr.Row():
+        generate_button = gr.Button("Generate Pattern")
+
+
+    def run_generate_hex_pattern(width: int, height: int) -> str:
+        """
+        Generate a colored hexagonal pattern image with the given width and height.
+        Uses default V and R values and the default color palette.
+    
+        Returns:
+            str: The filepath of the generated image.
+        """
+        global state_colors
+        width_slider.value=width
+        height_slider.value=height
+        gr.update()
+        # Use the current _V, _R, and default_colors
+        filepath = generate_pattern_background(
+            pattern_type="color",
+            width=width,
+            height=height,
+            v_value=get_v(),
+            r_value=get_r(),
+            colors=state_colors.value
+        )
+        return filepath
+
+    def set_height_width_hura_image(width, height) -> None:
+        """
+        Set the height and width of the image.
+        """
+        width_slider.value=width
+        height_slider.value=height
+        gr.update()
+
+
+    pattern_type.change(
+        fn=lambda x: gr.update(visible=(x == "color")),
+        inputs=pattern_type,
+        outputs=color_row
+    )    
+    add_button.click(
+        fn=_add_color,
+        inputs=[color_picker, state_colors],
+        outputs=[state_colors, color_display]
+    )
+    delete_colors_button.click(
+        fn=lambda x: ([], "<div>Add Colors</div>"),
+        inputs=[],
+        outputs=[state_colors, color_display]
+    )
+    reset_colors_button.click(
+        fn=reset_colors,
+        inputs=[],
+        outputs=[state_colors,color_display]
+    )
+    generate_button.click(
+        fn=_generate_pattern_from_state,
+        inputs=[pattern_type, width_slider, height_slider, v_value_slider, r_value_slider, state_colors],
+        outputs=target_image
+    )
+
+    v_value_slider.input(
+        lambda x: config.find_nearest_prime(x),
+        inputs=v_value_slider,
+        outputs=v_value_slider
+    )
+    v_value_slider.change(
+        lambda x: config.find_nearest_prime(x),
+        inputs=v_value_slider,
+        outputs=v_value_slider
+    )
+
+    return {
+        "target_image": target_image,
+        "run_generate_hex_pattern": run_generate_hex_pattern,
+        "set_height_width_hura_image": set_height_width_hura_image,
+        "width_slider": width_slider,
+        "height_slider": height_slider
+    }