Update app.py

app.py

@@ -1,89 +1,104 @@
 import gradio as gr
+from PIL import Image
+import time
 
-# --- CSS: 喫茶店風スタイルとカスタムスピナー ---
-custom_css = r'''
-<style>
-body {
-    background: #fdf6f0;
-    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
-    color: #4b2e2e;
-}
-.gradio-container {
-    background-color: #fffaf3 !important;
-    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    padding: 20px;
-}
-#custom-loader {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.2em;
-    margin-top: 1em;
-    color: #7b4c4c;
-}
-#custom-loader img {
-    width: 32px;
-    height: 32px;
-    margin-left: 8px;
-    border-radius: 50%;
-    animation: spin 1.5s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-</style>
-'''
+def generate_image(text):
+    time.sleep(2)
+    img = Image.new('RGB', (256, 256), color='burlywood')
+    return img
+
+def main():
+    with gr.Blocks() as demo:
+        gr.HTML("""
+        <style>
+        body {
+            background-color: #fdf6e3;
+            font-family: 'Segoe UI', sans-serif;
+            color: #5b4636;
+        }
+        .input-card {
+            background: #fff3e0;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+            width: fit-content;
+        }
+        .title {
+            font-size: 24px;
+            margin-bottom: 16px;
+        }
+        .footer {
+            text-align: center;
+            margin-top: 2em;
+            color: #a1887f;
+        }
+        #component-0 > div > div.wrap.loading,
+        .loading-box, .loading { display: none !important; }
+        #custom-loader {
+          display: none;
+          justify-content: center;
+          align-items: center;
+          font-size: 1.2em;
+          margin-top: 1em;
+          color: #7b4c4c;
+        }
+        #custom-loader img {
+          width: 32px;
+          height: 32px;
+          margin-left: 8px;
+          border-radius: 50%;
+          animation: spin 1.5s linear infinite;
+        }
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        </style>
 
-# --- HTML: カスタムスピナー表示部分 ---
-custom_loader_html = r'''
-<div id="custom-loader">
-    画像を生成中です...
-    <img src="/icon.png" alt="loading icon">
-</div>
-'''
+        <div id="custom-loader">
+          画像を生成中です...
+          <img src="/icon.png" alt="loading icon">
+        </div>
 
-# --- スピナー制御用JS ---
-custom_js = r'''
-<script>
-    function showLoader() {
-        const loader = document.getElementById("custom-loader");
-        if (loader) loader.style.display = "flex";
-    }
-    function hideLoader() {
-        const loader = document.getElementById("custom-loader");
-        if (loader) loader.style.display = "none";
-    }
-    window.addEventListener("DOMContentLoaded", () => {
-        const btns = document.querySelectorAll("button");
-        btns.forEach(btn => {
-            btn.addEventListener("click", showLoader);
+        <script>
+        function showLoader() {
+          const loader = document.getElementById("custom-loader");
+          if (loader) loader.style.display = "flex";
+        }
+        function hideLoader() {
+          const loader = document.getElementById("custom-loader");
+          if (loader) loader.style.display = "none";
+        }
+        window.addEventListener("DOMContentLoaded", () => {
+          const btn = document.querySelector('button');
+          if (btn) {
+            btn.addEventListener("click", () => {
+              showLoader();
+              setTimeout(() => hideLoader(), 6000);
+            });
+          }
         });
-        const observer = new MutationObserver(hideLoader);
-        observer.observe(document.body, { childList: true, subtree: true });
-    });
-</script>
-'''
+        </script>
+        """)
 
-# --- メイン処理（仮の画像生成関数） ---
-def generate_image(text):
-    from PIL import Image, ImageDraw
-    img = Image.new("RGB", (256, 256), color=(253, 246, 240))
-    d = ImageDraw.Draw(img)
-    d.text((10, 100), text, fill=(75, 46, 46))
-    return img
+        with gr.Row():
+            with gr.Column(elem_classes="input-card"):
+                gr.Markdown("# ほっとする画像生成器")
+                text_input = gr.Textbox(label="キーワードを入力してください")
+                submit_btn = gr.Button("生成する")
+
+        image_output = gr.Image(label="生成された画像")
 
-with gr.Blocks() as demo:
-    gr.HTML(custom_css + custom_loader_html + custom_js)
+        submit_btn.click(fn=generate_image, inputs=text_input, outputs=image_output)
 
-    with gr.Row():
-        with gr.Column():
-            prompt = gr.Textbox(label="プロンプト", placeholder="ほっとする言葉を入力してね")
-            submit = gr.Button("画像生成")
-        with gr.Column():
-            gallery = gr.Image(label="生成された画像", elem_id="result", show_label=False)
+        gr.HTML("""
+        <div class="footer">
+            まるで喫茶店のような温かみのあるアプリです ☕
+        </div>
+        """)
 
-    submit.click(fn=generate_image, inputs=prompt, outputs=gallery)
+    demo.launch()
 
-demo.launch()
+if __name__ == "__main__":
+    main()