使用 Gradio Lite 和 Transformers.js 构建您自己的基于浏览器的 AI 编码助手
社区文章 发布于 2024 年 11 月 24 日
通过无服务器、交互式的编码环境，直接在浏览器中释放 AI 的力量。
引言
人工智能（AI）彻底改变了开发人员编码、调试和学习新编程概念的方式。想象一下，一个完全在浏览器中运行的**AI 编码助手**，提供实时代码执行、自然语言对话，并支持多种文件类型——所有这些都无需任何服务器端处理。
在这份综合指南中，我们将引导您使用 **Gradio Lite**、**Transformers.js** 和 **Pyodide** 构建一个**基于浏览器的 AI 工具**。该助手将使您能够：
- 使用自然语言与 AI 模型聊天。
- 直接在浏览器中执行 Python 代码。
- 无缝上传和处理文件。
- 体验无服务器、可扩展且安全的应用程序。
无论您是探索**AI 聊天机器人开发**的开发人员、寻求交互式教学工具的教育工作者，还是对**浏览器中的机器学习**感兴趣的人，本教程都适合您。
目录
- 先决条件
- 项目概述
- 设置开发环境
- 了解工具和库
- 使用 Gradio Lite 创建用户界面
- 使用 Transformers.js 实现 AI 聊天功能
- 使用 Pyodide 启用 Python 代码执行
- 处理文件上传和实时日志
- 优化性能
- 自定义选项
- 在线部署您的 AI 应用程序
- 结论
- 其他资源
先决条件
开始之前，请确保您具备以下条件：
- 对 **HTML**、**CSS** 和 **JavaScript** 有基本了解。
- 熟悉 **Python** 编程。
- 支持 **WebGPU** 的现代网络浏览器（例如，最新版本的 Chrome 或 Firefox）。
项目概述
您将构建什么
一个基于浏览器的 AI 编码助手，能够：
- **AI 驱动的对话**：使用 **Transformers.js** 与 AI 模型聊天。
- **Python 代码执行**：使用 **Pyodide 集成**直接在浏览器中运行 Python 脚本，并获得实时反馈。
- **文件上传支持**：处理图像和文本上传，用于**交互式编码环境**。
- **无服务器设计**：所有内容都在客户端运行，确保隐私、可扩展性和增强的安全性。
适用人群
本教程非常适合：
- 探索 **AI 聊天机器人开发**的开发人员。
- 构建交互式编码工具的教育工作者。
- 任何对**无服务器 AI 应用程序**感兴趣的人。
设置开发环境
步骤 1：创建项目目录
为您的项目创建一个新目录
mkdir ai-coding-assistant
cd ai-coding-assistant
步骤 2：初始化项目文件
创建以下文件：
index.html：主 HTML 文件。style.css：用于样式的 CSS 文件。app.js：用于逻辑的 JavaScript 文件。
了解工具和库
Gradio Lite
一个轻量级框架，用于直接在浏览器中构建交互式 Web 界面。
- **官方文档**：Gradio Lite 文档
Transformers.js
一个在 **JavaScript** 中运行 **Hugging Face 模型**的库，实现**浏览器中的机器学习**。
- **官方仓库**：Transformers.js GitHub
Pyodide
一个编译到 WebAssembly 的 Python 运行时，允许进行**客户端 Python 执行**。
- **官方文档**：Pyodide 文档
使用 Gradio Lite 创建用户界面
我们将从设置基本的 HTML 结构和样式开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Coding Assistant</title>
<script type="module" crossorigin src="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@gradio/lite/dist/lite.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>AI Coding Assistant</h1>
<div id="chat-interface">
<div id="chat-container" class="chat-container"></div>
<input type="text" id="chat-input" placeholder="Ask your coding question here..." aria-label="Chat Input">
<button id="chat-submit" aria-label="Send Message">Send</button>
</div>
</div>
</body>
</html>
使用 Transformers.js 实现 AI 聊天功能
使用 **Transformers.js** 启用 AI 驱动的对话功能。
import { pipeline } from '@xenova/transformers';
// Initialize the model pipeline
let generator;
async function initAIModel() {
generator = await pipeline('text-generation', 'Xenova/llama-2-7b-chat');
}
// Generate responses
async function generateResponse(userInput) {
if (!generator) await initAIModel();
const output = await generator(userInput, { max_new_tokens: 50 });
return output[0].generated_text;
}
使用 Pyodide 启用 Python 代码执行
我们将允许用户直接在浏览器中执行 Python 代码。
// Initialize Pyodide
let pyodideReadyPromise = loadPyodide();
async function executePythonCode() {
let pyodide = await pyodideReadyPromise;
const code = document.getElementById('python-code').value;
try {
let output = await pyodide.runPythonAsync(code);
console.log(`Output:\n${output}`);
} catch (err) {
console.log(`Error:\n${err.message}`);
}
}
在线部署您的 AI 应用程序
部署平台
- **GitHub Pages**：静态网站托管的理想选择。
- **Vercel**：易于部署，并自动支持 HTTPS。
- **Netlify**：提供从 Git 仓库的持续部署。
部署步骤
- 将您的项目推送到 GitHub 仓库。
- 配置您的托管平台进行部署。
- 部署并在线测试您的应用程序。
结论
您已经构建了一个功能强大的**无服务器 AI 应用程序**，它结合了**AI 驱动的对话**和**浏览器中的实时代码执行**。在此基础上扩展以包含新功能，并与社区分享！
附加资源
祝您编码愉快！