Iris ChatBot

Made Hugging Face Space and Connected it:
Since I couldn’t run the heavy Llama-3 model on my own computer, I hosted it on Hugging Face Spaces. I used Docker template in HF. I had to learn a bit of Python and FastAPI to turn my model into a working server.

• The coolest part I figured out was giving her internet access! I wrote a small function that uses DuckDuckGo to search the web whenever you ask a question, and it secretly sneaks those facts into the AI’s prompt before she replies (RAG system!).
• Finally, to connect it to my Next.js frontend,I made a Next.js /api/chat route. My website talks to my Next.js backend, which talks to Hugging Face.
  It took a lot of debugging, but seeing the frontendnactually receive messages from my custom backend makes all the time spent totally worth it.
  Check the Hugging face repo here: https://huggingface.co/spaces/lilLilith/Amadeus-RAG/tree/main
  I’ve put the backend API pics which HF receives

Trained the data on kaggle as this:

• I started with a export of about 81,000 lines of WhatsApp messages! I had to write a script to clean out the junk (like “message deleted” or system alerts) and ended up with 12,613 dialogue samples. I grouped consecutive messages together so the AI would learn how to text like a real person, using paragraphs and slang instead of just short, robotic answers.
  -Next I used a Llama-3 8B model as the base. To make the training actually possible on a Kaggle, I used a library called Unsloth. It makes the training so eazy and faster.
  -Then ran the training on Kaggle’s T2x2 GPUs. I set it for 1,000 steps and watched the lost (which is basically how many mistakes the AI makes) drop from 2.5 all the way down to 0.3. It took a lot of trial and error to get the settings just right
• Once it was done, I exported the model in a special format (GGUF) so it could run efficiently on the web. It was a long process.

(I’ve actually put so many days on this part as it was so different and I’m also just a beginner to ML/AI. I hope I’ve explained things here better for beginners. If you guys don’t understand any part of the cell on kaggle just do a comment )

I’ve also shared the link to the kaggle , due to privacy issues (of WhatsApp chats) I created a separate notebook where everything is the same, except the input WhatsApp file has been removed. You can explore here and use your own exported chats and train your own model :)
https://www.kaggle.com/code/hamnamubarak/iris-model/edit
(Click on the “copy & edit” to see the code )

Finally made the UI, I really wanted to do that cozy aesthetic vibe so it wouldn’t just look like another boring chat app. Here is how I put it together:

• Nextjs 16 turbo as frontend framework.
• I used Tailwind CSS to create a custom soft theme. I picked a color palette with soft Lavender, Sakura pink, and deep purples to give it that dreamy feel.
• To make the website more interactive, I used Framer Motion. I added smooth transitions for when you switch between chat and history, and I made sure the speech bubbles have a nice little pop animation when they appear.
• I split the screen into three main parts , a Radio Station on the left , the Chat Panel in the middle, and Memory Logs on the right.
• I even coded a niko-chan SVG avatar that floats in the corner and reacts when you click her! It adds that extra bit of personality that makes the interface feel more human.