upgrade ui

app.py

@@ -1,5 +1,5 @@
 import gradio as gr
-import requests
+import requests, base64, io
 from dotenv import load_dotenv
 import os, datetime
 
@@ -7,8 +7,20 @@ load_dotenv()
 API_URL = os.environ.get("API_URL", "http://0.0.0.0:8021")
 APP_ENV = os.environ.get("APP_ENV", None)
 
+
+def image_to_base64(image):
+    if image is None:
+        return None
+    buffered = io.BytesIO()
+    image.save(buffered, format="PNG")
+    return base64.b64encode(buffered.getvalue()).decode()
+
+
 # Assuming the API returns an image URL in the response
-def generate_image(brand_name, primary_color, secondary_color, description, target_audience, font, logo_url, heading_text, sub_heading_text, image_dimension, custom_graphic_prompt):
+def generate_image(brand_name, primary_color, secondary_color, description, target_audience, font, logo_image, heading_text, sub_heading_text, image_layout, custom_graphic_prompt):
+
+    logo_base64 = image_to_base64(logo_image)
+
     # Define your payload/data to send to the image generation API
     data = {
         "brand_name": brand_name,
@@ -19,9 +31,9 @@ def generate_image(brand_name, primary_color, secondary_color, description, targ
         "font": font,
         "heading_text": heading_text or "",
         "sub_heading_text": sub_heading_text or "",
-        "logo_url": logo_url,
+        "logo_url": logo_base64,
         "user_prompt": custom_graphic_prompt,
-        "image_dimension": image_dimension
+        "image_dimension": image_layout
     }
 
     # Make the API call
@@ -49,17 +61,17 @@ iface = gr.Interface(
         gr.components.Textbox(placeholder="Brief description of your brand and design guidelines", label="Description", lines=2),
         gr.components.Textbox(placeholder="Your Brand's target audience", label="Target Audience"),
         gr.components.Textbox(placeholder="Google Font Label i.e Rubik", label="Font"),
-        gr.components.Textbox(placeholder="Url of your brand logo (not required)", label="Logo Url"),
+        gr.components.Image(tool="select", type="pil", label="Logo Image"), # Image upload for logo
         gr.components.Textbox(placeholder="Heading text (not required)", label="Heading Text"),
         gr.components.Textbox(placeholder="Paragraph text (not required)", label="Sub Heading Text"),
         gr.components.Dropdown(
             choices=[
-                ("Select Dimension", "750x1334"),
+                ("Select Layout", "750x1334"),
                 ("Mobile Portrait (750x1334)", "750x1334"),
                 ("Square (2048x2048)", "2048x2048")
             ],
             value="750x1334",
-            label="Image Dimension"
+            label="Image Layout"
         ),
         gr.components.Textbox(lines=4, placeholder="Enter your custom dall-e 2-3 image prompt here (not required)", value="", label="Custom Graphic Prompt")
     ],