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)

    # 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>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 = """
# 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 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)


---

## Custom Graphics
Enter your custom graphic prompt here.
"""


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"
    )

    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.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(show_error=True)