Implementing Built In Browser AI

Check for built-in AI support and use the Summarizer API:

JavaScript
// Check if built-in AI is available
if ('ai' in window && 'summarizer' in window.ai) {
  const summarizer = await window.ai.summarizer.create();
  const summary = await summarizer.summarize(document.body.textContent);
  console.log(summary);
} else {
  // Fallback to server-side API
  fallbackToServerAI();
}

Progress:

• Assess use case suitability (simple tasks work best client-side)
• Check browser and API availability
• Implement feature detection and graceful fallback
• Use appropriate task-specific API (Translator, Summarizer, Writer)
• Test across device capabilities and connection states
• Set up hybrid architecture for broader compatibility

Step-by-step Process:

1. Feature Detection: Always check if the specific AI API is available before using
2. Task Selection: Choose the appropriate task API (Summarizer, Translator, Writer, Rewriter)
3. Model Creation: Initialize the AI model for your specific task
4. Processing: Execute AI operations with user data
5. Fallback Handling: Implement server-side backup for unsupported browsers/devices
6. Performance Monitoring: Track client-side vs server-side performance

Example 1: Content Summarization

JavaScript
// Input: Long article content
if ('ai' in window && 'summarizer' in window.ai) {
  const summarizer = await window.ai.summarizer.create({
    type: 'key-points',
    format: 'markdown',
    length: 'short'
  });
  const summary = await summarizer.summarize(articleText);
  displaySummary(summary);
}

Example 2: Translation with Fallback

JavaScript
// Input: Text to translate
async function translateText(text, targetLang) {
  if ('ai' in window && 'translator' in window.ai) {
    const translator = await window.ai.translator.create({
      sourceLanguage: 'en',
      targetLanguage: targetLang
    });
    return await translator.translate(text);
  } else {
    // Fallback to server API
    return await fetch('/api/translate', {
      method: 'POST',
      body: JSON.stringify({ text, targetLang })
    }).then(res => res.json());
  }
}

Example 3: Hybrid Architecture Setup

JavaScript
// Input: User preference and device capability
class AIService {
  constructor() {
    this.preferLocal = localStorage.getItem('ai-preference') === 'local';
    this.hasBuiltInAI = 'ai' in window;
  }
  
  async processContent(content, task) {
    if (this.hasBuiltInAI && (this.preferLocal || !navigator.onLine)) {
      return await this.processLocal(content, task);
    }
    return await this.processServer(content, task);
  }
}