JavaScript 与人工智能的结合

import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

async function classifyImage(imgElement) {
  // 加载预训练的 MobileNet（约 16MB，首次会下载并缓存）
  const model = await mobilenet.load({ version: 2, alpha: 1.0 });

  // classify 内部会自动做预处理（缩放、归一化）
  const predictions = await model.classify(imgElement);

  // 返回前 3 个最可能的类别及置信度
  predictions.forEach((p) => {
    console.log(\`${p.className}: ${(p.probability * 100).toFixed(2)}%\`);
  });
  return predictions;
}

// 用法：传入一个 <img> 或 <video> 或 <canvas> 元素
const img = document.getElementById('photo');
classifyImage(img);

import * as tf from '@tensorflow/tfjs';

async function manualClassify(imgElement, model) {
  // tf.tidy 会自动回收中间张量，防止 GPU 显存泄漏
  const logits = tf.tidy(() => {
    // 1. 从 DOM 元素读像素，得到 [height, width, 3] 的张量
    const img = tf.browser.fromPixels(imgElement);
    // 2. 缩放到模型输入尺寸 224x224
    const resized = tf.image.resizeBilinear(img, [224, 224]);
    // 3. 归一化到 [-1, 1]
    const normalized = resized.toFloat().div(127.5).sub(1);
    // 4. 增加 batch 维度 -> [1, 224, 224, 3]
    const batched = normalized.expandDims(0);
    // 5. 前向推理
    return model.predict(batched);
  });

  const probs = await logits.data();
  logits.dispose(); // tidy 外创建的张量要手动释放
  return probs;
}

// 错误示范：每帧创建张量却不释放，显存爆炸
function badLoop(video, model) {
  const input = tf.browser.fromPixels(video); // 泄漏！
  const output = model.predict(input);         // 泄漏！
  // ... 用完就不管了，几百帧后 GPU 内存耗尽
}

// 正确示范：tf.tidy 自动清理，keep 保留需要跨帧的张量
function goodLoop(video, model) {
  const result = tf.tidy(() => {
    const input = tf.browser.fromPixels(video);
    return model.predict(input); // tidy 内部临时张量全部自动回收
  });
  // 用完 result 后手动释放
  result.dispose();
}

// 随时监控张量数量，排查泄漏
console.log('活跃张量数:', tf.memory().numTensors);
console.log('占用字节:', tf.memory().numBytes);

import * as tf from '@tensorflow/tfjs';

// 在预训练特征之上，搭一个小分类头
function buildClassifier(numClasses) {
  const model = tf.sequential();
  model.add(tf.layers.dense({
    inputShape: [1024],     // MobileNet 特征维度
    units: 100,
    activation: 'relu',
  }));
  model.add(tf.layers.dense({
    units: numClasses,
    activation: 'softmax',
  }));
  model.compile({
    optimizer: tf.train.adam(0.0001),
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy'],
  });
  return model;
}

async function train(model, xs, ys) {
  await model.fit(xs, ys, {
    epochs: 20,
    batchSize: 16,
    shuffle: true,
    callbacks: {
      onEpochEnd: (epoch, logs) => {
        console.log(\`Epoch ${epoch + 1}: loss=${logs.loss.toFixed(4)}, acc=${logs.acc.toFixed(4)}\`);
      },
    },
  });
}

// 保存到浏览器 IndexedDB
await model.save('indexeddb://my-classifier');

// 也可以下载成文件
await model.save('downloads://my-classifier');

// 下次直接加载
const loaded = await tf.loadLayersModel('indexeddb://my-classifier');

import * as poseDetection from '@tensorflow-models/pose-detection';

async function startPoseDetection(video) {
  // MoveNet 是目前浏览器端最快的姿态模型，Lightning 版专为实时优化
  const detector = await poseDetection.createDetector(
    poseDetection.SupportedModels.MoveNet,
    { modelType: poseDetection.movenet.modelType.SINGLEPOSE_LIGHTNING }
  );

  async function detectFrame() {
    // 每帧估计出 17 个关键点（鼻、肩、肘、腕、髋、膝、踝……）
    const poses = await detector.estimatePoses(video);
    if (poses.length > 0) {
      const keypoints = poses[0].keypoints;
      const leftKnee = keypoints.find((k) => k.name === 'left_knee');
      // 结合关键点坐标就能判断动作，比如深蹲的膝盖高度变化
      console.log('左膝:', leftKnee.x, leftKnee.y, '置信度:', leftKnee.score);
    }
    requestAnimationFrame(detectFrame); // 逐帧循环
  }
  detectFrame();
}

import { pipeline } from '@xenova/transformers';

async function analyzeSentiment(text) {
  // 首次调用会下载并缓存量化后的模型（约 65MB）
  const classifier = await pipeline(
    'sentiment-analysis',
    'Xenova/distilbert-base-uncased-finetuned-sst-2-english'
  );
  const result = await classifier(text);
  // [{ label: 'POSITIVE', score: 0.9998 }]
  return result;
}

analyzeSentiment('This browser-side AI is absolutely amazing!');

import { pipeline } from '@xenova/transformers';

async function transcribe(audioData) {
  // whisper-tiny 量化后约 40MB，适合浏览器
  const transcriber = await pipeline(
    'automatic-speech-recognition',
    'Xenova/whisper-tiny.en'
  );
  const output = await transcriber(audioData, {
    chunk_length_s: 30,   // 长音频分块处理
    stride_length_s: 5,   // 块之间重叠，避免边界丢词
  });
  console.log(output.text);
  return output.text;
}

import { pipeline } from '@xenova/transformers';

const extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
  progress_callback: (progress) => {
    if (progress.status === 'progress') {
      const pct = (progress.progress || 0).toFixed(1);
      console.log(\`下载 ${progress.file}: ${pct}%\`);
      // 实际项目里这里更新进度条 UI
    }
  },
});

import * as ort from 'onnxruntime-web';

async function runOnnx(inputData) {
  // 优先用 WebGPU，回退到 WASM
  const session = await ort.InferenceSession.create('./model.onnx', {
    executionProviders: ['webgpu', 'wasm'],
    graphOptimizationLevel: 'all',
  });

  // 构造输入张量（形状要和模型定义一致）
  const tensor = new ort.Tensor('float32', inputData, [1, 3, 224, 224]);
  const feeds = { input: tensor };

  const results = await session.run(feeds);
  return results.output.data;
}

import brain from 'brain.js';

// 训练一个判断颜色深浅该用黑字还是白字的网络
const net = new brain.NeuralNetwork();

net.train([
  { input: { r: 0.03, g: 0.7, b: 0.5 }, output: { light: 1 } },
  { input: { r: 0.16, g: 0.09, b: 0.2 }, output: { dark: 1 } },
  { input: { r: 0.5, g: 0.5, b: 1.0 }, output: { light: 1 } },
], { iterations: 2000, errorThresh: 0.005 });

const result = net.run({ r: 1, g: 0.4, b: 0 });
console.log(result); // { light: 0.9, dark: 0.1 }

import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-webgpu';
import '@tensorflow/tfjs-backend-webgl';
import '@tensorflow/tfjs-backend-wasm';

async function setupBestBackend() {
  const candidates = ['webgpu', 'webgl', 'wasm'];
  for (const backend of candidates) {
    try {
      await tf.setBackend(backend);
      await tf.ready();
      console.log(\`使用后端: ${tf.getBackend()}\`);
      return tf.getBackend();
    } catch (e) {
      console.warn(\`后端 ${backend} 不可用，尝试下一个\`);
    }
  }
  throw new Error('没有可用的推理后端');
}

// 单例懒加载：模型只加载一次，之后复用
let modelPromise = null;

function getModel() {
  if (!modelPromise) {
    // 首次调用才触发下载
    modelPromise = mobilenet.load({ version: 2, alpha: 0.5 }); // alpha 越小模型越小
  }
  return modelPromise;
}

// 结合 Service Worker 缓存模型权重文件，实现二次访问离线可用
// sw.js
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/model/')) {
    event.respondWith(
      caches.open('ai-models').then((cache) =>
        cache.match(event.request).then((cached) =>
          cached || fetch(event.request).then((res) => {
            cache.put(event.request, res.clone());
            return res;
          })
        )
      )
    );
  }
});

// 首次从网络加载后存入 IndexedDB
const model = await tf.loadGraphModel('https://cdn.example.com/model.json');
await model.save('indexeddb://cached-model');

// 之后优先从本地读，读不到再回源
async function loadWithCache(url, cacheKey) {
  try {
    return await tf.loadGraphModel(\`indexeddb://${cacheKey}\`);
  } catch {
    const model = await tf.loadGraphModel(url);
    await model.save(\`indexeddb://${cacheKey}\`);
    return model;
  }
}

// worker.js —— 在独立线程里加载模型并推理
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

let model;
self.onmessage = async (e) => {
  if (e.data.type === 'init') {
    model = await mobilenet.load();
    self.postMessage({ type: 'ready' });
  } else if (e.data.type === 'predict') {
    const predictions = await model.classify(e.data.imageBitmap);
    self.postMessage({ type: 'result', predictions });
  }
};

// main.js —— 主线程只负责收发消息，UI 始终流畅
const worker = new Worker('worker.js', { type: 'module' });
worker.postMessage({ type: 'init' });
worker.onmessage = (e) => {
  if (e.data.type === 'result') updateUI(e.data.predictions);
};

import * as cocoSsd from '@tensorflow-models/coco-ssd';

async function detectObjects(imgElement) {
  const model = await cocoSsd.load({ base: 'lite_mobilenet_v2' }); // lite 版更小更快
  const predictions = await model.detect(imgElement);

  predictions.forEach((p) => {
    const [x, y, w, h] = p.bbox; // 边界框：左上角坐标 + 宽高
    console.log(\`${p.class} (${(p.score * 100).toFixed(1)}%) 位于 [${x.toFixed(0)}, ${y.toFixed(0)}, ${w.toFixed(0)}, ${h.toFixed(0)}]\`);
  });
  return predictions;
}

// 把检测框画到 canvas 上
function drawBoxes(ctx, predictions) {
  ctx.strokeStyle = '#00FF00';
  ctx.lineWidth = 2;
  predictions.forEach((p) => {
    const [x, y, w, h] = p.bbox;
    ctx.strokeRect(x, y, w, h);
    ctx.fillText(\`${p.class} ${(p.score * 100).toFixed(0)}%\`, x, y > 10 ? y - 5 : 10);
  });
}

import ml5 from 'ml5';

// 图像分类：一个回调就搞定，不用碰任何张量
const classifier = ml5.imageClassifier('MobileNet', () => {
  console.log('模型加载完成');
});

const img = document.getElementById('photo');
classifier.classify(img, (error, results) => {
  if (error) {
    console.error(error);
    return;
  }
  // results[0] = { label: 'golden retriever', confidence: 0.87 }
  console.log(results[0].label, results[0].confidence);
});

import { pipeline } from '@xenova/transformers';

class SemanticSearch {
  constructor() {
    this.extractor = null;
    this.docVectors = []; // 缓存文档向量
  }

  async init() {
    // all-MiniLM-L6-v2 量化后仅约 23MB，生成 384 维句向量
    this.extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
  }

  // 把一段文本编码成归一化向量
  async embed(text) {
    const output = await this.extractor(text, { pooling: 'mean', normalize: true });
    return Array.from(output.data);
  }

  // 建立索引：把所有文档预先编码
  async index(docs) {
    for (const doc of docs) {
      const vec = await this.embed(doc);
      this.docVectors.push({ doc, vec });
    }
  }

  // 余弦相似度（向量已归一化，点积即余弦值）
  cosine(a, b) {
    let sum = 0;
    for (let i = 0; i < a.length; i++) sum += a[i] * b[i];
    return sum;
  }

  // 查询：返回最相关的 topK 条
  async search(query, topK = 3) {
    const qVec = await this.embed(query);
    return this.docVectors
      .map(({ doc, vec }) => ({ doc, score: this.cosine(qVec, vec) }))
      .sort((a, b) => b.score - a.score)
      .slice(0, topK);
  }
}

// 用法
const search = new SemanticSearch();
await search.init();
await search.index([
  '如何用 TensorFlow.js 做图像分类',
  '浏览器端语音识别 Whisper 教程',
  '模型量化能把体积压到四分之一',
]);
const results = await search.search('怎么在网页里识别图片内容');
console.log(results[0].doc); // 命中「图像分类」那条，即便查询词面完全不同

// 需要安装 @tensorflow/tfjs-node（CPU）或 @tensorflow/tfjs-node-gpu（GPU）
const tf = require('@tensorflow/tfjs-node');
const mobilenet = require('@tensorflow-models/mobilenet');
const fs = require('fs');

async function classifyFromDisk(imagePath) {
  const model = await mobilenet.load();
  // Node 端直接解码图片文件为张量
  const buffer = fs.readFileSync(imagePath);
  const imageTensor = tf.node.decodeImage(buffer, 3);
  const predictions = await model.classify(imageTensor);
  imageTensor.dispose();
  return predictions;
}

// 加载后立刻用一个假输入预热，避免真实首帧卡顿
async function warmUp(model) {
  const dummy = tf.zeros([1, 224, 224, 3]);
  const result = model.predict(dummy);
  await result.data(); // 强制同步等待计算完成
  result.dispose();
  dummy.dispose();
}