DEV Community

Cover image for I drew a circuit on paper and Gemma 4 made it run: Sketch2Sim at MLH Hack Day Batam
Kiell Tampubolon
Kiell Tampubolon

Posted on

I drew a circuit on paper and Gemma 4 made it run: Sketch2Sim at MLH Hack Day Batam

#mlhacks #devchallenge #hackathon #ai

This is a submission for the MLH x DEV Writing Challenge

What I Built

Every hardware idea I have ever seen starts the same way: boxes and lines on paper. "UNO" in one box, "LED" in another, a line between them. Turning that drawing into something that runs is the slow part. You pick pins, remember the resistor, write the firmware, and then lose twenty minutes to one jumper you put in backwards.

Sketch2Sim removes that gap. You take a photo of a circuit sketch (or draw one in the app), Gemma 4 reads it, and you get two files:

  • diagram.json: the circuit in Wokwi's format (parts, positions, wires)
  • sketch.ino: Arduino firmware that does what your handwritten note says

Paste both into Wokwi, press play, and the circuit runs. No hardware, no breadboard, no guessing which leg of the LED is which.

Hand-drawn traffic light sketch on notebook paper next to the same circuit running in the Wokwi simulator

My handwritten note said "red > green > yellow, button = pedestrian crossing". What came out was a working traffic light: an Uno, three LEDs, three 220 Ω resistors, a button, and firmware that cycles the lights when you press it.

The idea that makes it work

The interesting part is not "AI reads a picture". It is the split of responsibilities:

A vision model reads intent from a picture. Deterministic code turns that intent into something a simulator is guaranteed to accept.

Pipeline: Sketch, then Gemma 4, then the validator, then Wokwi, plus examples of what the validator repairs

  1. Gemma 4 understands. It gets the image, a catalog of nine real Wokwi parts with their exact pin names, a few wiring rules and one worked example. It answers with JSON: parts, wires with a one-line reason for every pin, and the firmware.
  2. A validator guarantees. Plain TypeScript, no AI. It maps invented part types onto real ones, normalizes pin names (D13 becomes 13), inserts the 220 Ω resistor the model forgot, moves servos onto PWM pins, adds missing GND and 5V wires, and flips parts wired with reversed polarity. Every repair is shown in the UI, so you see exactly where the model was corrected.
  3. Wokwi runs it. The output is a normal Wokwi project. Nothing about it is locked to my app.

What I learned

The hack day in numbers: 6 of 6 sketches valid, 5 of 5 run in Wokwi, compile time 104 to 30 seconds, 20 validator repairs, 2 reversed buzzers caught, 0 merge conflicts

  • Gemma 4 vision is great at topology and weak at electrical details. All six sketches I tested came back with the right parts and connections, including the behavior notes, which ended up correctly in the firmware. Pin names and polarity are where it slips: it wired a buzzer backwards twice. Prompting harder did not fix that. A small set of deterministic rules did.
  • Latency was thinking, and the API knobs did not help. My first compiles took 45 to 104 seconds. One slow run had 3,209 thought tokens against 1,637 answer tokens. Gemma 4 on the Gemini API rejected both thinkingBudget and thinkingLevel. Two lines in the prompt asking for a brief answer took thought tokens to zero and compiles to 26 to 34 seconds, with the same quality.
  • Planning beats speed when you work with AI agents. I built this solo with two Claude Code sessions running in parallel, one on the engine and one on the app, in the same folder, with zero merge conflicts. The trick was half a page written before any code: one owner per file, one frozen contract, and one status file per session.

Two Claude Code sessions coordinating through one frozen contract file and separate status files

Demo

Two-minute demo video (the hackathon name is in the first frame, as the rules ask):

Try it yourself: glatinone.github.io/sketch2sim. The presets work without any key (they are labeled CACHED because they replay a saved, real Gemma 4 run). To compile your own sketch, paste a free Gemini API key from AI Studio. It stays in your browser.

GitHub logo glatinone / sketch2sim

Draw a napkin circuit, Gemma 4 reads it, a validator repairs it, and it runs in Wokwi. MLH Hacktoberfest Hack Day Batam 2026.

Sketch2Sim

From a paper sketch to a running circuit.

Sketch2Sim turns a rough hand-drawn circuit (drawn in the app, or a photo of paper) into a ready-to-paste Wokwi diagram.json + Arduino sketch.ino. Gemma 4 reads the image; a deterministic validator repairs whatever the model gets wrong, so the output is a circuit the real Wokwi simulator accepts. Paste both files, press ▶, press the button, the LED lights.

Try it: https://glatinone.github.io/sketch2sim/ (bring your own free Gemini API key; presets work without one and are labeled CACHED).

Built in one afternoon at MLH Hacktoberfest Hack Day Batam (31 Oct 2026) for the Best Use of Gemma 4 and Best Open-Source AI Project challenges.

Sketch2Sim: a hand-drawn UNO + BUTTON + LED sketch compiled live by Gemma 4 into a wiring table, diagram.json and sketch.ino

Real screenshot of a live compile (gemma-4-26b-a4b-it, no mock).

How it works

 sketch / photo ──► Gemma 4 (multimodal) ──► validator + repair ──► diagram.json + sketch.ino ──► Wokwi ▶
   canvas, upload,     reads boxes, labels,     catalog-locked parts,
…
View on GitHub

This is what you see after a compile: the parts, a wiring table with a reason for every pin, and both files ready to copy.

Sketch2Sim result view with parts, wiring table with reasons, and generated files

And this is the validator catching Gemma wiring a buzzer backwards on my "air piano" sketch (an ultrasonic sensor that plays notes based on hand distance):

The validator flagging and fixing a reversed buzzer on the air piano sketch

The most natural input is a photo of paper, so the phone is the main device. The mobile layout opens straight on the camera and keeps one big Compile button under your thumb. A live compile from a phone took 17.9 seconds in testing.

Sketch2Sim on a phone: snap the paper, compile with Gemma 4, read the wires with reasons

And here it is in the room, in front of the judges:

Demo time at Politeknik Negeri Batam: presenting the problem slide and the four-step flow to the judges

Partner Technologies

Partner technologies and who does what: Gemma 4 understands, the validator guarantees, Wokwi runs, GitHub ships

Gemma 4 (Best Use of Gemma 4 track)

Gemma 4 is the brain of Sketch2Sim. I used gemma-4-26b-a4b-it through the Gemini API, called with plain fetch from the browser so there is no backend to host. The image goes in as inline data next to the prompt, and JSON mode keeps the answer structured:

const body = {
  contents: [{ role: "user", parts: [
    { inline_data: { mime_type: image.mimeType, data: image.base64 } },
    { text: prompt },
  ] }],
  generationConfig: {
    temperature: 0.2,
    maxOutputTokens: 8192,
    thinkingConfig: { includeThoughts: false }, // budget/level are rejected for Gemma 4
    responseMimeType: "application/json",
  },
};
// AI Studio's new "AQ." keys are only accepted as ?key=, not via the x-goog-api-key header
const url = `${API_BASE}/${model}:generateContent?key=${apiKey}`;
Enter fullscreen mode Exit fullscreen mode

Things I learned the hard way, in case they save you an hour:

  • New AI Studio keys (starting with AQ.) only worked as a ?key= query parameter. The same key was rejected in the x-goog-api-key header.
  • Bigger was not better on the day. On the free tier, gemma-4-31b-it succeeded on 3 of 8 calls (the rest were 500 or 503) and took about 60 seconds when it worked. The 26B model went 8 for 8. If you pick 31B anyway, a 500 or 503 falls back to 26B automatically.
  • Latency has a long tail, so I race it. The engine fires two identical requests and keeps whichever returns valid JSON first: 
// Gemma 4 latency has a long tail, so fire two identical requests
// and keep whichever returns parseable JSON first.
winner = await Promise.any([attempt(prompt), attempt(prompt)]);
Enter fullscreen mode Exit fullscreen mode
  • Gemma sometimes puts raw line breaks inside JSON strings (the Arduino code), so the parser escapes them before JSON.parse. If both answers are still broken, one retry tells the model exactly what was wrong.
  • Prompt for brevity, not for intelligence. The single biggest speedup was asking for short rationales and no code comments. Thought tokens dropped to zero.

Bar chart: 104 seconds before prompt tuning, 35 seconds after, with zero thinking tokens

My honest verdict: Gemma 4 is a very good reader of messy, handwritten, real-world images. It understood boxes, wobbly lines and handwritten notes in the margin. Treat it as the part that understands intent, and put a small deterministic layer behind it for anything that must be exactly right.

Wokwi

Wokwi was listed as an event resource, and it changed my plan. My first spec had me writing my own circuit simulator in SVG. Throwing that out and targeting the real Wokwi simulator meant every result could be verified by pressing play, by me or by a judge. The validator only allows parts from a fixed catalog of real Wokwi parts (wokwi-arduino-uno, wokwi-led, wokwi-pushbutton, wokwi-servo, wokwi-hc-sr04, and so on), with pin names taken from Wokwi's own docs. That is why 5 of 5 tested circuits ran on first paste. One gotcha: circuits with a servo need the Servo library added in Wokwi's Library Manager, so the app tells you when that applies.

GitHub

The repo went public at 13:02, about thirty minutes into the build, under the MIT license. A GitHub Actions workflow deploys the app to GitHub Pages on every push, so anyone can open the live app on their own phone. The repo has five good first issues: an ESP32 target, more parts, an Arduino UNO Q export, a Bahasa Indonesia UI, and more.

AI tools disclosure: the code was written with Claude Code (Anthropic), two sessions in parallel. Gemma 4 is the model the app itself uses at runtime. I planned, reviewed, tested and demoed.

Hackathon Experience

Hack Day at a glance, with my certificate of attendance from Hacktoberfest Hack Day Kota Batam x Batam Innovation Center

I attended Hacktoberfest Hack Day Kota Batam x Batam Innovation Center, in person, on 31 October 2026 at Politeknik Negeri Batam. It was a one-day event: about two and a half hours of building, then live demos in front of a judging table.

Two rules shaped everything I did. First, judging weighed Technology, Design, Completion and Learning equally, and the idea or pitch itself was not scored. Second, the demo had to be live. That pushed me away from big, impressive ideas toward something small that would provably work on stage. I had six candidates on my list, and Sketch2Sim was the only one that used every resource on the event page: Gemma 4, Wokwi and Arduino.

2.5 hours, minute by minute: from plan at 12:31 to submission at 14:50

I came solo, so my "team" was two Claude Code sessions on one laptop, plus a lot of tab switching. The atmosphere was what I love about local hack days: a campus room, a big screen, judges in MLH shirts, snacks on the table, and every team showing something real. Watching the other demos was a highlight in itself. One team mapped forest fires and the haze they cause across the region, which is a very real problem where I live.

What I will remember most:

  • The first notebook sketch that turned into a traffic light changing colours in Wokwi. That was the moment the whole idea stopped being a slide.
  • Session B finding a bug in Session A's code and, instead of touching it, writing the cause and a one-line fix into its own status file. A picked it up and fixed it minutes later. Two agents, one folder, and they behaved like polite teammates.
  • The last twenty minutes. The submission form tab vanished once and had to be filled again, and Wokwi slowed to 3 to 10 percent simulation speed because my laptop was rendering the demo video at the same time. Hack days are never smooth, and that is part of the fun.

Sketch2Sim is small on purpose: one board, nine parts, one simulator. The pattern underneath is not. Swap the catalog and the output format and the same pipeline can target ESP32 and Pi Pico, SPICE netlists, PLC ladder logic, or, eventually, digital twins of real lab benches and production lines. Batam is an industrial city with a big vocational campus, so training technicians on a simulated copy of real equipment is a very concrete next step here.

If you have ever lost an afternoon to a backwards LED, I would love to hear what you would want Sketch2Sim to simulate next. Leave a comment, try the live app, or grab a good first issue.

Links

Top comments (0)