Spaces:
Running
on
Zero
Running
on
Zero
UI update
Browse filesoutline highlights and main items
- app.py +76 -71
- 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=
|
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 |
-
|
1195 |
-
|
1196 |
-
|
1197 |
-
gr.
|
1198 |
-
|
1199 |
-
|
1200 |
-
|
|
|
|
|
|
|
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
|
|
|
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 (
|
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.
|
1358 |
-
with gr.Accordion("
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1359 |
with gr.Row():
|
1360 |
-
|
1361 |
-
|
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 |
-
|
1372 |
-
|
1373 |
-
|
1374 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1375 |
with gr.Row():
|
1376 |
-
|
1377 |
-
|
|
|
|
|
|
|
|
|
|
|
1378 |
with gr.Row():
|
1379 |
-
|
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 |
-
|
1387 |
-
|
1388 |
-
|
1389 |
-
|
1390 |
-
|
1391 |
-
|
1392 |
-
|
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-
|
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(--
|
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 |
+
}
|