AI 赋能前端 -- 文本内容概要生成

幸福不在于你获得了什么，而在于你比他人多获得了什么 是比较出来的

大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder

此篇文章所涉及到的技术有

1. OpenAI
2. LangChain
3. Rust/WebAssembly
4. Web Worker
5. react+ts+vite
6. 配置环境变量(env)

因为，行文字数所限，有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。

---

前言

在前几天我们不是写了一篇Rust 赋能前端 – 写一个 File 转 Img 的功能的文章吗？主要讲了如何用Rust解析文件并将其内容用图片形式展示。

其中呢，我们在解析文本的时候，只是做了文本的解析，而没有做针对文件内容的summary处理。

下图是我们之前的需求描述：

正如需求描述要求的，我们可以借助AI对文本进行Summary处理。而今天我们就来这个点。

前置条件

由于是演示项目，我们使用的是OpenAI的模型，而不是我们公司的模型。所以，我们需要有一个API_KEY用于接入OpenAI API。

最开始，OpenAI对于所有新注册的账户都会赠送18美元的免费额度，23年年初开始免费额度由18美元缩减为5美元。

2024年3月21日开始，5美元的API免费额度也取消了，所有新注册的OpenAI/ChatGPT账号都不再赠送5美元API key余额，全部是No credit grants found（未找到信用赠款），调用API key时也会提示insufficient_quota，You exceeded your current quota, please check your plan and billing details.

天无绝人之路，我们还可以使用一些魔法手段来调用OpenAI API。我们可以使用GPT-API-free

大家用自己的github账号申请即可。切记，将生成的key保存起来。

---

好了，天不早了，干点正事哇。

我们能所学到的知识点

1. 配置OpenAI环境变量
2. 改进 Rust 逻辑
3. 方式1：OpenAI
4. 方式2：OpenAI + langchain

---

1. 配置OpenAI环境变量

我们利用GPT-API-free生成属于自己的key之后，我们就可以通过它来访问OpenAI API了。

因为,OpenAI key算是一种敏感信息，我们选择将其放置到项目的环境变量中。(如果对环境变量不是很了解可以看我们之前的文章环境变量：熟悉的陌生人)

由于我们是用f_cli构建的Vite前端项目。在初始化时，已经新建了用于存放环境变量的文件。

所以，我们只需要将openai key放置到对应文件即可。

VITE_API_BASE_URL = https://api.dev.example.com
VITE_API_URL_PREFIX = '/ajax'
VITE_OPENAI_API_KEY=sk-xxx // 这里放置你自己的key

这里还有一点需要说明，在Vite中配置环境变量并且能够在项目中使用(import.mete.env.xxx),我们需要以VITE_开头定义一个变量名。

---

2. 改进 Rust 逻辑

上一篇文章，在讲Rust的代码时，不知道大家对下面的逻辑有印象没？

其实呢，这里的本意就是，将输入的文本基于空格进行切割，生成单词数组。但是呢，在实践过程中，我们发现上述的处理方式针对英文环境还是可以的，毕竟英文单词它再长也不能超过canvas的宽度。

嘿，您猜怎么着，在汉字环境下，由于我们设定的方式是见着空格就切割。但是呢，一段优雅的中文文案，它可以连绵不断，没有空格。这您受得了吗。

就像这样。

所以，我们需要换种文本切割规则。 --见到字符就切割。

我们可以通过遍历text