首页 教程 ai

安装 Node.js 和 npm 以及 Git：

  1. 前往 Node.js 官网（https://nodejs.org/）下载 Node.js，建议选择 LTS 版本。
  2. 安装 Node.js，安装包中自带 npm，无需手动安装 npm。
  3. 打开终端或 Windows terminal，执行以下命令确认安装情况：
node -v  # 查询 Node.js 版本
npm -v   # 查询 npm 版本
  1. 安装 Git：前往 Git 官网（https://git-scm.com/download/win）下载并安装 Git。

安装 Wrangler：

  1. 创建一个文件夹，例如 D:\Program\nodejs\cf_ai，后续操作都在此文件夹路径中进行。
  2. 使用 npm 安装 Wrangler：
npm install wrangler --save-dev
  1. 检查是否正确安装 Wrangler：
npx wrangler --version  # 查询 Wrangler 版本
  1. 使用 Wrangler 登陆 CloudFlare 账号：
npx wrangler login
  1. 打开给出的 URL 地址，同意登陆。

创建 Workers AI 项目：

  1. 创建工作目录在 D:\Program\nodejs\cf_ai 中进行下面的操作。
  2. 使用以下命令创建一个 Cloudflare 项目，选择 Hello World 项目，项目名称为 hello-ai，选择 TypeScript 和 Git，Deploying 选择 no。
npm create cloudflare@latest
  1. 进入 D:\Program\nodejs\cf_ai\hello-ai 文件夹，你将找到 wrangler.toml 文件和在 src 文件夹中的 index.ts 文件。wrangler.toml 是连接 Workers AI 的配置文件，index.ts 是主程序。

连接到 Workers AI 和安装必要的库：

  1. 在 D:\Program\nodejs\cf_ai\hello-ai 中进行下面的所有操作，注意路径是 hello-ai 文件夹。
  2. 打开 wrangler.toml 文件，添加以下内容：
[ai]
binding = "AI"
  1. 执行以下命令安装必要的库：
npm install --save @cloudflare/ai

开发 Workers AI：

本地开发与测试：

  1. 在 D:\Program\nodejs\cf_ai\hello-ai 中进行下面的操作，注意路径是 hello-ai 文件夹。
  2. 打开 index.ts 文件，输入以下内容：
import { Ai } from '@cloudflare/ai'
export interface Env {
  AI: any;
}
export default {
  async fetch(request: Request, env: Env) {
    const ai = new Ai(env.AI);
    const response = await ai.run('@cf/meta/llama-2-7b-chat-int8', {
        prompt: "What is the origin of the phrase Hello, World"
      }
    );
    return new Response(JSON.stringify(response));
  },
};
  1. 在终端中执行以下命令，测试程序与环境是否正常工作：
npx wrangler dev --remote

  1. 终端中会显示一系列以 8787 端口结尾的 URL，打开 127.0.0.1:8787 在浏览器中，应该看到类似的内容。
"response": "Hello, World first appeared in 1974 at Bell Labs when Brian Kernighan included it in the C programming language example. It became widely used as a basic test program due to simplicity and clarity. It represents an inviting greeting from a program to the world."

说明本地测试完成，程序正常工作，AI 给出正确的回答。
开发与远程部署：
  1. 在 D:\Program\nodejs\cf_ai\hello-ai 中进行下面的操作，注意路径是 hello-ai 文件夹。
  2. 打开 index.ts 文件，删除旧内容，输入以下内容：
import { Ai } from '@cloudflare/ai';
import { marked } from 'marked';
export interface Env {
  AI: any;
}
export default {
  async fetch(request: Request, env: Env) {
    const ai = new Ai(env.AI);
    let isRequestSent = false;
    if (request.method === 'POST') {
      const formData = await request.formData();
      const userQuestion = formData.get('question') || '';
      const messages = [
        { role: 'system', content: 'You are a friendly assistant' },
        { role: 'user', content: userQuestion }
      ];
      const response = await ai.run('@cf/meta/llama-2-7b-chat-int8', { messages });
      const htmlResponse = marked.parse(response.response);
      isRequestSent = true;
      return new Response(htmlResponse, { headers: { 'Content-Type': 'text/html' } });
    }
    return new Response(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          h1 {
            text-align: center;
          }
          form {
            width: 80%;
            margin: 0 auto;
          }
          label {
            display: block;
            text-align: center;
          }
          input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
          }
          input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
            background-color: ${isRequestSent ? 'lightcyan' : 'initial'};
          }
          #response {
            width: 80%;
            margin: 0 auto;
          }
        </style>
      </head>
      <body>
        <h1>Llama-2-7b LLM Answerer</h1>
        <form action="" method="POST" id="question-form">
          <label for "question">Input a Question:</label>
          <input type="text" id="question" name="question">
          <input type="submit" value="Submit" id="submit-button">
        </form>
        <div id="response"></div>
        <script>
          document.querySelector('#question-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const submitButton = document.getElementById('submit-button');
            
            submitButton.style.backgroundColor = 'lightcyan';
            submitButton.disabled = true;
            const response = await fetch('', { method: 'POST', body: formData });
            const data = await response.text();
            document.getElementById('response').innerHTML = data;
            submitButton.style.backgroundColor = 'initial';
            submitButton.disabled = false;
          });
        </script>
      </body>
      </html>
    `, { headers: { 'Content-Type': 'text/html' } });
  },
};
  1. 执行以下命令登录 Cloudflare 账号：
npx wrangler login

  1. 执行以下命令远程部署程序到 Cloudflare Pages：
npx wrangler deploy

  1. 终端中会显示你的 AI 程序的网址：
hello-ai.<sub_domain>.workers.dev

其中 <sub-domain> 是可自定义的用户域名。