Practice the Awkward Bit: rehearse conversations with local Gemma

A submission for the Hacktoberfest Weekend Challenge: Build for a Friend.

What I Built

I’m an introvert, and sometimes the hardest part of a conversation is getting the first sentence out.

Practice the Awkward Bit gives you a quiet place to rehearse: decline an invitation, ask for something back, or join a conversation. Set the scene, choose how cooperative the other person is, and try a few replies.

Gemma plays the other person. When you finish, it offers one thing you expressed clearly, one suggestion, and another way to say it. “Try this reply again” takes you back to an earlier message so you can experiment.

I built it with fellow introvert people in mind.

Demo

Try the app — currently private, pending access for judges.

Use a desktop browser with WebGPU. Load the model, choose Decline an invitation, and try:

Thanks for inviting me! I’m going to stay in tonight, but I’d like to join you another time.

Then ask for a reflection or retry your reply. The first model download is large and needs internet.

Code

Source on GitHub · MIT license for the app.

How I Built It

React, TypeScript, and Tailwind CSS 4 handle the interface. Gemma 2 2B runs locally through WebLLM, in a dedicated worker.

                  YOUR BROWSER
┌─────────────────────────────────────────────┐
│ React UI · Tailwind CSS 4                    │
│   Scene → conversation → reflection → retry │
│                 ⇅ messages                  │
│ Web Worker                                  │
│   WebLLM → Gemma 2 2B → WebGPU               │
│                 ↑                           │
│ IndexedDB: cached model assets              │
│                                             │
│ Conversation: memory by default             │
│   └─ optional localStorage save / text export│
└─────────────────────────────────────────────┘
          ↑ site and model downloads
     Hosting / model asset servers
     (no conversation inference requests)

Role-play and reflection use separate prompts. Reflection returns structured JSON, and the app checks that its quoted reply actually came from the user.

Model loading, real replies, reflection, rewind, and save/restore worked in the desktop browser test. Tests, type checks, and the build passed. Feedback still sometimes invents details, so it needs judgment rather than blind acceptance.

Why Does Open Innovation Matter?

These conversations can be personal. Running an open-weight model locally keeps the transcript out of an inference API and avoids a per-conversation API bill.

I can also inspect the prompts and swap supported models. The tradeoff is a large download and dependence on the user’s hardware. This isn’t a fully offline install, and Gemma’s terms still apply.

Rahul’s post on browser-local LLMs helped frame the worker and loading experience.

Prize Categories

Best Use of Gemma: Gemma generates both the conversation partner and the reflection.

Credits

Google Gemma, MLC AI/WebLLM, React, Tailwind CSS, lucide-react, and the Sites/Vinext starter.

Codex helped build, debug, test, and draft this post.