Surn commited on
Commit
4ca41f3
·
1 Parent(s): 69421e3

outline highlights and main items

Files changed (2) hide show
  1. app.py +76 -71
  2. style_20250314.css +20 -3
app.py CHANGED
@@ -1118,7 +1118,7 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
1118
  # HexaGrid Creator
1119
  ## Transform Your Images into Mesmerizing Hexagon Grid Masterpieces! ⬢""", elem_classes="intro")
1120
  with gr.Row():
1121
- 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"):
1122
  gr.Markdown ("""
1123
 
1124
  ## 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',
1165
  label="Input Image",
1166
  type="filepath",
1167
  interactive=True,
1168
- elem_classes="centered solid imgcontainer",
1169
  key="imgInput",
1170
  image_mode=None,
1171
  format="PNG",
1172
- height=450,
1173
  width=800
1174
  )
1175
  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',
1191
  )
1192
  with gr.Row():
1193
  with gr.Column(scale=1):
1194
- sketch_replace_input_image_button = gr.Button("Replace Input Image with sketch", elem_id="sketch_replace_input_image_button", elem_classes="solid")
1195
- sketch_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="Sketch Transparancy", elem_id="alpha_composite_slider")
1196
- btn_sketch_alpha_composite = gr.Button("Overlay Sketch on Input Image", elem_id="btn_sketchninput", elem_classes="solid")
1197
- 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>")
1198
-
1199
- with gr.Column(scale=1):
1200
- with gr.Accordion("Image Filters", open = False):
 
 
 
1201
  with gr.Row():
1202
  with gr.Column():
1203
  lut_filename = gr.Textbox(
@@ -1214,7 +1217,8 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
1214
  height=120)
1215
  with gr.Row():
1216
  lut_intensity = gr.Slider(label="Filter Intensity", minimum=-200, maximum=200, value=100, info="0 none, negative inverts the filter", interactive=True)
1217
- apply_lut_button = gr.Button("Apply Filter (LUT)", elem_classes="solid", elem_id="apply_lut_button")
 
1218
  with gr.Row():
1219
  lut_example_image = gr.Image(type="pil", label="Filter (LUT) Example Image", value=constants.default_lut_example_img)
1220
  with gr.Row():
@@ -1248,8 +1252,8 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
1248
  composite_opacity = gr.Slider(label="Opacity %", minimum=0, maximum=100, value=50, interactive=True)
1249
  with gr.Row():
1250
  composite_button = gr.Button("Composite", elem_classes="solid")
1251
- with gr.Row():
1252
- with gr.Accordion("Generate AI Image (click here for options)", open = False):
1253
  with gr.Row():
1254
  with gr.Column(scale=1):
1255
  generate_input_image = gr.Button(
@@ -1354,68 +1358,69 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
1354
  elem_classes="solid", type="filepath", columns=[3], rows=[3], preview=False ,object_fit="contain", height="auto", format="png",allow_preview=False)
1355
  with gr.Row():
1356
  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)
1357
- with gr.Accordion("Advanced Hexagon Settings", open = False):
1358
- with gr.Accordion("Hex Coloring and Exclusion", open = True):
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1359
  with gr.Row():
1360
- with gr.Column():
1361
- color_picker = gr.ColorPicker(label="Pick a color to exclude",value="#505050")
1362
- with gr.Column():
1363
- filter_color = gr.Checkbox(label="Filter Excluded Colors from Sampling", value=False,)
1364
- fill_hex = gr.Checkbox(label="Fill Hex with color from Image", value=True)
1365
- exclude_color_button = gr.Button("Exclude Color", elem_id="exlude_color_button", elem_classes="solid")
1366
- 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")
1367
- selected_row = gr.Number(0, label="Selected Row", visible=False)
1368
- delete_button = gr.Button("Delete Row", elem_id="delete_exclusion_button", elem_classes="solid")
1369
- with gr.Accordion("Hex Grid Location on Image", open = False):
1370
  with gr.Row():
1371
- start_x = gr.Number(label="Start X", value=20, minimum=-512, maximum= 512, precision=0)
1372
- start_y = gr.Number(label="Start Y", value=20, minimum=-512, maximum= 512, precision=0)
1373
- end_x = gr.Number(label="End X", value=-20, minimum=-512, maximum= 512, precision=0)
1374
- end_y = gr.Number(label="End Y", value=-20, minimum=-512, maximum= 512, precision=0)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1375
  with gr.Row():
1376
- rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
1377
- sides = gr.Dropdown(label="Grid Shapes", info="The shapes that form grids",choices=["triangle", "square", "hexagon"], value="hexagon")
 
 
 
 
 
1378
  with gr.Row():
1379
- 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)
1380
- x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-10, minimum=-200, maximum=200, precision=1)
1381
- y_spacing = gr.Number(label="Adjust Vertical spacing", value=3, minimum=-200, maximum=200, precision=1)
1382
- with gr.Row():
1383
- custom_text_list = gr.TextArea(label="Custom Text List", value=constants.cards_alternating, visible=False,)
1384
- custom_text_color_list = gr.TextArea(label="Custom Text Color List", value=constants.card_colors_alternating, visible=False)
1385
  with gr.Row():
1386
- hex_text_info = gr.Markdown("""
1387
- ### Text Color uses the Border Color and Border Opacity, unless you use a custom list.
1388
- ### The Custom Text List and Custom Text Color List are repeating comma separated lists.
1389
- ### The custom color list is a comma separated list of hex colors.
1390
- #### 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"
1391
- """, elem_id="hex_text_info", visible=False)
1392
- add_hex_text.change(
1393
- fn=lambda x: (
1394
- gr.update(visible=(x == "Custom List")),
1395
- gr.update(visible=(x == "Custom List")),
1396
- gr.update(visible=(x != None))
1397
- ),
1398
- inputs=add_hex_text,
1399
- outputs=[custom_text_list, custom_text_color_list, hex_text_info]
1400
- )
1401
- with gr.Row():
1402
- hex_size = gr.Number(label="Hexagon Size", value=90, minimum=1, maximum=768)
1403
- border_size = gr.Slider(-5,25,value=2,step=1,label="Border Size")
1404
- with gr.Row():
1405
- background_color = gr.ColorPicker(label="Background Color", value="#000000", interactive=True)
1406
- background_opacity = gr.Slider(0,100,0,1,label="Background Opacity %")
1407
- border_color = gr.ColorPicker(label="Border Color", value="#7b7b7b", interactive=True)
1408
- border_opacity = gr.Slider(0,100,50,1,label="Border Opacity %")
1409
- with gr.Row():
1410
- hex_button = gr.Button("Generate Hex Grid!", elem_classes="solid", elem_id="btn-generate")
1411
- with gr.Row():
1412
- output_image = gr.Image(label="Hexagon Grid Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOutput",interactive=True)
1413
- overlay_image = gr.Image(label="Hexagon Overlay Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOverlay",interactive=True)
1414
- with gr.Row():
1415
- output_blend_multiply_composite = gr.Slider(0,100,50,0.5, label="Multiply Intensity*")
1416
- output_overlay_composite = gr.Slider(0,100,50,0.5, label="Interpolate Intensity")
1417
- output_alpha_composite = gr.Slider(0,100,50,0.5, label="Alpha Composite Intensity")
1418
- with gr.Accordion("Add Margins (bleed)", open=False):
1419
  with gr.Row():
1420
  border_image_source = gr.Radio(label="Add Margins around which Image", choices=["Input Image", "Overlay Image"], value="Overlay Image")
1421
  with gr.Row():
@@ -1428,7 +1433,7 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
1428
  add_border_button = gr.Button("Add Margins", elem_classes="solid", variant="secondary")
1429
  with gr.Row():
1430
  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)
1431
- accordian_3d = gr.Accordion("Height Maps and 3D", open=False, elem_id="accordian_3d")
1432
  with accordian_3d:
1433
  with gr.Row():
1434
  depth_image_source = gr.Radio(
 
1118
  # HexaGrid Creator
1119
  ## Transform Your Images into Mesmerizing Hexagon Grid Masterpieces! ⬢""", elem_classes="intro")
1120
  with gr.Row():
1121
+ 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"):
1122
  gr.Markdown ("""
1123
 
1124
  ## Drop an image into the Input Image and get started!
 
1165
  label="Input Image",
1166
  type="filepath",
1167
  interactive=True,
1168
+ elem_classes="centered solid imgcontainer outline-important",
1169
  key="imgInput",
1170
  image_mode=None,
1171
  format="PNG",
1172
+ height=512,
1173
  width=800
1174
  )
1175
  with gr.Accordion("Sketch Pad", open = False, elem_id="sketchpd"):
 
1191
  )
1192
  with gr.Row():
1193
  with gr.Column(scale=1):
1194
+ with gr.Row():
1195
+ sketch_replace_input_image_button = gr.Button("Replace Input Image with sketch", elem_id="sketch_replace_input_image_button", elem_classes="solid")
1196
+ 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")
1197
+ with gr.Row():
1198
+ sketch_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="Sketch Transparancy", elem_id="alpha_composite_slider")
1199
+ btn_sketch_alpha_composite = gr.Button("Overlay Sketch on Input Image", elem_id="btn_sketchninput", elem_classes="solid")
1200
+ 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")
1201
+
1202
+ with gr.Column(scale=1, elem_id="filters"):
1203
+ with gr.Accordion("Image Filters (optional, fun)", open = False):
1204
  with gr.Row():
1205
  with gr.Column():
1206
  lut_filename = gr.Textbox(
 
1217
  height=120)
1218
  with gr.Row():
1219
  lut_intensity = gr.Slider(label="Filter Intensity", minimum=-200, maximum=200, value=100, info="0 none, negative inverts the filter", interactive=True)
1220
+ apply_lut_button = gr.Button("Apply Filter to Input Image", elem_classes="solid", elem_id="apply_lut_button")
1221
+ apply_lut_to_sketch_button = gr.Button("Apply Filter to Sketch", elem_classes="solid", elem_id="apply_lut_to_sketch_button")
1222
  with gr.Row():
1223
  lut_example_image = gr.Image(type="pil", label="Filter (LUT) Example Image", value=constants.default_lut_example_img)
1224
  with gr.Row():
 
1252
  composite_opacity = gr.Slider(label="Opacity %", minimum=0, maximum=100, value=50, interactive=True)
1253
  with gr.Row():
1254
  composite_button = gr.Button("Composite", elem_classes="solid")
1255
+ with gr.Row(elem_id="image_gen"):
1256
+ with gr.Accordion("Generate AI Image (optional, fun)", open = False):
1257
  with gr.Row():
1258
  with gr.Column(scale=1):
1259
  generate_input_image = gr.Button(
 
1358
  elem_classes="solid", type="filepath", columns=[3], rows=[3], preview=False ,object_fit="contain", height="auto", format="png",allow_preview=False)
1359
  with gr.Row():
1360
  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)
1361
+ with gr.Column(elem_classes="outline-important"):
1362
+ with gr.Accordion("Advanced Hexagon Settings", open = False):
1363
+ with gr.Accordion("Hex Coloring and Exclusion", open = True):
1364
+ with gr.Row():
1365
+ with gr.Column():
1366
+ color_picker = gr.ColorPicker(label="Pick a color to exclude",value="#505050")
1367
+ with gr.Column():
1368
+ filter_color = gr.Checkbox(label="Filter Excluded Colors from Sampling", value=False,)
1369
+ fill_hex = gr.Checkbox(label="Fill Hex with color from Image", value=True)
1370
+ exclude_color_button = gr.Button("Exclude Color", elem_id="exlude_color_button", elem_classes="solid")
1371
+ 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")
1372
+ selected_row = gr.Number(0, label="Selected Row", visible=False)
1373
+ delete_button = gr.Button("Delete Row", elem_id="delete_exclusion_button", elem_classes="solid")
1374
+ with gr.Accordion("Hex Grid Location on Image", open = False):
1375
+ with gr.Row():
1376
+ start_x = gr.Number(label="Start X", value=20, minimum=-512, maximum= 512, precision=0)
1377
+ start_y = gr.Number(label="Start Y", value=20, minimum=-512, maximum= 512, precision=0)
1378
+ end_x = gr.Number(label="End X", value=-20, minimum=-512, maximum= 512, precision=0)
1379
+ end_y = gr.Number(label="End Y", value=-20, minimum=-512, maximum= 512, precision=0)
1380
  with gr.Row():
1381
+ rotation = gr.Slider(-90, 180, 0.0, 0.1, label="Hexagon Rotation (degree)")
1382
+ sides = gr.Dropdown(label="Grid Shapes", info="The shapes that form grids",choices=["triangle", "square", "hexagon"], value="hexagon")
 
 
 
 
 
 
 
 
1383
  with gr.Row():
1384
+ 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)
1385
+ x_spacing = gr.Number(label="Adjust Horizontal spacing", value=-14, minimum=-200, maximum=200, precision=1)
1386
+ y_spacing = gr.Number(label="Adjust Vertical spacing", value=3, minimum=-200, maximum=200, precision=1)
1387
+ with gr.Row():
1388
+ custom_text_list = gr.TextArea(label="Custom Text List", value=constants.cards_alternating, visible=False,)
1389
+ custom_text_color_list = gr.TextArea(label="Custom Text Color List", value=constants.card_colors_alternating, visible=False)
1390
+ with gr.Row():
1391
+ hex_text_info = gr.Markdown("""
1392
+ ### Text Color uses the Border Color and Border Opacity, unless you use a custom list.
1393
+ ### The Custom Text List and Custom Text Color List are repeating comma separated lists.
1394
+ ### The custom color list is a comma separated list of hex colors.
1395
+ #### 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"
1396
+ """, elem_id="hex_text_info", visible=False)
1397
+ add_hex_text.change(
1398
+ fn=lambda x: (
1399
+ gr.update(visible=(x == "Custom List")),
1400
+ gr.update(visible=(x == "Custom List")),
1401
+ gr.update(visible=(x != None))
1402
+ ),
1403
+ inputs=add_hex_text,
1404
+ outputs=[custom_text_list, custom_text_color_list, hex_text_info]
1405
+ )
1406
  with gr.Row():
1407
+ hex_size = gr.Number(label="Hexagon Size", value=120, minimum=1, maximum=768)
1408
+ border_size = gr.Slider(-5,25,value=2,step=1,label="Border Size")
1409
+ with gr.Row():
1410
+ background_color = gr.ColorPicker(label="Background Color", value="#000000", interactive=True)
1411
+ background_opacity = gr.Slider(0,100,0,1,label="Background Opacity %")
1412
+ border_color = gr.ColorPicker(label="Border Color", value="#7b7b7b", interactive=True)
1413
+ border_opacity = gr.Slider(0,100,50,1,label="Border Opacity %")
1414
  with gr.Row():
1415
+ hex_button = gr.Button("Generate Hex Grid!", elem_classes="solid", elem_id="btn-generate")
 
 
 
 
 
1416
  with gr.Row():
1417
+ output_image = gr.Image(label="Hexagon Grid Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOutput",interactive=True)
1418
+ overlay_image = gr.Image(label="Hexagon Overlay Image", image_mode = "RGBA", elem_classes="centered solid imgcontainer", format="PNG", type="filepath", key="ImgOverlay",interactive=True)
1419
+ with gr.Row():
1420
+ output_blend_multiply_composite = gr.Slider(0,100,50,0.5, label="Multiply Intensity*")
1421
+ output_overlay_composite = gr.Slider(0,100,50,0.5, label="Interpolate Intensity")
1422
+ output_alpha_composite = gr.Slider(0,100,50,0.5, label="Alpha Composite Intensity")
1423
+ with gr.Accordion("Add Margins (for printing)", open=False):
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1424
  with gr.Row():
1425
  border_image_source = gr.Radio(label="Add Margins around which Image", choices=["Input Image", "Overlay Image"], value="Overlay Image")
1426
  with gr.Row():
 
1433
  add_border_button = gr.Button("Add Margins", elem_classes="solid", variant="secondary")
1434
  with gr.Row():
1435
  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)
1436
+ accordian_3d = gr.Accordion("Height Maps and 3D (optional, fun)", open=False, elem_id="accordian_3d")
1437
  with accordian_3d:
1438
  with gr.Row():
1439
  depth_image_source = gr.Radio(
style_20250314.css CHANGED
@@ -20,7 +20,7 @@
20
  background-color: rgba(242, 218, 163, 0.62);
21
  }
22
 
23
- .dark .gradio-container.gradio-container-5-21-0 .contain .intro .prose {
24
  background-color: rgba(41, 18, 5, 0.38) !important;
25
  }
26
  .toast-body.info {
@@ -57,7 +57,7 @@ a {
57
 
58
  #btn-generate {
59
  background-image: linear-gradient(to right bottom, rgb(157, 255, 157), rgb(229, 255, 235));
60
- color: var(--block-background-fill);
61
  }
62
 
63
  #btn-generate:hover {
@@ -146,4 +146,21 @@ a {
146
  }
147
  .sidebar.open .toggle-button::before {
148
  content: '';
149
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  background-color: rgba(242, 218, 163, 0.62);
21
  }
22
 
23
+ .dark .gradio-container.gradio-container-5-22-0 .contain .intro .prose {
24
  background-color: rgba(41, 18, 5, 0.38) !important;
25
  }
26
  .toast-body.info {
 
57
 
58
  #btn-generate {
59
  background-image: linear-gradient(to right bottom, rgb(157, 255, 157), rgb(229, 255, 235));
60
+ color: var(--primary-800);
61
  }
62
 
63
  #btn-generate:hover {
 
146
  }
147
  .sidebar.open .toggle-button::before {
148
  content: '';
149
+ }
150
+
151
+ #sketchpd, #filters, #image_gen, #accordian_3d {
152
+ outline-color: #bbf7d0;
153
+ outline-style:solid;
154
+ outline-width: 1px;
155
+ outline-offset: 1px;
156
+ padding: 2px;
157
+ border-radius:6px;
158
+ }
159
+ .outline-important {
160
+ outline-color: var(--accordion-text-color);
161
+ outline-style: solid;
162
+ outline-width: 2px;
163
+ outline-offset: 2px;
164
+ padding: 2px;
165
+ border-radius: 6px;
166
+ }