Update app.py

app.py

@@ -175,6 +175,7 @@ def infer_canny(prompt, text_for_image, text_position, font_size,
     ).images[0]
     return [condi_img, image], seed
 
+
 css = """
 footer {
     visibility: hidden;
@@ -188,10 +189,27 @@ footer {
 .text-position-grid button {
     aspect-ratio: 1;
     padding: 0;
+    border: 1px solid #ccc;
+    background-color: #f0f0f0;
+    cursor: pointer;
+}
+.text-position-grid button.selected {
+    background-color: #007bff;
+    color: white;
 }
 """
 
+def update_button_states(selected_position):
+    return [
+        gr.Button.update(variant="primary" if pos == selected_position else "secondary")
+        for pos in ["top-left", "top-center", "top-right", 
+                    "middle-left", "middle-center", "middle-right", 
+                    "bottom-left", "bottom-center", "bottom-right"]
+    ]
+
 with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as Kolors:
+    text_position = gr.State("top-center")
+    
     with gr.Row():
         with gr.Column(elem_id="col-left"):
             with gr.Row():
@@ -210,16 +228,26 @@ with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as Kolors:
                 with gr.Column():
                     gr.Markdown("Text Position")
                     with gr.Row(elem_classes="text-position-grid"):
-                        text_positions = ["top-left", "top-center", "top-right", 
-                                          "middle-left", "middle-center", "middle-right", 
-                                          "bottom-left", "bottom-center", "bottom-right"]
-                        text_position = gr.Radio(
-                            choices=text_positions,
-                            value="top-center",
-                            label="",
-                            show_label=False,
-                            elem_classes="text-position-grid"
-                        )
+                        btn_top_left = gr.Button("↖")
+                        btn_top_center = gr.Button("↑")
+                        btn_top_right = gr.Button("↗")
+                        btn_middle_left = gr.Button("←")
+                        btn_middle_center = gr.Button("•")
+                        btn_middle_right = gr.Button("→")
+                        btn_bottom_left = gr.Button("↙")
+                        btn_bottom_center = gr.Button("↓")
+                        btn_bottom_right = gr.Button("↘")
+                    
+                    position_buttons = [btn_top_left, btn_top_center, btn_top_right,
+                                        btn_middle_left, btn_middle_center, btn_middle_right,
+                                        btn_bottom_left, btn_bottom_center, btn_bottom_right]
+                    
+                    for btn, pos in zip(position_buttons, ["top-left", "top-center", "top-right", 
+                                                          "middle-left", "middle-center", "middle-right", 
+                                                          "bottom-left", "bottom-center", "bottom-right"]):
+                        btn.click(lambda x, p=pos: p, outputs=text_position)
+                        btn.click(update_button_states, inputs=[text_position], outputs=position_buttons)
+
                 with gr.Column():
                     font_size = gr.Slider(
                         label="Font Size",
@@ -294,4 +322,7 @@ with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as Kolors:
         outputs = [result, seed_used]
     )
 
+    # Set initial button states
+    Kolors.load(update_button_states, inputs=[text_position], outputs=position_buttons)
+
 Kolors.queue().launch(debug=True, share=True)