Update app.py

app.py

@@ -45,8 +45,15 @@ pipe.to(device="cuda", dtype=torch.bfloat16)
 
 css = """
 footer {display: none !important}
-.gradio-container {max-width: 1200px; margin: auto;}
-.contain {background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px;}
+.gradio-container {
+    max-width: 1200px;
+    margin: auto;
+}
+.contain {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+}
 .generate-btn {
     background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
     border: none !important;
@@ -65,48 +72,74 @@ footer {display: none !important}
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+/* Gallery specific styles */
+#gallery {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+}
 .gallery-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-    padding: 10px;
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
+    gap: 16px !important;
+    padding: 16px !important;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     margin-top: 10px;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+/* Force gallery items to maintain aspect ratio */
+.gallery-item {
+    width: 100% !important;
+    aspect-ratio: 1 !important;
+    overflow: hidden !important;
 }
-.gallery-image {
-    width: 100%;
-    aspect-ratio: 1;
-    object-fit: cover;
+.gallery-item img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
     border-radius: 4px;
     transition: transform 0.2s;
 }
-.gallery-image:hover {
+.gallery-item img:hover {
     transform: scale(1.05);
 }
-/* 갤러리와 이미지 출력 컨테이너 너비 통일을 위한 추가 CSS */
-.output-image, #gallery {
+/* Force output image container to full width */
+.output-image {
     width: 100% !important;
+    max-width: 100% !important;
 }
-.container, .content {
+/* Force container widths */
+.contain > div {
     width: 100% !important;
     max-width: 100% !important;
 }
-/* 갤러리 컴포넌트 자체의 너비 조절 */
-.gallery-item {
+.fixed-width {
     width: 100% !important;
     max-width: 100% !important;
 }
-.gallery-item > div {
+/* Remove any horizontal scrolling */
+.gallery-container::-webkit-scrollbar {
+    display: none !important;
+}
+.gallery-container {
+    -ms-overflow-style: none !important;
+    scrollbar-width: none !important;
+}
+/* Ensure consistent sizing for gallery wrapper */
+#gallery > div {
     width: 100% !important;
+    max-width: 100% !important;
 }
-/* 이미지 컨테이너 강제 너비 설정 */
-.fixed-width {
+#gallery > div > div {
     width: 100% !important;
-    max-width: none !important;
+    max-width: 100% !important;
 }
 """
 
+
 def save_image(image):
     """Save the generated image and return the path"""
     timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
@@ -223,8 +256,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                 elem_id="output-image",
                 elem_classes=["output-image", "fixed-width"]
             )
+
     
-    # Gallery of generated images
             gallery = gr.Gallery(
                 label="Generated Images Gallery",
                 show_label=True,
@@ -232,9 +265,11 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                 columns=[4],
                 rows=[2],
                 height="auto",
-                object_fit="contain",
+                object_fit="cover",
                 elem_classes=["gallery-container", "fixed-width"]
             )
+            
+
 
             
             # Load existing gallery images on startup