Update app.py

app.py

@@ -62,11 +62,16 @@ class Prodia:
 
 
 def image_to_base64(image_path):
+    # Open the image with PIL
     with Image.open(image_path) as image:
+        # Convert the image to bytes
         buffered = BytesIO()
-        image.save(buffered, format="PNG")
+        image.save(buffered, format="PNG")  # You can change format to PNG if needed
+
+        # Encode the bytes to base64
         img_str = base64.b64encode(buffered.getvalue())
-    return img_str.decode('utf-8')
+
+    return img_str.decode('utf-8')  # Convert bytes to string
 
 
 prodia_client = Prodia(api_key=os.getenv("PRODIA_API_KEY"))
@@ -89,41 +94,114 @@ def flip_text(prompt, negative_prompt, model, steps, sampler, cfg_scale, width,
     return job["imageUrl"]
 
 css = """
+/* Overall Styling */
+body {
+    font-family: 'Arial', sans-serif;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+/* Image Output Area */
+#image-output-container {
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    overflow: hidden; 
+}
+
+#image-output {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Settings Section */
+#settings {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
+    gap: 20px;
+}
+
+.setting-group {
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+/* Button Styling */
 #generate {
-    height: 100%;
+    background-color: #007bff; /* Example - use your preferred color */
+    color: white;
+    padding: 15px 25px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
 }
-"""
 
-# Define the Gradio interface
-with gr.Blocks() as demo:
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("# Disney Pixar AI Poster Generator")
-            gr.Markdown("Enter your prompt and adjust the settings to generate a Disney Pixar style AI poster.")
-    
-    with gr.Row():
-        with gr.Column(scale=2):
-            prompt = gr.Textbox("space warrior, beautiful, female, ultrarealistic, soft lighting, 8k", placeholder="Prompt", show_label=False, lines=3)
-            negative_prompt = gr.Textbox(placeholder="Negative Prompt", show_label=False, lines=3, value="3d, cartoon, anime, (deformed eyes, nose, ears, nose), bad anatomy, ugly")
-            text_button = gr.Button("Generate", variant='primary', style={"min-width": "100%"})
+#generate:hover {
+    background-color: #0056b3; /* Darker shade on hover */
+}
 
-        with gr.Column(scale=4):
-            image_output = gr.Image(value="https://cdn-uploads.huggingface.co/production/uploads/noauth/XWJyh9DhMGXrzyRJk7SfP.png", label="Generated Image", style={"width": "100%", "height": "auto"})
+/* Responsive Design - Adjust breakpoints as needed */
+@media screen and (max-width: 768px) {
+    #settings {
+        grid-template-columns: 1fr; 
+    }
+}
+"""
 
+with gr.Blocks(css=css) as demo:
     with gr.Row():
-        with gr.Column(scale=2):
-            model = gr.Dropdown(interactive=True, value="sd_xl_base_1.0.safetensors [be9edd61]", show_label=True, label="Stable Diffusion Checkpoint", style={"min-width": "100%"})
-            sampler = gr.Dropdown(value="DPM++ 2M Karras", show_label=True, label="Sampling Method", style={"min-width": "100%"})
+        gr.Markdown("<h1 style='text-align: center;'>Create Your Disney Pixar AI Poster</h1>", elem_id="title")
+
+    with gr.Row(elem_id="image-output-container"):
+        image_output = gr.Image(
+            value="https://cdn-uploads.huggingface.co/production/uploads/noauth/XWJyh9DhMGXrzyRJk7SfP.png",
+            label="Generated Image",
+            elem_id="image-output"
+        )
+
+    with gr.Row(elem_id="settings"):
+        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
+            prompt = gr.Textbox(
+                "space warrior, beautiful, female, ultrarealistic, soft lighting, 8k",
+                placeholder="Enter your prompt here...", 
+                show_label=False, 
+                lines=3, 
+                elem_id="prompt-input"
+            )
+            negative_prompt = gr.Textbox(
+                placeholder="Enter negative prompts (optional)...", 
+                show_label=False, 
+                lines=3, 
+                value="3d, cartoon, anime, (deformed eyes, nose, ears, nose), bad anatomy, ugly"
+            )
+            text_button = gr.Button("Generate", variant='primary', elem_id="generate") 
+
+        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
+            model = gr.Dropdown(
+                interactive=True,
+                value="sd_xl_base_1.0.safetensors [be9edd61]", 
+                show_label=True, 
+                label="Model", 
+                choices=prodia_client.list_models()
+            )
+            sampler = gr.Dropdown(
+                value="DPM++ 2M Karras", 
+                show_label=True, 
+                label="Sampling Method", 
+                choices=prodia_client.list_samplers()
+            )
             steps = gr.Slider(label="Sampling Steps", minimum=1, maximum=25, value=20, step=1)
-            cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, value=7, step=1)
-            seed = gr.Number(label="Seed", value=-1)
 
-        with gr.Column(scale=2):
+        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
             width = gr.Slider(label="Width", minimum=512, maximum=1536, value=1024, step=8)
             height = gr.Slider(label="Height", minimum=512, maximum=1536, value=1024, step=8)
-            batch_size = gr.Slider(label="Batch Size", maximum=1, value=1)
-            batch_count = gr.Slider(label="Batch Count", maximum=1, value=1)
-            gr.Markdown("*Resolution Maximum: 1MP (1048576 px)*")
+            cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, value=7, step=1)
+            seed = gr.Number(label="Seed", value=-1)
+
+    text_button.click(flip_text, inputs=[prompt, negative_prompt, model, steps, sampler, cfg_scale, width, height, seed], outputs=image_output)
 
-# Launch the Gradio interface
-demo.launch()
+demo.queue(concurrency_count=24, max_size=32, api_open=False).launch(max_threads=128)