Update app-backup.py

app-backup.py

@@ -522,12 +522,48 @@ def update_history(new_image, history):
         history.insert(0, new_image)
     return history
 
+custom_theme = gr.themes.Base(
+    primary_hue="blue",
+    secondary_hue="purple",
+    neutral_hue="slate",
+).set(
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_dark="*primary_600",
+    button_primary_background_fill_hover="*primary_400",
+    button_primary_border_color="*primary_500",
+    button_primary_border_color_dark="*primary_600",
+    button_primary_text_color="white",
+    button_primary_text_color_dark="white",
+    button_secondary_background_fill="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_700",
+    button_secondary_background_fill_hover="*neutral_50",
+    button_secondary_text_color="*neutral_800",
+    button_secondary_text_color_dark="white",
+    background_fill_primary="*neutral_50",
+    background_fill_primary_dark="*neutral_900",
+    block_background_fill="white",
+    block_background_fill_dark="*neutral_800",
+    block_label_background_fill="*primary_500",
+    block_label_background_fill_dark="*primary_600",
+    block_label_text_color="white",
+    block_label_text_color_dark="white",
+    block_title_text_color="*neutral_800",
+    block_title_text_color_dark="white",
+    input_background_fill="white",
+    input_background_fill_dark="*neutral_800",
+    input_border_color="*neutral_200",
+    input_border_color_dark="*neutral_700",
+    input_placeholder_color="*neutral_400",
+    input_placeholder_color_dark="*neutral_400",
+    shadow_spread="8px",
+    shadow_inset="0px 2px 4px 0px rgba(0,0,0,0.05)"
+)
+
 css = '''
 #gen_btn{height: 100%}
 #title{text-align: center}
 #title h1{font-size: 3em; display:inline-flex; align-items:center}
 #title img{width: 100px; margin-right: 0.25em}
-#gallery .grid-wrap{height: 5vh}
 #lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%}
 .custom_lora_card{margin-bottom: 1em}
 .card_internal{display: flex;height: 100px;margin-top: .5em}
@@ -543,160 +579,328 @@ css = '''
 #custom_lora_btn{margin-top: auto;margin-bottom: 11px}
 #random_btn{font-size: 300%}
 #component-11{align-self: stretch;}
-footer {visibility: hidden;}
+
+#lora_gallery {
+    margin: 20px 0;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 12px;
+    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
+    width: 100% !important;
+    height: 800px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    display: block !important;
+}
+
+/* 갤러리 그리드 컨테이너 */
+#gallery {
+    display: grid !important;
+    grid-template-columns: repeat(10, 1fr) !important;
+    gap: 10px !important;
+    padding: 10px !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow-y: auto !important;
+    max-width: 100% !important;
+}
+
+/* 갤러리 아이템 */
+.gallery-item {
+    position: relative !important;
+    width: 100% !important;
+    aspect-ratio: 1 !important;
+    margin: 0 !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+/* 갤러리 이미지 */
+.gallery-item img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+    border-radius: 12px !important;
+}
+
+/* 갤러리 그리드 래퍼 */
+.wrap, .svelte-w6dy5e {
+    display: grid !important;
+    grid-template-columns: repeat(10, 1fr) !important;  /* 10개로 통일 */
+    gap: 10px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+/* 모든 컨테이너 공통 설정 */
+.container, .content, .block, .contain {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* 행 설정 */
+.row {
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* 입체감 있는 버튼 */
+.button_total {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+.button_total:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* 입체감 있는 입력 필드 */
+input, textarea {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+/* 컴포넌트들의 border-radius 설정 */
+.gradio-container .input, 
+.gradio-container .button,
+.gradio-container .block {
+    border-radius: 12px;
+}
+
+/* 갤러리 스크롤바 스타일링 */
+#gallery::-webkit-scrollbar {
+    width: 8px;
+}
+
+#gallery::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+#gallery::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+#gallery::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* 갤러리 flex 컨테이너 */
+.flex {
+    width: 100% !important;
+    max-width: 100% !important;
+    display: flex !important;
+}
+
+/* svelte 특정 클래스 */
+.svelte-1p9xokt {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+#footer {visibility: hidden;}
+
+/* 갤러리 컨테이너 클래스 */
+.gallery-container {
+    width: 100% !important;
+    max-width: 100% !important;
+}
 '''
 
-with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css, delete_cache=(60, 3600)) as app:
+
+with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
     loras_state = gr.State(loras)
     selected_indices = gr.State([])
-    
+
     gr.Markdown(
         """
         # MixGen3: 멀티 Lora(이미지 학습) 통합 생성 모델
-        
         ### 사용 안내:
-        1) 갤러리에서 원하는 모델을 선택(최대 3개까지)
-        2) 프롬프트에 한글 또는 영문으로 원하는 내용을 입력
-        3) Generate 버튼 실행
-
-        ### Contacts: arxivgpt@gmail.com        
+        갤러리에서 원하는 모델을 선택(최대 3개까지) < 프롬프트에 한글 또는 영문으로 원하는 내용을 입력 < Generate 버튼 실행  
         """
     )
+
+    with gr.Row(elem_id="lora_gallery", equal_height=True):
+        gallery = gr.Gallery(
+            value=[(item["image"], item["title"]) for item in loras],
+            label="LoRA Explorer Gallery",
+            columns=11,  # 10개로 변경
+            elem_id="gallery",
+            height=800,
+            object_fit="cover",
+            show_label=True,
+            allow_preview=False,
+            show_share_button=False,
+            container=True,
+            preview=False
+        )    
     
-    with gr.Row():
-        with gr.Column(scale=3):
-            prompt = gr.Textbox(label="Prompt", lines=1, placeholder="Type a prompt after selecting a LoRA")
-        with gr.Column(scale=1):
-            generate_button = gr.Button("Generate", variant="primary", elem_classes=["button_total"])
-
-
-
-
-    with gr.Row(elem_id="loaded_loras"):
-        with gr.Column(scale=1, min_width=25):
-            randomize_button = gr.Button("🎲", variant="secondary", scale=1, elem_id="random_btn")
-        with gr.Column(scale=8):
-            with gr.Row():
-                with gr.Column(scale=0, min_width=50):
-                    lora_image_1 = gr.Image(label="LoRA 1 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                with gr.Column(scale=3, min_width=100):
-                    selected_info_1 = gr.Markdown("Select a LoRA 1")
-                with gr.Column(scale=5, min_width=50):
-                    lora_scale_1 = gr.Slider(label="LoRA 1 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-            with gr.Row():
-                remove_button_1 = gr.Button("Remove", size="sm")
-
-        with gr.Column(scale=8):
-            with gr.Row():
-                with gr.Column(scale=0, min_width=50):
-                    lora_image_2 = gr.Image(label="LoRA 2 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                with gr.Column(scale=3, min_width=100):
-                    selected_info_2 = gr.Markdown("Select a LoRA 2")
-                with gr.Column(scale=5, min_width=50):
-                    lora_scale_2 = gr.Slider(label="LoRA 2 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-            with gr.Row():
-                remove_button_2 = gr.Button("Remove", size="sm")
-
-        with gr.Column(scale=8):
-            with gr.Row():
-                with gr.Column(scale=0, min_width=50):
-                    lora_image_3 = gr.Image(label="LoRA 3 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
-                with gr.Column(scale=3, min_width=100):
-                    selected_info_3 = gr.Markdown("Select a LoRA 3")
-                with gr.Column(scale=5, min_width=50):
-                    lora_scale_3 = gr.Slider(label="LoRA 3 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
-            with gr.Row():
-                remove_button_3 = gr.Button("Remove", size="sm")
     
-    with gr.Row():
-        with gr.Column():
-            with gr.Group():
-                with gr.Row(elem_id="custom_lora_structure"):
-                    custom_lora = gr.Textbox(label="Custom LoRA", info="LoRA Hugging Face path or *.safetensors public URL", placeholder="ginipick/flux-lora-eric-cat", scale=3, min_width=150)
-                    add_custom_lora_button = gr.Button("Add Custom LoRA", elem_id="custom_lora_btn", scale=2, min_width=150)
-                remove_custom_lora_button = gr.Button("Remove Custom LoRA", visible=False)
-                gr.Markdown("[Check the list of FLUX LoRAs](https://huggingface.co/models?other=base_model:adapter:black-forest-labs/FLUX.1-dev)", elem_id="lora_list")
-            gallery = gr.Gallery(
-                [(item["image"], item["title"]) for item in loras],
-                label="Or pick from the LoRA Explorer gallery",
-                allow_preview=False,
-                columns=4,
-                elem_id="gallery"
-            )
-        with gr.Column():
-            progress_bar = gr.Markdown(elem_id="progress", visible=False)
-            result = gr.Image(label="Generated Image", interactive=False)
-            with gr.Accordion("History", open=False):
-                history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain", interactive=False)
 
-    with gr.Row():
-        with gr.Accordion("Advanced Settings", open=False):
-            with gr.Row():
-                input_image = gr.Image(label="Input image", type="filepath")
-                image_strength = gr.Slider(label="Denoise Strength", info="Lower means more image influence", minimum=0.1, maximum=1.0, step=0.01, value=0.75)
-            with gr.Column():
-                with gr.Row():
-                    cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, step=0.5, value=3.5)
-                    steps = gr.Slider(label="Steps", minimum=1, maximum=50, step=1, value=28)
+        
+    with gr.Tab(label="Generate"):
+        # Prompt and Generate Button
+        with gr.Row():
+            with gr.Column(scale=3):
+                prompt = gr.Textbox(label="Prompt", lines=1, placeholder="Type a prompt after selecting a LoRA")
+            with gr.Column(scale=1):
+                generate_button = gr.Button("Generate", variant="primary", elem_classes=["button_total"])
+
+        # LoRA Selection Area
+        with gr.Row(elem_id="loaded_loras"):
+            # Randomize Button
+            with gr.Column(scale=1, min_width=25):
+                randomize_button = gr.Button("🎲", variant="secondary", scale=1, elem_id="random_btn")
+            
+            # LoRA 1
+            with gr.Column(scale=8):
                 with gr.Row():
-                    width = gr.Slider(label="Width", minimum=256, maximum=1536, step=64, value=1024)
-                    height = gr.Slider(label="Height", minimum=256, maximum=1536, step=64, value=1024)
+                    with gr.Column(scale=0, min_width=50):
+                        lora_image_1 = gr.Image(label="LoRA 1 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
+                    with gr.Column(scale=3, min_width=100):
+                        selected_info_1 = gr.Markdown("Select a LoRA 1")
+                    with gr.Column(scale=5, min_width=50):
+                        lora_scale_1 = gr.Slider(label="LoRA 1 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
                 with gr.Row():
-                    randomize_seed = gr.Checkbox(True, label="Randomize seed")
-                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0, randomize=True)
+                    remove_button_1 = gr.Button("Remove", size="sm")
 
-    gallery.select(
-        update_selection,
-        inputs=[selected_indices, loras_state, width, height],
-        outputs=[prompt, selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, width, height, lora_image_1, lora_image_2, lora_image_3]
-    )
+            # LoRA 2
+            with gr.Column(scale=8):
+                with gr.Row():
+                    with gr.Column(scale=0, min_width=50):
+                        lora_image_2 = gr.Image(label="LoRA 2 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
+                    with gr.Column(scale=3, min_width=100):
+                        selected_info_2 = gr.Markdown("Select a LoRA 2")
+                    with gr.Column(scale=5, min_width=50):
+                        lora_scale_2 = gr.Slider(label="LoRA 2 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
+                with gr.Row():
+                    remove_button_2 = gr.Button("Remove", size="sm")
 
-    remove_button_1.click(
-        remove_lora_1,
-        inputs=[selected_indices, loras_state],
-        outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3]
-    )
-    
-    remove_button_2.click(
-        remove_lora_2,
-        inputs=[selected_indices, loras_state],
-        outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3]
-    )
-    
-    remove_button_3.click(
-        remove_lora_3,
-        inputs=[selected_indices, loras_state],
-        outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3]
-    )
+            # LoRA 3
+            with gr.Column(scale=8):
+                with gr.Row():
+                    with gr.Column(scale=0, min_width=50):
+                        lora_image_3 = gr.Image(label="LoRA 3 Image", interactive=False, min_width=50, width=50, show_label=False, show_share_button=False, show_download_button=False, show_fullscreen_button=False, height=50)
+                    with gr.Column(scale=3, min_width=100):
+                        selected_info_3 = gr.Markdown("Select a LoRA 3")
+                    with gr.Column(scale=5, min_width=50):
+                        lora_scale_3 = gr.Slider(label="LoRA 3 Scale", minimum=0, maximum=3, step=0.01, value=1.15)
+                with gr.Row():
+                    remove_button_3 = gr.Button("Remove", size="sm")
 
-    randomize_button.click(
-        randomize_loras,
-        inputs=[selected_indices, loras_state],
-        outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3, prompt]
-    )
+        # Result and Progress Area
+        with gr.Column():
+            progress_bar = gr.Markdown(elem_id="progress", visible=False)
+            result = gr.Image(label="Generated Image", interactive=False)
+            with gr.Accordion("History", open=False):
+                history_gallery = gr.Gallery(label="History", columns=6, object_fit="contain", interactive=False)
 
-    add_custom_lora_button.click(
-        add_custom_lora,
-        inputs=[custom_lora, selected_indices, loras_state],
-        outputs=[loras_state, gallery, selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3]
-    )
+        # Advanced Settings
+        with gr.Row():
+            with gr.Accordion("Advanced Settings", open=False):
+                with gr.Row():
+                    input_image = gr.Image(label="Input image", type="filepath")
+                    image_strength = gr.Slider(label="Denoise Strength", info="Lower means more image influence", minimum=0.1, maximum=1.0, step=0.01, value=0.75)
+                with gr.Column():
+                    with gr.Row():
+                        cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, step=0.5, value=3.5)
+                        steps = gr.Slider(label="Steps", minimum=1, maximum=50, step=1, value=28)
+                    with gr.Row():
+                        width = gr.Slider(label="Width", minimum=256, maximum=1536, step=64, value=1024)
+                        height = gr.Slider(label="Height", minimum=256, maximum=1536, step=64, value=1024)
+                    with gr.Row():
+                        randomize_seed = gr.Checkbox(True, label="Randomize seed")
+                        seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0, randomize=True)
+
+        # Custom LoRA Section
+        with gr.Column():
+            with gr.Group():
+                with gr.Row(elem_id="custom_lora_structure"):
+                    custom_lora = gr.Textbox(label="Custom LoRA", info="LoRA Hugging Face path or *.safetensors public URL", placeholder="ginipick/flux-lora-eric-cat", scale=3, min_width=150)
+                    add_custom_lora_button = gr.Button("Add Custom LoRA", elem_id="custom_lora_btn", scale=2, min_width=150)
+                remove_custom_lora_button = gr.Button("Remove Custom LoRA", visible=False)
+                gr.Markdown("[Check the list of FLUX LoRAs](https://huggingface.co/models?other=base_model:adapter:black-forest-labs/FLUX.1-dev)", elem_id="lora_list")
 
-    remove_custom_lora_button.click(
-        remove_custom_lora,
-        inputs=[selected_indices, loras_state],
-        outputs=[loras_state, gallery, selected_info_1, selected_info_2, selected_info_3, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, lora_image_1, lora_image_2, lora_image_3]
-    )
 
-    gr.on(
-        triggers=[generate_button.click, prompt.submit],
-        fn=run_lora,
-        inputs=[prompt, input_image, image_strength, cfg_scale, steps, selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, randomize_seed, seed, width, height, loras_state],
-        outputs=[result, seed, progress_bar]
-    ).then(
-        fn=lambda x, history: update_history(x, history) if x is not None else history,
-        inputs=[result, history_gallery],
-        outputs=history_gallery,
-    )
+        # Event Handlers
+        gallery.select(
+            update_selection,
+            inputs=[selected_indices, loras_state, width, height],
+            outputs=[prompt, selected_info_1, selected_info_2, selected_info_3, selected_indices, 
+                    lora_scale_1, lora_scale_2, lora_scale_3, width, height, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        remove_button_1.click(
+            remove_lora_1,
+            inputs=[selected_indices, loras_state],
+            outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, 
+                    lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        remove_button_2.click(
+            remove_lora_2,
+            inputs=[selected_indices, loras_state],
+            outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, 
+                    lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        remove_button_3.click(
+            remove_lora_3,
+            inputs=[selected_indices, loras_state],
+            outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, 
+                    lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        randomize_button.click(
+            randomize_loras,
+            inputs=[selected_indices, loras_state],
+            outputs=[selected_info_1, selected_info_2, selected_info_3, selected_indices, 
+                    lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3, prompt]
+        )
+
+        add_custom_lora_button.click(
+            add_custom_lora,
+            inputs=[custom_lora, selected_indices, loras_state],
+            outputs=[loras_state, gallery, selected_info_1, selected_info_2, selected_info_3, 
+                    selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        remove_custom_lora_button.click(
+            remove_custom_lora,
+            inputs=[selected_indices, loras_state],
+            outputs=[loras_state, gallery, selected_info_1, selected_info_2, selected_info_3, 
+                    selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, 
+                    lora_image_1, lora_image_2, lora_image_3]
+        )
+
+        gr.on(
+            triggers=[generate_button.click, prompt.submit],
+            fn=run_lora,
+            inputs=[prompt, input_image, image_strength, cfg_scale, steps, 
+                   selected_indices, lora_scale_1, lora_scale_2, lora_scale_3, 
+                   randomize_seed, seed, width, height, loras_state],
+            outputs=[result, seed, progress_bar]
+        ).then(
+            fn=lambda x, history: update_history(x, history) if x is not None else history,
+            inputs=[result, history_gallery],
+            outputs=history_gallery,
+        )
 
 if __name__ == "__main__":
     app.queue(max_size=20)