Update app.py

app.py

@@ -5,19 +5,14 @@ import random
 import os
 from PIL import Image
 
+# List of available models
 list_models = [
-    "SDXL-1.0",
-    "SD-1.5",
-    "OpenJourney-V4",
-    "Anything-V4",
-    "Disney-Pixar-Cartoon",
-    "Pixel-Art-XL",
-    "Dalle-3-XL",
-    "Midjourney-V4-XL",
+    "SDXL-1.0", "SD-1.5", "OpenJourney-V4", "Anything-V4",
+    "Disney-Pixar-Cartoon", "Pixel-Art-XL", "Dalle-3-XL", "Midjourney-V4-XL",
 ]
 
-def generate_txt2img(current_model, prompt, is_negative=False, image_style="None style", steps=50, cfg_scale=7,
-                     seed=None):
+# Function to generate images from text
+def generate_txt2img(current_model, prompt, is_negative=False, image_style="None style", steps=50, cfg_scale=7, seed=None):
 
     if current_model == "SD-1.5":
         API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"
@@ -77,20 +72,127 @@ def generate_txt2img(current_model, prompt, is_negative=False, image_style="None
     image = Image.open(io.BytesIO(image_bytes))
     return image
 
-gr.Interface(
-    fn=generate_txt2img,
-    inputs=[
-        gr.inputs.Dropdown(label="Current Model", choices=list_models, default=list_models[1]),
-        gr.inputs.Textbox(label="Prompt", placeholder="a cute dog", lines=1),
-        gr.inputs.Checkbox(label="Negative Prompt"),
-        gr.inputs.Dropdown(label="Style", choices=["None style", "Cinematic", "Digital Art", "Portrait"], default="None style"),
-        gr.inputs.Number(label="Steps", default=50),
-        gr.inputs.Number(label="Cfg Scale", default=7),
-        gr.inputs.Number(label="Seed (Optional)"),
-    ],
-    outputs=gr.outputs.Image(type="pil", label="Output Image"),
-    title="AI Diffusion",
-    css=""" 
-        /* Add your custom CSS styles here */
-    """,
-).launch()
+
+css = """
+/* Custom CSS here */
+.gradio-container {
+    font-family: 'IBM Plex Sans', sans-serif;
+    max-width: 900px !important;
+    margin: auto;
+    padding-top: 1.5rem;
+}
+
+/* Button Styles */
+.gr-button {
+    color: white;
+    border-color: black;
+    background: black;
+    white-space: nowrap;
+}
+
+.gr-button:focus {
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+    outline: none;
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-border-opacity: 1;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
+    --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
+    --tw-ring-opacity: .5;
+}
+
+/* Footer Styles */
+.footer, .dark .footer {
+    margin-bottom: 45px;
+    margin-top: 35px;
+    text-align: center;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.footer > p, .dark .footer > p {
+    font-size: .8rem;
+    display: inline-block;
+    padding: 0 10px;
+    transform: translateY(10px);
+    background: white;
+}
+
+.dark .footer {
+    border-color: #303030;
+}
+
+.dark .footer > p {
+    background: #0b0f19;
+}
+
+/* Share Button Styles */
+#share-btn-container {
+    padding: 0 0.5rem !important;
+    background-color: #000000;
+    justify-content: center;
+    align-items: center;
+    border-radius: 9999px !important;
+    max-width: 13rem;
+    margin-left: auto;
+}
+
+#share-btn-container:hover {
+    background-color: #060606;
+}
+
+#share-btn {
+    all: initial;
+    color: #ffffff;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-left: 0.5rem !important;
+    padding: 0.5rem !important;
+    right: 0;
+}
+
+/* Animation Styles */
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Other Styles */
+#gallery {
+    min-height: 22rem;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    border-bottom-right-radius: .5rem !important;
+    border-bottom-left-radius: .5rem !important;
+}
+"""
+
+# Creating Gradio interface
+with gr.Blocks(css=css) as demo:
+    
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("<h1>AI Image Generator</h1>")
+            current_model = gr.Dropdown(label="Select Model", choices=list_models, value=list_models[1])
+            text_prompt = gr.Textbox(label="Enter Prompt", placeholder="Example: a cute dog", lines=2)
+            generate_button = gr.Button("Generate Image", variant='primary')
+
+        with gr.Column():
+            gr.Markdown("<h4>Advanced Settings</h4>")
+            with gr.Accordion("Advanced Customizations", open=False):
+                negative_prompt = gr.Textbox(label="Negative Prompt (Optional)", placeholder="Example: blurry, unfocused", lines=2)
+                image_style = gr.Dropdown(label="Select Style", choices=["None style", "Cinematic", "Digital Art", "Portrait"], value="None style")
+                # Add more options if needed
+
+    with gr.Row():
+        image_output = gr.Image(type="pil", label="Output Image")
+
+    generate_button.click(generate_txt2img, inputs=[current_model, text_prompt, negative_prompt, image_style], outputs=image_output)
+
+# Launch the app
+demo.launch()