A cocktail recommendation engine built for the web.
I thought it would be cool to have a Cocktail app that would recommend me cocktails based on my flavor preferences. So I built it. Uses vue.js, working on making it an installabled PWA or maybe a mobile app if people like it.
Here it is! ==> http://bar.bwiggs.com
Goals
✔ Pretty Cocktail List
Cocktail database that I can filter based on what I have in my bar. Would love some categories such as classics, new age, tiki… Collections based on Cocktail Codex categories?
✔ Categorization/Grouping
- ✔ IBA
- ✔ Unforgettables
- ✔ Classic Contemporaries
- ✔ New Age
- Cocktail Codex
- Old Fashion
- Martini
- Daquiri
- Sidecar
- Whiskey Highball
- Flip
- ✔ Mocktails
- ✔ Bond Drinks
- Seasonal
- Refreshing
- ✔ Essentials
✔ Cocktail Recommendation
Cocktails are made up of ingredients. Everytime you upvote a cocktail, you upvote all the ingredients in that cocktails. Same for downvoting. So a high recommendation for a cocktail means that the ingredients for that cocktail scored high.
Challenges:
- Ingredients should have different weights depending on how often they’ve been rated.
- Drinks with lots of matching ingredients should not always take top spot (or maybe they should?). Zombie, Ramos Fizz and Bloody Mary are examples that might artifically get ranked high since they have a lot of ingredients.
- Ingredients with more downvotes than upvote should drop in the list faster.
Simple Average Scoring
My first attempt, and it immediately was apparent this wasn’t going to work.
$rating=\frac{up votes}{total votes}$
The problem with this is that ingredients you haven’t seen very much score higher than ingredients you’ve seen a lot, but are contentions.
I like Gin 13 of 15 times I’ve had it. It’s score would then be 0.86
.
I had Maple syrup one time in a cocktail and liked it, so it scores 1/1 = 1
.
This doesn’t feel right. There’s some great posts online that talk about this. See the ones by Evan Miller.
Maybe you’ve seen this problem with online product reviews, where a product with 1 5-star review is shown before a product with 1200 reviews and a 4.6 sta rating. You need a way to push more often reviewed highly rated items to the top of the list, and push less often reviewed products down the list.
✔ Smooth Scoring
See my Sorting Averages pages for more info.
What I ended up with was something also pretty simple: Laplace/Lidstone Smoothing.
$rating=\frac{(up + upAvg)}{((up + upAvg) + (down + downAvg))}$
Then I can just pick a constant for the upAvg and downAvg.
As an example, Gin is a popular ingredient for me. Most of the time I like it, but there are a few cocktails that I didn’t like. So out of 15 cocktails it scored 13-2. (13 likes, 2 dislikes). Plugging those numbers in. Using 4 and 7 as my constants.
$\text{score}=\frac{(up + 4)}{((up + 4) + (down + 7))}$
$\text{score}=\frac{(13 + 4)}{((13 + 4) + (2 + 7))}$
$\text{score}=\frac{17}{26} = 0.6538$
Now this will return scores > 0, which wil causes low scoring drinks to score higher than drinks with ingredients you haven’t tried yet with a score of 0. So I calculate “losing” ingredients a little bit differently.
- swap the up and down inputs
- swap the upAvg and downAvg, since i want to weight losing scores heavier.
- negate the result
Ex: I really don’t like Marachino liqueur. I’ve had 3 different cocktails that have it (Casino, Tuxedo, and another), and both times I didn’t like it. Let’s plug that score into the old approach, as well as “flip” approach I mentioned above.
$\text{score}=0-\frac{(down + downAvg)}{((down + downAvg) + (up + upAvg))}$
$\text{score}=\frac{(2 + 7)}{((2 + 7) + (0 + 4))}$
$\text{score}=\frac{9}{13} = 0.69 = -0.69$
I’m still playing with this, but seems to be working pretty well for recommendations.
Here are some links for scoring algorithms and statistics:
Cocktail Anatomy
- Base (Basis)
- Body (Modifier)
- Perfume (Flavor)
Combine this with glass, ice and garnish and you might be able to start generating illustrations or coming up with a pictoral language.
Anatomy could also be used to order the flavors of the cocktail.
Colorization
Maybe 2 ways to color each cocktail.
- Set a hex code manually or select from a preselected list of hex codes to keep everything in the same color hue.
- Color theme based on ingredient. Gin is a floral white, vodka a white/white, whiskey a brown, rye a greenish brown?
✔ Filter by Ingredient
Find me something with gin and lime. Filters the list down to drink that fit the description.
✔ Inventory and Filtering
Check all the ingredients and toggle them to indicate that you have them at home or not. Then you can filter on what you can make now. Some interesting generalization needs to happen to help with specific bottle vs bottle category.
Recommended purchases
unlock cocktails that I might only need one additional bottle for.
- ex: buy Aperol to unlock 12 more cocktails you could try.
- How does this work with substitutable ingredients
Substitution Engine
I dont have Fernet or Lillet Blanc, what can I use instead, if anything?
✔ Tags/Lists
my favorite cocktails/house cocktails
Images/Photos
I really like illustrations vs photos. Similar to the Highball app.
Cocktail Radar
Like the Technology Radar from Thoughtworks, but for recommending and showing your taste preferences? Need to put some thought into this. Axis: alcohol, tart vs sweet, bright vs not bright, bubbles.
Could this then be used to better understand your taste preferences an suggest modifications to ingredient amounts? If you tend to not enjoy tart drinks, scale that factor down on recipes that use acid.
Progressive Web App?
Installable to mobile and desktop devices? Might just be fun to play with.
Share Drinks easy import?
QR code with embedded link that has a custom drink recipe you can load from someone else.
Resources
- https://github.com/stevana/cocktails/blob/master/data/cocktails.yaml
- thecocktaildb - https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita
- https://en.wikipedia.org/wiki/List_of_IBA_official_cocktails
- https://imgur.com/a/O5nh9
- https://iba-cocktails.netlify.app/my-bar - this is pretty darn close- https://www.reddit.com/r/Mixology/comments/hcvup4/my_wife_and_i_made_an_iba_cocktails_app_some_of/ - https://github.com/mikeyhogarth/cocktails/blob/master/src/data/cocktails.json
- https://docs.google.com/spreadsheets/d/1fv1OGUhQxKCJh7zfS3w0sMIYYZHAJaoQAnHdR_rNHAk/edit#gid=0