Forem: Ngawang Tenzin

What I actually learned using Gemma 4 for ASL recognition (spoiler: D kept showing up as 1)

Ngawang Tenzin — Sun, 17 May 2026 10:55:47 +0000

This is a submission for the Gemma 4 Challenge: Write About Gemma 4

I built an ASL hand sign interpreter using Gemma 4 locally. Not because I had a perfect plan, I just wanted to see if a general-purpose vision model could recognise hand signs with just a good prompt. No fine-tuning, no special dataset.

In short, it took way more iteration than I expected.

You have to keep going back and fixing the prompt

My first prompt was simple, just "identify the ASL letter in this image." The model kept getting confused between similar-looking signs. A and S look nothing alike if you know what to look for, but Gemma 4 didn't know what to look for.

So I had to go back, look up what actually makes each letter different, and write it out explicitly. Things like:

"A vs S: In A the thumb is BESIDE the index finger. In S the thumb is folded OVER the knuckles."

Every time I noticed a pattern of wrong answers, I'd add another rule. It became this back-and-forth loop, run test, see what fails, go back to the prompt, try again. That's just the reality of working with a model on a specific task it wasn't trained for.

The D -> 1 thing

At some point I ran my auto-sorter and it created a folder called 1 inside my test dataset. Turns out Gemma 4 looked at a D sign and decided it was the number 1.

Not entirely wrong. D does have one straight finger pointing up. But it was a good reminder that the model doesn't know the context unless you tell it. I had to add "you are identifying ASL alphabet letters only, A through Z, not numbers" to stop it wandering off.

Which model size and why

I tried thinking through E2B vs E4B vs 31B Dense before picking.

E2B was too confident in wrong answers - it wouldn't flag uncertainty, just return the wrong letter with high confidence. Not useful.

31B Dense is probably better at this but it won't run on a normal laptop. Defeats the local-first point.

E4B was the right call. Small enough to run locally, but it actually understands "I'm not sure about this one" - it'll return medium or low confidence instead of just guessing. That matters more than people think.

Honest results

After all the iteration, batch tested on 66 images:

Overall: 59.1%
Letters that hit 100%: B, D, E, F, G, H, K, R, T, U, X, Y, Z
Worst: I, O, P at 0%, V at 22%
Not perfect. But this is a general model, no training, just prompting. And I know exactly which letters to focus on next time I run the loop again - .

What I took away

You don't need a specialised model for everything. Sometimes a good prompt and a few iterations gets you further than you expect. But "a few iterations" is doing a lot of work in that sentence. Tt's genuinely trial and error, and you have to be okay with that.

Also, always check what folders your auto-sorter is creating - haha.

I built a real-time ASL interpreter for the Gemma4 challenge, no cloud needed

Ngawang Tenzin — Sun, 17 May 2026 10:46:23 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

A real-time American Sign Language (ASL) alphabet interpreter that runs 100% on your own machine - no api key, no cloud, no subscription. Hold up your hand showing a sign-lan in front of your webcam, hit capture, and Gemma4 tells you which letter it thinks it sees, how confident it is, and what it notice about your hand position.

The pipeline design is:
Webcam -> MediaPipe (hand detection + cropping only) -> Gemma4 does the hard work (i.e., ASL recognition) -> Result

Repo + setup: [https://github.com/cbms26/asl-interpreter]

Why this, and why Gemma4:e4b

Most ASL recognition tools out there either need a cloud API or have rely on a dedicated sign-language model pre-trained specifically on ASL datasets. Both approaches have real trade-offs; one cloud APIs mean your hand gestures are going to some server, and secondly, a purpose-built model means you're stuck with whatever letters it was trained on.
I wanted to see how well a general purpose vision model like Gemma4 could
handle ASL recognition just by being given a good specific-description of what each letter looks like. No fine-tuning, no dataset, just programmatic prompting. And everything had to run locally because privacy matters (esp. when your webcam is in use).

I went with gemma4:e4b specifically. E2B was too small to handle the
subtle differences between similar letters. The 31B Dense model is great
but won't run on most people's laptops. E4B hit the sweet spot — capable
enough to reason about fine hand shapes, light enough to run locally.

The one design decision worth explaining

The obvious approach is sending the raw webcam frame to Gemma 4 and asking
it to identify the sign. That works, but accuracy is noticeably worse
because the model splits its attention between the hand, the background,
the face, the lighting, and everything else in frame.

The fix was adding MediaPipe as a pre-processing step. It runs in the
browser at ~15fps, detects the hand, and crops a tight (512×512) square
around it. That cropped image, hand only, nothing else - is what Gemma4
actually sees.
MediaPipe handles where the hand is. Gemma 4 handles what letter it is. Separating those two jobs made the biggest accuracy difference of anything I tried.

Prompt engineering did real work here

Gemma 4 had no ASL training. To make up for that, I wrote precise specific-descriptions of all 26 letters and explicit disambiguation rules for the pairs the model kept getting confused:

"A vs S: In A the thumb is BESIDE the index finger. In S the thumb is
folded OVER the knuckles."
"M vs N vs T: All involve fingers folded over the thumb.
M = 3 fingers, N = 2 fingers, T = thumb between index and middle."

Writing those out forced me to actually understand the signs properly.
And it worked - the confused-pair accuracy improved significantly once
the model had explicit rules to fall back on. No fine-tuning needed.

How I measured it (not just vibes)

I didn't just demo the app and call it done. I built a proper evaluation
pipeline:

Extract frames from an ASL tutorial video
Let Gemma 4 auto-sort them into test_signs/<LETTER>/ folders
Run batch_tester.py to measure per-letter accuracy with ground truth

Every interaction — webcam captures, batch runs, model sorts — gets
appended to a timestamped CSV log. The webcam UI also has a thumbs-up/thumbs-down feedback button. If the model is wrong, you pick the correct letter from an A-Z picker so the log captures what it got wrong, not just that it got it wrong.

Results so far:
folder 1 got created due to model thinking letter D sign as 1 - interesting

Summary report:

Total images: 66
Overall: 59.1%
Best letters: B, D, E, F, G, H, K, R, T, U, X, Y, Z -> 100%
Worst letters: I (0%), O (0%), P (0%), V (22%)

During live webcam testing, the built-in feedback captured 15 sessions - 3 correct (thumbs up) and 12 incorrect (thumbs down with the actual letter logged). Common webcam misidentifications included O predicted instead of A, C, or E, and blank/low-confidence responses on letters like D and F.

What surprised me

The hardest letters aren't the ones I expected. J and Z both involve
motion in real ASL - J traces an arc, Z traces a Z shape in the air.
In a still image they look almost identical to I and A. Gemma 4 actually
handles this well by flagging them as low confidence rather than
guessing confidently wrong. That's the honest answer.
Clean input also mattered more than prompt length. The biggest accuracy jump came from cropping with MediaPipe and clear background, not from making the prompt more detailed.

Demo

Short demo walkthrough - Goes to YouTube

It was really fun to take on this challenge. Thank you DEV community!

How I Built a Retro Terminal Panel in React

Ngawang Tenzin — Sat, 06 Sep 2025 06:31:32 +0000

After sharing my portfolio project on DEV, a fellow community member commented asking how I built the retro terminal panel. So, I decided to break down the logic and share the details here!

The goal was to show a series of commands and outputs, just like a real terminal, and animate them. I also wanted a blinking cursor and a “reset” effect after all lines are shown.

The State
I used React’s useState to keep track of the lines currently displayed in the terminal:

const [terminalLines, setTerminalLines] = useState([] as string[]);

The Commands
I defined the commands and outputs as an array:

const terminalCommands = [
  '> whoami',
  'ngawang_tenzin',
  '> cat skills.txt',
  'React.js | Node.js | Python | TypeScript',
  '> ls projects/',
  'barma-sorig-web-app/ | quiz-mobile-app/ | portfolio-website/',
  '> status',
  'AVAILABLE FOR HIRE',
  '> echo "Let\'s build something amazing!"',
  "Let's build something amazing!"
];

The Animation Logic
I used useEffect to set up an interval that adds one line at a time to the terminal. Here’s the core logic:

useEffect(() => {
  let terminalInterval: ReturnType<typeof setInterval> | undefined;
  let lineIndex = 0;
  if (isRetroMode) {
    terminalInterval = setInterval(() => {
      if (lineIndex < terminalCommands.length && terminalCommands[lineIndex]) {
        setTerminalLines(prev => {
          const newLines = prev.slice();
          newLines.push(terminalCommands[lineIndex]);
          return newLines;
        });
        lineIndex++;
      } else {
        setTimeout(() => {
          setTerminalLines([]);
          lineIndex = 0;
        }, 3000);
      }
    }, 800);
  } else {
    setTerminalLines([]);
  }
  return () => {
    if (terminalInterval) clearInterval(terminalInterval);
  };
}, [isRetroMode]);

Every 800ms, a new line is added.
When all lines are shown, it waits 3 seconds, then resets the terminal.

The Styling
I used CSS to get the neon green text, dark background, and blinking cursor. Here’s a snippet:

.terminal-line.command {
  color: #00ff41;
}
.terminal-line.output {
  color: #cccccc;
  margin-left: 1rem;
}
.terminal-cursor {
  color: #00ff41;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

Result
The result is a dynamic, animated terminal panel that brings a retro vibe to my portfolio. It’s all handled with React state and effects, making it easy to customize and integrate with the rest of my site.

[Boost]

Ngawang Tenzin — Fri, 05 Sep 2025 11:00:20 +0000

Ngawang Tenzin

Sep 5 '25

My Portfolio Journey: v0 to v1 – Feedback Welcome!

#beginners #react #typescript #aws

Comments 9

1 min read

My Portfolio Journey: v0 to v1 – Feedback Welcome!

Ngawang Tenzin — Fri, 05 Sep 2025 10:55:53 +0000

Hi DEV Community!
I’m excited to share my personal portfolio project and its evolution from v0 to v1. I’d love your feedback, suggestions, and thoughts to help me improve further!

🔗 Portfolio Links
v0: [https://cbms26.github.io/portfolio-v0/]
v1: [https://cbms26.github.io/portfolio-v1/]

✨ What’s New in v1?
Retro/Professional theme toggle
Scroll indicator with “Reached End” message
Centered, clickable action buttons
Custom retro footer
Retro specs overlay on profile image (with glitter effect!)
Improved UI/UX and responsive design

🛠️ Tech Stack
React (Vite + Typescript) - used for the first time
CSS (custom themes for retro)

💬 Feedback Wanted!
What do you think about the design and user experience?
Any suggestions for new features or improvements?
How’s the performance and accessibility?
Which style would you prefer?

🙏 Thank You!
Your feedback means a lot and will help me grow as a developer.
Drop your comments below or connect with me!

CSS Art: My Home Office Setup

Ngawang Tenzin — Sat, 26 Jul 2025 22:27:11 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

This CSS art piece represents my actual (or somewhat :3) home office setup! Since I haven't worked in a traditional office culture yet, I decided to recreate my personal workspace - the place where I code, learn, and build projects. The interactive door concept came from the idea that behind every developer's door is their personal sanctuary, their command center where magic happens.

Demo

Live Demo

How it works:

Click the door knob to enter my home office
Realistic setup: Gaming chair, dual monitor configuration (portrait + landscape), laptop on cooling stand, speakers, and my beloved lavender plant
Personal touch: Everything positioned exactly like my real workspace
Interactive experience: Smooth door fade-out reveals the complete setup

Journey

This project was both a technical challenge and a personal documentation of my coding space!

Personal Connection

This isn't just CSS art - it's a digital twin of where I actually spend my days learning web development. The dual monitor setup helps me code efficiently, the gaming chair keeps me comfortable during long study sessions, and that little lavender plant makes the space feel more alive.

Why This Setup:

Dual monitors: Portrait monitor for code, landscape for documentation/browser
Gaming chair: Because comfort matters during long coding sessions
Laptop + cooling stand: My trusty development machine
Lavender plant: Adds some life and calm to the workspace (and smells amazing!)
Speakers: For those coding playlists that keep me focused

Technical Highlights:

Pure CSS Art: No images - everything built with CSS shapes, gradients, and clever positioning
Realistic proportions: Spent time getting the monitor sizes and desk dimensions right
Z-index mastery: The chair sits behind everything (z-index: -1) to show the "entering the room" perspective
Interactive door: Smooth transitions make the experience feel natural
5-star chair base: Detailed gaming chair with proper legs using box-shadow technique

CSS Techniques I'm Proud Of:

Complex Chair Design

.chair-base::after {
    content: '';
    width: 3px;
    height: 25px;
    background-color: #333;
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow:
        25px 0 0 #333,
        -25px 0 0 #333,
        12px 22px 0 #333,
        -12px 22px 0 #333;
}

Mounting Arm for monitors

.monitor-arm::before {
    content: '';
    width: 250px;
    height: 8px;
    background-color: #666;
    position: absolute;
    top: 30px;
    left: -121px;
}

What I Learned???

How to layer elements with z-index for realistic depth
Creating complex shapes with pseudo-elements
The importance of getting proportions right for believability
How personal touches (like the plant) make technical art more engaging
Advanced positioning techniques for creating perspective

License

This project is open source and available under MIT License.

Tangerine Hub: A Modern Office Intranet with Glassmorphism Design

Ngawang Tenzin — Mon, 21 Jul 2025 04:50:56 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created a modern office intranet homepage that serves as a central hub for employees. The design features a clean, professional layout with a dashboard-style interface that includes company announcements, learning events, performance metrics, and team spotlights. The goal was to build an engaging workspace that helps employees stay connected and productive.

The intranet includes:

Dynamic hero section with live clock and weather widgets
Six-card dashboard grid with essential workplace information
Sidebar with recent activity timeline and team member highlights
Breadcrumb navigation for clear user orientation
Quick action buttons for common tasks
Responsive design that works on all devices

Demo

Live Demo: https://cbms26.github.io/dev-front-end-challenge-office-space-/

Source Code: https://github.com/cbms26/dev-front-end-challenge-office-space-

Journey

This project taught me the importance of balancing information density with visual breathing room. I started with a content-heavy layout but learned that professional enterprise applications need generous white space to maintain readability and user focus.

Key design decisions I'm proud of:

Glassmorphism effects - Used backdrop filters and transparent overlays to create depth while maintaining the clean aesthetic
Container width constraints - Added a max-width of 1400px with centered content to prevent the layout from becoming too wide on large screens
Color strategy - Built the entire design around an orange theme (#ff6b35, #f7931e) that feels energetic yet professional
Responsive grid system - Created a flexible dashboard that gracefully adapts from 3 columns to single column on mobile devices
Navigation breadcrumbs - Implemented clear navigation paths to help users understand their location within the intranet structure

The biggest challenge was finding the right balance between displaying lots of workplace information without overwhelming users. Through iterative spacing improvements, I learned that good design is often about what you don't show as much as what you do.

Technical highlights include CSS Grid for the dashboard layout, flexbox for component alignment, and smooth hover transitions that provide visual feedback without being distracting.

Degrees Don’t Define Understanding

Ngawang Tenzin — Fri, 25 Apr 2025 01:17:02 +0000

My Brief Realization

I finished my Bachelor’s back in 2020. Now, in just a few weeks, I’ll be done with my master’s too.

But honestly? Even with all these qualifications, I still feel like I don't really know what I've learned or how to apply most of it. 'Yes, I did multiple projects, both individual and as team', but my brain's been stuffed with so much sub-information that it's hard to even tell what truly stuck.

Somewhere along the way though, I realized one thing.
What I genuinely enjoyed wasn't tied to any subject or course; it was just coding. Not frontend, backend, game dev, or AI in particular; just the joy of coding itself.
I just wanted to build to understand how things actually work behind the scenes like in apps, systems or software. That curiosity still drives me and that's what made me feel alive.

But here's the part that bugs me now;
Why can't it be simple to just code and learn?
There are like hundreds of languages out there. Every single one has its own weird syntax, its own rules. I get that each one was made for a reason; different needs, different platforms, different eras, and they all have their purpose.
But sometimes, it feels like all that complexity just pushes people away from the core joy of coding. Like, what if there was one universal language?

Maybe one day, when quantum computers finally work as we dream, and the so-called "God equation" gets solved; we will also reach a point where there's one universal coding language. One way to build and create without worrying about all the syntaxes, just pure logic and pure creativity.

Anyways, I don’t have it all figured out yet.
But I know this much: I still want to code. I still want to learn how things work. And maybe that’s enough for now.

Currently, I’m diving into the command line, shell scripting, and Linux systems — just trying to get closer to how things really run behind the scenes.
It’s not flashy, but it feels real. Feels right.