Prompt Nano

Typing long instructions on mobile virtual keyboards introduces heavy user friction. To reduce friction, I built a speech-to-text pipeline. The primary challenges were eliminating background noise and transforming rambling verbal transcripts into clean data.

Some of the technical highlights include:

• Local audio filtering: We use the Silero Voice Activity Detection neural network running locally. This essentially acts as an intelligent volume gate, instantly detecting when a person starts and stops speaking so the app only records actual speech and completely ignores background auditorium noise.
• Conversion: We convert the raw audio buffer into a compact 16-bit WAV blob, reducing data payload sizes by over 60%.
• Route to best-in-class speech-to-text models: Users can select either Google Chirp or OpenAI's Whisper.

The end result is a hands-free input system optimized to eliminate background chatter and optimize delivery to the speech-to-text models.

Handling failures and edge cases is a hallmark of my approach to product design. Happy-path layouts often fall apart in production, so I mapped out explicit UI states for technical and hardware failures.

If a user blocks microphone access at the browser level, the drawer replaces the waveform with a clear inline notification and an explicit guide on how to reset site permissions. If the device lacks a functioning audio input, the interface gracefully falls back to standard text entry with an explanatory alert. Finally, if the connection drops mid-transmission or the speech models time out over congested conference Wi-Fi, the drawer retains the recorded text cache locally. This setup allows the participant to retry the transmission without losing their verbal input.

Managing user progression through a complex multi-step flow requires an interface that scales without cluttering the screen. To solve this, I engineered a responsive wizard rail that acts as both a global progress indicator and a direct navigation tool.

Some of the technical and interaction highlights include:

• Fluid gesture navigation: The rail supports swiping, letting users manually scroll through previous or upcoming steps. As a user swipes between main screens, the highlight accent line underneath moves in sync, providing natural feedback.
• Smart overflow handling: If a workflow requires many steps, the rail scales gracefully. The system keeps the active step centered and uses masking gradients to blend overflowing text at the rail edges. Non-active tabs subtly fade and shrink based on their physical distance from the center.
• Direct navigation: Users can tap directly on any visible section title to instantly jump to that specific step, bypassing linear progression entirely.

The end result is an intuitive navigation control that looks simple on the surface but contains the robust details to keep layout transitions fast, scalable, and responsive to user touch.

I designed and engineered the gesture navigation to be high-quality, intuitive, and performant. Key highlights include:

• Pointer capture orchestration: The engine binds to Pointer Events, locking touch movements as soon as horizontal intent is confirmed. This prevents gestures from breaking if a finger slides over headers or outside the viewport.
• Edge hotzone detection: Swiping the canvas switches main panels, but starting a swipe within 72px of the left screen edge overrides page navigation, allowing users to easily pull out the global side menu.
• Velocity-sensitive snapping: A rapid "flick" switches panels instantly, while a slower drag uses a distance threshold to either commit the transition or snap back smoothly.
• Interactive element gatekeeping: To prevent global swipes from hijacking child controls, the engine bypasses itself if it detects an active sub-component like a slider.
• Native scroll preservation: Applying native touch-action CSS properties preserves fast vertical browser scrolling while JavaScript processes the horizontal tracking.

The result is a responsive shell that mirrors native app performance.

To transform Prompt Nano into a true educational sandbox, we needed a way to introduce users to the rapidly evolving landscape of artificial intelligence without locking them into a single ecosystem.