Update app.py

app.py

@@ -560,26 +560,107 @@ custom_theme = gr.themes.Base(
 )
 
 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}
-#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}
-.card_internal img{margin-right: 1em}
-.styler{--form-gap-width: 0px !important}
-#progress{height:30px}
-#progress .generating{display:none}
-.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}
-.progress-bar {height: 100%;background-color: #4f46e5;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
-#component-8, .button_total{height: 100%; align-self: stretch;}
-#loaded_loras [data-testid="block-info"]{font-size:80%}
-#custom_lora_structure{background: var(--block-background-fill)}
-#custom_lora_btn{margin-top: auto;margin-bottom: 11px}
-#random_btn{font-size: 300%}
-#component-11{align-self: stretch;}
+/* 기본 버튼 및 컴포넌트 스타일 */
+#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
+}
+
+#lora_list {
+    background: var(--block-background-fill);
+    padding: 0 1em .3em; 
+    font-size: 90%
+}
+
+/* 커스텀 LoRA 카드 스타일 */
+.custom_lora_card {
+    margin-bottom: 1em
+}
+
+.card_internal {
+    display: flex;
+    height: 100px;
+    margin-top: .5em
+}
+
+.card_internal img {
+    margin-right: 1em
+}
+
+/* 유틸리티 클래스 */
+.styler {
+    --form-gap-width: 0px !important
+}
+
+/* 프로그레스 바 스타일 */
+#progress {
+    height: 30px;
+    width: 90% !important;
+    margin: 0 auto !important;
+}
 
+#progress .generating {
+    display: none
+}
+
+.progress-container {
+    width: 100%;
+    height: 30px;
+    background-color: #f0f0f0;
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: 20px
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: #4f46e5;
+    width: calc(var(--current) / var(--total) * 100%);
+    transition: width 0.5s ease-in-out
+}
+
+/* 컴포넌트 특정 스타일 */
+#component-8, .button_total {
+    height: 100%; 
+    align-self: stretch;
+}
+
+#loaded_loras [data-testid="block-info"] {
+    font-size: 80%
+}
+
+#custom_lora_structure {
+    background: var(--block-background-fill)
+}
+
+#custom_lora_btn {
+    margin-top: auto;
+    margin-bottom: 11px
+}
+
+#random_btn {
+    font-size: 300%
+}
+
+#component-11 {
+    align-self: stretch;
+}
+
+/* 갤러리 메인 스타일 */
 #lora_gallery {
     margin: 20px 0;
     padding: 10px;
@@ -592,7 +673,7 @@ css = '''
     display: block !important;
 }
 
-/* 갤러리 그리드 컨테이너 */
+/* 갤러리 그리드 스타일 */
 #gallery {
     display: grid !important;
     grid-template-columns: repeat(10, 1fr) !important;
@@ -604,7 +685,7 @@ css = '''
     max-width: 100% !important;
 }
 
-/* 갤러리 아이템 */
+/* 갤러리 아이템 스타일 */
 .gallery-item {
     position: relative !important;
     width: 100% !important;
@@ -616,7 +697,6 @@ css = '''
     overflow: hidden;
 }
 
-/* 갤러리 이미지 */
 .gallery-item img {
     width: 100% !important;
     height: 100% !important;
@@ -627,13 +707,13 @@ css = '''
 /* 갤러리 그리드 래퍼 */
 .wrap, .svelte-w6dy5e {
     display: grid !important;
-    grid-template-columns: repeat(10, 1fr) !important;  /* 10개로 통일 */
+    grid-template-columns: repeat(10, 1fr) !important;
     gap: 10px !important;
     width: 100% !important;
     max-width: 100% !important;
 }
 
-/* 모든 컨테이너 공통 설정 */
+/* 컨테이너 공통 스타일 */
 .container, .content, .block, .contain {
     width: 100% !important;
     max-width: 100% !important;
@@ -641,14 +721,13 @@ css = '''
     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;
@@ -659,7 +738,7 @@ css = '''
     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;
@@ -669,14 +748,14 @@ input:focus, textarea:focus {
     box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
 }
 
-/* 컴포넌트들의 border-radius 설정 */
+/* 컴포넌트 border-radius */
 .gradio-container .input, 
 .gradio-container .button,
 .gradio-container .block {
     border-radius: 12px;
 }
 
-/* 갤러리 스크롤바 스타일링 */
+/* 스크롤바 스타일 */
 #gallery::-webkit-scrollbar {
     width: 8px;
 }
@@ -695,96 +774,56 @@ input:focus, textarea:focus {
     background: #555;
 }
 
-/* 갤러리 flex 컨테이너 */
+/* Flex 컨테이너 */
 .flex {
     width: 100% !important;
     max-width: 100% !important;
     display: flex !important;
 }
 
-/* svelte 특정 클래스 */
+/* Svelte 특정 클래스 */
 .svelte-1p9xokt {
     width: 100% !important;
     max-width: 100% !important;
 }
 
-#footer {visibility: hidden;}
-
-/* 갤러리 컨테이너 클래스 */
-.gallery-container {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-/* 생성된 이미지 결과 박스 크기 조정 (10% 축소) */
-.generated-image {
-    width: 90% !important;  /* 100%에서 90%로 축소 */
-    max-width: 90% !important;
-    margin: 0 auto !important;  /* 중앙 정렬을 위해 */
-}
-
-/* 결과 이미지 컨테이너 크기 조정 */
-.result-container {
-    width: 90% !important;
-    max-width: 90% !important;
-    margin: 0 auto !important;
+/* Footer 숨김 */
+#footer {
+    visibility: hidden;
 }
 
-/* Progress bar 크기 조정 */
-#progress {
-    width: 90% !important;
+/* 결과 이미지 및 컨테이너 스타일 */
+#result_column, #result_column > div {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    width: 100% !important;
     margin: 0 auto !important;
 }
 
-/* History gallery 크기 조정 */
-.history-gallery {
+.generated-image, .generated-image > div {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
     width: 90% !important;
-    max-width: 90% !important;
+    max-width: 768px !important;
     margin: 0 auto !important;
 }
 
-/* 결과 이미지와 히스토리 갤러리 크기 조절 */
-.generated-image {
-    width: 90% !important;
+.generated-image img {
     margin: 0 auto !important;
+    display: block !important;
+    max-width: 100% !important;
 }
 
+/* 히스토리 갤러리 */
 .history-gallery {
+    display: flex !important;
+    justify-content: center !important;
     width: 90% !important;
+    max-width: 90% !important;
     margin: 0 auto !important;
 }
-
-/* 결과 이미지 컨테이너 스타일링 */
-.generated-image > div {
-    width: 90% !important;
-    margin: 0 auto !important;
-}
-
-/* 히스토리 갤러리 컨테이너 스타일링 */
-.history-gallery > div {
-    width: 90% !important;
-    margin: 0 auto !important;
-}
-
-#result_column {
-    display: flex;
-    flex-direction: column;
-    align-items: center;  /* 가운데 정렬 */
-    /* align-items: flex-start;  /* 좌측 정렬을 원할 경우 이 줄을 사용 */ 
-    width: 100%;
-}
-
-#result_image {
-    max-width: 768px;  /* 이미지 최대 너비 설정 */
-    margin: 0 auto;    /* 가운데 정렬을 위한 마진 */
-}
-
-.generated-image {
-    display: flex;
-    justify-content: center;  /* 가운데 정렬 */
-    /* justify-content: flex-start;  /* 좌측 정렬을 원할 경우 이 줄을 사용 */
-    width: 100%;
-}
 '''
 
 with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
@@ -864,16 +903,19 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
                 with gr.Row():
                     remove_button_3 = gr.Button("Remove", size="sm")
 
-        # Result and Progress Area
-        with gr.Column(elem_id="result_column"):  # elem_id 추가
+
+# Result and Progress Area
+        with gr.Column(elem_id="result_column"):
             progress_bar = gr.Markdown(elem_id="progress", visible=False)
-            result = gr.Image(
-                label="Generated Image", 
-                interactive=False,
-                elem_classes=["generated-image"],
-                container=True,
-                elem_id="result_image"  # elem_id 추가
-            )
+            with gr.Box(elem_id="result_box"):  # Box 컴포넌트 추가
+                result = gr.Image(
+                    label="Generated Image", 
+                    interactive=False,
+                    elem_classes=["generated-image"],
+                    container=True,
+                    elem_id="result_image",
+                    width="100%"  # 너비 명시적 지정
+                )
             with gr.Accordion("History", open=False):
                 history_gallery = gr.Gallery(
                     label="History", 
@@ -885,6 +927,7 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
 
 
 
+
         # Advanced Settings
         with gr.Row():
             with gr.Accordion("Advanced Settings", open=False):