VizKidd

VizKidd transforms dense research and web content into interactive, visualization-driven canvases that make complex technical ideas instantly clear for researchers and professionals.

Comment

Inspiration

Reading dense research and technical content is slow. We wanted instant comprehension—turning text into visuals that teach at a glance.

What it does

  • Ingests text/PDF/URLs, extracts key concepts with Gemini 2.5 Flash, and auto-generates clean SVG diagrams with Gemini 2.5 Pro.
  • Provides interactive reading canvases for immersive, visual-first learning.
  • Lets you chat with the content (voice or text), with Gemini 2.5 Flash powering quick answers and on-demand visual regenerations.

How we built it

  • Frontend: React + TypeScript + Vite + Tailwind.
  • Backend: Express + TypeScript.
  • AI:
    • Gemini API:
    • Gemini 2.5 Pro for high-fidelity SVG diagram synthesis with strict structural constraints and schema-aligned prompts.
    • Gemini 2.5 Flash for rapid concept extraction, context chunking, and low-latency assistant responses.
    • Claude as a secondary fallback for resilience in rare edge cases.
    • Supabase (Auth/DB), Stripe (payments).

Challenges we ran into

  • Handling large content volumes → Flash-driven context chunking and routing only the most salient chunks to Pro for diagram generation.
  • Achieving crisp, valid SVGs across topics → Tight, schema-anchored prompts for Gemini 2.5 Pro plus SVG linting/sanitization before display.

Accomplishments that we’re proud of

  • An end-to-end pipeline from raw content to interactive visuals with highlighted core concepts.
  • Primary Gemini workflow: Flash → Pro regenerate loop, with automatic validation and Claude as a fallback safety net.
  • Voice and Q&A assistant backed by Gemini 2.5 Flash for near-instant answers and iterative visual refinement.
  • Credits system with Stripe for usage-based access.

What we learned

  • Schema-constrained generation and strict SVG validation significantly improved diagram quality and consistency.
  • Context chunking with selective routing balanced accuracy, latency, and cost for large inputs.

What’s next for VizKidd

  • Saving chats and exporting images.
  • Video generation for difficult concepts.
  • Infinite Wiki for deep dives into sub-topics.
  • Domain-tuned visualization templates optimized for Gemini 2.5 Pro.

Built With

Share this project:

Updates