Update app.py

app.py

@@ -13,6 +13,10 @@ COMPANY_NAME = "Miragic"
 COMPANY_URL = "https://www.miragic.ai"
 CONTACT_EMAIL = "info@miragic.ai"
 
+# Use absolute URLs for images
+COMPANY_LOGO_URL = "https://avatars.githubusercontent.com/u/211682198?s=200&v=4"
+QR_CODE_URL = "https://miragic.ai/products/qrcode-vto.png"
+
 def generate_image_via_api(prompt, model, width, height, seed, image_url, enhance, safe):
     """
     Call the Flask API to generate an image
@@ -42,7 +46,7 @@ def generate_image_via_api(prompt, model, width, height, seed, image_url, enhanc
         response = requests.post(
             f"{MIRAGIC_API_URL}/generate_image",
             json=data,
-            timeout=300  # Increased timeout for image generation
+            timeout=300
         )
         
         if response.status_code == 200:
@@ -69,18 +73,16 @@ def generate_image_via_api(prompt, model, width, height, seed, image_url, enhanc
         raise gr.Error(f"Unexpected Error: {str(e)}")
 
 def get_available_models():
-    """
-    Get available models from the Flask API
-    """
+    """Get available models from the Flask API"""
     try:
         response = requests.get(f"{MIRAGIC_API_URL}/available_models", timeout=10)
         if response.status_code == 200:
             result = response.json()
             if result["status"] == "success":
                 return result["models"]
-        return ["flux", "kontext", "dreamshaper", "realistic", "anime"]
+        return ["flux", "kontext", "dreamshaper", "realistic", "anime", "turbo"]
     except:
-        return ["flux", "kontext", "dreamshaper", "realistic", "anime"]
+        return ["flux", "kontext", "dreamshaper", "realistic", "anime", "turbo"]
 
 def handle_like_action():
     """Handle like button click"""
@@ -122,6 +124,10 @@ def create_instructions_html():
 def get_css_styles():
     """Get CSS styles for the interface"""
     return """
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto;
+}
 footer {visibility: hidden}
 .banner {
     background-color: #f8f9fa;
@@ -173,48 +179,32 @@ footer {visibility: hidden}
   background: linear-gradient(45deg, #ff416c, #ff4b2b);
   border: none;
   padding: 12px 25px;
-    font-size: 16px;
-    font-weight: bold;
-    color: white;
-    border-radius: 8px;
-    text-decoration: none;
-    display: inline-block;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 .signup-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-}
-#col-container {
-    max-width: 1400px;
-    margin: 0 auto;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
 }
 .step-column {
     padding: 20px;
     border-radius: 8px;
-    box-shadow: var(--card-shadow);
     margin: 10px;
 }
 .step-title {
-    color: var(--primary-color);
+    color: #007bff;
     text-align: center;
     margin-bottom: 15px;
 }
 .image-preview {
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: var(--card-shadow);
-}
-.result-section {
-    background-color: white;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: var(--card-shadow);
-}
-.footer {
-    margin-top: 30px;
-    text-align: center;
 }
 .like-button {
     background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
@@ -252,12 +242,12 @@ footer {visibility: hidden}
 """
 
 # Create the Gradio interface
-with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator", theme=gr.themes.Ocean()) as demo:
+with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator") as demo:
     with gr.Row():
-        with gr.Column(0.7):
+        with gr.Column(scale=7):
             gr.Markdown(f"""
                 <div style="display: flex; align-items: center;">
-                    <img src="https://avatars.githubusercontent.com/u/211682198?s=200&v=4" style="width: 80px; margin-right: 20px;"/>
+                    <img src="{COMPANY_LOGO_URL}" style="width: 80px; height: 80px; margin-right: 20px; border-radius: 8px;"/>
                     <div>
                         <h1 style="margin-bottom: 0;">{COMPANY_NAME} AI Image Generator 🎨</h1>
                         <p style="margin-top: 0; color: #636e72;">Create stunning AI-generated images with text prompts</p>
@@ -266,16 +256,16 @@ with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator",
                 """)
 
             gr.HTML(create_instructions_html())
-        with gr.Column(0.3):
+        with gr.Column(scale=3):
             gr.Markdown(f"""
-                <div style="display: flex; align-items: center;">
-                    <img src="https://miragic.ai/products/qrcode-vto.png" style="width: 450px; margin-left: 100px;"/>
+                <div style="display: flex; justify-content: center;">
+                    <img src="{QR_CODE_URL}" style="width: 200px; height: 200px; border-radius: 8px;"/>
                 </div>
                 """)
     
-    with gr.Row(elem_id="col-container"):
+    with gr.Row():
         # Step 1: Prompt and Settings
-        with gr.Column(elem_classes="step-column"):
+        with gr.Column():
             gr.HTML("""
             <div class="step-title">
                 <span style="font-size: 24px;">1. Enter Prompt & Settings</span><br>
@@ -340,7 +330,7 @@ with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator",
             )
         
         # Step 2: Results
-        with gr.Column(elem_classes="step-column"):
+        with gr.Column():
             gr.HTML("""
             <div class="step-title">
                 <span style="font-size: 24px;">2. Generated Image</span><br>
@@ -350,7 +340,6 @@ with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator",
             result_img = gr.Image(
                 label="Generated Image", 
                 interactive=False,
-                elem_classes="image-preview",
                 height=400
             )
             
@@ -400,8 +389,7 @@ with gr.Blocks(css=get_css_styles(), title=f"{COMPANY_NAME} AI Image Generator",
     generate_btn.click(
         fn=generate_image_via_api,
         inputs=[prompt, model, width, height, seed, image_url, enhance, safe],
-        outputs=[result_img, like_button],
-        api_name="generate_image"
+        outputs=[result_img, like_button]
     )
 
     like_button.click(