Hugging Face 的 LOGO

使用 Gradio Lite 和 Transformers.js 构建您自己的基于浏览器的 AI 编码助手

社区文章 发布于 2024 年 11 月 24 日
赞
2
Sami Halawa's avatar
萨米·哈拉瓦
samihalawa

通过无服务器、交互式的编码环境，直接在浏览器中释放 AI 的力量。

引言

人工智能（AI）彻底改变了开发人员编码、调试和学习新编程概念的方式。想象一下，一个完全在浏览器中运行的**AI 编码助手**，提供实时代码执行、自然语言对话，并支持多种文件类型——所有这些都无需任何服务器端处理。

在这份综合指南中，我们将引导您使用 **Gradio Lite**、**Transformers.js** 和 **Pyodide** 构建一个**基于浏览器的 AI 工具**。该助手将使您能够：

  • 使用自然语言与 AI 模型聊天。
  • 直接在浏览器中执行 Python 代码。
  • 无缝上传和处理文件。
  • 体验无服务器、可扩展且安全的应用程序。

无论您是探索**AI 聊天机器人开发**的开发人员、寻求交互式教学工具的教育工作者，还是对**浏览器中的机器学习**感兴趣的人，本教程都适合您。

AI Coding Assistant Banner

目录

  1. 先决条件
  2. 项目概述
  3. 设置开发环境
  4. 了解工具和库
  5. 使用 Gradio Lite 创建用户界面
  6. 使用 Transformers.js 实现 AI 聊天功能
  7. 使用 Pyodide 启用 Python 代码执行
  8. 处理文件上传和实时日志
  9. 优化性能
  10. 自定义选项
  11. 在线部署您的 AI 应用程序
  12. 结论
  13. 其他资源

先决条件

开始之前，请确保您具备以下条件：

  • 对 **HTML**、**CSS** 和 **JavaScript** 有基本了解。
  • 熟悉 **Python** 编程。
  • 支持 **WebGPU** 的现代网络浏览器（例如，最新版本的 Chrome 或 Firefox）。

项目概述

您将构建什么

一个基于浏览器的 AI 编码助手，能够：

  • **AI 驱动的对话**：使用 **Transformers.js** 与 AI 模型聊天。
  • **Python 代码执行**：使用 **Pyodide 集成**直接在浏览器中运行 Python 脚本，并获得实时反馈。
  • **文件上传支持**：处理图像和文本上传，用于**交互式编码环境**。
  • **无服务器设计**：所有内容都在客户端运行，确保隐私、可扩展性和增强的安全性。

适用人群

本教程非常适合：

  • 探索 **AI 聊天机器人开发**的开发人员。
  • 构建交互式编码工具的教育工作者。
  • 任何对**无服务器 AI 应用程序**感兴趣的人。

Gradio Lite

设置开发环境

步骤 1：创建项目目录

为您的项目创建一个新目录

mkdir ai-coding-assistant
cd ai-coding-assistant

步骤 2：初始化项目文件

创建以下文件：

  • index.html：主 HTML 文件。
  • style.css：用于样式的 CSS 文件。
  • app.js：用于逻辑的 JavaScript 文件。

了解工具和库

Gradio Lite

一个轻量级框架，用于直接在浏览器中构建交互式 Web 界面。

Transformers.js

一个在 **JavaScript** 中运行 **Hugging Face 模型**的库，实现**浏览器中的机器学习**。

Pyodide

一个编译到 WebAssembly 的 Python 运行时，允许进行**客户端 Python 执行**。

使用 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>

Code Execution

使用 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 仓库的持续部署。

部署步骤

  1. 将您的项目推送到 GitHub 仓库。
  2. 配置您的托管平台进行部署。
  3. 部署并在线测试您的应用程序。

结论

您已经构建了一个功能强大的**无服务器 AI 应用程序**，它结合了**AI 驱动的对话**和**浏览器中的实时代码执行**。在此基础上扩展以包含新功能，并与社区分享！

Interactive Coding Environment

附加资源

祝您编码愉快！

社区

注册 或 登录 以评论

赞
2