Update app.py

app.py

@@ -8,6 +8,96 @@ from torchvision import transforms as tfms
 from transformers import CLIPTextModel, CLIPTokenizer, logging
 from diffusers import AutoencoderKL, LMSDiscreteScheduler, UNet2DConditionModel, DiffusionPipeline
 
+HTML_TEMPLATE = """
+<style>
+    body {
+        background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+    }
+    #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);
+        position: relative;
+    }
+    #app-header h1 {
+        color: #4CAF50;
+        font-size: 2em;
+        margin-bottom: 10px;
+    }
+    .concept {
+        position: relative;
+        transition: transform 0.3s;
+    }
+    .concept:hover {
+        transform: scale(1.1);
+    }
+    .concept img {
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .concept-description {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #4CAF50;
+        color: white;
+        padding: 5px 10px;
+        border-radius: 5px;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+    .concept:hover .concept-description {
+        opacity: 1;
+    }
+    .artifact {
+        position: absolute;
+        background: rgba(76, 175, 80, 0.1);
+        border-radius: 50%;
+    }
+    .artifact.large {
+        width: 300px;
+        height: 300px;
+        top: -50px;
+        left: -150px;
+    }
+    .artifact.medium {
+        width: 200px;
+        height: 200px;
+        bottom: -50px;
+        right: -100px;
+    }
+    .artifact.small {
+        width: 100px;
+        height: 100px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</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;">
+        <div class="concept">
+            <img src="https://example.com/illustration-style.jpg" 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">
+            <div class="concept-description">Line Art</div>
+        </div>
+        <!-- Add more concepts here for each style in your style_token_dict -->
+    </div>
+</div>
+"""
+
 torch_device = "cuda" if torch.cuda.is_available() else "mps" if torch.backends.mps.is_available() else "cpu"
 if "mps" == torch_device: os.environ['PYTORCH_ENABLE_MPS_FALLBACK'] = "1"
 
@@ -104,19 +194,41 @@ examples = [
     ["A majestic castle on a floating island", 'Illustration Style', 10, 7.5, 42, 'Grayscale', 200]
 ]
 
-demo = gr.Interface(inference, 
-                    inputs = [gr.Textbox(label="Prompt", type="text"),
-                              gr.Dropdown(label="Style", choices=list(style_token_dict.keys()), value="Illustration Style"), 
-                              gr.Slider(1, 50, 10, step = 1, label="Inference steps"),
-                              gr.Slider(1, 10, 7.5, step = 0.1, label="Guidance scale"),
-                              gr.Slider(0, 10000, 42, step = 1, label="Seed"),
-                              gr.Dropdown(label="Guidance method", choices=['Grayscale', 'Bright', 'Contrast', 
-                                                                  'Symmetry', 'Saturation'], value="Grayscale"),
-                              gr.Slider(100, 10000, 200, step = 100, label="Loss scale")],
-                    outputs= [gr.Image(width=512, height=512, label="Generated art"),
-                              gr.Image(width=512, height=512, label="Generated art with guidance")],
-                    title=title,
-                    description=description,
-                    examples=examples)
+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
+    with gr.Row():
+        text = gr.Textbox(label="Prompt", placeholder="Enter your creative prompt here...")
+        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")
+        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")
+    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")
+    
+    generate_button.click(
+        inference,
+        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale],
+        outputs=[output_image, output_image_guided]
+    )
+
+    gr.Examples(
+        examples=[
+            ["A majestic castle on a floating island", 'Illustration Style', 10, 7.5, 42, 'Grayscale', 200]
+        ],
+        inputs=[text, style, inference_step, guidance_scale, seed, guidance_method, loss_scale],
+        outputs=[output_image, output_image_guided],
+        fn=inference,
+        cache_examples=True,
+    )
 
 demo.launch()