Building with GPT4 and Svelte

While others are busy crafting actually useful tools and apps with generative AI, I made a travel site for cats. This is a brief overview of the process.

Everything is open source on GitHub: The Svelte website and The content generation pipeline — do whatever you want with it, no restrictions.

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.

Generating content

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:

function gen_tipping(city, content_type = '', country = '', city_id = ''){
    let tipping_obj = {
        'usual-tipping-range': "range (e.g. '0-5%', '5-10%', etc.)",
        'description': 'brief info about tipping culture in this city (max. 12 words)',
        'pay-culture': 'brief info about paying process in restaurants (e.g. credit card vs. cash preference, splitting the bill practices, etiquette tidbits, things like that) (max. 32 words)'
    }
    let prompt = "What are the tipping customs in " + city + " - " + country + "? Write it in the JSON format below. 0% is also valid answer (only if you are confident that that's the case!). If the city is too small or you don't have the data, just make a guess based on the country itself. Don't say anything else, only fill in the JSON. \n\n" + JSON.stringify(tipping_obj);
    process_prompt(prompt, content_type, city, city_id);
}

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.
Generating images
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

Svelte website

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.

Design
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.
Svelte setup
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)

Components
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:

<div id='socket' class='card c_square' on:click={(event) => click_t(event)}>
    <div class="card_wrapper">
        <div class='card_background'></div>
            <div class='card_content_collapsed'>
                <span id='socket_type' class='socket_{data.c.socket_type.toLowerCase()} card_icon_socket keep'></span>
            </div>
            <div class='card_content_expanded'>
                <span id='socket_type' class='socket_{data.c.socket_type.toLowerCase()} card_icon_socket dup'></span>
                <div class='space_s'></div>
                <p id='socket_head' class='inner_head_small getin'>Electric socket type {data.c.socket_type}</p>
                <p id='socket_desc' class='text_desc getin'>{sockets["type-" + data.c.socket_type]}</p>
        </div>
    </div>
</div>

Search
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).
The rest
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.

Lev Miseri