UI update

outline highlights and main items

app.py

@@ -1118,7 +1118,7 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
         # HexaGrid Creator
         ## Transform Your Images into Mesmerizing Hexagon Grid Masterpieces! ⬢""", elem_classes="intro")
     with gr.Row():
-        with gr.Accordion("Welcome to HexaGrid Creator, the ultimate tool for transforming your images into stunning hexagon grid artworks. Whether you're a tabletop game enthusiast, a digital artist, or someone who loves unique patterns, HexaGrid Creator has something for you.", open=False, elem_classes="intro"):
+        with gr.Accordion("BEST VIEWED ON DESKTOP<br/>Welcome to HexaGrid Creator, the ultimate tool for transforming your images into stunning hexagon grid artworks. Whether you're a tabletop game enthusiast, a digital artist, or someone who loves unique patterns, HexaGrid Creator has something for you.", open=False, elem_classes="intro"):
             gr.Markdown ("""
 
             ## Drop an image into the Input Image and get started!
@@ -1165,11 +1165,11 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                 label="Input Image",
                 type="filepath",
                 interactive=True,
-                elem_classes="centered solid imgcontainer",
+                elem_classes="centered solid imgcontainer outline-important",
                 key="imgInput",
                 image_mode=None,
                 format="PNG",
-                height=450,
+                height=512,
                 width=800
             )
             with gr.Accordion("Sketch Pad", open = False, elem_id="sketchpd"):
@@ -1191,13 +1191,16 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                     )
                 with gr.Row():
                     with gr.Column(scale=1):
-                        sketch_replace_input_image_button = gr.Button("Replace Input Image with sketch", elem_id="sketch_replace_input_image_button", elem_classes="solid")
-                        sketch_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="Sketch Transparancy", elem_id="alpha_composite_slider")
-                        btn_sketch_alpha_composite = gr.Button("Overlay Sketch on Input Image", elem_id="btn_sketchninput", elem_classes="solid")
-                        gr.Markdown("### Do Not add to image if using a fill model. Black is replaced by fill model. <span style='color: red; font-style: bolder;'>Click the pencil to start drawing.</span>")
-
-        with gr.Column(scale=1):
-            with gr.Accordion("Image Filters", open = False):
+                        with gr.Row():
+                            sketch_replace_input_image_button = gr.Button("Replace Input Image with sketch", elem_id="sketch_replace_input_image_button", elem_classes="solid")
+                            sketch_replace_lut_example_image_button = gr.Button("Replace Filter Example Image with sketch", elem_id="sketch_replace_lut_example_image_button", elem_classes="solid")
+                        with gr.Row():
+                            sketch_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="Sketch Transparancy", elem_id="alpha_composite_slider")
+                            btn_sketch_alpha_composite = gr.Button("Overlay Sketch on Input Image", elem_id="btn_sketchninput", elem_classes="solid")
+                        gr.Markdown("### <span style='color: red; font-style: bolder;'>Click the pencil to start drawing.</span><br/>Do Not add to image if using a fill model. Black is replaced by fill model.", elem_classes="centered")
+
+        with gr.Column(scale=1, elem_id="filters"):
+            with gr.Accordion("Image Filters (optional, fun)", open = False):
                 with gr.Row():
                     with gr.Column():
                         lut_filename = gr.Textbox(
@@ -1214,7 +1217,8 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                             height=120)
                 with gr.Row():
                     lut_intensity = gr.Slider(label="Filter Intensity", minimum=-200, maximum=200, value=100, info="0 none, negative inverts the filter", interactive=True)
-                    apply_lut_button = gr.Button("Apply Filter (LUT)", elem_classes="solid", elem_id="apply_lut_button")
+                    apply_lut_button = gr.Button("Apply Filter  to Input Image", elem_classes="solid", elem_id="apply_lut_button")
+                    apply_lut_to_sketch_button = gr.Button("Apply Filter to Sketch", elem_classes="solid", elem_id="apply_lut_to_sketch_button")
                 with gr.Row():
                     lut_example_image = gr.Image(type="pil", label="Filter (LUT) Example Image", value=constants.default_lut_example_img)
                 with gr.Row():
@@ -1248,8 +1252,8 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                     composite_opacity = gr.Slider(label="Opacity %", minimum=0, maximum=100, value=50, interactive=True)
                 with gr.Row():
                     composite_button = gr.Button("Composite", elem_classes="solid")
-    with gr.Row():
-        with gr.Accordion("Generate AI Image (click here for options)", open = False):
+    with gr.Row(elem_id="image_gen"):
+        with gr.Accordion("Generate AI Image (optional, fun)", open = False):
             with gr.Row():
                 with gr.Column(scale=1):
                     generate_input_image = gr.Button(
@@ -1354,68 +1358,69 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                                         elem_classes="solid", type="filepath", columns=[3], rows=[3], preview=False ,object_fit="contain", height="auto", format="png",allow_preview=False)
                     with gr.Row():    
                         image_guidance_stength = gr.Slider(label="Image Guidance Strength (prompt percentage)", info="applies to Input, Sketch and Template Image",minimum=0, maximum=1.0, value=0.85, step=0.01, interactive=True)
-    with gr.Accordion("Advanced Hexagon Settings", open = False):
-        with gr.Accordion("Hex Coloring and Exclusion", open = True):
+    with gr.Column(elem_classes="outline-important"):
+        with gr.Accordion("Advanced Hexagon Settings", open = False):
+            with gr.Accordion("Hex Coloring and Exclusion", open = True):
+                with gr.Row():
+                    with gr.Column():
+                        color_picker = gr.ColorPicker(label="Pick a color to exclude",value="#505050")
+                    with gr.Column():
+                        filter_color = gr.Checkbox(label="Filter Excluded Colors from Sampling", value=False,)
+                        fill_hex = gr.Checkbox(label="Fill Hex with color from Image", value=True)
+                exclude_color_button = gr.Button("Exclude Color", elem_id="exlude_color_button", elem_classes="solid")
+                color_display = gr.DataFrame(label="List of Excluded RGBA Colors", headers=["R", "G", "B", "A"], elem_id="excluded_colors", type="array", value=build_dataframe(excluded_color_list), interactive=True, elem_classes="solid centered")
+                selected_row = gr.Number(0, label="Selected Row", visible=False)
+                delete_button = gr.Button("Delete Row", elem_id="delete_exclusion_button", elem_classes="solid")
+            with gr.Accordion("Hex Grid Location on Image", open = False):
+                with gr.Row():
+                    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():
-                with gr.Column():
-                    color_picker = gr.ColorPicker(label="Pick a color to exclude",value="#505050")
-                with gr.Column():
-                    filter_color = gr.Checkbox(label="Filter Excluded Colors from Sampling", value=False,)
-                    fill_hex = gr.Checkbox(label="Fill Hex with color from Image", value=True)
-            exclude_color_button = gr.Button("Exclude Color", elem_id="exlude_color_button", elem_classes="solid")
-            color_display = gr.DataFrame(label="List of Excluded RGBA Colors", headers=["R", "G", "B", "A"], elem_id="excluded_colors", type="array", value=build_dataframe(excluded_color_list), interactive=True, elem_classes="solid centered")
-            selected_row = gr.Number(0, label="Selected Row", visible=False)
-            delete_button = gr.Button("Delete Row", elem_id="delete_exclusion_button", elem_classes="solid")
-        with gr.Accordion("Hex Grid Location on Image", open = False):
+                rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
+                sides = gr.Dropdown(label="Grid Shapes", info="The shapes that form grids",choices=["triangle", "square", "hexagon"], value="hexagon")            
             with gr.Row():
-                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)
+                add_hex_text = gr.Dropdown(label="Add Text to Hexagons", choices=[None, "Column-Row Coordinates", "Column(Letter)-Row Coordinates", "Column-Row(Letter) Coordinates", "Sequential Numbers", "Playing Cards Sequential", "Playing Cards Alternate Red and Black", "Custom List"], value=None)
+                x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-14, 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():            
+                custom_text_list = gr.TextArea(label="Custom Text List", value=constants.cards_alternating, visible=False,)
+                custom_text_color_list = gr.TextArea(label="Custom Text Color List", value=constants.card_colors_alternating, visible=False)
+            with gr.Row():
+                hex_text_info = gr.Markdown("""
+                ### Text Color uses the Border Color and Border Opacity, unless you use a custom list.
+                ### The Custom Text List and Custom Text Color List are repeating comma separated lists.
+                ### The custom color list is a comma separated list of hex colors.
+                #### Example: "A,2,3,4,5,6,7,8,9,10,J,Q,K", "red,#0000FF,#00FF00,red,#FFFF00,#00FFFF,#FF8000,#FF00FF,#FF0080,#FF8000,#FF0080,lightblue"
+                """, elem_id="hex_text_info", visible=False)
+            add_hex_text.change(
+            fn=lambda x: (
+                gr.update(visible=(x == "Custom List")), 
+                gr.update(visible=(x == "Custom List")),
+                gr.update(visible=(x != None))
+                ),
+                inputs=add_hex_text,
+                outputs=[custom_text_list, custom_text_color_list, hex_text_info]
+            )
         with gr.Row():
-            rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
-            sides = gr.Dropdown(label="Grid Shapes", info="The shapes that form grids",choices=["triangle", "square", "hexagon"], value="hexagon")            
+            hex_size = gr.Number(label="Hexagon Size", value=120, 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,50,1,label="Border Opacity %")
         with gr.Row():
-            add_hex_text = gr.Dropdown(label="Add Text to Hexagons", choices=[None, "Column-Row Coordinates", "Column(Letter)-Row Coordinates", "Column-Row(Letter) Coordinates", "Sequential Numbers", "Playing Cards Sequential", "Playing Cards Alternate Red and Black", "Custom List"], value=None)
-            x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-10, 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():            
-            custom_text_list = gr.TextArea(label="Custom Text List", value=constants.cards_alternating, visible=False,)
-            custom_text_color_list = gr.TextArea(label="Custom Text Color List", value=constants.card_colors_alternating, visible=False)
+            hex_button = gr.Button("Generate Hex Grid!", elem_classes="solid", elem_id="btn-generate")
         with gr.Row():
-            hex_text_info = gr.Markdown("""
-            ### Text Color uses the Border Color and Border Opacity, unless you use a custom list.
-            ### The Custom Text List and Custom Text Color List are repeating comma separated lists.
-            ### The custom color list is a comma separated list of hex colors.
-            #### Example: "A,2,3,4,5,6,7,8,9,10,J,Q,K", "red,#0000FF,#00FF00,red,#FFFF00,#00FFFF,#FF8000,#FF00FF,#FF0080,#FF8000,#FF0080,lightblue"
-            """, elem_id="hex_text_info", visible=False)
-        add_hex_text.change(
-        fn=lambda x: (
-            gr.update(visible=(x == "Custom List")), 
-            gr.update(visible=(x == "Custom List")),
-            gr.update(visible=(x != None))
-            ),
-            inputs=add_hex_text,
-            outputs=[custom_text_list, custom_text_color_list, hex_text_info]
-        )
-    with gr.Row():
-        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,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",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_blend_multiply_composite = gr.Slider(0,100,50,0.5, label="Multiply Intensity*")
-        output_overlay_composite = gr.Slider(0,100,50,0.5, label="Interpolate Intensity")
-        output_alpha_composite = gr.Slider(0,100,50,0.5, label="Alpha Composite Intensity")
-    with gr.Accordion("Add Margins (bleed)", open=False):
+            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_blend_multiply_composite = gr.Slider(0,100,50,0.5, label="Multiply Intensity*")
+            output_overlay_composite = gr.Slider(0,100,50,0.5, label="Interpolate Intensity")
+            output_alpha_composite = gr.Slider(0,100,50,0.5, label="Alpha Composite Intensity")
+    with gr.Accordion("Add Margins (for printing)", open=False):
         with gr.Row():
             border_image_source = gr.Radio(label="Add Margins around which Image", choices=["Input Image", "Overlay Image"], value="Overlay Image")
         with gr.Row():
@@ -1428,7 +1433,7 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
             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",interactive=False, show_download_button=True, show_fullscreen_button=True, show_share_button=True)
-    accordian_3d = gr.Accordion("Height Maps and 3D", open=False, elem_id="accordian_3d")
+    accordian_3d = gr.Accordion("Height Maps and 3D (optional, fun)", open=False, elem_id="accordian_3d")
     with accordian_3d:
         with gr.Row():
             depth_image_source = gr.Radio(

style_20250314.css

@@ -20,7 +20,7 @@
     background-color: rgba(242, 218, 163, 0.62);
 }
 
-.dark .gradio-container.gradio-container-5-21-0 .contain .intro .prose {
+.dark .gradio-container.gradio-container-5-22-0 .contain .intro .prose {
     background-color: rgba(41, 18, 5, 0.38) !important;
 }
 .toast-body.info {
@@ -57,7 +57,7 @@ a {
 
 #btn-generate {
     background-image: linear-gradient(to right bottom, rgb(157, 255, 157), rgb(229, 255, 235));
-    color: var(--block-background-fill);
+    color: var(--primary-800);
 }
 
     #btn-generate:hover {
@@ -146,4 +146,21 @@ a {
 }
     .sidebar.open .toggle-button::before {
     content: '';
-}
+}
+
+#sketchpd, #filters, #image_gen, #accordian_3d {
+    outline-color: #bbf7d0;
+    outline-style:solid;
+    outline-width: 1px;
+    outline-offset: 1px;
+    padding: 2px;    
+    border-radius:6px;
+}
+.outline-important {
+    outline-color: var(--accordion-text-color);
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px;
+    padding: 2px;
+    border-radius: 6px;
+}