fix

app.py

@@ -1,28 +1,37 @@
 import gradio as gr
-import requests
-import os
+import requests, base64, io
 from dotenv import load_dotenv
+import os, datetime, mimetypes
 from gradio import Request
 
 load_dotenv()
 API_URL = os.environ.get("API_URL", "http://0.0.0.0:8021")
+APP_ENV = os.environ.get("APP_ENV", None)
+
 
 
 # Assuming the API returns an image URL in the response
 def generate_image(campaign_details):
+
+
+    # Define your payload/data to send to the image generation API
     data = {
         "request_string": campaign_details,
         "is_single_image": False
     }
 
+    # Make the API call
     response = requests.post(API_URL + "/generate_graphic", json=data)
 
+    # Ensure the API call was successful
     if response.status_code != 200:
         print(f"Error {response.status_code}: {response.text}")
         return "Error: Unable to fetch image from the external API."
 
     image_data = response.json()
+
     data_url = image_data['image_url']
+    image_desc = image_data['image_description']
 
     return data_url
 
@@ -31,14 +40,17 @@ content_html = """
 <div style="text-align: center; margin-top: 30px;">
     <h2>Slidegen Examples</h2>
     <div style="display: flex; justify-content: space-around; align-items: center;">
+        <!-- Displaying one video -->
         <video controls width="30%">
             <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
             Your browser does not support the video tag.
         </video>
+        <!-- Displaying two images -->
         <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Image Description 1" style="width: 30%; margin: 0 10px;">
         <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Image Description 2" style="width: 30%; margin: 0 10px;">
     </div>
 </div>
+
 """
 
 default_value = """
@@ -83,13 +95,14 @@ Selected Layout: Mobile Portrait (750x1334)
 
 **Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048)
 
+
 ---
 
 ## Custom Graphics
 Enter your custom graphic prompt here.
 """
 
-# JavaScript to save and load textarea content using cookies
+
 js = '''function js(){
     window.set_cookie = function(key, value){
         document.cookie = key+'='+value+'; Path=/; SameSite=Strict';
@@ -105,6 +118,7 @@ def get_config(request: Request):
     return config['campaign_details']
 
 
+
 with gr.Blocks() as iface:
 
     campaign_details_input = gr.Textbox(
@@ -115,23 +129,28 @@ with gr.Blocks() as iface:
         elem_id="campaign_details_textarea"
     )
 
-    iface.load(fn=get_config, inputs=None, outputs=campaign_details_input, js=js)
-
     campaign_details_input.change(
-        fn=lambda x: x,
-        inputs=campaign_details_input,
-        outputs=[],
-        js="(value) => set_cookie('campaign_details', value)"
-    )
+            fn=lambda x: x,
+            inputs=campaign_details_input,
+            outputs=[],
+            js="(value) => set_cookie('campaign_details', value)"
+        )
 
     gr.Interface(
         fn=generate_image,
         inputs=campaign_details_input,
-        outputs=gr.Image(label="Generated Image"),
+        outputs=[
+            gr.components.Image(label="Generated Image")
+        ],
         title="Slidegen AI - Image generator",
         article=content_html,
         description="Generate social media creatives from a few prompts",
         live=False
     )
 
+    iface.load(fn=get_config, inputs=None, outputs=campaign_details_input, js=js)
+
+
+
 iface.launch()
+