Spaces:
Running
Running
| 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), | |
| 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 | |
| """ | |
| # 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]; | |
| }} | |
| }} | |
| ''' | |
| # Custom CSS for dark background | |
| css = """ | |
| body { | |
| background-color: #080e1a !important; | |
| } | |
| .dark { | |
| background-color: #080e1a !important; | |
| } | |
| .gradio-container { | |
| background-color: #080e1a !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(analytics_enabled=False, js=js, 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 | |
| ) | |
| campaign_details_input.change( | |
| fn=None, | |
| inputs=campaign_details_input, | |
| outputs=[], | |
| js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }" | |
| ) | |
| submit_btn = gr.Button("Generate Image") | |
| with gr.Column(scale=1): | |
| output_image = gr.Image(label="Generated Image") | |
| submit_btn.click( | |
| fn=generate_image, | |
| inputs=campaign_details_input, | |
| outputs=output_image | |
| ) | |
| # Add examples section | |
| gr.HTML(content_html) | |
| #iface.load(fn=get_config, outputs=campaign_details_input, js=js) | |
| iface.launch(show_error=True) | |