🐾 CanisVision

Canine Senses Simulation & Behavioral Telemetry Studio

Ever wondered how your dog truly experiences the world?
CanisVision bridges canine biophysics and multimodal artificial intelligence to reveal the hidden sensory realm of dogs: dichromatic vision (blue-yellow spectrum), high-frequency ultrasound acoustics, invisible scent pathways, and an AI-powered internal monologue.

Live Application: https://johnnylemonny.github.io/canisvision/
Author: johnnylemonny

🎬 Animated Video & Studio Showcase

⚡ 9-Second Fast-Paced Visual Teaser

Demonstrating real-time Brettel-Neitz dichromacy, 20/75 visual acuity blur, and Google Gemini Multimodal telemetry.

High-definition MP4 available at public/canisvision-showcase.mp4

🎛️ Desktop Studio Cockpit (Obsidian Dark Mode)

Anchored dual-spectrum sensory canvas with independent scrolling panels for environmental controls and real-time AI telemetry.

☀️ High-Contrast Light Mode

Clean, accessible veterinary laboratory aesthetic.

📱 Mobile Single-Column Layout (iPhone 16 Pro Max / Pixel 10)

🔬 Canine Biophysics & Neuro-Sensory Guide

🌟 Why CanisVision?

Humans live in a visual world rich in reds, greens, and sharp static details. Dogs, however, navigate by a completely different sensory spectrum:

Dichromatic Vision: Dogs have only two types of color cones (S-cones ~429nm blue, M-cones ~555nm yellow). Reds and greens collapse into muted yellows, tans, and grays.
Visual Acuity of ~20/75: What a human sees sharply at 75 feet, a dog only resolves at 20 feet.
The Tapetum Lucidum: A reflective layer behind the canine retina amplifying twilight night vision.
Olfactory Dominance: A canine nose houses up to 300 million scent receptors, turning everyday living spaces into complex maps of invisible scent news.
High-Frequency Ultrasonic Hearing: Dogs hear sounds up to 65,000 Hz, detecting appliance motor whines and pipe vibrations that humans cannot perceive.

CanisVision simulates all of these dimensions in real-time and pairs biophysical optical algorithms with Google Gemini Multimodal AI to decode any room, backyard, or city street from a dog's point of view.

🔬 Core Features & Interactive Capabilities

👁️ 1. Dual-Spectrum Sensory Canvas & Optical Shaders

Real-Time Brettel-Neitz Dichromacy: Converts any photo into authentic canine color space (S-cone and M-cone wavelengths).
Interactive Split Slider: Smoothly drag between human full-color trichromacy and dog vision.
Dog Acuity Simulation (20/75): Realistic optical blur shader mimicking natural canine static clarity.
Tapetum Lucidum Night Booster: Twilight photon multiplier shader with cyan-amber retro-reflection.
Interactive Spectrum Loupe (Key L): Hover over any pixel to sample its dominant nanometer wavelength (~429nm Blue vs ~555nm Yellow) with real-time biological annotations.

🧠 2. Google Gemini Multimodal Telemetry

Dog Mind Stream (Cognitive Monologue): First-dog perspective stream of consciousness with Web Speech API audio playback in natural English.
Super-Sniffer (Invisible Scent Trails): Identifies food volatiles, human pack pheromones, nature scents, and neighborhood newsposts with spatial vector markers.
Secret Sounds (High-Frequency Hearing): Pinpoints ultrasonic whines (e.g. appliance transformers, vacuum motors) with live Web Audio API frequency synthesis (40Hz - 65kHz).
Paws & Safety Audit: Highlights slip-hazard floors, toxic plants (onions, grapes, oleander), and choking hazards with actionable owner recommendations.
Brain Games & Enrichment Plans: Generates custom training drills (snuffle searches, lickmat decompression) with celebratory confetti micro-interactions.

🎛️ 3. Pro Cockpit Studio & Controls

Anchored 3-Column Workstation: The central sensory canvas stays anchored in view while side controls and multi-dimensional telemetry scroll smoothly and independently.
5 Pre-Analyzed Scenarios: Test 100% of features instantly (Living Room, Kitchen Counter, Backyard, Urban Walk, Agility Park) without an API key.
Custom Photo Upload: Drop in your own home photos to run live Gemini AI multimodal analysis.
5 Breed Archetypes & Fine-Tuning: Golden Retriever, Beagle, Border Collie, German Shepherd, and Rescue with fine-tuning sliders for Scent Focus, Prey Drive, Noise Sensitivity, and Guarding Alertness.
Keyboard Shortcuts: Space (toggle split), 1-5 (switch scenes), H (scents), S (sounds), Z (hazards), L (loupe), F (fullscreen), M (read monologue).
Exportable Telemetry Reports: Export formatted Markdown audit reports ready for veterinary behaviorists and dog owners.
Dual-Theme Engine: Obsidian dark mode and high-contrast light mode.

🏗️ Technical Architecture & Stack

src/
├── types/                # Strict TypeScript interfaces
├── lib/
│   ├── vision/          # Brettel-Neitz canine dichromacy shaders, blur, tapetum lucidum
│   ├── audio/           # Web Audio API tone synthesis (whistles, hums) & Web Speech TTS
│   ├── gemini/          # GoogleGenAI SDK wrapper, structured JSON schemas, BYOK vault
│   ├── fixtures/        # Pre-analyzed scenario fixtures & breed personality profiles
│   └── utils.ts         # Markdown report generator & formatting helpers
└── components/
    ├── layout/          # Header, Footer
    ├── vision/          # SplitSensoryCanvas, SpectrumLoupe, VectorOverlay, VisionControls
    ├── telemetry/       # TelemetryDashboard, CanineMonologueCard, ArousalRadar, ScentRadarCard, etc.
    ├── controls/        # SceneSelector, BreedSelector
    └── modals/          # ApiKeyModal, BiophysicsGuideModal, ExportReportModal, KeyboardShortcutsModal

Exact Technology Versions

Google AI SDK: @google/genai (v2.17.1) with default gemini-3.5-flash-lite (newest, fast & ultra-low cost) and gemini-3.7-flash (flagship multimodal workhorse).
Frontend Engine: React 19 (19.2.8) & TypeScript 7 (7.0.2).
Tooling & Build: Vite 8 (8.2.1 Rolldown engine) with @tailwindcss/vite (4.3.3) and manual vendor chunk splitting.
Motion Graphics & Video Engine: Remotion (4.0.512) & Puppeteer-core (25.7.0).
Styling: Tailwind CSS v4 (4.3.3) with full light & dark theme token architecture.
Audio & Speech: Web Audio API (Oscillator/Gain synthesis) + Web Speech API (English TTS).
Icons & Effects: Lucide React (1.31.0), Canvas Confetti (1.9.4).

🔒 Privacy & Client-Side BYOK Vault

CanisVision is 100% serverless and client-side:

All Google Gemini API keys are stored solely in your browser's localStorage (canisvision_gemini_api_key).
API calls go directly from your browser to Google AI Studio endpoints.
No analytics, tracking, or proxy backends are used.

🚀 Getting Started Locally

# 1. Clone the repository
git clone https://github.com/johnnylemonny/canisvision.git
cd canisvision

# 2. Install dependencies (using pnpm)
pnpm install

# 3. Start development server
pnpm run dev

# 4. Build for production & verify types
pnpm run build
pnpm run preview

📄 License & Attribution

Author: johnnylemonny
License: PolyForm Noncommercial License 1.0.0 (see LICENSE).
Created for the DEV.to Weekend Challenge: Dog Days Edition (Build on Google AI).

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
public		public
scripts		scripts
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
AGENTS.md		AGENTS.md
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository files navigation

🐾 CanisVision

Canine Senses Simulation & Behavioral Telemetry Studio