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://127.0.0.1:8021")
APP_ENV = os.environ.get("APP_ENV", None)
STRIPE_PAYMENT_LINK = os.environ.get("STRIPE_PAYMENT_LINK", "https://buy.stripe.com/00gbJE8St1EL5OM6oA")



# Assuming the API returns an image URL in the response
def generate_image(campaign_details, license_key=None):
    # Define your payload/data to send to the image generation API
    data = {
        "request_string": campaign_details,
        "is_single_image": False,
        "license_key": license_key
    }

    # 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 == 403:
        error_msg = response.json().get("detail", "License key error")
        return None, error_msg
    elif response.status_code != 200:
        print(f"Error {response.status_code}: {response.text}")
        return None, "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']
    
    # Get usage information if available
    usage_info = ""
    if "remaining_uses" in image_data:
        usage_info = f"Remaining uses with this license key: {image_data['remaining_uses']}"
    elif "free_uses_left" in image_data:
        usage_info = f"Free uses remaining: {image_data['free_uses_left']}/5. Get a license key for more!"
        
    return data_url, usage_info


# Validate license key against the API
def validate_license_key(license_key):
    if not license_key or license_key.strip() == "":
        return "Please enter a license key (your email) or purchase one."
        
    response = requests.post(
        API_URL + "/validate-license-key",
        params={"license_key": license_key},
        timeout=10
    )
    
    if response.status_code != 200:
        return "Error validating license key. Please try again."
        
    data = response.json()
    if data["is_valid"]:
        return f"Valid license key. Remaining uses: {data['remaining_uses']}"
    else:
        return "Invalid license key. Please purchase one or try again."


content_html = """
<div style="text-align: center; margin-top: 30px;">
    <h2 style="font-size: 24px; margin-bottom: 20px;">Slidegen Examples</h2>
    
    <!-- Wrapper with responsive styles -->
    <style>
        @media (max-width: 768px) {
            .slidegen-container {
                flex-direction: column-reverse !important;
            }
            .video-container {
                margin-right: 0 !important;
                margin-top: 25px !important;
                width: 100% !important;
                max-width: 300px !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            .carousel-container {
                width: 100% !important;
            }
        }
    </style>
    
    <div style="margin: 20px auto; max-width: 95%; position: relative; display: flex; align-items: flex-start;" class="slidegen-container">
        <!-- Stationary Tutorial Video on the left (on desktop) or bottom (on mobile) -->
        <div style="flex: 0 0 180px; margin-right: 25px;" class="video-container">
            <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                <video controls controlsList="nodownload" playsinline style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
            <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Tutorial Video</p>
        </div>
        
        <!-- Scrollable carousel container for other items -->
        <div style="flex: 1; overflow-x: auto; white-space: nowrap; padding: 0; scrollbar-width: thin; scrollbar-color: #4a5568 #1a2438;" class="carousel-container">
            <!-- Screenshots (1280x800) -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556423/Slidegen/bgpt-faveimage_20241230061609_nbrjb5.png" alt="Screenshot Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Screenshots (1280x800)</p>
            </div>
            
            <!-- Square Layout -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 220px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Square Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Square Layout</p>
            </div>
            
            <!-- Custom Size -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556411/Slidegen/exploring-host-cities_lp6dy8.png" alt="Custom Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Custom Size</p>
            </div>
            
            <!-- Mobile Landscape -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Mobile Landscape" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Mobile Landscape</p>
            </div>
            
            <!-- Twitter Post -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 220px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556418/Slidegen/browsergpt-cartoon-ad_xodysb.png" alt="Twitter Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Twitter Post (1200x675)</p>
            </div>
            
            <!-- Landscape Article Image -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745558123/Slidegen/article_image_1745215220129_32yqnq_ldeyft.png" alt="Landscape Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Landscape Article Image</p>
            </div>
            
            <!-- Landscape Layout -->
            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745558119/Slidegen/1692111223459-153ucd_hibeys.png" alt="Landscape Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                </div>
                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Landscape Layout</p>
            </div>
        </div>
    </div>
    <p style="margin-top: 15px; font-size: 14px; color: #888; text-align: center;">← Scroll horizontally to see more layouts →</p>
    <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), 
iPhone 6.9" (1290x2796), iPhone 6.5" (1284x2778)


---

## Custom Graphics
Enter your custom graphic prompt here.

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

"""


# Custom CSS for dark background
css = """
body {
    background-color: #080e1a !important;
}
.dark {
    background-color: #080e1a !important;
}
.gradio-container {
    background-color: #080e1a !important;
}

/* Simple license key section styling */
.license-section {
    margin-top: 24px;
    margin-bottom: 40px;
    text-align: center;
}

.center-text {
    text-align: center;
    margin-bottom: 0px;
}

.license-bottom {
    margin-bottom: 5px;
}

.license-button-row {
    margin-top: 16px;
    margin-bottom: 16px;
}

.license-status {
    margin-top: 16px;
    margin-bottom: 3px;
}

/* Custom button width */
.license-button-row button {
    width: 40% !important;
    margin: 0 auto !important;
}
"""


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(css=css, title="Slidegen AI - Image generator") as iface:
    gr.Markdown("# Slidegen AI - Image generator")
    gr.Markdown("Generate social media creatives from a few prompts")

    with gr.Row():
        with gr.Column(scale=1):
            campaign_details_input = gr.Textbox(
                lines=10,
                placeholder="Enter your Brand and campaign details here",
                label="Campaign Details",
                value=default_value
            )
            
            # This JS approach doesn't work in Gradio 3.x, so we're using a simpler approach
            campaign_details_input.change(
                fn=lambda x: x,  # Just a simple identity function
                inputs=campaign_details_input,
                outputs=campaign_details_input
            )
            
            submit_btn = gr.Button("Generate Image")
            
        with gr.Column(scale=1):
            output_image = gr.Image(label="Generated Image")
            usage_info = gr.Markdown("Usage info will appear here after generation.")
            
            # Center-aligned license key section with bottom margin
            with gr.Group(elem_classes=["license-section"]):
                license_key_input = gr.Textbox(
                    placeholder="Enter your license key",
                    label="License Key (optional for first 5 images)"
                )
                
                # Center the button using Row and Columns
                with gr.Row(elem_classes=["license-button-row"]):
                    with gr.Column(scale=3):
                        # Empty column for spacing
                        pass
                    with gr.Column(scale=4):
                        validate_btn = gr.Button("Validate")
                    with gr.Column(scale=3):
                        # Empty column for spacing
                        pass
                
                license_key_status = gr.Markdown("You can generate 5 free images without a license key.", elem_classes=["license-status", "center-text"])
                gr.Markdown(f"Need more images? [Purchase a license key]({STRIPE_PAYMENT_LINK}) for 50 images.", elem_classes=["center-text", "license-bottom"])
                gr.Markdown("Each image generation uses 1 credit. Free tier gives 5 credits, license key provides 100 credits.", elem_classes=["center-text", "license-bottom"])
    
    # Set up the validation button click event
    validate_btn.click(
        fn=validate_license_key,
        inputs=license_key_input,
        outputs=license_key_status
    )
    
    # Update the submit button click event to include the license key
    submit_btn.click(
        fn=generate_image, 
        inputs=[campaign_details_input, license_key_input], 
        outputs=[output_image, usage_info]
    )
    
    # Add examples section
    gr.HTML(content_html)

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


iface.launch(show_error=True)