Set Image Controls interactive=True

app.py

@@ -1113,13 +1113,13 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
 
     with gr.Accordion("Advanced Hexagon Settings", open = False):
         with gr.Row():
-            start_x = gr.Number(label="Start X", value=0, minimum=-512, maximum= 512, precision=0)
-            start_y = gr.Number(label="Start Y", value=0, minimum=-512, maximum= 512, precision=0)
-            end_x = gr.Number(label="End X", value=0, minimum=-512, maximum= 512, precision=0)
-            end_y = gr.Number(label="End Y", value=0, minimum=-512, maximum= 512, precision=0)
+            start_x = gr.Number(label="Start X", value=20, minimum=-512, maximum= 512, precision=0)
+            start_y = gr.Number(label="Start Y", value=20, minimum=-512, maximum= 512, precision=0)
+            end_x = gr.Number(label="End X", value=-20, minimum=-512, maximum= 512, precision=0)
+            end_y = gr.Number(label="End Y", value=-20, minimum=-512, maximum= 512, precision=0)
         with gr.Row():
-            x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-1, minimum=-200, maximum=200, precision=1)
-            y_spacing = gr.Number(label="Adjust Vertical spacing", value=1, minimum=-200, maximum=200, precision=1)
+            x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-8, minimum=-200, maximum=200, precision=1)
+            y_spacing = gr.Number(label="Adjust Vertical spacing", value=3, minimum=-200, maximum=200, precision=1)
         with gr.Row():
             rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
             add_hex_text = gr.Dropdown(label="Add Text to Hexagons", choices=[None, "Row-Column Coordinates", "Sequential Numbers", "Playing Cards Sequential", "Playing Cards Alternate Red and Black", "Custom List"], value=None)
@@ -1143,18 +1143,18 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
             outputs=[custom_text_list, custom_text_color_list, hex_text_info]
         )
     with gr.Row():
-        hex_size = gr.Number(label="Hexagon Size", value=32, minimum=1, maximum=768)
-        border_size = gr.Slider(-5,25,value=0,step=1,label="Border Size")
+        hex_size = gr.Number(label="Hexagon Size", value=90, minimum=1, maximum=768)
+        border_size = gr.Slider(-5,25,value=2,step=1,label="Border Size")
     with gr.Row():        
         background_color = gr.ColorPicker(label="Background Color", value="#000000", interactive=True)
         background_opacity = gr.Slider(0,100,0,1,label="Background Opacity %")
         border_color = gr.ColorPicker(label="Border Color", value="#7b7b7b", interactive=True)
-        border_opacity = gr.Slider(0,100,0,1,label="Border Opacity %")
+        border_opacity = gr.Slider(0,100,50,1,label="Border Opacity %")
     with gr.Row():
         hex_button = gr.Button("Generate Hex Grid!", elem_classes="solid", elem_id="btn-generate")
     with gr.Row():
-        output_image = gr.Image(label="Hexagon Grid Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOutput")
-        overlay_image = gr.Image(label="Hexagon Overlay Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOverlay")
+        output_image = gr.Image(label="Hexagon Grid Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOutput",interactive=True)
+        overlay_image = gr.Image(label="Hexagon Overlay Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOverlay",interactive=True)
     with gr.Row():
         output_overlay_composite = gr.Slider(0,100,50,0.5, label="Interpolate Intensity")
         output_blend_multiply_composite = gr.Slider(0,100,50,0.5, label="Overlay Intensity")
@@ -1171,7 +1171,7 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
         with gr.Row():
             add_border_button = gr.Button("Add Margins", elem_classes="solid", variant="secondary")
         with gr.Row():
-            bordered_image_output = gr.Image(label="Image with Margins", image_mode="RGBA",  elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgBordered")
+            bordered_image_output = gr.Image(label="Image with Margins", image_mode="RGBA",  elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgBordered",interactive=True)
 
     with gr.Accordion("Height Maps and 3D", open = False):
         with gr.Row():
@@ -1198,9 +1198,9 @@ with gr.Blocks(css_paths="style_20250128.css", title=title, theme='Surn/beeuty',
             generate_depth_button = gr.Button("Generate Depth Map and 3D Model From Selected Image", elem_classes="solid", variant="secondary")
         with gr.Row():
             with gr.Column(scale=1):
-                depth_map_output = gr.Image(label="Depth Map", image_mode="L", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgDepth")
+                depth_map_output = gr.Image(label="Depth Map", image_mode="L", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgDepth",interactive=True)
             with gr.Column(scale=2):
-                model_output = gr.Model3D(label="3D Model", clear_color=[1.0, 1.0, 1.0, 1.0], key="Img3D", elem_classes="centered solid imgcontainer")
+                model_output = gr.Model3D(label="3D Model", clear_color=[1.0, 1.0, 1.0, 1.0], key="Img3D", elem_classes="centered solid imgcontainer",interactive=True)
                 model_file = gr.File(label="3D GLTF", elem_classes="solid small centered")
     with gr.Row():
         gr.Examples(examples=[