幸福不在于你获得了什么，而在于你比他人多获得了什么 是比较出来的
大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder
此篇文章所涉及到的技术有
- OpenAI
- LangChain
- Rust/WebAssembly
- Web Worker
- react+ts+vite
- 配置环境变量(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保存起来。
好了，天不早了，干点正事哇。
我们能所学到的知识点
- 配置OpenAI环境变量
- 改进 Rust 逻辑
- 方式1：OpenAI
- 方式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
