Update app.py

app.py

@@ -286,45 +286,48 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
             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>
-                <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>
-        """)
+        # 인터랙티브 예제 프롬프트 영역
+        gr.Markdown("## Example Prompts")
+        example_prompts = [
+            {
+                "title": "🌅 Cinematic Landscape", 
+                "prompt": "A breathtaking mountain vista at golden hour with dramatic sunbeams piercing through a sea of clouds, snow-capped peaks reflecting warm light, ultra-high detail photography, and an award-winning landscape composition reminiscent of a masterpiece captured on Hasselblad."
+            },
+            {
+                "title": "🖼️ Fantasy Portrait", 
+                "prompt": "An ethereal portrait of an elven queen with flowing silver hair, adorned with shimmering luminescent crystals and an intricate crown of twisted gold and moonstone, bathed in soft, magical lighting with highly detailed facial features that evoke ancient mysticism."
+            },
+            {
+                "title": "🌃 Cyberpunk Scene", 
+                "prompt": "A neon-drenched cyberpunk street market in torrential rain, with holographic advertisements reflecting off wet asphalt, futuristic street vendors, and a dense urban atmosphere reminiscent of Blade Runner 2049, all rendered in vivid cinematic style."
+            },
+            {
+                "title": "🎨 Abstract Art", 
+                "prompt": "A vibrant abstract composition of flowing liquid colors, dynamic swirls of iridescent purples, teals, and gold, with geometric patterns emerging from chaos—an explosion of creativity that evokes modern expressionist masterpieces."
+            },
+            {
+                "title": "🌿 Macro Nature", 
+                "prompt": "An extreme macro photograph capturing a dewdrop delicately perched on a butterfly wing, revealing intricate wing scales and rainbow refractions of light, set against a naturally blurred bokeh background, like a high-end studio shot."
+            },
+            {
+                "title": "🤖 Futuristic Cityscape", 
+                "prompt": "A vibrant futuristic cityscape at night illuminated by neon lights, holographic billboards, and flying vehicles; towering skyscrapers and a bustling urban atmosphere rendered in ultra-detailed, cinematic style."
+            },
+            {
+                "title": "🧚 Enchanted Forest", 
+                "prompt": "A mystical, enchanted forest bathed in soft, ethereal light, filled with luminescent flora, magical creatures, and ancient trees draped in moss—evoking a dreamlike fairy tale ambiance with intricate details."
+            },
+            {
+                "title": "🌌 Cosmic Explosion", 
+                "prompt": "A stunning cosmic explosion in deep space, with vibrant nebulae, swirling galaxies, and a burst of radiant colors illuminating the cosmos—captured in high-resolution digital art that is both ethereal and awe-inspiring."
+            }
+        ]
+        # 각 예제마다 버튼을 만들어 클릭 시 prompt에 해당 문구가 자동 삽입되도록 함
+        for ex in example_prompts:
+            btn = gr.Button(ex["title"], variant="secondary")
+            # 기본 매개변수로 ex["prompt"]를 캡처하여, 버튼 클릭 시 프롬프트에 해당 텍스트를 반환
+            btn.click(fn=lambda prompt_text=ex["prompt"]: prompt_text, inputs=[], outputs=prompt)
+            gr.Markdown(f"*{ex['prompt']}*")
     
     with gr.Column():
         # 메인 영역: 생성된 이미지와 갤러리 표시