up

app.py

@@ -848,12 +848,98 @@ with gr.Blocks(css=css) as demo:
 
     with gr.Column(elem_id="col-container"):
         gr.HTML("""
-        <div id="logo-title">
-            <img src="https://qianwen-res.oss-cn-beijing.aliyuncs.com/Qwen-Image/qwen_image_logo.png" alt="Qwen-Image Logo" width="400" style="display: block; margin: 0 auto;">
-            <h2 style="font-style: italic;color: #5b47d1;margin-top: -33px !important;margin-left: 133px;">AiComicFactory-GradioEdition</h2>
+        <div id="logo-title" style="display: flex; align-items: center; justify-content: center; padding: 20px 0; position: relative;">
+            <img src="/gradio_api/file=logo.png" alt="AI Comic Factory Logo" style="max-height: 256px; width: auto; margin-right: 30px;">
+            <div style="position: relative; display: flex; flex-direction: column; align-items: center;">
+                <div class="comic-label comic-label-top" style="
+                    background: linear-gradient(135deg, #ff6b35, #ff8c42);
+                    color: white;
+                    padding: 12px 28px;
+                    font-size: 32px;
+                    font-weight: 900;
+                    text-transform: uppercase;
+                    transform: rotate(-5deg);
+                    position: relative;
+                    margin-bottom: 10px;
+                    border-radius: 8px;
+                    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
+                    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+                    letter-spacing: 2px;
+                    border: 3px solid #fff;
+                    font-family: 'Impact', 'Arial Black', sans-serif;
+                    animation: pulse 2s ease-in-out infinite;
+                ">
+                    AI Comic Factory
+                </div>
+                <div class="comic-label comic-label-bottom" style="
+                    background: linear-gradient(135deg, #ff8c42, #ffa552);
+                    color: white;
+                    padding: 10px 24px;
+                    font-size: 24px;
+                    font-weight: 800;
+                    text-transform: uppercase;
+                    transform: rotate(7deg);
+                    position: relative;
+                    border-radius: 6px;
+                    box-shadow: 0 6px 16px rgba(255, 140, 66, 0.4);
+                    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
+                    letter-spacing: 1.5px;
+                    border: 2px solid #fff;
+                    font-family: 'Impact', 'Arial Black', sans-serif;
+                    font-style: italic;
+                    animation: pulse 2s ease-in-out infinite;
+                    animation-delay: 0.5s;
+                ">
+                    Gradio Edition!
+                </div>
+                <style>
+                    @keyframes pulse {
+                        0%, 100% {
+                            transform: scale(1) rotate(var(--rotation));
+                        }
+                        50% {
+                            transform: scale(1.05) rotate(var(--rotation));
+                        }
+                    }
+                    .comic-label-top {
+                        --rotation: -5deg;
+                    }
+                    .comic-label-bottom {
+                        --rotation: 7deg;
+                    }
+                    .comic-label:hover {
+                        transform: scale(1.1) rotate(var(--rotation)) !important;
+                        transition: transform 0.3s ease;
+                    }
+                    .comic-label::before {
+                        content: '';
+                        position: absolute;
+                        top: -8px;
+                        right: -8px;
+                        width: 30px;
+                        height: 30px;
+                        background: radial-gradient(circle, #ffeb3b, #ffc107);
+                        border-radius: 50%;
+                        border: 2px solid #fff;
+                        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.6);
+                        z-index: -1;
+                        animation: sparkle 1.5s ease-in-out infinite;
+                    }
+                    @keyframes sparkle {
+                        0%, 100% {
+                            transform: scale(1);
+                            opacity: 1;
+                        }
+                        50% {
+                            transform: scale(1.2);
+                            opacity: 0.8;
+                        }
+                    }
+                </style>
+            </div>
         </div>
         """)
-        gr.Markdown("This demo uses [Qwen-Image-Lightning](https://huggingface.co/lightx2v/Qwen-Image-Lightning). Hugigng Face PRO users can perform more generations.")
+        gr.Markdown("This demo uses [Qwen-Image-Lightning](https://huggingface.co/lightx2v/Qwen-Image-Lightning). Hugging Face PRO users can perform more generations.")
 
         # First row: prompt input, generate button, reset button
         with gr.Row():