Update app.py

app.py

@@ -81,11 +81,26 @@ def infer(prompt, negative_prompt, seed, randomize_seed, width, height, guidance
 css = """
 #col-container {
     margin: 0 auto;
-    max-width: 100%;
+    width: 100%;
+    max-width: 1200px;
     padding: 0 1rem;
 }
 
-/* プロンプト入力エリアのスタイル */
+/* デスクトップレイアウト用のグリッド */
+.desktop-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
+}
+
+/* プロンプト入力エリア */
+.prompt-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
 .prompt-input {
     min-height: 100px !important;
     font-size: 16px !important;
@@ -94,6 +109,7 @@ css = """
     border-radius: 8px !important;
     border: 1px solid #e0e0e0 !important;
     background-color: #ffffff !important;
+    resize: vertical !important;
 }
 
 .prompt-input:focus {
@@ -101,9 +117,8 @@ css = """
     box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1) !important;
 }
 
-/* ボタンのスタイル */
+/* 生成ボタン */
 .generate-button {
-    margin-top: 1rem !important;
     padding: 12px 24px !important;
     font-size: 16px !important;
     font-weight: 600 !important;
@@ -111,6 +126,7 @@ css = """
     background-color: #2196f3 !important;
     color: white !important;
     transition: all 0.3s ease !important;
+    margin: 1rem 0 !important;
 }
 
 .generate-button:hover {
@@ -118,8 +134,27 @@ css = """
     transform: translateY(-1px) !important;
 }
 
-/* スマートフォン対応 */
+/* 結果画像 */
+#output_image {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* アコーディオン */
+.advanced-settings {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 1rem;
+}
+
+/* スマートフォン対応 - 768px以下の画面 */
 @media (max-width: 768px) {
+    .desktop-layout {
+        display: block;
+    }
+    
     #col-container {
         padding: 0 0.5rem;
     }
@@ -133,20 +168,15 @@ css = """
     }
 }
 
-/* 結果画像のコンテナ */
-#output_image {
-    margin-top: 1rem;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* アコーディオンのスタイル */
-.advanced-settings {
-    margin-top: 2rem;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    overflow: hidden;
+/* タブレット対応 - 768px以上1024px以下の画面 */
+@media (min-width: 769px) and (max-width: 1024px) {
+    .desktop-layout {
+        gap: 1rem;
+    }
+    
+    #col-container {
+        max-width: 900px;
+    }
 }
 """
 
@@ -157,86 +187,87 @@ with gr.Blocks(css=css) as demo:
         Using [Noob SDXL beta model](https://huggingface.co/Laxhar) to generate amazing images!
         """)
         
-        with gr.Group():
-            prompt = gr.Textbox(
-                label="What would you like to create?",
-                elem_classes="prompt-input",
-                lines=3,
-                placeholder="Describe the image you want to generate. Be specific about details, style, and atmosphere.\n\nExample: 'A serene mountain landscape at sunset, with snow-capped peaks and a clear lake reflection, painted in watercolor style'",
-                show_label=True,
-            )
-            
-            run_button = gr.Button(
-                "✨ Generate Image",
-                elem_classes="generate-button",
-                variant="primary",
-                scale=1,
-                size="lg"
-            )
-
-        result = gr.Image(
-            label="Generated Image",
-            show_label=True,
-            type="filepath",
-            elem_id="output_image"
-        )
-        
-        with gr.Accordion("Advanced Settings", open=False, elem_classes="advanced-settings"):
-            negative_prompt = gr.Textbox(
-                label="Negative Prompt",
-                lines=2,
-                placeholder="Specify what you don't want in the image. Example: nsfw, low quality, blur, etc.",
-                value="nsfw, (low quality, worst quality:1.2), very displeasing, 3d, watermark, signature, ugly, poorly drawn"
-            )
-
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
-            )
-
-            randomize_seed = gr.Checkbox(
-                label="Randomize seed",
-                value=True,
-                info="Generate different results each time"
-            )
-
-            with gr.Row():
-                width = gr.Slider(
-                    label="Width",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
+        with gr.Column(elem_classes="desktop-layout"):
+            # 左カラム - 入力コントロール
+            with gr.Column(elem_classes="prompt-container"):
+                prompt = gr.Textbox(
+                    label="What would you like to create?",
+                    elem_classes="prompt-input",
+                    lines=3,
+                    placeholder="Describe the image you want to generate. Be specific about details, style, and atmosphere.\n\nExample: 'A serene mountain landscape at sunset, with snow-capped peaks and a clear lake reflection, painted in watercolor style'",
+                    show_label=True,
                 )
+                
+                with gr.Accordion("Advanced Settings", open=False, elem_classes="advanced-settings"):
+                    negative_prompt = gr.Textbox(
+                        label="Negative Prompt",
+                        lines=2,
+                        placeholder="Specify what you don't want in the image",
+                        value="nsfw, (low quality, worst quality:1.2), very displeasing, 3d, watermark, signature, ugly, poorly drawn"
+                    )
 
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
-                )
+                    with gr.Row():
+                        with gr.Column(scale=3):
+                            seed = gr.Slider(
+                                label="Seed",
+                                minimum=0,
+                                maximum=MAX_SEED,
+                                step=1,
+                                value=0,
+                            )
+                        with gr.Column(scale=1):
+                            randomize_seed = gr.Checkbox(
+                                label="Randomize",
+                                value=True,
+                            )
+
+                    with gr.Row():
+                        width = gr.Slider(
+                            label="Width",
+                            minimum=256,
+                            maximum=MAX_IMAGE_SIZE,
+                            step=32,
+                            value=1024,
+                        )
+                        height = gr.Slider(
+                            label="Height",
+                            minimum=256,
+                            maximum=MAX_IMAGE_SIZE,
+                            step=32,
+                            value=1024,
+                        )
+
+                    with gr.Row():
+                        guidance_scale = gr.Slider(
+                            label="Guidance Scale",
+                            minimum=0.0,
+                            maximum=20.0,
+                            step=0.1,
+                            value=7,
+                            info="Controls how closely the image follows the prompt"
+                        )
+                        num_inference_steps = gr.Slider(
+                            label="Steps",
+                            minimum=1,
+                            maximum=28,
+                            step=1,
+                            value=28,
+                            info="More steps = higher quality"
+                        )
 
-            with gr.Row():
-                guidance_scale = gr.Slider(
-                    label="Guidance Scale",
-                    minimum=0.0,
-                    maximum=20.0,
-                    step=0.1,
-                    value=7,
-                    info="Controls how closely the image follows the prompt"
+                run_button = gr.Button(
+                    "✨ Generate Image",
+                    elem_classes="generate-button",
+                    variant="primary",
                 )
 
-                num_inference_steps = gr.Slider(
-                    label="Number of Steps",
-                    minimum=1,
-                    maximum=28,
-                    step=1,
-                    value=28,
-                    info="More steps = higher quality but slower generation"
+            # 右カラム - 生成結果
+            with gr.Column():
+                result = gr.Image(
+                    label="Generated Image",
+                    show_label=True,
+                    type="filepath",
+                    elem_id="output_image"
                 )
 
     run_button.click(