add persistence

app.py

@@ -1,36 +1,28 @@
 import gradio as gr
-import requests, base64, io
+import requests
+import os
 from dotenv import load_dotenv
-import os, datetime, mimetypes
-from PIL import Image
+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
 
@@ -39,17 +31,14 @@ 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 = """
@@ -94,29 +83,55 @@ Selected Layout: Mobile Portrait (750x1334)
 
 **Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048)
 
-
 ---
 
 ## Custom Graphics
 Enter your custom graphic prompt here.
 """
 
-iface = gr.Interface(
-    fn=generate_image,
-    inputs=[
-        gr.components.Textbox(lines=10, placeholder="Enter your Brand and campaign details here", value=default_value, label="Campaign Details")
-    ],
-    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.queue()
-# Run the interface
-#trigger
-iface.launch()
+# 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';
+        return [value]
+    }
+}'''
 
+
+def get_config(request: Request):
+    config = {"campaign_details": default_value}
+    if 'campaign_details' in request.cookies:
+        config['campaign_details'] = request.cookies['campaign_details']
+    return config['campaign_details']
+
+
+with gr.Blocks() as iface:
+
+    campaign_details_input = gr.Textbox(
+        lines=10,
+        placeholder="Enter your Brand and campaign details here",
+        value=default_value,
+        label="Campaign Details",
+        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)"
+    )
+
+    gr.Interface(
+        fn=generate_image,
+        inputs=campaign_details_input,
+        outputs=gr.Image(label="Generated Image"),
+        title="Slidegen AI - Image generator",
+        article=content_html,
+        description="Generate social media creatives from a few prompts",
+        live=False
+    )
+
+iface.launch()