揭秘“前端+AI”的真相

发表于

前言

最先进的 Web 机器学习。直接在浏览器中运行🤗变形金刚，无需服务器！

图片识别实战案例：juejin.cn/post/735873…

Transformers.js

transformers.js是一个JavaScript库，专门用于在浏览器环境中使用预训练的机器学习模型,设计为在功能上等同于 Hugging Face 的 transformers python 库，这意味着你使用非常相似的 API 运行相同的预训练模型。

使用Transformers.js库模型的详细步骤

步骤一：引入 Transformers.js 库

首先，在你的 HTML 文件中引入 Transformers.js 库。你可以从 CDN 上引入，也可以通过包管理工具进行安装并导入到你的项目中。

1
xml复制代码<script src="https://cdn.jsdelivr.net/npm/@xenova/transformers"></script>

步骤二：加载预训练模型

使用 Transformers.js 提供的 pipeline 函数加载预训练模型。这个函数会自动加载指定的模型，并返回一个可用于执行任务的函数。在调用 pipeline 函数时，你需要指定两个参数：

  • 任务类型（model-type）：指定要执行的 NLP 任务类型，如文本分类、命名实体识别、机器翻译等。
  • 模型名称（model-name）：指定要使用的预训练模型的名称或者路径。
1
2
csharp复制代码// 使用pipeline函数加载预训练模型
const model = await pipeline("text-classification", "bert-base-uncased");

通过调用 pipeline 函数，你可以轻松地创建一个 NLP 处理流水线，以在前端代码中使用预训练的模型执行各种 NLP 任务。这样做可以大大简化你的代码，并使得使用预训练模型变得更加方便。

步骤三：准备输入数据

准备你要输入模型的数据。数据的准备方式取决于你所使用的模型和任务类型。如果是文本分类任务，你需要准备一段文本作为输入。

1
ini复制代码const inputData = "This is a sample text for classification.";

步骤四：调用模型进行推理

使用加载的模型进行推理，将准备好的输入数据传递给模型。你可以选择提供一个配置对象作为第二个参数，以配置模型的行为。这个配置对象可以包含各种参数，具体取决于你使用的模型和任务类型。

1
2
3
4
5
6
7
csharp复制代码const output = await model(inputData, {
  // 在这里可以配置模型的行为
  // 例如：
  // targetLanguage: "fr",  // 指定目标语言
  // threshold: 0.5,        // 指定阈值来过滤模型输出
  // max_length: 50,        // 指定生成文本的最大长度
});

在配置对象中，你可以根据需要设置各种参数来调整模型的行为。例如，在翻译任务中，你可以使用 targetLanguage 参数指定目标语言；在文本生成任务中，你可以使用 max_length 参数指定生成文本的最大长度。

步骤五：处理模型输出

处理模型输出，以获取你感兴趣的结果展示到页面中。根据任务的不同，输出可能是分类标签、问题回答、生成的文本等。在文本分类任务中，输出通常是一组标签及其对应的概率。

在控制台查看输出内容获取你需要的部分渲染到页面中

1
lua复制代码console.log(output);

模型——>任务

不同模型支持并完成不同模式的常见任务，例如：

📝 自然语言处理：文本分类、命名实体识别、问答、语言建模、摘要、翻译、多项选择和文本生成。

🖼️ 计算机视觉：图像分类、目标检测和分割。

🗣️ 音频：自动语音识别和音频分类。

🐙 多模态：零样本图像分类。

自然语言处理

文本分类（Text Classification）

  • model-type: “text-classification”
  • model-name: “bert-base-uncased”
  • 功能介绍： 文本分类模型用于将输入的文本分类到预定义的类别中。常见的应用包括情感分析、垃圾邮件过滤、新闻分类等。

命名实体识别（Named Entity Recognition）

  • model-type: “ner”
  • model-name: “dslim/bert-base-NER”
  • 功能介绍： 命名实体识别模型用于识别文本中具有特定意义的实体，如人名、地名、组织机构等。常见的应用包括实体抽取、信息抽取等。

问答（Question Answering）

  • model-type: “question-answering”
  • model-name: “deepset/bert-base-cased-squad2”
  • 功能介绍： 问答模型用于根据给定的问题和上下文，给出与问题相关的答案。常见的应用包括阅读理解、智能客服等。

语言建模（Language Modeling）

  • model-type: “language-modeling”
  • model-name: “gpt2”
  • 功能介绍： 语言建模模型用于生成与输入文本相似的新文本。常见的应用包括文本生成、对话系统等。

翻译（Machine Translation）

  • model-type: “translation”
  • model-name: “t5-small”
  • 功能介绍： 翻译模型用于将一种语言的文本翻译成另一种语言。常见的应用包括多语言翻译、跨语言信息检索等。

多项选择（Multiple Choice）

  • model-type: “multiple-choice”
  • model-name: “bert-base-uncased”
  • 功能介绍： 多项选择模型用于在给定一段文本和多个选项的情况下，选择与文本相关的最佳选项。常见的应用包括测验、问答系统等。

文本生成（Text Generation）

  • model-type: “text-generation”
  • model-name: “gpt2”
  • 功能介绍： 文本生成模型用于生成与输入文本相关的新文本。常见的应用包括文章摘要、诗歌生成、对话系统等。

计算机视觉（Computer Vision）

图像分类（Image Classification）

  • model-type: “image-classification”
  • model-name: “resnet50”
  • 功能介绍： 图像分类模型用于将输入的图像分类到预定义的类别中。常见的应用包括图像识别、物体识别等。

目标检测（Object Detection）

  • model-type: “object-detection”
  • model-name: “Xenova/detr-resnet-50”
  • 功能介绍： 目标检测模型用于在图像中检测和定位特定对象的位置。常见的应用包括物体检测、人脸识别等。

图像分割（Image Segmentation）

  • model-type: “image-segmentation”
  • model-name: “unet-base”
  • 功能介绍： 图像分割模型用于将图像划分成多个语义区域，每个区域表示不同的物体或场景。常见的应用包括图像分割、医学图像分析等。

音频处理（Audio）

自动语音识别（Automatic Speech Recognition）

  • model-type: “automatic-speech-recognition”
  • model-name: “facebook/wav2vec2-base-100h”
  • 功能介绍： 自动语音识别模型用于将语音转换成文本。常见的应用包括语音转写、语音搜索等。

音频分类（Audio Classification）

  • model-type: “audio-classification”
  • model-name: “decoar2-base”
  • 功能介绍： 音频分类模型用于将音频数据分类到预定义的类别中。常见的应用包括语音情感分析、语音指令识别等。

多模态（Multimodal）

零样本图像分类（Zero-shot Image Classification）

  • model-type: “zero-shot-image-classification”
  • model-name: “clip”
  • 功能介绍： 零样本图像分类模型用于根据输入的文本描述和图像，识别图像中的对象或场景，即使模型在训练时没有见过这些特定图像。常见的应用包括图像搜索、图像标注等。

最后

实战案例请移步至小编另一篇文章：juejin.cn/post/735873…

Transformers.js库说明文档：@xenova/transformers - npm (npmjs.com)

如果觉得小编的文章对你有所帮助，麻烦给小编点点赞，也可以持续关注小编，我将输出更多优质内容！

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%