。

一个专注于前端开发技术/Rust及AI应用知识分享的Coder

OpenAILangChainRust/WebAssemblyWeb

Workerreact+ts+vite配置环境变量(env)因为，行文字数所限，有些概…

大家好，我是柒八九。

一个专注于前端开发技术/Rust及AI应用知识分享的Coder

OpenAILangChainRust/WebAssemblyWeb

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

请大家酌情观看。

赋能前端

的功能的文章吗？

主要讲了如何用Rust解析文件并将其内容用图片形式展示。

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

正如需求描述要求的，我们可以借助AI对文本进行Summary处理。

而今天我们就来这个点。

前置条件

由于是演示项目，我们使用的是OpenAI的模型，而不是我们公司的模型。

所以，我们需要有一个API_KEY用于接入OpenAI

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

2024年3月21日开始，5美元的API免费额度也取消了，所有新注册的OpenAI/ChatGPT账号都不再赠送5美元API

credit

大家用自己的github账号申请即可。

切记，将生成的key保存起来。

配置OpenAI环境变量改进

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

因为,OpenAI

key算是一种敏感信息，我们选择将其放置到项目的环境变量中。

(如果对环境变量不是很了解可以看我们之前的文章环境变量：熟悉的陌生人)

由于我们是用f_cli构建的Vite前端项目。

在初始化时，已经新建了用于存放环境变量的文件。

VITE_API_BASE_URL

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

Rust

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

其实呢，这里的本意就是，将输入的文本基于空格进行切割，生成单词数组。

但是呢，在实践过程中，我们发现上述的处理方式针对英文环境还是可以的，毕竟英文单词它再长也不能超过canvas的宽度。

嘿，您猜怎么着，在汉字环境下，由于我们设定的方式是见着空格就切割。

但是呢，一段优雅的中文文案，它可以连绵不断，没有空格。

这您受得了吗。