CrimeCanvas

Type any criminal case. AI instantly builds a live detective evidence board with suspects, red string connections, and timeline.

Comment

Inspiration

Every detective story shows the same thing — a wall of photos, red strings, index cards. Building that evidence board manually takes hours. We asked: what if AI could build it in seconds?

What it does

CrimeCanvas takes any criminal case name and instantly generates a fully interactive evidence board — draggable suspect cards, red string connections, scrollable timeline, and AI-generated key insights. All assembled live in your browser.

How we built it

  • Gemini 2.5 Flash via Google GenAI SDK for structured case analysis
  • Python serverless backend on Vercel calling the Gemini API
  • Vanilla JS frontend with SVG red string connections and draggable cards
  • Structured JSON extraction using response_mime_type: application/json

Challenges we ran into

  • Gemini 2.5 Flash thinking mode outputs reasoning text before JSON, breaking parsers
  • Coordinating drag, zoom, and pan transforms simultaneously in pure JS
  • Getting reliable structured JSON output from open-ended case descriptions

What we learned

  • Gemini's response_mime_type: application/json with thinking_budget: 0 gives clean structured output
  • Visual output (interactive board) creates far more impact than plain text responses
  • Temperature 0.1 gives factual, grounded historical accuracy

What's next

  • Voice input using Gemini Live API — speak the case name
  • Gemini Vision to analyze uploaded crime scene photos
  • Real-time collaboration — multiple investigators on same board
  • Grounding with Google Search for current/recent cases ```

Built With

Gemini 2.5 Flash, Google GenAI SDK, Python, JavaScript, HTML, CSS, SVG, Vercel

Try it out links

  • Live app: https://crimecanvas.vercel.app
  • GitHub: https://github.com/a-smirrithi/crimecanvas

Category

UI Navigator ☸️

Architecture Diagram

Take a screenshot of this and upload to the image carousel:

User types case name
        ↓
Frontend (index.html)
Vanilla JS + SVG board
        ↓  POST /api/investigate
Backend (investigate.py)
Python — Vercel Serverless
        ↓  google-genai SDK
Gemini 2.5 Flash
        ↓
Structured JSON
(suspects / evidence /
locations / timeline /
connections)
        ↓
Live Evidence Board
Cards + Red Strings
+ Timeline + Insights

Built With

Share this project:

Updates