Update app.py

app.py

@@ -91,19 +91,23 @@ def inference(text, style, inference_step, guidance_scale, seed, guidance_method
 css = """
 <style>
     body {
-        background: linear-gradient(135deg, #6e48aa, #9d50bb, #f4d03f);
+        background: linear-gradient(135deg, #1a1c2c, #4a4e69, #9a8c98);
         font-family: 'Arial', sans-serif;
-        color: #333;
+        color: #f2e9e4;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
     }
     #app-header {
         text-align: center;
-        background: rgba(255, 255, 255, 0.9);
+        background: rgba(255, 255, 255, 0.1);
         padding: 30px;
         border-radius: 20px;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         position: relative;
         overflow: hidden;
-        margin-bottom: 30px;
+        margin: 20px auto;
+        max-width: 800px;
     }
     #app-header::before {
         content: "";
@@ -112,27 +116,27 @@ css = """
         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;
+        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+        animation: shimmer 15s infinite linear;
     }
     @keyframes shimmer {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
     #app-header h1 {
-        color: #6e48aa;
+        color: #f2e9e4;
         font-size: 2.5em;
         margin-bottom: 15px;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
     }
     #app-header p {
         font-size: 1.2em;
-        color: #555;
+        color: #c9ada7;
     }
     .concept-container {
         display: flex;
         justify-content: center;
-        gap: 30px;
+        gap: 20px;
         margin-top: 30px;
         flex-wrap: wrap;
     }
@@ -141,21 +145,21 @@ css = """
         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);
+        background: rgba(255, 255, 255, 0.1);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        width: 150px;
     }
     .concept:hover {
         transform: translateY(-10px) rotate(3deg);
-        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
+        box-shadow: 0 15px 30px rgba(0,0,0,0.4);
     }
     .concept img {
-        width: 120px;
+        width: 100%;
         height: 120px;
         object-fit: cover;
-        border-radius: 15px 15px 0 0;
     }
     .concept-description {
-        background-color: #6e48aa;
+        background-color: rgba(110, 72, 170, 0.8);
         color: white;
         padding: 10px;
         font-size: 0.9em;
@@ -163,9 +167,10 @@ css = """
     }
     .artifact {
         position: absolute;
-        background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
+        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
         border-radius: 50%;
         opacity: 0.5;
+        pointer-events: none;
     }
     .artifact.large {
         width: 400px;
@@ -194,8 +199,24 @@ css = """
         50% { transform: translateY(-20px) rotate(10deg); }
     }
     @keyframes pulse {
-        0% { transform: scale(1); opacity: 0.5; }
-        100% { transform: scale(1.1); opacity: 0.8; }
+        0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
+        100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
+    }
+    /* Gradio component styling */
+    .gr-box {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    }
+    .gr-input, .gr-button {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        color: #f2e9e4 !important;
+        border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    }
+    .gr-button:hover {
+        background-color: rgba(255, 255, 255, 0.2) !important;
+    }
+    .gr-form {
+        background-color: transparent !important;
     }
 </style>
 <div id="app-header">
@@ -206,19 +227,19 @@ css = """
     <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">
+            <img src="https://source.unsplash.com/random/150x120?illustration" alt="Illustration Style">
             <div class="concept-description">Illustration Style</div>
         </div>
         <div class="concept">
-            <img src="https://example.com/line-art.jpg" alt="Line Art">
+            <img src="https://source.unsplash.com/random/150x120?line-art" alt="Line Art">
             <div class="concept-description">Line Art</div>
         </div>
         <div class="concept">
-            <img src="https://example.com/midjourney-style.jpg" alt="Midjourney Style">
+            <img src="https://source.unsplash.com/random/150x120?digital-art" 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">
+            <img src="https://source.unsplash.com/random/150x120?anime" alt="Hanfu Anime">
             <div class="concept-description">Hanfu Anime</div>
         </div>
     </div>
@@ -226,7 +247,7 @@ css = """
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.HTML("<div class='header'><h1>🌟 Dreamscape Creator</h1></div>")
+    gr.HTML(css + open("path/to/your/html_structure.html").read())
     
     with gr.Row():
         text = gr.Textbox(label="Prompt", placeholder="Describe your dreamscape...")
@@ -258,18 +279,14 @@ with gr.Blocks(css=css) as demo:
     )
 
     gr.Examples(
-    examples=[
-        ["Floating island with waterfalls", 'Illustration Style', 50, 7.5, 42, 'Grayscale', 200, "256x256"],
-        ["Futuristic city with neon lights", 'Line Art', 30, 8.0, 123, 'Bright', 300, "256x256"],
-        ["Japanese garden with cherry blossoms", 'Hitokomoru Style', 40, 7.0, 789, 'Contrast', 250, "256x256"],
-    ],
-    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,
-    examples_per_page=5
-
-    )
-
-if __name__ == "__main__":
-    demo.launch()
+        examples=[
+            ["Floating island with waterfalls", 'Illustration Style', 50, 7.5, 42, 'Grayscale', 200, "256x256"],
+            ["Futuristic city with neon lights", 'Line Art', 30, 8.0, 123, 'Bright', 300, "256x256"],
+            ["Japanese garden with cherry blossoms", 'Hitokomoru Style', 40, 7.0, 789, 'Contrast', 250, "256x256"],
+        ],
+        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,
+        examples_per_page=5
+    )