Hairstyle Lookbook RAG App: Part I

Do you remember walking into a hair salon, sitting down and opening one of the various hardcover style magazines? You would arrive early to your appointment and thumb through the pages to see the latest trending hairstyles. Within 15 minutes, you knew what “do” you wanted to have when you walked out of the salon that day.

But those days are gone. Today, magazines and style books have disappeared from salon waiting areas. But the nostalgia remains.

So I began wondering, what if salons brought back lookbooks, but in a digital format? And not just any lookbook, but a digital lookbook of salon clients (with permission, of course). Wouldn’t it give clients a better idea of a stylist’s skills and strengths so they could be better matched with a certain individual?

Inspired by my personal salon experience and my interest in RAG, I decided to merge these two ideas into a RAG lookbook. 

Below I’ve defined some of the broader scope of the application and why RAG is a perfect fit for this type of app.

What is RAG?

RAG, Retreival-Augmented Generation, is basically a smarter version of any AI chatbot like ChatGPT. Instead of scraping the entire internet for information, it looks at your own, very specific set of data to return more refined, accurate results, reducing those dreaded ChatGPT hallucinations!

It’s ideal for searching within a companies private data sources for internal usage or for making it accessible to clients, like a hair salon.

Why RAG for a Lookbook?

You might wonder why not just use a bunch of filters, right? Well, that’s the beauty of RAG…it doesn’t just match filters; it understands context. Using a temperature score, you’re able to receive more precise results. The higher the temperature score, the more random, while the lower the score, the more narrow the results. A score of 0 is the most accurate.

And what is the benefit to the user?

Fewer clicks and more focused results lead to a better user experience. When you type “I’m looking for a short, blonde hair style for a woman with a heart-shaped face,” the results that don’t align with your search should be filtered out. The vector-search does the filtering behind the scenes so YOU, the user, don’t need to!

Pretty cool, right?

So how do we get this to actually work? What tech do we need?

I’m glad you asked! With any engineering task, I think it depends!

I learned about RAG from a short tutorial and a few podcasts from Brian Jenney (check him out if you’re not following him already!). As Jenney mentions, a lot of LLM talk centers around python, but he’s been building RAG apps using JavaScript. Like any codebase, the tech will vary because there is never just one solution.

My goal with this app was to keep the exploration and learning focused on the RAG development. So that meant I would use technology I was already familiar with for the frontend and backend. Throwing too much new tech into the mix slows down progress and I wanted to keep my learning pretty defined.

Here’s what I ended up with:

• Backend – django backend to upload photos, tags and descriptions. Django also served as the “connection” between the vector-database, OpenAI and the frontend.
• Frontend – Next.js to display the app to the world
• Vector-Database – Pinecone to store the data defined in the Django backend in a vector format
• Chat — OpenAI integration to transform django data into a vector format for Pinecone and for returning a human-like response after the user has submitted their search

But before diving too deep into the technical details, I’ll first explore some of the decision making process and how AI, like Kiro, can be used to create AI. In Part II, I’ll dive into the requirements, the tasks and the design docs.

Next up: Part II – Requirements & Initial Setup, where I’ll show how AI helped me create this AI app.

Photo by Adam Winger on Unsplash