Update app.py

app.py

@@ -81,39 +81,111 @@ def infer(prompt, negative_prompt, seed, randomize_seed, width, height, guidance
 css = """
 #col-container {
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 100%;
+    padding: 0 1rem;
+}
+
+/* プロンプト入力エリアのスタイル */
+.prompt-input {
+    min-height: 100px !important;
+    font-size: 16px !important;
+    line-height: 1.5 !important;
+    padding: 12px !important;
+    border-radius: 8px !important;
+    border: 1px solid #e0e0e0 !important;
+    background-color: #ffffff !important;
+}
+
+.prompt-input:focus {
+    border-color: #2196f3 !important;
+    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;
+    border-radius: 8px !important;
+    background-color: #2196f3 !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+}
+
+.generate-button:hover {
+    background-color: #1976d2 !important;
+    transform: translateY(-1px) !important;
+}
+
+/* スマートフォン対応 */
+@media (max-width: 768px) {
+    #col-container {
+        padding: 0 0.5rem;
+    }
+    
+    .prompt-input {
+        font-size: 16px !important;
+    }
+    
+    .advanced-settings {
+        margin-top: 1rem;
+    }
+}
+
+/* 結果画像のコンテナ */
+#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;
 }
 """
 
 with gr.Blocks(css=css) as demo:
     with gr.Column(elem_id="col-container"):
         gr.Markdown("""
-         Text-to-Image Demo
-        using [Noob SDXL beta model](https://huggingface.co/Laxhar)
+        # Text-to-Image Demo
+        Using [Noob SDXL beta model](https://huggingface.co/Laxhar) to generate amazing images!
         """)
         
-        with gr.Row():
-            prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
+        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"
             )
-            run_button = gr.Button("Run", scale=0)
 
         result = gr.Image(
-            label="Result",
-            show_label=False,
+            label="Generated Image",
+            show_label=True,
             type="filepath",
             elem_id="output_image"
         )
         
-        with gr.Accordion("Advanced Settings", open=False):
-            negative_prompt = gr.Text(
-                label="Negative prompt",
-                max_lines=1,
-                placeholder="Enter a negative prompt",
+        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"
             )
 
@@ -125,7 +197,11 @@ with gr.Blocks(css=css) as demo:
                 value=0,
             )
 
-            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+            randomize_seed = gr.Checkbox(
+                label="Randomize seed",
+                value=True,
+                info="Generate different results each time"
+            )
 
             with gr.Row():
                 width = gr.Slider(
@@ -146,19 +222,21 @@ with gr.Blocks(css=css) as demo:
 
             with gr.Row():
                 guidance_scale = gr.Slider(
-                    label="Guidance scale",
+                    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="Number of inference steps",
+                    label="Number of Steps",
                     minimum=1,
                     maximum=28,
                     step=1,
                     value=28,
+                    info="More steps = higher quality but slower generation"
                 )
 
     run_button.click(