Face Looker — Turn Any Real Face Photo Into a Cursor-Tracking Character

Face Looker Resources

Everything you need for interactive gaze tracking setup

Introduction

Face Looker is an interactive gaze tracking demonstration that creates an engaging visual experience. As you move your cursor around the screen, the face follows your movements in real-time, creating an illusion of eye contact and engagement.

This is achieved through a clever combination of pre-rendered images and JavaScript-based gaze tracking.

How It Works

Face Looker uses a grid-based gaze tracking system that works in three main steps:

1. Image Generation: A face image is processed through an AI model to generate 121 different gaze directions, creating a grid of images where the eyes look in different directions.
2. Coordinate Mapping: When you move your cursor, the system calculates the relative position of your cursor to the face container. This position is normalized to coordinates between -1 and 1.
3. Image Selection: The normalized coordinates are quantized to match the pre-generated image grid (ranging from -15 to 15 in steps of 3), and the corresponding face image with the matching gaze direction is displayed.

Technical Details

• Grid Configuration: 11×11 grid (121 images total)
• Gaze Range: -15 to +15 degrees in both X and Y axes
• Step Size: 3 degrees between each image
• Image Format: WebP format for optimal performance
• Naming Convention: gaze_px{value}_py{value}_256.webp

The system uses JavaScript to track mouse/touch movements, calculate normalized coordinates, quantize to the nearest grid point, and dynamically swap images for smooth gaze following.

Installation Guide - Option 1: Web Interface (Easiest)

This is the simplest way to get started with Face Looker. Follow these steps:

Installation Guide - Option 2: API (Python)

1. Install the Replicate Python client: pip install replicate
2. Get your API token from replicate.com/account/api-tokens
3. Set the token:

   # Windows PowerShell
   $env:REPLICATE_API_TOKEN="your_token_here"
   
   # Linux/Mac
   export REPLICATE_API_TOKEN=your_token_here

4. Run Python script:

   import replicate
   output = replicate.run(
       "kylan02/face-looker:latest",
       input={"image": open("your_face.jpg", "rb")}
   )
   print(output)  # Download URL for the ZIP file

Installation Guide - Option 3: API (cURL)

curl -X POST https://api.replicate.com/v1/models/kylan02/face-looker/predictions \
  -H "Authorization: Token $REPLICATE_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"input": {"image": "https://your-image-url.com/face.jpg"}}'

Final Result

The final implementation features:

• Beautiful UI: Modern design with a dotted black and white background theme
• 3D Card Effect: Interactive text section that responds to mouse movements with a 3D tilt effect
• Responsive Layout: Two-section design with the face on the right and information on the left, separated by a clean divider line
• Smooth Performance: Optimized image swapping for seamless gaze tracking
• Cross-Platform: Works on desktop and mobile devices with touch support

The demo creates an engaging, interactive experience that demonstrates the power of AI-generated gaze tracking in a simple, accessible web interface.

Use Cases

Face Looker has numerous practical and creative applications:

• Interactive Websites & Portfolios: Create engaging "about me" sections where your face follows visitors
• Educational Demonstrations: Teach concepts of coordinate mapping and normalization
• Marketing & Advertising: Create attention-grabbing banner ads and interactive product showcases
• Entertainment & Gaming: Interactive character displays and game UI elements
• Accessibility Tools: Eye-tracking demonstrations and assistive technology prototypes
• Art & Creative Projects: Digital art installations and interactive exhibits
• Customer Service: Virtual assistants with engaging presence and chatbot interfaces

Conclusion

Face Looker demonstrates how modern AI and web technologies can create engaging, interactive experiences with minimal setup. The combination of pre-rendered images and real-time JavaScript creates a smooth, responsive gaze tracking system that's both impressive and accessible.

Whether you're building a personal portfolio, creating educational content, or developing interactive marketing materials, Face Looker provides a simple yet powerful way to add engaging visual interactions to your projects.