Spaces:
Running
Running
| 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() | |