FaceLooker

Canvas

Clear Canvas

Debug Mode

Show Labels

Animation Driver

Installation

// Import the ES6 module
import { FaceLooker } from './FaceLooker.js';

Basic Usage

const viewer = new FaceLooker({
  faces: './faces/01/',
  width: 360,
  height: 360
});

document.getElementById('container')
  .appendChild(viewer.getElement());

Configuration

faces

string

Path to face images folder

width

number

Container width (default: 360)

height

number

Container height (default: 360)

showDebug

boolean

Show debug overlay

showLabel

boolean

Show person name label

Callbacks

const viewer = new FaceLooker({
  faces: './faces/01/',
  onLoad: (stats) => {
    console.log('Loaded', stats.totalImages);
  },
  onReady: () => {
    console.log('Ready!');
  }
});

Advanced Features

// Import additional modules
import { faceSetLoader } from './data/FaceSetLoader.js';
import { imageCache } from './data/ImageCache.js';
import { eventBus } from './events/EventBus.js';
import { APP_CONFIG } from './config.js';

// Event-driven communication
eventBus.on('viewer:gaze-changed', (data) => {
console.log('Gaze position:', data.x, data.y);
});

// Load face sets programmatically
const faceSets = await faceSetLoader.getAvailableFaceSets();
const metadata = await faceSetLoader.loadFaceSetMetadata(faceSets[0].path);

Project

FaceLooker ES6 module built by Jikku Jose. It is based on the work of Kylan O'Connor's face_looker.

Overview

AI-powered face tracking experience that generates realistic gaze-following effects. Uses Replicate's Expression Editor model to create 121 face images in an 11×11 grid, then maps cursor/touch position to the appropriate image for real-time interaction.

Image Generation

How Images Are Created:
• Upload a 512×512 face photo to FaceLooker Replicate Model
• AI generates 121 face images looking in different directions (11×11 grid)
• Uses Expression Editor model for realistic gaze variations
• Images cover gaze angles from -15° to +15° in 3° increments
• Downloads complete ZIP with images, sprite sheet, and demo code

FaceLooker Replicate Model can be used in free tier for generating your own face sets!

🎯 How Face Tracking Works

Grid System: 11×11 images (-15° to +15°, 3° steps = 121 total)
Real-time Tracking: Maps cursor position to appropriate face image
Interactive Experience: Creates engaging UI elements for portfolios, avatars, and demos
Mobile Support: Full touch gesture compatibility for mobile devices

🛠️ Technical Implementation

Our refactored version advances the original vanilla JS implementation with modular ES6 architecture, event-driven design, PWA features, intelligent caching, theme system, and production optimizations while maintaining the creative AI-powered experience.

Features

🤖 AI Face Generation

🎯 Real-time Gaze Tracking

📱 Mobile & Touch Support

⚡ Advanced Image Caching

🎨 Dynamic Theme System

📊 Modular ES6 Architecture

🔧 Debug Tools

File Structure

faces/
├── 01/
│ ├── meta.json
│ └── gaze_*.webp (121 images)
└── registry.json

Browser Support

Chrome 61+

Firefox 60+

Safari 10.1+

Edge 16+

License

MIT License

This project is licensed under the MIT License. You are free to use, modify, distribute, and create derivative works for both personal and commercial purposes.

View full license text