The website: www.meoweler.com
I’m a designer, not an engineer, and that’s sadly reflected in the quality of the code. Everything below is merely a window into how the various pieces were badly assembled into a decent result. If anyone’s interested in cleaning things up and improving the code, please, go for it!
Meoweler consists of two separate parts — the content generation and the user-facing website.
The AI pipeline is fairly straightforward and consists of these steps—
Getting list of all cities
For our needs the $0.00 basic database of world cities from simplemaps.com is more than enough. I won’t go into the details of slicing this data up and removing everything we don’t need.
Coming up with the content
What do cats care about? Number of sunny days? Traffic? Loudness? Mmmeow, maybe some hidden gems of places to visit? (Okay, the website is obviously for human travelers, but I thought that rating cities on non-traditional aspects that both cats and humans care about was a fun twist)
Creating GPT prompts to generate the content
I guess there are better ways about this, but one option is to simply ‘ask’ for what we want and make GPT answer with a JSON string. Note: This was before OpenAI introduced functions, which could have made the process more streamlined.
The 'template' prompt looked something like this:
Automating content generation
We have the list of cities and we have a template prompt for the content blocks in a city. A simple for loop with some handling to make sure we don't reach openAI's rate limits will do. I'm then temporarily storing the content inside mongodb, but any data holder will do. We won't really need a database anyway.
All of the images are generated by Midjourney. Because they don’t have an API, this was a very painful manual process via Discord. What made at least somewhat bearable were ‘combinations’, so that you can generate 20 images with one prompt.
The specific prompt used for all illustrations was:
[city] - [country], atmospheric day, very vibrant colors, cats, lots of white space, stylish vector hyperrealism with surreal elements, landmark view, dynamic composition --ar 19:10
Now that we have the AI generated content, we need a website to display it. I’ve been eyeing Svelte for some time and this project was kinda an excuse to finally use it while learning the framework’s basics.
We don’t need to care about any pesky users and their needs in this 'for fun' project. Instead, jumping straight into high-fidelity designs for both desktop and mobile to not waste any time. Heck, I don’t even know how to introduce the project to first time visitors, and so a cat and ‘meow, meow-meow’ as the tagline it is.
Going with the defaults here and using
/routes/[country]/[city] for URL routing. For shorter urls I’m cutting the country name into ‘first three characters’ + ‘last character’ (so e.g. Berlin’s path would be meoweler.com/gery/berlin)
In the designs I have this card that expands and collapses on click:
We need two things for this to work — the size of the ‘expanded’ card and calculating the screen’s edge offset (so that if the user is scrolled down we offset the expanded values to make sure the card always expands fully into view). This is perhaps more straightforward than it seems. I have both the 'collapsed' and the 'expanded' content as separate wrappers in the DOM:
The search on Meoweler is very fast, but that’s because I’m kinda cheating. Nothing is actually being ‘searched’. It’s all just a big filter through client-side stored JSON file. We can afford to go with a solution without a database (even a server-side db) because the data doesn’t change over time and it’s all relatively small. The ‘filtering JSON’ is containing only the names of the 5000 cities, the country, and the population so that we have at least some heuristic to sort them by. Everything else is pulled from the server later (and pre-fetched oh mouse hover to make it feel even snappier).
There is nothing particularly interesting about the rest of how everything is assembled together. A combination of polishing, playing with the details, making data flow through the svelte's innerworkings. And plenty of things to still fix when the time allows.
The cost so far:
~$50 for generating content for 5000 cities
~$90 for all images (Midjourney subscription)
In its current state Meoweler.com might not really be all that useful for actual tourists, but I was generally surprised by the quality of the content GPT produces. Adding areas (e.g. Yosemite, Alps, countries, ...) would be the next thing on the list (after fixing the image size issue) to grow the website into something more useful.
The entire code is on github, feel free to use it, steal it, do whatever you want with it.