Update app.py

app.py

@@ -564,7 +564,6 @@ css = '''
 #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}
@@ -581,47 +580,76 @@ css = '''
 #random_btn{font-size: 300%}
 #component-11{align-self: stretch;}
 
+/* 갤러리 메인 컨테이너 */
 #lora_gallery {
     margin: 20px 0;
     padding: 10px;
     border: 1px solid #ddd;
-    border-radius: 8px;
-    background: white;
+    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), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
 }
 
+/* 갤러리 그리드 컨테이너 */
 #gallery {
     display: grid !important;
     grid-template-columns: repeat(6, 1fr) !important;
-    gap: 10px !important;
-    padding: 10px !important;
+    gap: 15px !important;
+    padding: 15px !important;
     width: 100% !important;
     height: 100% !important;
     overflow-y: auto !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: 4px !important;
+    border-radius: 12px !important;
+}
+
+/* 갤러리 아이템 호버 효과 */
+.gallery-item:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    z-index: 1;
 }
 
-.
+/* 갤러리 그리드 래퍼 */
+.grid-wrap {
+    width: 100% !important;
+    height: 100% !important;
+    overflow: visible !important;
+}
 
-/* 갤러리 컨테이너 강제 너비 설정 */
+/* 갤러리 컨테이너 기본 설정 */
 .gradio-container {
     width: 100% !important;
     max-width: none !important;
 }
 
-/* 행 강제 너비 설정 */
+/* 행 설정 */
 .row {
     width: 100% !important;
     margin: 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);
@@ -633,25 +661,6 @@ css = '''
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-/* 갤러리 아이템 입체감 */
-.gallery-item {
-    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:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-/* 입체감 있는 컨테이너 */
-#lora_gallery {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
-}
-
 /* 입체감 있는 입력 필드 */
 input, textarea {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
@@ -665,12 +674,29 @@ input:focus, textarea:focus {
 /* 컴포넌트들의 border-radius 설정 */
 .gradio-container .input, 
 .gradio-container .button,
-.gradio-container .block,
-.gallery-item,
-#lora_gallery {
+.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;
+}
+
 #footer {visibility: hidden;}
 '''
 
@@ -686,24 +712,31 @@ with gr.Blocks(theme=custom_theme, css=css, delete_cache=(60, 3600)) as app:
         갤러리에서 원하는 모델을 선택(최대 3개까지) < 프롬프트에 한글 또는 영문으로 원하는 내용을 입력 < Generate 버튼 실행  
         """
     )
-
-    # Row에서 theme 매개변수 제거
+# Gallery 컴포넌트 수정
     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,
-            rows=None,
+            rows="auto",  # 자동 행 조정
             elem_id="gallery",
-            height=800,
+            height="800px",
             object_fit="cover",
             show_label=True,
             allow_preview=False,
             show_share_button=False,
-            container=True,
             scale=1,
             min_width=1200
+        ).style(
+            grid_cols=6,
+            grid_rows="auto",
+            height="800px",
+            width="100%",
+            container=True,
+            full_width=True
         )
+
+    
         
     with gr.Tab(label="Generate"):
         # Prompt and Generate Button