Chrome Built-in AI 실전 가이드 — Summarizer·Translator·Writing Assistance를 서버 비용 없이 붙이기

const availability = await Summarizer.availability();
// 'available'    — 모델이 이미 다운로드되어 바로 사용 가능
// 'downloadable' — 사용 가능하지만 모델 다운로드 필요
// 'downloading'  — 현재 다운로드 진행 중
// 'unavailable'  — 지원 안 됨 (하드웨어 미충족 또는 Chrome 미지원)

const summarizer = await Summarizer.create({
  type: 'key-points',   // 'tldr' | 'teaser' | 'headline' | 'key-points'
  format: 'markdown',   // 'markdown' | 'plain-text'
  length: 'short',      // 'short' | 'medium' | 'long'
});

const summarizer = await Summarizer.create({
  type: 'key-points',
  format: 'markdown',
  length: 'short',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`모델 다운로드: ${Math.round(e.loaded * 100)}%`);
    });
  },
});

const detector = await LanguageDetector.create();
const results = await detector.detect(userInput);
// results[0].detectedLanguage → 'ko', 'en', 'ja' 등 BCP 47 코드
// results[0].confidence → 0~1 신뢰도 점수
 
const translator = await Translator.create({
  sourceLanguage: results[0].detectedLanguage,
  targetLanguage: 'en',
});
const translated = await translator.translate(userInput);

const session = await LanguageModel.create({
  initialPrompts: [
    {
      role: 'system',
      content: '당신은 코드 리뷰를 도와주는 어시스턴트입니다. 한국어로 답하세요.',
    },
  ],
});
 
const result = await session.prompt('이 함수의 문제점을 알려줘: ' + codeSnippet);
 
const stream = session.promptStreaming('이 코드를 리팩터링해줘: ' + codeSnippet);
for await (const chunk of stream) {
  outputElement.textContent += chunk;
}

import { marked } from 'marked';
 
class ArticleSummarizer {
  #summarizer = null;
  #initPromise = null;
 
  async init() {
    if (this.#summarizer) return true;
    if (this.#initPromise) return this.#initPromise;
 
    this.#initPromise = (async () => {
      const availability = await Summarizer.availability();
      if (availability === 'unavailable') return false;
 
      this.#summarizer = await Summarizer.create({
        type: 'key-points',
        format: 'markdown',
        length: 'short',
        monitor(m) {
          m.addEventListener('downloadprogress', (e) => {
            document.querySelector('#download-progress').textContent =
              `모델 준비 중... ${Math.round(e.loaded * 100)}%`;
          });
        },
      });
      return true;
    })();
 
    return this.#initPromise;
  }
 
  async summarize(articleText) {
    if (!this.#summarizer) throw new Error('Summarizer not initialized');
    return this.#summarizer.summarize(articleText);
  }
}
 
const summarizer = new ArticleSummarizer();
 
document.querySelector('#summarize-btn').addEventListener('click', async () => {
  const btn = document.querySelector('#summarize-btn');
  const output = document.querySelector('#summary-output');
  const articleText = document.querySelector('#article-content').textContent;
 
  btn.disabled = true;
  try {
    const ready = await summarizer.init();
    const summary = ready
      ? await summarizer.summarize(articleText)
      : await fallbackToCloudSummarizer(articleText);
 
    output.innerHTML = marked(summary);
  } catch (err) {
    console.error('요약 실패:', err);
    output.textContent = '요약을 생성하지 못했습니다. 잠시 후 다시 시도해 주세요.';
  } finally {
    btn.disabled = false;
  }
});

let detectorPromise = null;
function getDetector() {
  if (!detectorPromise) detectorPromise = LanguageDetector.create();
  return detectorPromise;
}
 
const translatorCache = new Map();
function getTranslator(sourceLanguage, targetLanguage) {
  const key = `${sourceLanguage}->${targetLanguage}`;
  if (!translatorCache.has(key)) {
    translatorCache.set(
      key,
      Translator.create({ sourceLanguage, targetLanguage }),
    );
  }
  return translatorCache.get(key);
}
 
async function translateComment(commentElement) {
  const originalText = commentElement.dataset.originalText;
  const targetLanguage = 'ko';
 
  const detector = await getDetector();
  const [{ detectedLanguage, confidence }] = await detector.detect(originalText);
 
  if (confidence < 0.7) return;
  if (detectedLanguage === targetLanguage) return;
 
  const availability = await Translator.availability({
    sourceLanguage: detectedLanguage,
    targetLanguage,
  });
 
  if (availability === 'unavailable') {
    return cloudTranslateFallback(originalText, detectedLanguage, targetLanguage);
  }
 
  const translator = await getTranslator(detectedLanguage, targetLanguage);
  const translated = await translator.translate(originalText);
 
  commentElement.querySelector('.translated-text').textContent = translated;
  commentElement.querySelector('.translation-badge').hidden = false;
}

async function draftEmail({ keywords, context, tone = 'formal' }) {
  if (!('Writer' in globalThis)) {
    return cloudWriterFallback({ keywords, context, tone });
  }
 
  const availability = await Writer.availability();
  if (availability === 'unavailable') {
    return cloudWriterFallback({ keywords, context, tone });
  }
 
  const writer = await Writer.create({
    tone,               // 'formal' | 'neutral' | 'casual'
    format: 'plain-text',
    length: 'medium',
  });
 
  return writer.write(
    `다음 키워드를 포함한 이메일 초안을 작성해줘: ${keywords}`,
    { context },
  );
}
 
async function adjustTone(existingText, targetTone) {
  if (!('Rewriter' in globalThis)) return existingText;
 
  const availability = await Rewriter.availability();
  if (availability === 'unavailable') return existingText;
 
  const rewriter = await Rewriter.create({
    tone: targetTone,
    format: 'plain-text',
    length: 'as-is', // Rewriter의 length는 'shorter' | 'as-is' | 'longer'
  });
 
  return rewriter.rewrite(existingText, {
    context: '이메일 형식에 맞게 다시 작성해줘',
  });
}

async function createOnboardingBot(userContext) {
  const availability = await LanguageModel.availability();
  if (availability === 'unavailable') {
    return createCloudChatFallback(userContext);
  }
 
  const session = await LanguageModel.create({
    initialPrompts: [
      {
        role: 'system',
        content: `당신은 ${userContext.appName} 온보딩 어시스턴트입니다.
현재 사용자 상태:
- 플랜: ${userContext.plan}
- 완료한 단계: ${userContext.completedSteps.join(', ')}
- 현재 페이지: ${userContext.currentPage}
간결하고 친절하게 한국어로 답변하세요.`,
      },
    ],
  });
 
  return {
    async ask(question) {
      // Chrome 148 기준: promptStreaming은 델타 청크를 방출합니다.
      const stream = session.promptStreaming(question);
      let response = '';
      for await (const chunk of stream) {
        response += chunk;
        updateChatUI(response);
      }
      return response;
    },
    destroy() {
      session.destroy(); // VRAM/메모리 해제
    },
  };
}