app.py

import numpy as np
import gradio as gr
import time


def get_random_color(rng):
    for i in range(1):
        # Only want one solid color
        color1 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color2 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color3 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color4 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color5 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color6 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color7 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color8 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color9 = rng.integers(low=0, high=255, size=(1, 1, 3))
        # Make the image resolution higher
        color1 = np.resize(color1, new_shape=(256, 256, 3))
        color2 = np.resize(color2, new_shape=(256, 256, 3))
        color3 = np.resize(color3, new_shape=(256, 256, 3))
        color4 = np.resize(color4, new_shape=(256, 256, 3))
        color5 = np.resize(color5, new_shape=(256, 256, 3))
        color6 = np.resize(color6, new_shape=(256, 256, 3))
        color7 = np.resize(color7, new_shape=(256, 256, 3))
        color8 = np.resize(color8, new_shape=(256, 256, 3))
        color9 = np.resize(color9, new_shape=(256, 256, 3))
        # Mix the color into blocks
        block1 = np.concatenate((color1, color2, color3), axis=0)
        # print(f"Shape of block: {block1.shape}")
        block2 = np.concatenate((color4, color5, color6), axis=0)
        block3 = np.concatenate((color7, color8, color9), axis=0)
        # print(f"Shape of block: {block2.shape}")
        block4 = np.concatenate((block1, block2, block3), axis=1)
        # print(f"Shape of block: {block3.shape}")
    return color1, color2, color3, \
           color4, color5, color6, \
           color7, color8, color9, \
           block4


def color_me(num1):
    # Make some random color
    rng1 = np.random.default_rng(seed=num1)
    return get_random_color(rng1)


def auto_color_me():
    # Make some random color
    # Get time to be the seed
    seed = int(time.time())
    rng1 = np.random.default_rng(seed=seed)
    return get_random_color(rng1)


# Title of the blocks
with gr.Blocks() as demo1:
    image_width = 64
    image_height = 64

    with gr.Row():
        gr.Markdown(
            """
            # Random color mix and match
            
            The program displays four random colors and combined them together.
            
            The color can be changed from the slider or text box. The same number \
            will always give the same color.
            
            The color can also be set to change automatically by the \
            auto button. To stop the program, please close the browser tab.
            
            The color can be downloaded from the download button at the top right \
            corner to the image.
            """
        )

    with gr.Row():
        num1 = gr.Slider(value=10, minimum=0, maximum=1000, step=1,
                         label="Value", info="Slide the bar or enter a value to change the color.")

    with gr.Row():
        #btn_auto = gr.Button(value="Auto change color")
        #btn_stop = gr.Button(value="Stop")
        examples = gr.Examples(examples=[[82], [333], [590]], inputs=[num1])

    with gr.Row():
        with gr.Column():
            image1 = gr.Image(height=image_height*4,
                              width=image_width*4, show_label=False)
            # image2 = gr.Image(height=image_height, width=image_width, show_label=False)
            # image3 = gr.Image(height=image_height, width=image_width, show_label=False)
    
        with gr.Row():
            color1 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color2 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color3 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
        with gr.Row():
            color4 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color5 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color6 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
        with gr.Row():    
            color7 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color8 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)
            color9 = gr.Image(height=image_height,
                                  width=image_width, 
                                  show_label=False,
                                  interactive=False)

    # Events
    # Release of slider
    num1.change(
        fn=color_me,
        inputs=[num1],
        outputs=[color1, color2, color3, 
                 color4, color5, color6, 
                 color7, color8, color9,
                 image1]
    )
    # Clicking on auto change color
    # Input = -1 indicate autochanging of color
    # Need to figure out how to stop the event.
    # Will disable the auto change of color for now.
    """
    btn_auto.click(
        fn=auto_color_me,
        inputs=[],
        outputs=[color1, color2, color3, 
                 color4, color5, color6,
                 color7, color8, color9,
                 image1],
        every=1)
    """
    
# Main
if __name__ == "__main__":
    demo1.launch()