52W: W1 - AR Games Web App

January 8, 2023

I decided to centralize my posts on my own website according to POSSE principles.
The original post is on Substack here: https://52weeks.substack.com/p/week-1-authentic-relating-games-web

My connection games app - argames.glide.page

This week I created a web version of Authentic Revolution’s Authentic Relating Games Manual. Here’s the link: argames.glide.page

I’ve squeezed a lot of value using this manual when planning connection workshops and games nights over the last few years, but browsing it as a giant 200 page PDF document, especially on a phone, is pain. I wanted to remove that friction by adapting the PDF into a responsive web app. I spent a lot of time on two things: (1) scraping and parsing the text from the PDF and (2) using text2image models to generate icons for each of the exercises.

Tools I used:

  • Glide - a no-code web app builder

  • Python + Jupyter Notebooks (github link)

  • Playground.ai - to experiment with models for icon generation

  • Several Text to Image models (using the Replicate API) - to batch create my icons

  • The Swinir Image Upscaling model - to batch upscale my icons

Process

First I had to scrape the PDF to get the usable text. I used a PDF to text converter, which gave me a big blob of text in a .txt file. Then I used pandas to parse the .txt file into an unstructured dataframe in a single column. I pulled out the parts I needed: exercise names, descriptions, setup, time, variations, and notes, then exported those as a CSV into a google sheet.

I wanted to limit the scope of this project since it’s the first week, so I decided to check out some no-code tools to build the web app. I researched a few and picked Glide.

Setup was easy and intuitive. I pointed it to my Google Sheet with the content, then played around with the drag and drop editor to get it looking decent on both mobile and desktop versions.

It worked fine, but wasn’t very fun/engaging to look at. I decided it needed graphics to make the app more visually appealing and break up the text. Ideally I’d have an original icon for each of the 133 exercises.

I messed around with creating them using Stable Diffusion / Dall-E 2 using the Replicate API - a super simple wrapper that lets you call popular models in just a few lines of code.

It was fun, but I wasn’t able to get a consistent style. Here are some of my early attempts at icons:

They look cool, but too different from each other

My AI image skills weren’t good enough yet to achieve what I wanted: a set of 133 icons all in the same style crafted to particular prompts. I started looking at fiverr.com to find an illustrator who might draw me some affordably. I found a good selection of offers, but they were charging between $1-3 per icon, which would end up costing me $150-300 for the set. More than I planned to spend.

Browsing through example work on fiverr, I was taken with black and white, minimal, hand drawn icon styles:

I tried reverse engineering the alt text on stock graphic websites for such icons to generate similar images. For example:

Hand Drawing Doodle, a hand drawn vector doodle illustration, black and white, simple, cartoon, constellation, star, planets


a hand holding a pencil, black and white line drawing, simple minimal icon on a pure white background, in the style of leunig, whimsical, cartoon, thin lines

The results:

Getting closer.. but the style is still too variable. Doing this over 133 icons will result in a mishmash of styles that won’t feel cohesive.

Next I tried an ‘image to image’ model. I provided a base image and a prompt and asked the model to combine the two. One of the parameters to tweak is the relative strength of the initial image vs the text prompt in the output.

Initial images:

Results:

Various initial image vs prompt ratios

The problem here is that all my icons would end up looking like lemons or mushrooms. Consistent, yes, but still not quite right.

Next up, I used as image input a grid of simple, standard icons:

With a relatively low prompt strength / high initial image strength, to keep the icon style strong. BINGO!

Not every icon works, but there is enough similarity between many of them that I can pick and choose the best ones. I generated ~30 of these tiles, each containing 25 icons, with a variety of prompts (some abstract, some directly related to the titles I wanted), which gave me 750 original icons to pick from. And all for less than $1 of cloud compute!

These icons were small in size/resolution, so the last step was to upscale them. This was again super easy using a model I found on Replicate: jingyunliang/swinir

Left: initial output, Right: upscaled version

After upscaling all the icons and adding them to the site, here is the final result:

Investment:

  • 10-20 hours

  • $1 for running models in Replicate

Learnings:

  • I was impressed with how simple and slick Glide is. Pointing to a google sheet was easy, and making it look nice also a breeze. I now have more confidence in no/low-code tools for quickly prototyping

  • Looking at a workable front end is inspiring and helps me generate ideas, now that I know how easy it is to plug-and-play, I can test out new ideas quickly

  • Generating original content and media can be expensive if you pay a human, but AI makes it cheap and scalable. APIs make interacting with models very accessible

Next steps:

  • Glide costs $25/month minimum if I want to remove their watermark from the app. I think I can build and host this myself, perhaps with a React frontend template, Contentful for headless CMS, and Netlify for the hosting + a custom domain. I would still have to pay, but much less, and I would own it all

  • If I build the app myself, I can add interactive experiences to certain exercises, like adding a timer, generating prompts, assigning groups, etc

  • I want to make this into an iOS + Android app and upload to the respective app stores