Update app.py

app.py

@@ -18,55 +18,60 @@ pipe = DiffusionPipeline.from_pretrained(
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 2048
 
-# UI/UX 목업 예시들
+# 교육용 다이어그램 예시
 EXAMPLES = [
     {
-        "title": "Mobile App Wireframe",
-        "prompt": """A clean hand-drawn style wireframe for a mobile banking app:
-        - Title screen with logo
-        - Login screen (username, password, login button)
-        - Dashboard with 3 main sections (balance, transactions, quick actions)
-        - Bottom navigation bar (home, transfers, profile)""",
+        "title": "Water Cycle",
+        "prompt": """A colorful hand-drawn diagram illustrating the water cycle:
+        - Evaporation (arrows from ocean)
+        - Condensation (clouds forming)
+        - Precipitation (rain from clouds)
+        - Collection (rivers, lakes)
+        - Include simple icons: sun, cloud, raindrops
+        - Vibrant educational style""",
         "width": 1024,
         "height": 1024
     },
     {
-        "title": "E-commerce Website Mockup",
-        "prompt": """A sketch-style mockup for an online store homepage:
-        - Header with logo, search bar, cart icon
-        - Featured banner at the top
-        - Product grid with 4 columns, product images, and prices
-        - Minimal color palette, wireframe lines""",
+        "title": "Photosynthesis",
+        "prompt": """An educational diagram of photosynthesis in plants:
+        - Show sunlight, leaves, chloroplast
+        - Indicate CO2 intake, O2 release, glucose production
+        - Simple labeling of main components
+        - Light green, yellow color scheme
+        - Hand-drawn arrows connecting steps""",
         "width": 1024,
         "height": 1024
     },
     {
-        "title": "Blog Layout Wireframe",
-        "prompt": """A hand-drawn wireframe for a personal blog site:
-        - Top nav with logo, About, Contact
-        - Main section with blog post previews (title, short excerpt, read more)
-        - Right sidebar with categories and recent posts
-        - Footer with social media icons""",
+        "title": "Earth's Interior",
+        "prompt": """A cross-sectional diagram of Earth's interior:
+        - Layers: Crust, Mantle, Outer Core, Inner Core
+        - Color-coded layers with labels
+        - Show temperature gradient or simplified representation
+        - Hand-drawn style with bold outlines
+        """,
         "width": 1024,
         "height": 1024
     },
     {
-        "title": "Dashboard Interface Mockup",
-        "prompt": """A pencil-drawn style mockup of an analytics dashboard:
-        - Top bar with logo and user avatar
-        - Left sidebar menu (Overview, Reports, Settings)
-        - Main area with charts: bar chart, line chart, pie chart
-        - Soft grayscale color scheme""",
+        "title": "Simple Chemistry Reaction",
+        "prompt": """A hand-drawn style diagram showing a basic chemistry reaction:
+        - Example: Hydrogen + Oxygen -> Water
+        - Show molecules (H2, O2) combining into H2O
+        - Arrows indicating reaction progress
+        - Educational, minimal color palette
+        - Bubble or beaker icons for lab context""",
         "width": 1024,
         "height": 1024
     },
     {
-        "title": "Social Media App Wireframe",
-        "prompt": """A simple wireframe for a social media mobile app:
-        - Feed of posts (user avatar, text, image thumbnail, like/share buttons)
-        - Top bar with camera icon, app logo
-        - Bottom bar with Home, Search, Notifications, Profile
-        - Light doodle style""",
+        "title": "Human Digestive System",
+        "prompt": """A labeled human digestive system diagram:
+        - Esophagus, Stomach, Intestines, etc.
+        - Illustrate main organs and flow of food
+        - Hand-drawn lines with clear labels
+        - Soft pastel colors for friendly educational look""",
         "width": 1024,
         "height": 1024
     }
@@ -169,8 +174,8 @@ css = """
 with gr.Blocks(css=css) as demo:
     gr.Markdown(
         """
-        <div class="title">GINI Mockup</div>
-        <div class="subtitle">Generate elegant UI/UX wireframes or mockups with FLUX AI</div>
+        <div class="title">GINI Diagram</div>
+        <div class="subtitle">Generate fun and visually appealing educational diagrams with FLUX AI</div>
         """)
 
     with gr.Row(equal_height=True):
@@ -178,13 +183,13 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(elem_id="input-column", scale=2):
             with gr.Group(elem_classes="input-box"):
                 prompt = gr.Text(
-                    label="Mockup Prompt",
-                    placeholder="Enter your UI/UX wireframe or mockup details...",
+                    label="Diagram Prompt",
+                    placeholder="Enter your educational diagram details...",
                     lines=10,
                     elem_classes="prompt-input"
                 )
-                run_button = gr.Button("Generate Mockup", variant="primary")
-                result = gr.Image(label="Generated Mockup")
+                run_button = gr.Button("Generate Diagram", variant="primary")
+                result = gr.Image(label="Generated Diagram")
             
             with gr.Accordion("Advanced Settings", open=False):
                 seed = gr.Slider(
@@ -222,7 +227,7 @@ with gr.Blocks(css=css) as demo:
         
         # 오른쪽 예제 컬럼
         with gr.Column(elem_id="examples-column", scale=1):
-            gr.Markdown("### Example Mockups")
+            gr.Markdown("### Example Educational Diagrams")
             for example in EXAMPLES:
                 with gr.Group(elem_classes="example-card"):
                     gr.Markdown(f"#### {example['title']}")