DEV Community

Melissa Payne
Melissa Payne

Posted on

Just Pick For Me: A Restaurant Picker for My Mom That Runs Entirely in Her Browser

Hacktoberfest Weekend Challenge: Build for a Friend Submission 🤝

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

My mom has the hardest time picking a restaurant, and I'm not much help either. It's not that there are too many places, or not enough. We just can never figure out what we want, so it always ends with "just pick someplace."

Just Pick For Me was born from that. Instead of showing her a long list, it asks four easy "this or that" questions (sit down or grab-and-go, light or hearty, familiar or something new, close by or worth a drive), finds real places nearby, and picks one for her with a short, friendly reason why.

A few touches I added just for her:

  • It knows her name. The first time she opens it, it asks what to call her. After that it greets her and talks to her by name.
  • It shows its work. The result lists the answers that led to the pick, so it never feels random.
  • It learns what she likes. "Let's go here!" saves a place as a favorite, and the AI leans toward favorites when she wants something familiar. "Never suggest this place" means she never sees it again. "Not tonight" just picks another.
  • Directions in one tap to get her there, just in case it is a new one.

Mom's (raw) reactions:

  • A little bland but seems simple enough
  • Nice loading bar
  • Do I have to give it permission to my location? Is that safe?
  • Clear and not too wordy so that's nice
  • Should it be doing something here?

Her "Should it be doing something here?" is exactly the rough edge I list under What's Next, and her location question is why I made sure the app is honest about what leaves her computer. "A little bland" is fair too. Making it look better is on the list.

Demo


Try it here

App Tour:

  • Home Screen
    Home

  • Name Pop-up
    Name Popup

  • Loading bar
    Loading

  • The only thing that leaves her computer is her location, and the browser asks permission first
    Location

  • The result
    Result

  • Clicking let's go here saved it.
    Saved

  • 'Not tonight' or 'Never suggest this place' picks another
    Chose

  • Just in case you ran out of options you get this screen
    Out of options

Code


How I Built It

The stack: Vite + React for a simple, lightweight static site, the OpenStreetMap Overpass API for real nearby restaurants (free, no API key), and Qwen 2.5 0.5B, an open-weight model, running inside the browser with Transformers.js. No server, no API key, nothing to install.

Getting there was the real adventure:

  1. WebLLM on the GPU. My first version used WebLLM to run a model on the graphics card. It worked once, then kept crashing. My laptop has Intel UHD integrated graphics, and Windows kept resetting the GPU because it thought it had frozen. The app's error screen after Windows reset the GPU
  2. Smaller and smaller models. I tried Gemma 2 2B, then Gemma 3 1B, then Llama 3.2 1B. I shrank the prompt, fed it in smaller chunks, and switched from 16-bit to 32-bit math. Same crash every time. That's when I realized the problem wasn't the model, it was the graphics card. (Glad I did this on my laptop instead of my regular programming Mac). Console table of the Gemma models available in WebLLM and how much GPU memory each needs
  3. Moving to the CPU. I switched to Transformers.js, which can run models on the regular processor instead. It's slower, but it can't crash the graphics card, and it works on everyday computers like my mom's. Gemma's browser version turned out to use an operation the CPU engine doesn't support, so I landed on Qwen 2.5 0.5B.
  4. Teaching a tiny model to behave. A 0.5B model is small, and it showed: it copied lines from the list, put names in the wrong place, and once wrote a fake restaurant review. ("I ordered the Margherita…") The tiny model writing a made-up restaurant review instead of a recommendation So I gave it one job at a time:
    • Pick: I start its answer for it ("The best choice is number…") so it only has to add a digit.
    • Explain: a separate request about only the chosen place, again starting the sentence for it ("Melissa, Giacomo's Pizza…") so it just finishes the thought.
    • Safety net: if the sentence still comes out wrong, the app writes a friendly one from the real data, so Mom never sees nonsense.

I also added debug logging that shows every prompt, raw reply, and timing in the console, which is how I figured most of this out.
Debug console showing the prompt, raw reply, and timing for each step

Debug console after the fixes, showing what the model returned

A few smaller things I'm proud of:

  • A setup screen written for my mom. My first draft said the app would "download" an AI model. Then I realized the word download alone would make my mom and others like her hesitate. Now it says the first visit "takes a few minutes to get set up," explains that nothing gets installed, and tucks the details into an "Is this safe?" section.
  • A StrictMode bug. React runs effects twice in development, which could have started two model downloads at once. I fixed it by caching the loading promise instead of the finished model.
  • Spinner timing. The CPU gets so busy that the browser couldn't draw the "thinking" spinner before the model started. One requestAnimationFrame gave it a moment to paint first.

What's Next

  • There are still rough edges. On a slower computer, some buttons don't always show that something is happening right away, and for someone like my mom, that's a real problem: if nothing happens, she'll assume it's broken.
  • Next on my list are clearer "working on it" feedback on every button and moving the AI into a background worker so the page stays responsive while it thinks.
  • Of course making it look better is always on this list.

Why Does Open Innovation Matter?

With a closed API, my mom's name, what she's in the mood for, and her restaurant likes and dislikes would go to an AI company's server every time she asked about dinner, and I'd be paying for every request. With an open-weight model running in her own browser, the AI part never leaves her computer. The only thing that goes out is her approximate location, to OpenStreetMap, so it can find restaurants nearby. It costs nothing to run no matter how many people use it.

And the biggest reason only became clear while building: I tried five models in one afternoon. When one crashed my graphics card, I tried a smaller one. When the GPU wouldn't cooperate at all, I moved the whole thing to the CPU. When Gemma wouldn't run there, I switched to Qwen. With a closed API, I'd have been stuck with whatever one company offered and whatever hardware it needed. Open models let me keep adjusting until it ran on the kind of computer my mom actually owns.

Prize Categories

  • Best Use of DigitalOcean: the app is deployed on DigitalOcean App Platform as a static site.

Top comments (0)