Update app.py

app.py

@@ -11,80 +11,120 @@ from diffusers import AutoencoderKL, LMSDiscreteScheduler, UNet2DConditionModel,
 HTML_TEMPLATE = """
 <style>
     body {
-        background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+        background: linear-gradient(135deg, #6e48aa, #9d50bb, #f4d03f);
+        font-family: 'Arial', sans-serif;
+        color: #333;
     }
     #app-header {
         text-align: center;
-        background: rgba(255, 255, 255, 0.8);
-        padding: 20px;
-        border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        background: rgba(255, 255, 255, 0.9);
+        padding: 30px;
+        border-radius: 20px;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         position: relative;
+        overflow: hidden;
+        margin-bottom: 30px;
+    }
+    #app-header::before {
+        content: "";
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
+        animation: shimmer 10s infinite linear;
+    }
+    @keyframes shimmer {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
     }
     #app-header h1 {
-        color: #4CAF50;
-        font-size: 2em;
-        margin-bottom: 10px;
+        color: #6e48aa;
+        font-size: 2.5em;
+        margin-bottom: 15px;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    }
+    #app-header p {
+        font-size: 1.2em;
+        color: #555;
+    }
+    .concept-container {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+        margin-top: 30px;
+        flex-wrap: wrap;
     }
     .concept {
         position: relative;
-        transition: transform 0.3s;
+        transition: transform 0.3s, box-shadow 0.3s;
+        border-radius: 15px;
+        overflow: hidden;
+        background: white;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
     .concept:hover {
-        transform: scale(1.1);
+        transform: translateY(-10px) rotate(3deg);
+        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
     }
     .concept img {
-        width: 100px;
-        border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        width: 120px;
+        height: 120px;
+        object-fit: cover;
+        border-radius: 15px 15px 0 0;
     }
     .concept-description {
-        position: absolute;
-        bottom: -30px;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: #4CAF50;
+        background-color: #6e48aa;
         color: white;
-        padding: 5px 10px;
-        border-radius: 5px;
-        opacity: 0;
-        transition: opacity 0.3s;
-    }
-    .concept:hover .concept-description {
-        opacity: 1;
+        padding: 10px;
+        font-size: 0.9em;
+        text-align: center;
     }
     .artifact {
         position: absolute;
-        background: rgba(76, 175, 80, 0.1);
+        background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
         border-radius: 50%;
+        opacity: 0.5;
     }
     .artifact.large {
-        width: 300px;
-        height: 300px;
-        top: -50px;
-        left: -150px;
+        width: 400px;
+        height: 400px;
+        top: -100px;
+        left: -200px;
+        animation: float 20s infinite ease-in-out;
     }
     .artifact.medium {
-        width: 200px;
-        height: 200px;
-        bottom: -50px;
-        right: -100px;
+        width: 300px;
+        height: 300px;
+        bottom: -150px;
+        right: -150px;
+        animation: float 15s infinite ease-in-out reverse;
     }
     .artifact.small {
-        width: 100px;
-        height: 100px;
+        width: 150px;
+        height: 150px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        animation: pulse 5s infinite alternate;
+    }
+    @keyframes float {
+        0%, 100% { transform: translateY(0) rotate(0deg); }
+        50% { transform: translateY(-20px) rotate(10deg); }
+    }
+    @keyframes pulse {
+        0% { transform: scale(1); opacity: 0.5; }
+        100% { transform: scale(1.1); opacity: 0.8; }
     }
 </style>
 <div id="app-header">
     <div class="artifact large"></div>
     <div class="artifact medium"></div>
     <div class="artifact small"></div>
-    <h1>Generative Art with Textual Inversion and Guidance</h1>
-    <p>Generate unique art using different styles and guidance methods.</p>
-    <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
+    <h1>Dreamscape Creator</h1>
+    <p>Unleash your imagination with AI-powered generative art</p>
+    <div class="concept-container">
         <div class="concept">
             <img src="https://example.com/illustration-style.jpg" alt="Illustration Style">
             <div class="concept-description">Illustration Style</div>
@@ -93,7 +133,14 @@ HTML_TEMPLATE = """
             <img src="https://example.com/line-art.jpg" alt="Line Art">
             <div class="concept-description">Line Art</div>
         </div>
-        <!-- Add more concepts here for each style in your style_token_dict -->
+        <div class="concept">
+            <img src="https://example.com/midjourney-style.jpg" alt="Midjourney Style">
+            <div class="concept-description">Midjourney Style</div>
+        </div>
+        <div class="concept">
+            <img src="https://example.com/hanfu-anime-style.jpg" alt="Hanfu Anime">
+            <div class="concept-description">Hanfu Anime</div>
+        </div>
     </div>
 </div>
 """
@@ -198,37 +245,39 @@ title = "Generative Art with Textual Inversion and Guidance"
 description = "Create unique artworks using Stable Diffusion with various styles and guidance methods."
 
 with gr.Blocks(css=HTML_TEMPLATE) as demo:
-    gr.HTML(HTML_TEMPLATE)  # This adds the styled header to your app
+    gr.HTML(HTML_TEMPLATE)
     with gr.Row():
-        text = gr.Textbox(label="Prompt", placeholder="Enter your creative prompt here...")
+        text = gr.Textbox(label="Prompt", placeholder="Describe your dreamscape...")
         style = gr.Dropdown(label="Style", choices=list(style_token_dict.keys()), value="Illustration Style")
     with gr.Row():
-        inference_step = gr.Slider(1, 50, 10, step=1, label="Inference steps")
+        inference_step = gr.Slider(1, 50, 20, step=1, label="Inference steps")
         guidance_scale = gr.Slider(1, 10, 7.5, step=0.1, label="Guidance scale")
         seed = gr.Slider(0, 10000, 42, step=1, label="Seed")
     with gr.Row():
         guidance_method = gr.Dropdown(label="Guidance method", choices=['Grayscale', 'Bright', 'Contrast', 'Symmetry', 'Saturation'], value="Grayscale")
         loss_scale = gr.Slider(100, 10000, 200, step=100, label="Loss scale")
     with gr.Row():
-        generate_button = gr.Button("Generate Art")
+        image_size = gr.Radio(["256x256", "512x512"], label="Image Size", value="256x256")
+    with gr.Row():
+        generate_button = gr.Button("Create Dreamscape", variant="primary")
     with gr.Row():
-        output_image = gr.Image(width=512, height=512, label="Generated art")
-        output_image_guided = gr.Image(width=512, height=512, label="Generated art with guidance")
+        output_image = gr.Image(label="Your Dreamscape")
+        output_image_guided = gr.Image(label="Guided Dreamscape")
     
     generate_button.click(
         inference,
-        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale],
+        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale, image_size],
         outputs=[output_image, output_image_guided]
     )
 
     gr.Examples(
         examples=[
-            ["A majestic castle on a floating island", 'Illustration Style', 10, 7.5, 42, 'Grayscale', 200]
+            ["A mystical floating island with cascading waterfalls and ethereal butterflies", 'Illustration Style', 20, 7.5, 42, 'Grayscale', 200, "256x256"]
         ],
-        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale],
+        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale, image_size],
         outputs=[output_image, output_image_guided],
         fn=inference,
         cache_examples=True,
     )
 
-demo.launch()
+demo.launch()