app.py

import gradio as gr
import requests
import numpy as np
from time import sleep

max_attempts = 12


def run(prompt, token):
    job = requests.post(
        "https://api.workranked.com/webhooks/ai-web-design",
        data={"prompt": prompt, "token": token},
    ).json()["data"]["job"]

    result = {}
    for attempt in range(0, max_attempts):
        gr.Info(f"Waiting for results (attempt {attempt + 1} of {max_attempts})")
        sleep(10)

        result = requests.post(
            f"https://api.workranked.com/webhooks/ai-web-design-result",
            data={"job": job},
        ).json()["data"]
        if result.get("output"):
            break

    if not result.get("output"):
        gr.Error("Sorry, your request timed out. Please try again later...")

    images = result.get("output", {}).get("images")
    image = np.array(images[0]) if images else None

    return image


gr.Interface(
    fn=run,
    inputs=[
        gr.Textbox(
            label="Text Prompt",
            lines=3,
            info="For the best results, try formatting your prompt similar to the examples below",
        ),
        gr.Textbox(label="Secret Token"),
    ],
    outputs=gr.Image(label="AI-generated Image"),
    # gr.Number(label="Generations Remaining"),
    title="AI Web Design Demo",
    description="""Try out a text-to-image AI model specifically trained to generate website designs and graphics.

[Subscribe here](https://upperhorizon.com/waitlist-wd?utm_campaign=gradio-demo) to get updates on the development and release of this tool.

Have an idea or suggestion? Provide feedback directly to me (the developer) at [hello@upperhorizon.com](mailto:hello@upperhorizon.com).

Also check out some generated designs here: https://upperhorizon.github.io/

Note: this setup/model is experimental; if you encounter any bugs/errors, let me know and please try again later...""",
    submit_btn="Generate",
    cache_examples=False,
    examples=[
        [
            'header, 1920px, award-winning, community; clean, simple, 2-column, minimal, playful, pastel vibes, vector illustration of graph, icons, rounded buttons, soft shadows, colors: yellow, white, black; reporting analytics, data dashboards, employee engagement, trends, recognition, free trial, peer feedback, integrations, Slack, Microsoft Teams, custom rewards',
            None,
        ],
        [
            'header, 1920px, award-winning, nature; clean, simple, 2-column, minimal, vector illustration of trees, icons, rounded buttons, soft shadows, earthy tones, colors: olive green, cream, soft brown; sustainability, forest services, eco-friendly',
            None,
        ],
        [
            'header, 1920px, award-winning, e-commerce; clean, minimal, interior furniture graphic, Scandinavian design, earthy vibes textures, subtle elegance, icons, rounded buttons, soft shadows, colors: muted beige, warm brown, soft grey; rug collections, decor store, product sale',
            None,
        ],
        [
            '1920px, award-winning, detailed; purple background, bold sans-serif text, minimalist, two-column layout, app store buttons, centered elements, playful, modern, clean design, colors: pastel purple, white, black; templates, marketplace, pricing, download, connect socials, monetize, audience building, analytics, creators, influencers, small businesses, e-commerce, mobile app, community',
            # "homepage, 1920px, award-winning, tech\nminimalist, playful, modern, clean design, bold sans-serif text, colors: pastel purple, white, black\nanalytics, small businesses, e-commerce, marketplace, audience building, pricing, download, connect socials, monetize, creators, influencers, mobile app, community",
            None,
        ],
        [
            'header, homepage, 1920px, award-winning, shopping; minimalist, dark mode, flat vector graphic of film camera, tech-focused, monochrome elements, black, orange accents, modern design, futuristic vibe; cinematic gear, motor upgrade, camera control, training app, testimonials, demos, creative filmmaking, film production technology, wireless control, virtual production tools, third axis control',
            None,
        ],
        [
            'header, homepage, 1920px, detailed, award-winning, non-profit; classical, grayscale, academic theme, clean design, serif fonts, overlapping images, geometric accents, neutral tones, colors: muted teal, brick red, classic tan; research programs, antitrust, consumer protection, data security, privacy, financial regulation, innovation, intellectual property, telecommunications, publications, events, policy debates',
            None,
        ],
        [
            'homepage, 1920px, highly detailed; colorful futuristic, vibrant neon green, deep purple, holographic elements, tech-themed, 3D graphics of phones and rings, single bold column, minimal text, playful, modern, floating objects, abstract shapes; financial services, money management, peer-to-peer payments, stock investment, discounts, banking apps, prepaid debit cards, tax filing',
            None,
        ],
        [
            'homepage, 1920px, tech startup, detailed, space; industrial space theme, scientific, modern, technical vibes, large serif text, colors: deep black, cosmic gray, bright red accents; space exploration, robotics, technology development, scientific research, missions, educational resources, planetary studies, climate change',
            None,
        ],
        [
            'header, homepage, 1920px, detailed, award-winning, best visuals; sleek, minimalist, dark mode, monochrome, modern, tech-themed, large hero image, aesthetic, 2-column layout, rounded buttons, seamless transitions, bold typography, dynamic, colors: black, white, violet accents; creative collaboration, media sharing, feedback tracking, cloud-based platform, video editing, production workflow, file transfer',
            None,
        ],
    ],
).launch()