app.py

import gradio as gr
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,
        timeout=900  # Timeout set to 15 minutes (900 seconds)
    )

    # 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


content_html = """
<div style="text-align: center; margin-top: 30px;">
    <h2 style="font-size: 24px; margin-bottom: 20px;">Slidegen Examples</h2>
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin: 20px auto; max-width: 90%;">
        <!-- Portrait video on the left -->
        <div style="width: 30%; padding-right: 20px;">
            <video controls style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <p style="margin-top: 10px; font-size: 14px; color: #666;">Mobile Portrait Layout</p>
        </div>
        
        <!-- Grid of images on the right -->
        <div style="width: 65%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
            <!-- Actual images -->
            <div style="width: 100%;">
                <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Square Layout" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Square Layout</p>
            </div>
            
            <div style="width: 100%;">
                <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Mobile Landscape" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Mobile Landscape</p>
            </div>
            
            <!-- Placeholder for Screenshot layout -->
            <div style="width: 100%;">
                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
                            <span style="font-size: 24px; color: #888;">+</span>
                        </div>
                        <p style="margin: 0; font-size: 14px; color: #888;">Screenshot Layout</p>
                    </div>
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Screenshots (1280x800)</p>
            </div>
            
            <!-- Placeholder for Custom layout -->
            <div style="width: 100%;">
                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
                            <span style="font-size: 24px; color: #888;">+</span>
                        </div>
                        <p style="margin: 0; font-size: 14px; color: #888;">Custom Layout</p>
                    </div>
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Custom Size</p>
            </div>
            
            <!-- Placeholder for Instagram layout -->
            <div style="width: 100%;">
                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
                            <span style="font-size: 24px; color: #888;">+</span>
                        </div>
                        <p style="margin: 0; font-size: 14px; color: #888;">Instagram</p>
                    </div>
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Instagram Story (1080x1920)</p>
            </div>
            
            <!-- Placeholder for Twitter layout -->
            <div style="width: 100%;">
                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
                            <span style="font-size: 24px; color: #888;">+</span>
                        </div>
                        <p style="margin: 0; font-size: 14px; color: #888;">Twitter</p>
                    </div>
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Twitter Post (1200x675)</p>
            </div>
            
            <!-- Placeholder for Tablet layout -->
            <div style="width: 100%;">
                <div style="width: 100%; height: 0; padding-bottom: 70%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
                            <span style="font-size: 24px; color: #888;">+</span>
                        </div>
                        <p style="margin: 0; font-size: 14px; color: #888;">Tablet</p>
                    </div>
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666;">Tablet (2280x1600)</p>
            </div>
        </div>
    </div>
    <p style="margin-top: 20px; font-size: 16px; color: #666;">Choose a layout that suits your needs from the examples above</p>
</div>
"""

default_value = """
# Brand Name
Enter your brand name here

## Description
Enter your description here.

---

## Branding

### Colors
Primary Color: i.e #000000
Secondary Color: i.e #FFFFFF

### Font
Enter Google font here i.e Arial

### Logo
Enter your logo url here.

---

## Audience
Enter your target audience here.

---

## Headings
### Main Heading
Your main heading text here.

### Sub-heading
Your sub-heading text here.

---

## Image Layout
Selected Layout: Mobile Portrait (750x1334)

**Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048), Screenshots (1280x800), Screenshots Xlarge (2280x1600)


---

## Custom Graphics
Enter your custom graphic prompt here.

## Custom Graphics Image Layout
Feature Image Background Color (Optional): i.e #008000

"""


# Escape default_value for JavaScript
escaped_default_value = default_value.replace('\n', '\\n').replace('\'', '\\\'')
js = f'''

function js() {{

   // let default_value = '{escaped_default_value}';
    window.set_cookie = function(key, value) {{
     //   if (!key || !value || value.length < 20) {{
     //       console.log("Cannot set cookie, key or value is undefined or null", key, value);
    //        console.log("default value set to: ", default_value);
    //        return [default_value];
    //    }}
    //    document.cookie = key + '=' + value + '; Path=/; SameSite=Strict';
    //    return [value];
    }}
}}
'''


def get_config(request: Request):

    if not request or not hasattr(request, 'cookies'):
        return default_value

    # Initialize with default value
    config = {"campaign_details": default_value}
    # Check if 'campaign_details' is in cookies
    if 'campaign_details' in request.cookies:
        # Assign cookie value to config if exists
        config_value = request.cookies.get('campaign_details', None)
        if config_value:
            if len(config_value) > 20:
                config['campaign_details'] = config_value
        else:
            print("Cookie 'campaign_details' is found but empty, using default_value")
    else:
        print("Cookie 'campaign_details' not found, using default_value")

    print(f"Config returned: {config['campaign_details']}")  # Debugging log
    return config['campaign_details']


with gr.Blocks(analytics_enabled=False) as iface:

    campaign_details_input = gr.Textbox(
        lines=10,
        placeholder="Enter your Brand and campaign details here",
        label="Campaign Details",
        value=default_value
    )

    campaign_details_input.change(
        fn=None,
        inputs=campaign_details_input,
        outputs=[],
        js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }"
    )

    # Create the main interface
    interface = gr.Interface(
        fn=generate_image,
        inputs=campaign_details_input,
        outputs=[
            gr.components.Image(label="Generated Image")
        ],
        title="Slidegen AI - Image generator",
        description="Generate social media creatives from a few prompts",
        live=False,
        js=js
    )
    
    # Add examples section separately
    gr.HTML("""
    <div style="margin-top: 30px; text-align: center;">
        <h3>Slidegen Examples</h3>
        <div style="display: flex; margin: 20px auto; max-width: 90%;">
            <div style="width: 30%; padding-right: 20px;">
                <video width="100%" controls>
                    <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
                </video>
                <div>Mobile Portrait</div>
            </div>
            <div style="width: 70%;">
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
                    <div>
                        <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" width="100%">
                        <div style="margin-top: 5px;">Square Layout</div>
                    </div>
                    <div>
                        <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" width="100%">
                        <div style="margin-top: 5px;">Mobile Landscape</div>
                    </div>
                    <div>
                        <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
                                <div>Screenshot Layout</div>
                            </div>
                        </div>
                        <div style="margin-top: 5px;">Screenshots (1280x800)</div>
                    </div>
                    <div>
                        <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
                                <div>Custom Layout</div>
                            </div>
                        </div>
                        <div style="margin-top: 5px;">Custom Size</div>
                    </div>
                    <div>
                        <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
                                <div>Instagram</div>
                            </div>
                        </div>
                        <div style="margin-top: 5px;">Instagram Story (1080x1920)</div>
                    </div>
                    <div>
                        <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
                                <div>Twitter</div>
                            </div>
                        </div>
                        <div style="margin-top: 5px;">Twitter Post (1200x675)</div>
                    </div>
                    <div>
                        <div style="background: #f0f0f0; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center;">+</div>
                                <div>Tablet</div>
                            </div>
                        </div>
                        <div style="margin-top: 5px;">Tablet (2280x1600)</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    """)

    #iface.load(fn=get_config, outputs=campaign_details_input, js=js)


iface.launch(show_error=True)