🧠产品结合 AI 其实很简单，如何给你的小项目加点 AI 功能

前言

学习卡盒小程序上线后收到一些反馈，有些用户说希望支持 AI 生成卡片的功能，这样不用手动添加卡片那么麻烦。其实我从最开始就有开始构想一些 AI 相关的功能，如何通过 AI 让使用体验更好。所以最近我做了一些尝试，效果还不错，所以给大家分享一下。

实现

第一个是添加卡片或者卡盒的时候，可以通过 AI 去整理文本生成卡片，或者根据用户的需求直接生成卡片，入口长这样：

目前支持四种卡片生成的的类型：

完整的页面是这样的，这篇文章讲讲我是如何设计实现这个功能的。

获取 AI API Key

要实现 AI 功能，最核心的点就是找一个 AI 提供商，对接他们的 API，现在很多产品都有 AI 功能了，各家 AI 厂商的 AI API 也都很便宜也很易用，因为我做的是小程序，所以不会考虑海外的 AI 厂商，国内可以选择的有腾讯的混元大模型，阿里的通义千文，moonshot 的 kimi，字节的豆包等等很多。我选择的是阿里的通义千问，价格便宜，有免费 100W 的 token 额度，而且我试了一下效果也可以满足。

我的 AI 需求是不依赖上下文的，只需要一次生成，因此对上下文长度的依赖不强，一次能够几千个字输入输出就够用了。

进入通义千问的官网，在对话页面，点击右上角的 API 服务。或者直接点击这个链接：bailian.console.aliyun.com/ 进入百炼控制台。

进去之后左边选择模型广场，根据自己需求选择模型。：

我选择的的通义大模型有三个挡位 turbo，plus，和 max，价格和性能依次递增，这里我放三个截图给大家对比：

Max

Plus

Turbo

可以看到，Turbo 和 Plus 的价格比 Max 低特别多，千个 token 的价格差距几十倍了，我自己在卡片生成的场景实测了很多次，基本 Plus 就能满足的我需求。这里举个例子，我有一个比生成卡片更高频使用 AI 的场景，就是生成卡片笔记，在卡片编辑页的右上角有一个 AI 生成笔记。

点击后就会开始基于当前卡片内容生成一些补充的笔记，这里我们用 Turbo 和 Plus 的模型，使用相同的 prompt 生成的结果对比一下：

Turbo	Plus

虽然 Turbo 生成的内容比较多，但是笔记内容我觉得干货太少了，而且好多正确的废话，相比之下，Plus 把这句英文中的固定搭配，同义转换都提示出来了，是我想要的效果。而且 prompt 我优化过好几次了，Turbo 模型有时候还是会把我卡片内容直接吐出来，价格相差不大的情况下，我还是选择了效果更好的。

这里大家会发现，我生成的内容是一个数组，那么我是如何指定 API 生成的内容是固定格式呢？下面就讲讲如何调用 AI 的 API。

在刚刚的百炼控制台右上角点击 API-Key:

然后点击生成 API-Key：

生成 API-Key 之后把 Key 提前复制好，就可以开始调用 API 了。用我们项目中随便一个可以发请求的库，构建一个这样结构的请求：

ts 复制代码

    const requestData = {
      model,
      stream: false,
      response_format: { type: 'json_object' },
      messages: [
        {
          role: 'system',
          content: systemPrompt,
        },
        {
          role: 'user',
          content: `请按照上述规则解析以下内容：\n${content}`,
        },
      ],
      max_tokens: 3000,
    }

    const options = {
      hostname: 'dashscope.aliyuncs.com',
      path: '/compatible-mode/v1/chat/completions',
      method: 'POST',
      headers: {
        Authorization: `Bearer ${DASHSCOPE_API_KEY}`,
        'Content-Type': 'application/json',
      },
    }

model：请求的模型，比如 qwen-plus,qwen-turbo
stream: 流式请求，也就是响应的内容会分块一点点返回给你，也就是我们用一些 AI 工具时看到的生成过程，这里我不需要，所以写的 false
response_format：这里就是返回格式固定的关键，我们可以指定响应的格式为 json 格式，这里指定了格式后，你还需要在 message 的 systemPrompt 中告诉 AI 你要的格式是什么样的，比如:
json 复制代码
```
// ...其他 prompt 内容
示例json格式:
[
  ["正面内容", "反面内容", "笔记"],
  ["正面内容", "反面内容", null]
]
```
要记得响应出来的数据是 json 字符串，要自己用 JSON.parse 解析一下，或者让后端给你处理好。
max_tokens：响应的最大 tokens 数量
headers 记得把你的 API Key 放在请求头的 Authorization 字段中，格式为 Bearer ${DASHSCOPE_API_KEY} ，这样才能成功鉴权。

这样发送请求，把你的内容放在 message 字段里，就可以成功调用 AI 接口了。

一些注意点！

调用 AI 相关的 API 尽量放在后端去做，毕竟请求的时候是要携带 API Key 的，如果 Key 泄露了很容易导致被盗刷，造成金钱损失。

如果要在前端做，那就把 API Key 放在环境变量里，在部署环境的时候动态的传入进去，总之无论如何都不要硬编码在代码中，切记！

在我的卡片生成场景中，其实不同的卡片类型都是调用同一个模型，只是 prompt 有所区别，放一小部分给大家参考，比如生成问答卡片：

lua 复制代码

以json形式返回：[["问题", "答案"]]

要求：
1. 提取关键知识点，生成启发性问题
2. 答案要准确、完整但简洁
3. 每张卡片专注一个知识点
...

这方面我不是高手，我也正在学习中，prompt 对响应结果的影响是很大的。如果写得好，可以把一个不怎么样的模型生成内容质量提升一个层次，节省模型开销，这个后续我有什么心得再与大家分享。

总结

现在提供 AI 的厂商 API 的调用都很简单了，核心还是 AI 如何与自己的产品进行结合去帮助用户得到更好的使用体验，学习卡盒小程序已经上线了一些 AI 功能，欢迎大家体验。如果文章对你有帮助，欢迎点赞关注~