The first thing I thought when I tried all the cool tools of the Year of the AI Revolution (aka 2022) was: OMG this is amazing, it’s the AI future that I never thought I would see. The second thing I thought was: OMG this is going to be used to spam the internet with so much bland auto-generated content.
I hate bland auto-generated content as much as the next person, but I was tempted by the forbidden fruit, I irresponsibly took a bite, and two short R scripts and a weekend later I’m now the not-so-proud owner of officialcocktails.com: A completely auto-generated website with recipes, description, tips, images, etc. covering all the official International Bartenders Association cocktails.
Here’s the quick recipe for how I whipped this up.
Making an AI-generated website
This was a quick experiment to try to auto-generate a website using modern AI tools with as little effort as possible, so the code to do this ended up quick and dirty, and put up here on GitHub more for the record. But shortly, the recipe is as follows.
First up you need some data as a text-generating AI like ChatGPT needs something to work with. Here I went with the IBA list of official cocktails that I scraped from wikipedia earlier:
[{
"category": "The unforgettables",
"name": "Whiskey sour",
"type": "Cocktail",
"served": "On the rocks or straight up",
"standard_drinkware": "Old fashioned glass",
"method": "Shake with ice. Strain into chilled glass, garnish and serve.",
"notes": "If served 'On the rocks', strain ingredients into old-fashioned glass filled with ice.",
"ingredients": ["4.5 cl (3 parts) bourbon whiskey", "3 cl (2 parts) fresh lemon juice", "1.5 cl (1 part) simple syrup"]
},
{
"category": "Contemporary classics",
"name": "Black Russian",
"type": "Cocktail",
"served": "On the rocks: poured over ice",
"standard_drinkware": "Old fashioned glass",
"method": "Pour the ingredients into the old fashioned glass filled with ice cubes. Stir gently.",
"ingredients": ["50 ml Vodka", "20 ml Coffee liqueur"]
}
// etc.
Secondly, you need to use this dataset to generate prompts that the AIs will expand into more text (“List fun facts about the Cuba Libre cocktail”) and images of the cocktails (“A photograph of a Cuba Libre”). This is what
01_regenerate-assets.R
does. That script will create a
cocktail-descriptions.yaml
file that contains all the drink info scraped from Wikipedia (from
iba-cocktails-wiki.json
) plus empty fields for all the things we want to fill in, like the image, fun facts, etc. The script will then go on to fill in all the blanks. For text generation, I used the
ChatGPT API and for image generation, I picked one of the many available
Stable Diffusion APIs.
For example, by this process the scraped Whiskey sour data above got expanded with this auto-generated texts and image:
hook: Whiskey sour is a classic cocktail made with whiskey, lemon juice, and sugar.
It has a sweet and sour taste, and is usually served on the rocks.
extended_method: |-
1. Fill a cocktail shaker with ice.
2. Pour the bourbon whiskey into the shaker.
3. Add the fresh lemon juice.
4. Pour the simple syrup into the shaker.
5. Shake the mixture well for about 10-15 seconds.
6. Strain the mixture into an Old fashioned glass filled with ice.
7. Garnish the drink with a lemon wedge or cherry (optional).
8. Serve and enjoy!
tips: |-
- **Use fresh ingredients**: Use freshly squeezed lemon juice instead of bottled lemon juice for a brighter, more authentic flavor. Similarly, use freshly cracked ice instead of pre-made ice cubes for a smoother, better blended drink.
- **Balance the sweet and sour flavors**: A good whiskey sour should be perfectly balanced between sweet and sour flavors. Start by adding equal parts simple syrup and lemon juice, then adjust as needed to suit your personal taste.
- **Choose the right whiskey**: Opt for a bourbon or rye whiskey with a smooth, mellow flavor that won't overpower the other ingredients.
- **Shake it up**: Make sure to shake the whiskey sour well to properly blend the ingredients and create a frothy foam on top.
- **Garnish with style**: A traditional whiskey sour is typically garnished with a lemon wheel and cherry, but feel free to get creative and add your own personal touch with a unique garnish like a sprig of rosemary or a dash of cinnamon.
fun_facts: |-
1. Whiskey sour is believed to have originated in the Navy as a way to prevent scurvy.
2. Whiskey sour was a popular drink during Prohibition due to its easy-to-hide ingredients.
3. The traditional recipe calls for whiskey, lemon juice, and sugar, but modern variations may include egg whites or other flavors like bitters.
4. The cocktail gained popularity in the 1940s and was featured in the famous movie "Casablanca."
5. Some people believe that the drink was named after the sour taste of unripe lemons commonly used in the original recipe.
alcohol_free_alternative: |-
There are several delicious and easy-to-make alcohol-free alternatives to whiskey sour that you can try. Here are some options:
1. Virgin Sour: Simply swap out the whiskey for lemonade, and you have a refreshing sour drink with a citrusy zing.
2. Pineapple Paradise: Combine 2 parts pineapple juice and 1 part lemon juice, and add a splash of grenadine syrup for sweetness. Shake it all up with ice and serve in a glass with a cherry garnish.
3. Coconut Mojito: Muddle fresh mint leaves with lime juice and sugar syrup in a tall glass. Add coconut water and a splash of soda water, and garnish with more mint leaves.
4. Ginger Highball: Mix ginger beer with lime juice and cranberry juice for a spicy, fruity, and refreshing cocktail.
5. Tea-Tini: Brew a strong cup of tea (such as earl grey or green tea) and mix with lemon juice and agave syrup. Serve chilled in a martini glass with a lemon twist.
image_path: cocktail-images/whiskey_sour.jpeg
One thing that I found really useful was for the
01_regenerate-assets.R
script to only fill in blank fields when rerun. Unless you’re a prompt wizard, there are always going to be generated text and images that are a bit wonky. But if you can simply delete what looks off, and then only regenerate what’s missing, it’s much quicker to fix the most egregious AI hallucinations than if you had to regenerate everything from scratch.
Third, package all the generated content into a format that a site generator like
hugo can render. This is what
02_generate-website.R
does. That script takes the auto-generated cocktails descriptions and images from
cocktail-descriptions.yaml
, glues together one markdown file for each cocktail, and puts those files in the correct place in a hugo site structure. For example, here’s how
whiskey_sour.md
turned out.
Fourth, make it look OK. This was the hardest part for me, but luckily I found a decent-looking theme for hugo that I could bend to my will.
Finally, put it somewhere. To make it extra official I snagged the official-sounding URL
officialcocktails.com
and I’m currently hosting it using the
free tier on Netlify.
How ashamed am I?
I mean, I’m a bit ashamed. I’m ashamed about having added yet another drop of noise into the sea that is the Internet. I’m not sure if the warning I put on the website makes up for it:
The recipes and ingredient lists are correct, trustworthy, and fact-checked. Everything else, images included, is hallucinated by an evil AI.
I’m also a bit ashamed because the auto-generated content isn’t very good. ChatGPT does introduce a lot of silly mistakes (Whiskey sour was not “featured in the famous movie Casablanca”) and the Stable Diffusion images often include weird artifacts. However, this is not always bad, as in this interesting picture that got generated for the drink Yellow Bird:
But maybe I just need to work on my prompts…
What I’m happy about is how quick it was to generate something like this from scratch. And cheap! The API cost of generating this site was less than $1. And one thing I’m excited about is revisiting officialcocktails.com in a couple of months and replacing ChatGPT and Stable Diffusion with what’s then the latest and greatest to see how that improves the site.