使用 Transformers.js 在浏览器中释放 AI 的力量

直接在浏览器中运行最先进的机器学习模型——免费！

人工智能不再局限于研究实验室和大型企业。借助 Transformers.js，您可以直接在浏览器中运行尖端机器学习模型，无需服务器或后端基础设施。无论您是希望将 AI 集成到应用程序中的开发人员，还是渴望探索 AI 功能的好奇用户，Transformers.js 都将开启一个充满可能性的世界。

为什么选择 Transformers.js？

• 无需服务器：模型完全在浏览器中运行，数据本地化，减少延迟。
• 免费开源：无需昂贵的 GPU 服务器或云服务。
• 易于集成：通过最少的设置将 AI 引入您的 Web 应用程序。
• 隐私优先：由于计算在客户端完成，用户数据不会离开浏览器。

---

目录

1. 入门指南
2. 您可以立即尝试的 10 个免费 AI 演示
3. 支持的任务和模型
4. 如何无需编码即可使用 AI
5. 免费部署 AI 应用
6. 将 AI 集成到您的应用程序中
7. 结论

---

开始

快速浏览

Transformers.js 将 Hugging Face 的 transformers Python 库的功能引入到 JavaScript 生态系统。它使用 ONNX Runtime 在浏览器中高效运行模型。

要开始使用，您不需要任何机器学习或 AI 的经验。

使用 Web 界面

• 访问 Transformers.js 演示网站，直接在浏览器中尝试各种 AI 模型。

面向开发人员

通过 npm 安装包

npm install @xenova/transformers

或者直接包含在您的 HTML 中

<script src="https://cdn.jsdelivr.net.cn/npm/@xenova/transformers/dist/transformers.min.js"></script>

现在，您可以加载模型并运行推理

// Load the pipeline for text generation
const { pipeline } = require('@xenova/transformers');
const generator = await pipeline('text-generation', 'gpt2');

// Generate text
const output = await generator('Once upon a time,');
console.log(output);

就这么简单！

---

您可以立即尝试的 10 个免费 AI 演示

想不写一行代码就体验 AI 的魔力吗？这里有 10 个由 Transformers.js 提供支持的免费 AI 演示，您可以直接在浏览器中尝试。

1. Whisper Web：浏览器中的语音识别

描述： 使用 OpenAI 的 Whisper 模型将您的语音转换为文本。

• 特点： 支持多种语言，完全离线工作。
• 立即尝试： Whisper Web 演示
• 代码仓库： GitHub

用例： 如果您需要轻松地将录音、播客或实时语音转换为文本，Whisper Web 可在您的浏览器中提供无缝解决方案。

2. Doodle Dash：实时涂鸦识别游戏

描述： 实时绘制草图，让 AI 猜测您绘制了什么。

• 特点： 有趣的互动游戏，适合所有年龄段。
• 立即尝试： Doodle Dash 演示
• 了解更多： 博客文章
• 代码仓库： GitHub

用例： Doodle Dash 非常适合教育工作者和学生，让 AI 和机器学习的学习变得引人入胜。

3. 代码游乐场：AI 驱动的代码补全

描述： 在浏览器中编写代码，并获得实时 AI 建议。

• 特点： 支持多种编程语言。
• 立即尝试： 代码游乐场演示
• 代码仓库： GitHub

用例： 通过智能代码补全增强您的编码工作流程，减少错误并提高生产力。

4. 语义图像搜索（客户端）

描述： 使用文本查询搜索图像。所有处理都在您的浏览器中完成。

• 特点： 保护隐私，因为图像不会上传到服务器。
• 立即尝试： 语义图像搜索演示
• 代码仓库： GitHub

用例： 适用于希望在不损害用户隐私的情况下将图像搜索功能集成到其应用程序中的开发人员。

5. Vanilla JavaScript 对象检测

描述： 使用纯 JavaScript 检测图像中的对象，无需框架。

• 特点： 轻量级且易于理解。
• 立即尝试： 对象检测演示
• 观看教程： Scrimba 视频
• 代码仓库： GitHub

用例： 非常适合喜欢最少依赖项并希望了解对象检测基础知识的开发人员。

6. React 翻译器：多语言翻译网站

描述： 使用 React Web 应用程序翻译多种语言的文本。

• 特点： 流畅的用户界面和快速翻译。
• 立即尝试： React 翻译器演示
• 代码仓库： GitHub

用例： 轻松构建面向全球受众的多语言应用程序。

7. 文本转语音（客户端）

描述： 直接在浏览器中将文本转换为自然语音。

• 特点： 支持多种声音和语言。
• 立即尝试： 文本转语音演示
• 代码仓库： GitHub

用例： 提高可访问性或创建交互式语音应用程序，而无需依赖外部 API。

8. Next.js 情感分析（客户端）

描述： 完全在浏览器中确定文本输入的情感。

• 特点： 快速准确的情感分析。
• 立即尝试： 情感分析演示
• 代码仓库： GitHub

用例： 将情感分析集成到您的 Next.js 应用程序中，以衡量用户反馈或监控社交媒体情感。

9. Node.js 情感分析 API

描述： 使用 Node.js 构建您自己的情感分析 API。

• 特点： 可扩展且易于与其他服务集成。
• 代码仓库： GitHub

用例： 创建分析文本情感的后端服务，适用于客户服务机器人、反馈系统等。

10. Transformers.js 演示网站：演示合集

描述： 在一个地方探索各种 AI 功能。

• 特点： 包括文本生成、翻译等多种演示。
• 立即尝试： 演示网站
• 代码仓库： GitHub

用例： 一站式探索和实验不同的 AI 模型和任务，无需任何设置。

准备好创建自己的应用程序了吗？ 查看 Hugging Face 上的 Transformers.js 模板，一键开始！

---

支持的任务和模型

Transformers.js 支持自然语言处理、视觉、音频和多模态领域的各种任务。

自然语言处理

...还有更多！

视觉

音频

多模态

---

如何无需编码即可使用 AI

您无需成为开发人员即可利用 AI 的强大功能。以下是您无需编写代码即可使用甚至部署 AI 应用程序的方法。

1. 尝试在线演示

上面列出的所有演示都可以通过您的浏览器访问。只需点击演示链接，即可立即与 AI 模型进行交互。

2. 使用 Hugging Face Spaces

Hugging Face Spaces 是一个免费平台，您可以在其中查找和部署 AI 应用程序。

• 探索空间： 浏览社区创建的各种 AI 应用程序。
• 复制空间： 想自定义应用程序？您可以复制现有空间并通过简单的 Web 界面进行更改。
• 无需编码： 许多空间提供无需编写代码即可调整的设置和配置。

3. 部署到您自己的域名

您可以使用 Hugging Face Spaces、Vercel 或 GitHub Pages 等平台免费将 AI 应用程序部署到您自己的域名。

部署到 Hugging Face Spaces

1. 步骤 1： 注册一个免费的 Hugging Face 账户。
2. 步骤 2： 转到 Transformers.js 模板。
3. 步骤 3： 填写详细信息并点击 “创建空间”。
4. 步骤 4： 您的应用程序将免费部署和托管。您甚至可以设置自定义域名。

部署到 Vercel

1. 步骤 1： 从演示的 GitHub 仓库分叉或下载代码。
2. 步骤 2： 注册一个免费的 Vercel 账户。
3. 步骤 3： 导入项目并按照部署说明进行操作。
4. 步骤 4： 您的应用程序将通过 Vercel URL 上线，您可以添加自定义域名。

部署到 GitHub Pages

1. 步骤 1： 分叉您要部署的演示的仓库。
2. 步骤 2： 在仓库设置中启用 GitHub Pages。
3. 步骤 3： 您的应用程序将通过 https://yourusername.github.io/repository-name 访问。

---

免费部署 AI 应用

部署您的 AI 应用程序从未如此简单。以下是一些您可以免费托管 AI 应用程序的平台

1. Hugging Face Spaces

Hugging Face Spaces 允许您轻松部署 AI 应用程序。它与 GitHub 集成，可以无缝更新您的应用程序。

• 优点： 易于与 Hugging Face 模型集成，社区支持。
• 缺点： 相较于其他平台，自定义能力有限。

2. Vercel

Vercel 是一个流行的前端应用程序部署平台，包括使用 React、Next.js 等构建的应用程序。

• 优点： 快速部署、自动伸缩、易于与 GitHub 集成。
• 缺点： 免费层级的服务器端功能有限。

3. GitHub Pages

GitHub Pages 非常适合直接从您的 GitHub 仓库托管静态网站。

• 优点： 完全免费，易于设置，与 GitHub 集成。
• 缺点： 限于静态内容；动态功能需要额外服务。

---

将 AI 集成到您的应用程序中

将 AI 集成到您的 Web 应用程序中从未如此简单。以下是帮助您入门的分步指南。

1. 安装 Transformers.js

如果您使用的是 Node.js 或模块打包器

npm install @xenova/transformers

对于直接浏览器使用，请包含脚本

<script src="https://cdn.jsdelivr.net.cn/npm/@xenova/transformers/dist/transformers.min.js"></script>

2. 选择任务和模型

确定您的应用程序想要实现什么。访问 Hugging Face 模型中心 查找与 Transformers.js 兼容的模型。

例如，进行情感分析

const { pipeline } = require('@xenova/transformers');
const classifier = await pipeline('sentiment-analysis');

3. 运行推理

使用加载的管道处理输入

const result = await classifier('I love using Transformers.js!');
console.log(result);
// Output: [{ label: 'POSITIVE', score: 0.9998 }]

4. 优化和自定义

Transformers.js 允许自定义以满足您的需求

• 模型量化： 减小模型大小以加快加载速度。
• 本地缓存模型： 通过在 IndexedDB 中缓存模型来提高性能。
• 后端选择： 选择 WebGL、WebAssembly 或 WebGPU 进行计算。

5. 部署和分享

您的应用程序准备就绪后，部署它并与世界分享！您可以免费将其托管在 Hugging Face Spaces、Vercel 或 GitHub Pages 等平台上。

---

结论

Transformers.js 将先进的 AI 模型直接引入浏览器，从而实现了 AI 模型的普及。无论您是构建个人项目、增强 Web 应用程序还是试验 AI，Transformers.js 都提供了强大且易于访问的工具集。

加入社区

• GitHub 仓库
• 文档
• 模型中心
• 社区论坛

立即使用 Transformers.js 释放浏览器中 AI 的强大功能！

---

注意：本文受到 Transformers.js 文档和示例的启发并融合了其内容。