Prompt Sandbox: Learn AI by Playing with Prompts

Prompt Sandbox is an interactive web application designed for absolute beginners with zero coding experience. It runs a small, distilled language model entirely in the browser using ONNX Runtime and WebAssembly, so there are no API costs or sign-ups. Users type prompts into a colorful editor and watch as the AI generates responses token by token. Alongside, real-time visualizations show which words the model focused on (attention heatmaps) and how confident it is about each next token (probability bars). The experience is structured as a series of quests—from 'Make the AI say hello' to 'Chain two instructions'—each introducing a core concept like tokens, temperature, or few-shot prompting. Cute animations and friendly explanations guide users, and there's a free-play sandbox for experimentation. The entire UI is designed to be accessible, with large fonts, high contrast, and multiple language options. By lowering the barrier to entry, Prompt Sandbox aims to demystify AI and empower anyone to become a thoughtful prompt engineer.

Most people are curious about AI but intimidated by code, APIs, or technical jargon. Existing tutorials and tools assume familiarity with programming or at least some terminology. This leaves a huge audience of absolute beginners—students, artists, educators, curious grandparents—without a gentle on-ramp. They deserve to understand and interact with AI in a playful, low-pressure environment.

• Create a fully client-side, no-code prompt editor that works offline after initial load.
• Use a small language model (e.g., TinyLlama) converted to ONNX for fast, private inference.
• Visualize attention heatmaps and token probabilities to make the AI's 'thinking' visible.
• Design 10 structured quests (5 basic, 5 intermediate) that teach prompt engineering concepts.
• Include a free-play sandbox mode with adjustable parameters (temperature, max tokens).
• Support English, Spanish, and French UI with easy language switching.
• Publish as an open-source project on GitHub for community contributions.

• Not a replacement for large language models like GPT-4; it uses a small, distilled model for learning.
• Not a production-grade API; it's purely educational and runs in-browser.
• No user accounts, data persistence, or sharing features.
• No real-time collaboration or multiplayer elements.
• No advanced topics like fine-tuning, RLHF, or model training.

• Frontend: React (Next.js) for UI, D3.js for visualizations.
• Model: TinyLlama (1.1B) converted to ONNX with static input size (512 tokens).
• Inference: ONNX Runtime WebAssembly (WASM) for client-side execution.
• Tokenizer: Hugging Face tokenizers in JavaScript (via transformers.js).
• Build: Webpack, ESLint, Prettier.
• Deployment: Static hosting (Vercel or Netlify).

The app loads a small ONNX model (compressed ~400MB) and its tokenizer into the browser on first visit. When a user types a prompt, the app tokenizes it with the same tokenizer used by the model. The token IDs are fed into the ONNX runtime, which runs inference using WebAssembly. The model outputs logits for each token, which are converted to probabilities via softmax. The app samples from the probability distribution to generate the next token, then repeats until a stop condition. During generation, it captures attention weights from each transformer layer. These are stored and later used to render a heatmap over the input tokens, showing which parts of the prompt influenced the output. Token probabilities are displayed as a stacked bar chart for each output step. All computation happens client-side; no external API is called. The quest system is driven by a JSON file mapping each quest to specific prompts, expected behaviors, and checkpoints.

• Model size may be too large for low-end devices or slow networks (compression and progressive loading needed).
• Attention visualization might overwhelm or confuse beginners; careful design and tooltips required.
• The small model may not always produce coherent outputs, potentially frustrating learners.
• Performance on mobile browsers could be sluggish due to WASM overhead and memory usage.
• Supporting multiple languages increases UI translation workload and may affect model tokenizer compatibility.

• Which small model strikes the best balance between size and coherence? TinyLlama vs. GPT-2 vs. Phi-2?
• How to simplify attention heatmaps so they are intuitive without oversimplifying?
• Should quests be linear or allow branching based on user's actions?
• How to handle non-English prompts when the model is primarily English-trained? (Maybe restrict to English for now)
• Is it worth adding sound effects and background music for engagement?

The idea was born during a three-day hackathon, but the team (two developers and a designer) got pulled back into day jobs. We completed a prototype that could run a tiny model and produce text, but the attention visualization and quest design were half-baked. We kept saying we'd finish it on a weekend, but that weekend never came. It's still a plan we love—maybe one day.

The project could be a fantastic open-source learning tool. The combination of immediate visual feedback and structured quests is unique. If built, it would be the most beginner-friendly AI learning tool available.