How We Built AI Wallz in 3 Days

Posted on July 1, 2024

We had the idea right as we were about to leave San Francisco for Canada. After creating a rough version of Code Butter in less than 12 hours for a hackathon, we realized there needed to be a fundamental shift in UI design for AI-based applications. Instead of users dictating the UI, the UI should guide the users. This insight led us to build AI Wallz—a project that explores how the next wave of generative AI applications might interface with users.

Web development trends
My current iPhone wallpaper (made with AI Wallz)

Architecture

The application uses Flutter for the frontend and incorporates a range of technologies, including NeonDB, Cloudflare Workers, Prisma Accelerate, and R2 buckets to store wallpapers. The backend is written in both Rust (for the sorting algorithm) and HonoJS.

We use NeonDB as a PostgreSQL database to quickly iterate on the design, ensuring fast and efficient iteration cycles. Cloudflare Workers provide global latencies of less than 500ms, as verified by our in-house endpoint checker.

We were pleasantly surprised by how well these components worked together. Additionally, we used Replicate.com to generate wallpapers with Stable Diffusion 3. To ensure high-quality outputs, we ran an upscaler on the generated images, managed by error-catching mechanisms in our pipeline. This approach allowed us to deliver upscaled, high-resolution completions efficiently.

Finally, we implemented the OMNI EPIC algorithm, which enabled us to create and generate diverse prompts without extensive manual input.

Data flow

Flutter Frontend (User Swipes)

User swipes on data in Flutter app

Cloudflare Workers
OMNI-EPIC Algorithm
Replicate.com
R2 Storage
NeonDB
Flutter Frontend (Fetch Next Item)
The flow loops back to the Flutter Frontend
Simple data transfer diagram

Serverless Architecture

The initial idea was to iterate on something fast; and rather than spinning up an EC2 with Caddy and a Gin server, we decided to go serverless, using Cloudflare Workers and NeonDB(for storage). The serverless architecture allowed us to build, prototype, and deploy quickly without managing servers or scaling infrastructure. This enabled us to focus on the core features of the application.

Using NeonDB with Prisma Accelerate helped us track application performance and latency, ensuring that our queries were fast and efficient even with over 200 concurrent users(not a huge feat but we used websockets for real time updates)

We utlised Cloudflare with a combination of NeonDB to also run the OMNI-EPIC algorithm, which is more detailed in the post here and if you are interested in finding out how it was used to train generalist agents by simulating multiple environments, you can check out the link here .

Client
Cloudflare Worker
Origin Server
Serverless architecture diagram

We were surprised at how much data we transfered over in the past few days as well; and I think it would have been nearly impossible if not for having Cloudflare as a CDN and Edge worker provider.

Web development trends
Our current cloudflare stats!

I think it would have been almost impossible to build something this robust and fast if not for the amazing tools we have at our disposal today. So I guess if you have a plan and the right tools; you'd be able to build out anything you want in no time!

Intuitive UI

We ensured a top-notch user experience by using Flutter to design an intuitive and user-friendly UI. The UI guides users through the wallpaper generation process with ease. We also implemented a swipe feature that allows users to quickly cycle through different prompts and generate new wallpapers in seconds.

Inspired by Tinder's card swipe feature, we provided a similar experience to our users, making it easy to get human feedback on user preferences.

To address the issue of downloading wallpapers, we made a right swipe not only like the wallpaper but also initiate the download, offering a seamless solution.

Streets with Eyes(truncated)

Streets with Eyes(truncated)

Don't like
Download
Sphere

Sphere

Don't like
Download
Racoon!

Racoon!

Don't like
Download
Swipe left to reject and right to download!

User Preferences

We gathered a dataset from about a thousand users regarding their preferences, aiming to introduce even more similar applications in the near future. Building this product has opened a new visual field for us, sparking curiosity about the future of human and AI interactions. We believe the future of many products will be not only promptless but also uniquely hyper-personalized for users. We are excited about the work we will be doing in the next few weeks and look forward to sharing it with you.

written by Rach Pradhan