Inspiration
The project was born from the idea of transforming often toxic text-based online debates into a visual and collaborative experience. Instead of clashing with words, users use art and drawing to express nuances that text cannot capture, creating a collective "mural of thought.
What it does
Pixel Debate allows two opposing sides to compete on a shared canvas divided into two zones. Each user selects their stance (e.g., "AI as a Tool" vs. "AI as a Threat") and draws within their dedicated space. Once the graphic debate is over, Gemini AI analyzes the global image to provide a sociological synthesis, translating shapes and colors into structured intellectual arguments
How we built it
The application is built with React and TypeScript for a robust and type-safe interface. The drawing engine relies on the HTML5 Canvas API, featuring custom touch event handling for mobile devices. For the AI component, we integrated the Google Gemini (Vision) API, which processes a snapshot of the canvas. Real-time synchronization (currently local) is handled via the BroadcastChannel API to reflect brushstrokes across windows.
Challenges we ran into
The major challenge was managing responsive design for a drawing tool: ensuring the canvas adapts to all screen sizes without stretching or erasing existing artwork. Another technical hurdle was enforcing "physical borders" on the canvas to prevent one side from scribbling over the opponent's territory while maintaining a smooth user experience.
Accomplishments that we're proud of
We successfully created a fluid interface that supports both mouse and touch input seamlessly. The AI integration goes beyond simple image description; it actually manages to interpret the intent behind the drawings to produce a deep intellectual analysis, adding significant value to the project.
What we learned
This project taught us how to manipulate raw image data (Base64) to communicate with multimodal large language models. We also deepened our understanding of React component lifecycles to optimize performance when rendering high-frequency drawing data consisting of thousands of coordinate points.
What's next for Pixel debate
The next crucial step is moving to a Backend architecture (WebSockets/Socket.io) to allow users on different networks and devices to debate together. We also plan to add advanced drawing tools (layers, geometric shapes) and a gallery system to archive past debates and track the evolution of visual public opinion.
Log in or sign up for Devpost to join the conversation.