Update app.py

app.py

@@ -581,6 +581,19 @@ css = '''
 #component-11{align-self: stretch;}
 
 
+/* 갤러리 메인 컨테이너 */
+#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;
+}
+
 /* 갤러리 메인 컨테이너 */
 #lora_gallery {
     margin: 20px 0;
@@ -606,7 +619,6 @@ css = '''
     max-width: 100% !important;
 }
 
-/* 갤러리 아이템 */
 .gallery-item {
     position: relative !important;
     width: 100% !important;
@@ -616,10 +628,8 @@ css = '''
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-radius: 12px;
     overflow: hidden;
-    flex: 1 1 calc(16.666% - 15px) !important;
 }
 
-/* 갤러리 이미지 */
 .gallery-item img {
     width: 100% !important;
     height: 100% !important;
@@ -627,43 +637,35 @@ css = '''
     border-radius: 12px !important;
 }
 
-/* 갤러리 그리드 래퍼 */
-.grid-wrap, .grid-container {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    display: block !important;
-}
-
-/* Gradio 컨테이너 수정 */
-.gradio-container {
-    width: 100% !important;
-    max-width: none !important;
-}
-
-.gradio-container .contain {
+/* 갤러리 그리드 래퍼 수정 */
+.wrap.svelte-w6dy5e {
+    display: grid !important;
+    grid-template-columns: repeat(6, 1fr) !important;
+    gap: 15px !important;
     width: 100% !important;
-    max-width: 100% !important;
-    display: block !important;
 }
 
-/* 행 컨테이너 수정 */
-.row > * {
+/* 갤러리 컨테이너 강제 설정 */
+.container, .content {
     width: 100% !important;
     max-width: 100% !important;
 }
 
-/* 갤러리 컨테이너 강제 설정 */
-.gallery-container {
+/* 이미지 컨테이너 설정 */
+.image-container {
     width: 100% !important;
-    max-width: 100% !important;
-    display: block !important;
+    padding-bottom: 100% !important;
+    position: relative !important;
 }
 
-/* 갤러리 아이템 컨테이너 */
-.gallery-item-container {
+/* 이미지 설정 */
+.image-container img {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
     width: 100% !important;
-    display: contents !important;
+    height: 100% !important;
+    object-fit: cover !important;
 }
 
 /* 행 설정 */
@@ -734,22 +736,27 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
         갤러리에서 원하는 모델을 선택(최대 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=6,
+            columns=[6],  # 수정
+            rows=None,
             elem_id="gallery",
-            height="800px",
+            height=800,
             object_fit="cover",
             show_label=True,
             allow_preview=False,
             show_share_button=False,
-            scale=1,
-            min_width="100%",  # 수정
             container=True,
+            scale=1,
+            min_width=1200,
+            visible=True,
+            show_download_button=False,
             preview=False
-        )
+        )    
+
 
         
     with gr.Tab(label="Generate"):