Create app.py

app.py

@@ -0,0 +1,118 @@
+import gradio as gr
+import os
+
+# Custom CSS for better styling
+custom_css = """
+.gradio-container {
+    font-family: 'IBM Plex Sans', sans-serif;
+}
+.generate-btn {
+    background: rgb(99, 102, 241) !important;
+    color: white !important;
+    border: none !important;
+}
+.generate-btn:hover {
+    background: rgb(67, 56, 202) !important;
+    transform: translateY(-2px);
+    transition: all 0.2s;
+}
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.tips {
+    background: #f0f9ff;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 20px 0;
+    border: 1px solid #bae6fd;
+}
+"""
+
+# Example prompts for the dropdown
+example_prompts = [
+    "A magical forest at twilight with glowing mushrooms, digital art style",
+    "A futuristic cityscape with flying cars, neon lights, cyberpunk style",
+    "A cozy cafe interior with steam rising from coffee cups, warm lighting",
+    "An underwater scene with bioluminescent creatures, deep sea atmosphere",
+    "A steampunk-inspired flying machine in the clouds, vintage style"
+]
+
+def generate_image(prompt):
+    # This is where you'd integrate with the Black Forest Labs model
+    # For now, we'll just create an iframe to their space
+    iframe_html = f'<iframe src="https://black-forest-labs-flux-1-dev.hf.space" frameborder="0" width="100%" height="450"></iframe>'
+    return iframe_html
+
+# Create the Gradio interface
+with gr.Blocks(css=custom_css) as demo:
+    gr.HTML("<div class='container'>")
+    gr.HTML("""
+        <header style="text-align: center; margin-bottom: 2rem;">
+            <h1 style="font-size: 2.5rem; color: rgb(99, 102, 241); margin-bottom: 1rem;">
+                AI Image Generator
+            </h1>
+            <p style="color: #6b7280; font-size: 1.1rem;">
+                Create amazing AI-generated images with Stable Diffusion
+            </p>
+            <p style="color: #6b7280;">
+                Powered by Black Forest Labs
+            </p>
+        </header>
+    """)
+    
+    with gr.Column():
+        # Add example prompts dropdown
+        prompt_dropdown = gr.Dropdown(
+            choices=example_prompts,
+            label="Example Prompts (Click to use)",
+            info="Select a prompt to try out"
+        )
+        
+        # Text input for the prompt
+        prompt_input = gr.Textbox(
+            label="Enter your prompt",
+            placeholder="Describe the image you want to generate...",
+            lines=3
+        )
+        
+        # Generate button
+        generate_btn = gr.Button("Generate Image", elem_classes=["generate-btn"])
+        
+        # Output area for the iframe
+        output = gr.HTML()
+        
+        # Tips section
+        gr.HTML("""
+            <div class="tips">
+                <h2 style="font-size: 1.25rem; color: #0369a1; margin-bottom: 1rem;">
+                    Tips for Best Results
+                </h2>
+                <ul style="list-style-type: disc; padding-left: 1.5rem; color: #0c4a6e;">
+                    <li>Be specific in your descriptions - include details about style, mood, and composition</li>
+                    <li>Try adding artistic styles like "oil painting", "watercolor", or "digital art"</li>
+                    <li>Include lighting descriptions like "sunset", "studio lighting", or "moonlight"</li>
+                    <li>Experiment with different perspectives: "close-up", "aerial view", or "wide angle"</li>
+                    <li>Add quality enhancers like "highly detailed", "4K", or "professional photography"</li>
+                </ul>
+            </div>
+        """)
+    
+    gr.HTML("</div>")
+    
+    # Set up event handlers
+    prompt_dropdown.change(
+        lambda x: x,
+        inputs=prompt_dropdown,
+        outputs=prompt_input
+    )
+    
+    generate_btn.click(
+        generate_image,
+        inputs=prompt_input,
+        outputs=output
+    )
+
+# Launch the app
+demo.launch()