Update app.py

app.py

@@ -85,11 +85,11 @@ def resize_image(image, resolution):
     new_h = int(h * ratio)
     return image.resize((new_w, new_h), Image.LANCZOS)
 
-def text_to_image(text, size=72, position="top-center"):
+def text_to_image(text, size=72, position="middle-center"):
     width, height = 1024, 576
     image = Image.new("RGB", (width, height), "white")
     draw = ImageDraw.Draw(image)
-    
+
     font_files = ["Arial_Unicode.ttf"]
     font = None
     for font_file in font_files:
@@ -119,17 +119,33 @@ def text_to_image(text, size=72, position="top-center"):
 
     position_mapping = {
         "top-left": (10, 10),
+        "top-left-center": (width // 4 - max_line_width // 2, 10),
         "top-center": ((width - max_line_width) / 2, 10),
+        "top-right-center": (3 * width // 4 - max_line_width // 2, 10),
         "top-right": (width - max_line_width - 10, 10),
+        "upper-left": (10, height // 4 - total_height // 2),
+        "upper-left-center": (width // 4 - max_line_width // 2, height // 4 - total_height // 2),
+        "upper-center": ((width - max_line_width) / 2, height // 4 - total_height // 2),
+        "upper-right-center": (3 * width // 4 - max_line_width // 2, height // 4 - total_height // 2),
+        "upper-right": (width - max_line_width - 10, height // 4 - total_height // 2),
         "middle-left": (10, (height - total_height) / 2),
+        "middle-left-center": (width // 4 - max_line_width // 2, (height - total_height) / 2),
         "middle-center": ((width - max_line_width) / 2, (height - total_height) / 2),
+        "middle-right-center": (3 * width // 4 - max_line_width // 2, (height - total_height) / 2),
         "middle-right": (width - max_line_width - 10, (height - total_height) / 2),
+        "lower-left": (10, 3 * height // 4 - total_height // 2),
+        "lower-left-center": (width // 4 - max_line_width // 2, 3 * height // 4 - total_height // 2),
+        "lower-center": ((width - max_line_width) / 2, 3 * height // 4 - total_height // 2),
+        "lower-right-center": (3 * width // 4 - max_line_width // 2, 3 * height // 4 - total_height // 2),
+        "lower-right": (width - max_line_width - 10, 3 * height // 4 - total_height // 2),
         "bottom-left": (10, height - total_height - 10),
+        "bottom-left-center": (width // 4 - max_line_width // 2, height - total_height - 10),
         "bottom-center": ((width - max_line_width) / 2, height - total_height - 10),
+        "bottom-right-center": (3 * width // 4 - max_line_width // 2, height - total_height - 10),
         "bottom-right": (width - max_line_width - 10, height - total_height - 10),
     }
 
-    x, y = position_mapping.get(position, ((width - max_line_width) / 2, height - total_height - 10))
+    x, y = position_mapping.get(position, ((width - max_line_width) / 2, (height - total_height) / 2))
     for i, line in enumerate(lines):
         draw.text((x, y), line, fill="black", font=font)
         y += line_heights[i]
@@ -149,15 +165,15 @@ def infer_canny(prompt, text_for_image, text_position, font_size,
         ):
     prompt = translate_korean_to_english(prompt)
     negative_prompt = translate_korean_to_english(negative_prompt)
-    
+
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
     generator = torch.Generator().manual_seed(seed)
-    
+
     # Generate text image
     init_image = text_to_image(text_for_image, size=font_size, position=text_position)
     init_image = resize_image(init_image, MAX_IMAGE_SIZE)
-    
+
     pipe = pipe_canny.to("cuda")
     condi_img = process_canny_condition(init_image)
     image = pipe(
@@ -175,16 +191,16 @@ def infer_canny(prompt, text_for_image, text_position, font_size,
     ).images[0]
     return [condi_img, image], seed
 
-
 css = """
 footer {
     visibility: hidden;
 }
 .text-position-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 5px;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 2px;
     margin-bottom: 10px;
+    width: 150px;
 }
 .text-position-grid button {
     aspect-ratio: 1;
@@ -192,24 +208,36 @@ footer {
     border: 1px solid #ccc;
     background-color: #f0f0f0;
     cursor: pointer;
+    font-size: 10px;
+    transition: all 0.3s ease;
+}
+.text-position-grid button:hover {
+    background-color: #e0e0e0;
 }
 .text-position-grid button.selected {
     background-color: #007bff;
     color: white;
+    transform: scale(1.1);
 }
 """
 
 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"]
+        for pos in position_list
     ]
 
+position_list = [
+    "top-left", "top-left-center", "top-center", "top-right-center", "top-right",
+    "upper-left", "upper-left-center", "upper-center", "upper-right-center", "upper-right",
+    "middle-left", "middle-left-center", "middle-center", "middle-right-center", "middle-right",
+    "lower-left", "lower-left-center", "lower-center", "lower-right-center", "lower-right",
+    "bottom-left", "bottom-left-center", "bottom-center", "bottom-right-center", "bottom-right"
+]
+
 with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as Kolors:
-    text_position = gr.State("top-center")
-    
+    text_position = gr.State("middle-center")
+
     with gr.Row():
         with gr.Column(elem_id="col-left"):
             with gr.Row():
@@ -228,23 +256,9 @@ 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"):
-                        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]
+                        position_buttons = [gr.Button("•") for _ in range(25)]
                     
-                    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"]):
+                    for btn, pos in zip(position_buttons, position_list):
                         btn.click(lambda x, p=pos: p, outputs=text_position)
                         btn.click(update_button_states, inputs=[text_position], outputs=position_buttons)
 
@@ -325,4 +339,4 @@ with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as Kolors:
     # Set initial button states
     Kolors.load(update_button_states, inputs=[text_position], outputs=position_buttons)
 
-Kolors.queue().launch(debug=True, share=True)
+Kolors.queue().launch(debug=True, share=True)