Update app.py

app.py

@@ -9,7 +9,6 @@ from transformers import pipeline
 from huggingface_hub import login
 
 # Login to Hugging Face Hub with token
-# You need to set the HF_TOKEN environment variable
 hf_token = os.getenv("HF_TOKEN")
 if hf_token:
     login(token=hf_token)
@@ -25,7 +24,7 @@ dtype = torch.bfloat16
 pipe = DiffusionPipeline.from_pretrained(
     "black-forest-labs/FLUX.1-schnell", 
     torch_dtype=dtype,
-    use_auth_token=hf_token  # Use the token for authentication
+    use_auth_token=hf_token
 ).to(device)
 
 MAX_SEED = np.iinfo(np.int32).max
@@ -59,113 +58,285 @@ examples = [
     ["[한글] [스타일: 모던] [색상: 빨강과 검정] [컨셉: 식당] [텍스트: '맛있는집'] [배경: 심플]"],
     ["[Style: Corporate] [Color: Navy and Silver] [Concept: Finance] [Text: 'TRUST'] [Background: Professional]"],
     ["[Style: Dynamic] [Color: Purple and Orange] [Concept: Creative Agency] [Text: 'SPARK'] [Background: Abstract]"],
-    ["[Style: Minimalist] [Color: Red and White] [Concept: Sports] [Text: 'POWER'] [Background: Clean]"]
+    ["[Style: Minimalist] [Color: Red and White] [Concept: Sports] [Text: 'POWER'] [Background: Clean]"],
+    ["[Style: Luxury] [Color: Gold and Black] [Concept: Fashion] [Text: 'ELITE'] [Background: Elegant]"],
+    ["[Style: Tech] [Color: Blue and Green] [Concept: AI Company] [Text: 'NEURAL'] [Background: Futuristic]"]
 ]
 
 css = """
-footer {visibility: hidden}
-.container {max-width: 850px; margin: auto; padding: 20px}
-.title {text-align: center; margin-bottom: 20px}
-#prompt {min-height: 50px}
-#result {min-height: 400px}
-.gr-box {border-radius: 10px; border: 1px solid #ddd}
-"""
+/* Modern dark theme with gradients */
+.container {
+    max-width: 1200px;
+    margin: auto;
+    padding: 30px;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+}
 
+/* Animated title with gradient */
+.title {
+    text-align: center;
+    margin-bottom: 30px;
+    background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
+    background-size: 300% 300%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradient-animation 5s ease infinite;
+    font-size: 3em;
+    font-weight: bold;
+}
 
-def create_snow_effect():
-    # CSS 스타일 정의
-    snow_css = """
-    @keyframes snowfall {
-        0% {
-            transform: translateY(-10vh) translateX(0);
-            opacity: 1;
-        }
-        100% {
-            transform: translateY(100vh) translateX(100px);
-            opacity: 0.3;
-        }
-    }
-    .snowflake {
-        position: fixed;
-        color: white;
-        font-size: 1.5em;
-        user-select: none;
-        z-index: 1000;
-        pointer-events: none;
-        animation: snowfall linear infinite;
+@keyframes gradient-animation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Enhanced input styling */
+#prompt textarea {
+    min-height: 80px;
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px solid rgba(102, 126, 234, 0.3);
+    border-radius: 15px;
+    padding: 15px;
+    transition: all 0.3s ease;
+}
+
+#prompt textarea:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Enhanced button styling */
+.gr-button-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    padding: 15px 40px;
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 30px;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.gr-button-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
+}
+
+/* Result image styling */
+#result {
+    min-height: 500px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.02);
+    margin: 20px 0;
+}
+
+/* Advanced settings styling */
+.gr-accordion {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    margin-top: 20px;
+}
+
+/* Slider styling */
+.gr-slider {
+    margin: 10px 0;
+}
+
+/* Example cards styling */
+.gr-examples {
+    margin-top: 30px;
+    background: rgba(255, 255, 255, 0.02);
+    padding: 20px;
+    border-radius: 15px;
+}
+
+/* Info cards */
+.info-card {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+    border: 1px solid rgba(102, 126, 234, 0.3);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 20px 0;
+}
+
+/* Loading animation */
+.generating {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Footer hidden */
+footer { visibility: hidden; }
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
     }
-    """
-
-    # JavaScript 코드 정의
-    snow_js = """
-    function createSnowflake() {
-        const snowflake = document.createElement('div');
-        snowflake.innerHTML = '💐';
-        snowflake.className = 'snowflake';
-        snowflake.style.left = Math.random() * 100 + 'vw';
-        snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
-        snowflake.style.opacity = Math.random();
-        document.body.appendChild(snowflake);
-        
-        setTimeout(() => {
-            snowflake.remove();
-        }, 5000);
+    .title {
+        font-size: 2em;
     }
-    setInterval(createSnowflake, 200);
-    """
-
-    # CSS와 JavaScript를 결합한 HTML 
-    snow_html = f"""
-    <style>
-        {snow_css}
-    </style>
-    <script>
-        {snow_js}
-    </script>
-    """
-    
-    return gr.HTML(snow_html)
-
+}
+"""
 
 with gr.Blocks(theme="soft", css=css) as demo:
-    create_snow_effect()        
-    gr.HTML("<h1 class='title'>LOGO Generator AI</h1>")
+    gr.HTML("""
+        <div class='container'>
+            <h1 class='title'>LOGO Generator AI</h1>
+            <p style='text-align: center; color: #a0a0a0; font-size: 1.1em; margin-bottom: 30px;'>
+                🎨 Create stunning logos with AI-powered generation • Supports Korean input
+            </p>
+        </div>
+    """)
     
     with gr.Column(elem_id="container"):
+        # Main input section
         with gr.Group():
-            prompt = gr.Text(
-                label="PROMPT",
-                placeholder="Text input Prompt (Korean input supported)",
-                lines=2
+            gr.HTML("<div class='info-card'><h3>💡 Prompt Guide</h3><p>Use structured format: [Style] [Color] [Concept] [Text] [Background]</p></div>")
+            
+            prompt = gr.Textbox(
+                label="✨ Logo Description",
+                placeholder="Describe your logo design (Korean input supported)\nExample: [Style: Modern] [Color: Blue] [Concept: Tech] [Text: 'LOGO'] [Background: Clean]",
+                lines=3,
+                elem_id="prompt"
             )
-            run_button = gr.Button("Generate Logo", variant="primary")
+            
+            with gr.Row():
+                run_button = gr.Button("🚀 Generate Logo", variant="primary", scale=2)
+                clear_button = gr.Button("🗑️ Clear", scale=1)
         
+        # Result section with enhanced layout
         with gr.Row():
-            result = gr.Image(label="Generated Logo", show_label=True)
+            with gr.Column(scale=3):
+                result = gr.Image(
+                    label="Generated Logo", 
+                    show_label=True,
+                    elem_id="result",
+                    interactive=False
+                )
+            
+            with gr.Column(scale=1):
+                gr.HTML("<div class='info-card'><h4>📊 Generation Info</h4></div>")
+                seed_output = gr.Number(label="Seed Used", interactive=False)
+                download_btn = gr.Button("📥 Download Logo", variant="secondary")
         
-        with gr.Accordion("Advanced Settings", open=False):
-            with gr.Row():
-                seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
-                randomize_seed = gr.Checkbox(label="Random Seed", value=True)
+        # Advanced settings with better organization
+        with gr.Accordion("⚙️ Advanced Settings", open=False):
+            with gr.Tab("Generation"):
+                with gr.Row():
+                    seed = gr.Slider(
+                        label="Seed", 
+                        minimum=0, 
+                        maximum=MAX_SEED, 
+                        step=1, 
+                        value=0,
+                        info="Set to 0 for random seed"
+                    )
+                    randomize_seed = gr.Checkbox(
+                        label="Random Seed", 
+                        value=True,
+                        info="Generate unique results each time"
+                    )
+                
+                num_inference_steps = gr.Slider(
+                    label="Quality Steps", 
+                    minimum=1, 
+                    maximum=50, 
+                    step=1, 
+                    value=4,
+                    info="Higher = better quality but slower"
+                )
             
-            with gr.Row():
-                width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=512)
-                height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=512)
-                num_inference_steps = gr.Slider(label="Quality", minimum=1, maximum=50, step=1, value=4)
+            with gr.Tab("Dimensions"):
+                with gr.Row():
+                    width = gr.Slider(
+                        label="Width", 
+                        minimum=256, 
+                        maximum=MAX_IMAGE_SIZE, 
+                        step=32, 
+                        value=512,
+                        info="Logo width in pixels"
+                    )
+                    height = gr.Slider(
+                        label="Height", 
+                        minimum=256, 
+                        maximum=MAX_IMAGE_SIZE, 
+                        step=32, 
+                        value=512,
+                        info="Logo height in pixels"
+                    )
+                
+                # Preset dimensions
+                gr.HTML("<p style='margin-top: 10px;'>Quick presets:</p>")
+                with gr.Row():
+                    square_btn = gr.Button("1:1 Square", size="sm")
+                    wide_btn = gr.Button("16:9 Wide", size="sm")
+                    tall_btn = gr.Button("9:16 Tall", size="sm")
         
+        # Enhanced examples section
+        gr.HTML("<div class='info-card'><h3>🎯 Example Prompts</h3></div>")
         gr.Examples(
             examples=examples,
             fn=infer,
             inputs=[prompt],
-            outputs=[result, seed],
+            outputs=[result, seed_output],
             cache_examples="lazy"
         )
         
+        # Event handlers
         gr.on(
             triggers=[run_button.click, prompt.submit],
             fn=infer,
             inputs=[prompt, seed, randomize_seed, width, height, num_inference_steps],
-            outputs=[result, seed]
+            outputs=[result, seed_output]
         )
+        
+        # Clear button functionality
+        clear_button.click(
+            fn=lambda: (None, None),
+            outputs=[prompt, result]
+        )
+        
+        # Preset dimension buttons
+        square_btn.click(
+            fn=lambda: (512, 512),
+            outputs=[width, height]
+        )
+        
+        wide_btn.click(
+            fn=lambda: (1024, 576),
+            outputs=[width, height]
+        )
+        
+        tall_btn.click(
+            fn=lambda: (576, 1024),
+            outputs=[width, height]
+        )
+        
+        # Tips section
+        gr.HTML("""
+            <div class='info-card' style='margin-top: 30px;'>
+                <h3>💡 Pro Tips</h3>
+                <ul style='color: #a0a0a0;'>
+                    <li>Use structured prompts for better results</li>
+                    <li>Korean prompts are automatically translated</li>
+                    <li>Higher quality steps = better detail but slower generation</li>
+                    <li>Experiment with different seeds for variations</li>
+                </ul>
+            </div>
+        """)
 
 demo.launch()