Chrome AI Features Demo

This repository contains a demonstration of Chrome's built-in AI features using the experimental APIs. The demo showcases various AI capabilities that can run directly in the browser without requiring external API calls.

Prerequisites

To run this demo, you need:

1. Chrome Canary or Dev Channel - Chrome's AI features are currently experimental
2. Enable AI Features - Follow the instructions at Chrome AI Documentation to enable the built-in AI features
3. Static Web Server - The demo must be served from a web server (not opened as a file)

Setup

1. Clone or download this repository

2. Serve the content from a static web server. You can use any of these methods:

   Using Python:

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000

   Using Node.js:

   npx serve .
   # or
   npx http-server

   Using PHP:

   php -S localhost:8000

3. Open your browser and navigate to http://localhost:8000

Features Demonstrated

The demo includes the following Chrome AI features, located in the scripts/ folder:

1. Language Detection (01-language-detector.js)

• API: LanguageDetector
• Description: Automatically detects the language of text content
• Demo: Analyzes the main content of the page to identify its language

2. Translation (02-translator.js)

• API: Translator
• Description: Translates text from one language to another
• Demo: Translates the page content from English to Arabic with streaming support

3. Text Summarization (03-summarizer.js)

• API: Summarizer
• Description: Creates summaries of long text content
• Demo: Generates key points summary of the content in markdown format
• Options: Configurable summary type, format, and length

4. Structured Prompting (04-prompting.js)

• API: LanguageModel
• Description: AI prompting with structured responses
• Demo: Asks a specific question about the content and expects a boolean response
• Features: Schema-constrained responses

5. Multimodal AI (05-multimodal.js)

• API: LanguageModel with image input
• Description: AI that can process both text and images
• Demo: Analyzes the profile image and provides a description
• Features: Combined text and image processing

How to Test

1. Open the browser's Developer Console (F12)
2. Run each script in order by copying and pasting the content into the console
3. Observe the AI responses and download progress in the console output

Note: Some features may require additional setup or may not be available in all Chrome versions. Check the Chrome AI Documentation for the latest compatibility information.

Project Structure

├── index.html          # Main demo page with biography content
├── me.jpg             # Profile image for multimodal demo
├── style.css          # Basic styling
├── scripts/
│   ├── 01-language-detector.js  # Language detection demo
│   ├── 02-translator.js         # Translation demo
│   ├── 03-summarizer.js         # Text summarization demo
│   ├── 04-prompting.js          # Structured prompting demo
│   └── 05-multimodal.js         # Multimodal AI demo
└── README.md          # This file

Important Notes

• These APIs are experimental and subject to change
• Features may not work in stable Chrome versions
• Some features require internet connectivity for model downloads
• Download progress is monitored for models that need to be fetched
• The demos use the biography content on the main page as sample text

Learn More

• Chrome Built-in AI Documentation
• Presentation on Chrome AI Features