💡 Inspiration We started with a question: Why are circuit diagrams still so static in such a dynamic world? As engineers, we constantly sketch circuits—on paper, whiteboards, or screens—but those diagrams never move. They don’t show how current flows, where energy travels, or what a real circuit might do. We wanted to break that wall—make static visuals come alive. That’s how TraceLab was born: to turn passive circuit drawings into active, glowing simulations that anyone can build, trace, and animate—with just a touch, a click, or a text prompt.
⚙️ What it does TraceLab lets you upload any circuit image—scanned, drawn, or digital—and simulate the current flow using TextPrompt, MouseTrace, or TouchTrace. Once the user defines the desired path—either by tracing it or describing it in natural language—TraceLab visualizes electric flow using animated, glowing dotted lines. It brings clarity to learners, expressiveness to educators, and interaction to creators—all directly within Adobe Express.
🛠️ How we built it We built TraceLab using:
HTML5 Canvas + Fabric.js for interactive circuit tracing
Python + OpenCV for image preprocessing (like binarization and edge detection)
JavaScript for animation and frontend logic
Gemini Pro + prompt chaining for interpreting text-based trace instructions
Firebase to handle circuit image uploads and syncing trace data
Adobe Express Add-on SDK to embed everything inside the Creative Cloud ecosystem
Our architecture is modular, allowing fast switching between trace modes and real-time rendering of simulations.
🚧 Challenges we ran into Interpreting freehand, low-quality, or scanned images pushed us to refine our edge detection pipeline.
Converting natural language prompts into paths was non-trivial—we had to fine-tune prompt flows for Gemini to output coordinates we could simulate.
Ensuring fluid animations inside Adobe Express' constrained plugin sandbox took deep optimization.
🏆 Accomplishments that we're proud of Built a full-fledged interactive animation tool within a static design platform like Adobe Express.
Seamlessly integrated AI and human input for multimodal tracing.
Made engineering education more visual, accessible, and creative—no breadboards, just imagination.
📚 What we learned Human-AI collaboration shines when we provide both freedom and structure—our users love having multiple tracing options.
Designing for visual clarity and emotional feedback (like glowing lines) helps people feel the simulation, not just see it.
We now know how to build inside Adobe Express, and we see it as a powerful canvas for educational creativity.
🚀 What's next for TraceLab Add auto-simulation using full image parsing (no manual trace needed).
Enable component detection (resistor, diode, etc.) for smarter flow decisions.
Release an educational toolkit for teachers to build interactive lessons with circuit animations.
Expand to simulate logic gates, timing signals, and even microcontroller logic.
TraceLab is just getting started. We believe learning circuits should feel like watching ideas spark to life—and we're here to make that happen.
Log in or sign up for Devpost to join the conversation.