adding the gradio-template style UI (#1)

- adding the gradio-template style UI (ebf269942a8b2ad46493646865aeeb2510871aeb)


Co-authored-by: yuvraj sharma <ysharma@users.noreply.huggingface.co>

app.py

@@ -5,6 +5,19 @@ import requests
 from PIL import Image
 from io import BytesIO
 
+examples = [
+    "Astronaut in a jungle, cold color palette, muted colors, detailed, 8k",
+    "An astronaut riding a green horse",
+    "A delicious ceviche cheesecake slice",
+]
+
+css="""
+#col-container {
+    margin: 0 auto;
+    max-width: 640px;
+}
+"""
+
 def generate_image(prompt, api_key):
     # Set the API key for the current session
     os.environ["REPLICATE_API_TOKEN"] = api_key
@@ -28,26 +41,46 @@ def generate_image(prompt, api_key):
     # Return the image
     return image
 
-# Create the Gradio interface
-iface = gr.Interface(
-    fn=generate_image,
-    inputs=[
-        gr.Textbox(
-            lines=2,
-            placeholder="Enter your prompt here...",
-            label="Prompt"
-        ),
-        gr.Textbox(
-            lines=1,
-            placeholder="Enter your Replicate API key...",
-            type="password",
-            label="Replicate API Key"
+
+with gr.Blocks(css=css) as demo:
+    
+    with gr.Column(elem_id="col-container"):
+        gr.Markdown(f"""
+        # FLUX 1.1 Pro Text-to-Image Generator
+        """)
+        
+        with gr.Row():
+            with gr.Column():
+                api_key = gr.Text(
+                    label="Replicate API Key",
+                    show_label=False,
+                    max_lines=1,
+                    placeholder="Enter your Replicate API key...",
+                    container=False,
+                    type="password",
+                )
+                prompt = gr.Text(
+                    label="Prompt",
+                    show_label=False,
+                    max_lines=1,
+                    placeholder="Enter your prompt",
+                    container=False,
+                )
+            
+            run_button = gr.Button("Run", scale=0)
+        
+        result = gr.Image(label="Result", show_label=False)
+
+        
+        gr.Examples(
+            examples = examples,
+            inputs = [prompt]
         )
-    ],
-    outputs=gr.Image(type="pil"),
-    title="FLUX 1.1 Pro Text-to-Image Generator",
-    description="Generate images from text prompts using the FLUX 1.1 Pro model."
-)
+    gr.on(
+        triggers=[run_button.click, prompt.submit],
+        fn = generate_image,
+        inputs = [prompt, api_key],
+        outputs = [result,]
+    )
 
-# Launch the Gradio app
-iface.launch()
+demo.queue().launch()