Update app.py

app.py

@@ -222,7 +222,10 @@ def load_gallery():
         print(f"Error loading gallery: {str(e)}")
         return []
 
-# Create Gradio interface
+def get_random_seed():
+    return torch.randint(0, 1000000, (1,)).item()
+
+# Create Gradio interface with a left sidebar for inputs
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.HTML('<div class="title">AI Image Generator</div>')
     gr.HTML('<div style="text-align: center; margin-bottom: 2em; color: #666;">Create stunning images from your descriptions</div>')
@@ -232,123 +235,116 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
             ⚠️ Explicit or inappropriate content cannot be generated.
         </div>
     """)
-
-    with gr.Row():
-        with gr.Column(scale=3):
-            prompt = gr.Textbox(
-                label="Image Description",
-                placeholder="Describe the image you want to create...",
-                lines=3
+    
+    with gr.Sidebar():
+        # 좌측 사이드바 메뉴: 프롬프트 입력 및 고급 설정
+        prompt = gr.Textbox(
+            label="Image Description",
+            placeholder="Describe the image you want to create...",
+            lines=3
+        )
+        
+        with gr.Accordion("Advanced Settings", open=False):
+            height = gr.Slider(
+                label="Height",
+                minimum=256,
+                maximum=1152,
+                step=64,
+                value=1024
             )
-            
-            with gr.Accordion("Advanced Settings", open=False):
-                with gr.Row():
-                    height = gr.Slider(
-                        label="Height",
-                        minimum=256,
-                        maximum=1152,
-                        step=64,
-                        value=1024
-                    )
-                    width = gr.Slider(
-                        label="Width",
-                        minimum=256,
-                        maximum=1152,
-                        step=64,
-                        value=1024
-                    )
-                
-                with gr.Row():
-                    steps = gr.Slider(
-                        label="Inference Steps",
-                        minimum=6,
-                        maximum=25,
-                        step=1,
-                        value=8
-                    )
-                    scales = gr.Slider(
-                        label="Guidance Scale",
-                        minimum=0.0,
-                        maximum=5.0,
-                        step=0.1,
-                        value=3.5
-                    )
-                
-                # get_random_seed 함수를 Advanced Settings 내부에서 정의
-                def get_random_seed():
-                    return torch.randint(0, 1000000, (1,)).item()
-                
-                seed = gr.Number(
-                    label="Seed (random by default, set for reproducibility)",
-                    value=get_random_seed(),
-                    precision=0
+            width = gr.Slider(
+                label="Width",
+                minimum=256,
+                maximum=1152,
+                step=64,
+                value=1024
+            )
+            with gr.Row():
+                steps = gr.Slider(
+                    label="Inference Steps",
+                    minimum=6,
+                    maximum=25,
+                    step=1,
+                    value=8
                 )
-                
-                randomize_seed = gr.Button("🎲 Randomize Seed", elem_classes=["generate-btn"])
-            
-            generate_btn = gr.Button(
-                "✨ Generate Image",
-                elem_classes=["generate-btn"]
+                scales = gr.Slider(
+                    label="Guidance Scale",
+                    minimum=0.0,
+                    maximum=5.0,
+                    step=0.1,
+                    value=3.5
+                )
+            seed = gr.Number(
+                label="Seed (random by default, set for reproducibility)",
+                value=get_random_seed(),
+                precision=0
             )
-            
-            gr.HTML("""
-                <div style="margin-top: 1em; padding: 1em; border-radius: 8px; background: rgba(255, 255, 255, 0.05);">
-                    <h4 style="margin: 0 0 0.5em 0;">Example Prompts:</h4>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌅 Cinematic Landscape</p>
-                        <p style="margin: 0; font-style: italic;">"A breathtaking mountain vista at golden hour, dramatic sunbeams piercing through clouds, snow-capped peaks reflecting warm light, ultra-high detail photography, artistically composed, award-winning landscape photo, shot on Hasselblad"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🖼️ Fantasy Portrait</p>
-                        <p style="margin: 0; font-style: italic;">"Ethereal portrait of an elven queen with flowing silver hair, adorned with luminescent crystals, intricate crown of twisted gold and moonstone, soft ethereal lighting, detailed facial features, fantasy art style, highly detailed, painted by Artgerm and Charlie Bowater"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌃 Cyberpunk Scene</p>
-                        <p style="margin: 0; font-style: italic;">"Neon-lit cyberpunk street market in rain, holographic advertisements reflecting in puddles, street vendors with glowing cyber-augmentations, dense urban environment, atmospheric fog, cinematic lighting, inspired by Blade Runner 2049"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🎨 Abstract Art</p>
-                        <p style="margin: 0; font-style: italic;">"Vibrant abstract composition of flowing liquid colors, dynamic swirls of iridescent purples and teals, golden geometric patterns emerging from chaos, luxury art style, ultra-detailed, painted in oil on canvas, inspired by James Jean and Gustav Klimt"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌿 Macro Nature</p>
-                        <p style="margin: 0; font-style: italic;">"Extreme macro photography of a dewdrop on a butterfly wing, rainbow light refraction, crystalline clarity, intricate wing scales visible, natural bokeh background, professional studio lighting, shot with Canon MP-E 65mm lens"</p>
-                    </div>
-                    <!-- 추가 예제 프롬프트 -->
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🤖 Futuristic Cityscape</p>
-                        <p style="margin: 0; font-style: italic;">"A vibrant futuristic cityscape at night with neon lights, holograms, flying cars, and towering skyscrapers, ultra-detailed, cinematic atmosphere"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🧚 Enchanted Forest</p>
-                        <p style="margin: 0; font-style: italic;">"A mystical enchanted forest filled with luminescent flora, magical creatures, soft ethereal light, ultra-detailed, dreamlike atmosphere"</p>
-                    </div>
-                    <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px;">
-                        <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌌 Cosmic Explosion</p>
-                        <p style="margin: 0; font-style: italic;">"A stunning cosmic explosion in deep space, vibrant nebulae, swirling galaxies, high-resolution digital art, ethereal and awe-inspiring"</p>
-                    </div>
+            randomize_seed = gr.Button("🎲 Randomize Seed", elem_classes=["generate-btn"])
+        
+        generate_btn = gr.Button(
+            "✨ Generate Image",
+            elem_classes=["generate-btn"]
+        )
+        
+        # 예제 프롬프트 영역
+        gr.HTML("""
+            <div style="margin-top: 1em; padding: 1em; border-radius: 8px; background: rgba(255, 255, 255, 0.05);">
+                <h4 style="margin: 0 0 0.5em 0;">Example Prompts:</h4>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌅 Cinematic Landscape</p>
+                    <p style="margin: 0; font-style: italic;">"A breathtaking mountain vista at golden hour, dramatic sunbeams piercing through clouds, snow-capped peaks reflecting warm light, ultra-high detail photography, artistically composed, award-winning landscape photo, shot on Hasselblad"</p>
                 </div>
-            """)
-
-        with gr.Column(scale=4, elem_classes=["fixed-width"]):
-            output = gr.Image(
-                label="Generated Image",
-                elem_id="output-image",
-                elem_classes=["output-image", "fixed-width"]
-            )
-            
-            gallery = gr.Gallery(
-                label="Generated Images Gallery",
-                show_label=True,
-                elem_id="gallery",
-                columns=[4],
-                rows=[2],
-                height="auto",
-                object_fit="cover",
-                elem_classes=["gallery-container", "fixed-width"]
-            )
-            
-            gallery.value = load_gallery()
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🖼️ Fantasy Portrait</p>
+                    <p style="margin: 0; font-style: italic;">"Ethereal portrait of an elven queen with flowing silver hair, adorned with luminescent crystals, intricate crown of twisted gold and moonstone, soft ethereal lighting, detailed facial features, fantasy art style, highly detailed, painted by Artgerm and Charlie Bowater"</p>
+                </div>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌃 Cyberpunk Scene</p>
+                    <p style="margin: 0; font-style: italic;">"Neon-lit cyberpunk street market in rain, holographic advertisements reflecting in puddles, street vendors with glowing cyber-augmentations, dense urban environment, atmospheric fog, cinematic lighting, inspired by Blade Runner 2049"</p>
+                </div>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🎨 Abstract Art</p>
+                    <p style="margin: 0; font-style: italic;">"Vibrant abstract composition of flowing liquid colors, dynamic swirls of iridescent purples and teals, golden geometric patterns emerging from chaos, luxury art style, ultra-detailed, painted in oil on canvas, inspired by James Jean and Gustav Klimt"</p>
+                </div>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌿 Macro Nature</p>
+                    <p style="margin: 0; font-style: italic;">"Extreme macro photography of a dewdrop on a butterfly wing, rainbow light refraction, crystalline clarity, intricate wing scales visible, natural bokeh background, professional studio lighting, shot with Canon MP-E 65mm lens"</p>
+                </div>
+                <!-- 추가 예제 프롬프트 -->
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🤖 Futuristic Cityscape</p>
+                    <p style="margin: 0; font-style: italic;">"A vibrant futuristic cityscape at night with neon lights, holograms, flying cars, and towering skyscrapers, ultra-detailed, cinematic atmosphere"</p>
+                </div>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px; margin-bottom: 1em;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🧚 Enchanted Forest</p>
+                    <p style="margin: 0; font-style: italic;">"A mystical enchanted forest filled with luminescent flora, magical creatures, soft ethereal light, ultra-detailed, dreamlike atmosphere"</p>
+                </div>
+                <div style="background: rgba(75, 121, 161, 0.1); padding: 1em; border-radius: 8px;">
+                    <p style="font-weight: bold; margin: 0 0 0.5em 0;">🌌 Cosmic Explosion</p>
+                    <p style="margin: 0; font-style: italic;">"A stunning cosmic explosion in deep space, vibrant nebulae, swirling galaxies, high-resolution digital art, ethereal and awe-inspiring"</p>
+                </div>
+            </div>
+        """)
+    
+    with gr.Column():
+        # 메인 영역: 생성된 이미지와 갤러리 표시
+        output = gr.Image(
+            label="Generated Image",
+            elem_id="output-image",
+            elem_classes=["output-image", "fixed-width"]
+        )
+        
+        gallery = gr.Gallery(
+            label="Generated Images Gallery",
+            show_label=True,
+            elem_id="gallery",
+            columns=[4],
+            rows=[2],
+            height="auto",
+            object_fit="cover",
+            elem_classes=["gallery-container", "fixed-width"]
+        )
+        gallery.value = load_gallery()
     
     @spaces.GPU
     def process_and_save_image(height, width, steps, scales, prompt, seed):