有哪些适合学习的免费公开 AI API？如何优化 WEB DEV 应用？

学习 Web 开发时，可以用 Gemini API、Groq API 或 Cloudflare Workers AI 的免费额度，做一个问答页或文本摘要工具。先选一家，把请求接通，集中练习表单提交、异步请求和错误处理。

优化应用时，先看浏览器实际下载了哪些资源、请求花了多长时间，再着手减少首屏 JavaScript、压缩图片、按需加载功能，并控制 AI 请求的输入和输出长度。减小文件体积能改善加载速度，模型生成耗时则需要单独优化。

有哪些可以免费学习的 AI API？

“公开 API”通常指有公开文档、允许开发者注册使用的接口，使用时仍需要账号和 API Key。免费层也会限制额度、可用模型或调用频率。

注册前，先确认服务是否支持所在地区，以及所选模型是否在免费范围内。开启付费计费后，还要检查预算和用量设置。

Gemini 免费层的定价说明包含将内容用于改进产品的条款，具体适用范围见服务条款。学习时请使用虚构数据，不要提交密码、个人资料或未公开的业务代码。Gemini 定价与数据使用说明

旧教程经常推荐 Hugging Face 的免费推理额度，但当前 Inference Providers 计费页显示，免费账户没有月度赠送额度，需要购买额度或升级订阅。模型可以免费下载，不代表托管推理也免费。Hugging Face 计费说明

如何把 AI API 接入 Web 应用？

让浏览器通过自己的后端调用 AI 服务：

浏览器 → 自己的后端接口 → AI 服务

API Key 保存在后端。用户可以查看前端 JavaScript、打包后的文件和浏览器网络请求，因此这些地方都不能保存服务端密钥。

第一个练习可以按这个顺序完成：

1. 在服务商控制台创建 API Key，选择账号可用的模型。
2. 编写自己的 /api/chat 接口，接收用户输入并调用模型。
3. 前端只请求 /api/chat，显示加载状态、结果和错误信息。
4. 测试空输入、超长输入、超时和限流时，页面能否正确处理。

示例：通过后端调用 Groq

这个示例需要一个使用 App Router 的 Next.js 项目，服务端运行环境需支持 fetch、Response.json() 和 AbortSignal.timeout()。其他后端框架也可以采用相同流程，无须为了调用 API 更换框架。Next.js Route Handlers 文档

在项目根目录的 .env.local 中配置：

GROQ_API_KEY=replace_with_your_api_key
GROQ_MODEL=replace_with_an_available_model_id

将占位值替换为实际配置，模型 ID 从控制台选择。不要给密钥变量加上 NEXT_PUBLIC_ 前缀，也不要将密钥文件提交到仓库。

创建 app/api/chat/route.js：

export const runtime = "nodejs";

function reply(data, status = 200) {
  return Response.json(data, {
    status,
    headers: { "Cache-Control": "no-store" },
  });
}

export async function POST(request) {
  const body = await request.json().catch(() => null);
  const prompt =
    typeof body?.prompt === "string" ? body.prompt.trim() : "";

  if (!prompt || prompt.length > 2000) {
    return reply({ error: "请输入 1 到 2000 个字符。" }, 400);
  }

  const apiKey = process.env.GROQ_API_KEY;
  const model = process.env.GROQ_MODEL;

  if (!apiKey || !model) {
    return reply({ error: "服务端尚未配置完成。" }, 500);
  }

  try {
    const upstream = await fetch(
      "https://api.groq.com/openai/v1/chat/completions",
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${apiKey}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model,
          messages: [{ role: "user", content: prompt }],
          max_completion_tokens: 512,
        }),
        signal: AbortSignal.timeout(15000),
      }
    );

    if (!upstream.ok) {
      return reply(
        { error: upstream.status === 429 ? "请求过于频繁，请稍后再试。" : "AI 服务请求失败。" },
        upstream.status === 429 ? 429 : 502
      );
    }

    const data = await upstream.json();
    return reply({ text: data.choices?.[0]?.message?.content ?? "" });
  } catch (error) {
    const timeout = error?.name === "TimeoutError";
    return reply(
      { error: timeout ? "请求超时，请稍后再试。" : "暂时无法连接 AI 服务。" },
      timeout ? 504 : 502
    );
  }
}

接口地址、请求字段和返回结构可对照 Groq API Reference。max_completion_tokens 限制生成的 token 数，token 数与字符数并不相同。这里的 512 和 15 秒仅用于演示，实际配置需要根据模型和任务调整。

启动项目后，在终端验证自己的接口：

curl -X POST http://localhost:3000/api/chat \
  -H 'Content-Type: application/json' \
  -d '{"prompt":"用两句话解释 HTTP 缓存。"}'

这个示例适合本地学习。公开部署前，还需要在后端增加身份验证、按用户限流和请求体大小限制，防止他人耗尽额度。前端禁用提交按钮只能避免误点，无法替代后端限制。

如何减小文件体积？

用浏览器开发者工具的 Network 面板检查生产构建，按传输体积排序，先处理最大的资源，再比较优化前后的变化。

如果构建工具支持，可以用动态 import() 拆分较大的功能模块，等用户使用时再下载。压缩减少的是字节数，代码拆分则能减少首次进入页面时需要下载和执行的代码。JavaScript 代码拆分说明

屏幕外的图片可以使用 loading="lazy"，同时设置尺寸，减少布局跳动：

<img
  src="/images/example.webp"
  alt="应用操作示例"
  width="800"
  height="450"
  loading="lazy"
/>

首屏关键大图应及时加载，不宜给所有图片统一添加懒加载。选择图片格式和尺寸时，也要比较实际画质与体积。图片性能优化说明

文件已经很小，为什么应用还是慢？

先根据出现卡顿或等待的位置排查：

• 页面刚打开就慢：检查首屏资源、服务器响应，以及阻塞渲染的 CSS 和 JavaScript。
• 页面能打开，但点击或滚动卡顿：用 Performance 面板检查长任务、频繁渲染和大量 DOM 更新。
• 点击“生成”后等待很久：检查后端耗时、上游模型响应和输出长度。
• 请求频繁失败：检查 HTTP 状态码、账号额度和限流情况。

优化 AI 调用时，可以从这些地方入手：

• 只发送必要的上下文，避免每次附带全部聊天记录。
• 根据任务限制输出长度，短摘要不需要预留长篇回答的输出额度。
• 请求期间显示加载状态，避免重复提交。
• 遇到 429 时遵守服务商的重试规则；有 Retry-After 时按其提示等待，避免立即循环重试。
• 需要逐字显示回答时，使用流式输出。它能让用户更早看到内容，但不保证缩短完整生成时间。
• 缓存可以复用的结果；涉及个人资料的回答需要按用户隔离，不能直接进入公共缓存。

验证时，尽量保持网络条件、设备和缓存状态一致，分别记录页面加载、交互和 AI 请求的耗时，以判断哪些修改有效。

备注：内容仅供参考。