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

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

大家好,我是柒八九。一个专注于前端开发技术/RustAI应用知识分享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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

渗透课程第二阶段--Part1--信息收集

目录 一. 为什么要做信息收集? 渗透测试的流程 信息收集包括的内容 学习框架: 二. 分类 1. 域名相关信息 域名(Domain Name)是什么 域名的分类 域名联系人信息 子域名信息 域名DNS信息 2. IP相关信息 ping/nslookup …

香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(一)

整期笔记索引 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(一) 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试(二) 香橙派OrangePi AIpro上手笔记——之USB摄像头目标检测方案测试&#xff0…

使用element的提示框并修改css

使用el-tooltip来做提示框&#xff1a; <el-tooltip popper-class"popper" content"敬请期待" placement"right"><div><i class"iconfont icon-lianjie-01"></i><span>输入链接</span></div&…

和鲸“101数智领航计划”——在武大解码 GeoAI,地理空间智能(GeoAI)学术研讨会及编程工作坊圆满落幕

AI 正革新地理空间数据分析的范式&#xff0c;既为科学研究及行业落地应用带来了机遇&#xff0c;同样也带来了挑战。 5 月 25 日&#xff0c;和鲸科技联合武汉大学遥感信息工程学院、中国地质大学&#xff08;武汉&#xff09;地理与信息工程学院&#xff0c;于武汉大学成功举…

element.addEventListener() 方法 详细解析与代码示例

element.addEventListener() 方法用于向指定的元素添加事件监听器。 语法: element.addEventListener(event, function, useCapture);参数说明: event&#xff1a;表示要监听的事件类型&#xff0c;比如 "click"、"mouseover"、"keydown" 等等…

使用mongorestore时no reachable servers错误的解决

使用mongorestore命令恢复导出的.bson文件至mongodb时&#xff0c;比如 mongorestore -d mydb -c mycollection mycollection.bson可能会遇到遇到类似下面的错误 Failed: error connecting to db server: no reachable servers而此时mongosh&#xff0c;或者mongo命令本身是可…

关于TeamSpeak3-网易音乐机器人的基础使用方法(胎教级教程)

本文转自博主的个人博客&#xff1a;https://blog.zhumengmeng.work,欢迎大家前往查看。 原文链接&#xff1a;点我访问 序言&#xff1a;在自己的ts服务器上安装了网易音乐机器人&#xff0c;写这篇文章旨在教群友/网友如何使用机器人!&#x1f60b;&#x1f44d; 一、TS3Audi…

Flutter 中的 SliverOverlapInjector 小部件:全面指南

Flutter 中的 SliverOverlapInjector 小部件&#xff1a;全面指南 Flutter 是一个功能丰富的 UI 框架&#xff0c;由 Google 开发&#xff0c;允许开发者使用 Dart 语言构建跨平台的移动、Web 和桌面应用。在 Flutter 的滚动视图系统中&#xff0c;SliverOverlapInjector 是一…

Nginx平滑升级

目录 编译安装nginx1.18 平滑升级至1.22版本 本文记录了编译安装的nginx1.18平滑升级到nginx1.22版本的流程&#xff0c;都采用的编译安装&#xff0c;有不清楚流程的可以评论区我&#xff0c;咱们一起讨论。 编译安装nginx1.18 # 安装编译依赖 yum -y install gcc pcre pc…

揭秘Python:下划线的特殊用法,你绝对想不到!

在Python编程中&#xff0c;下划线&#xff08;underscore&#xff09;是一个常见而又强大的工具。它不仅仅是一个普通的字符&#xff0c;而是具有特殊含义和用法的符号。今天&#xff0c;我们就来揭开Python下划线的神秘面纱&#xff0c;探索它的各种妙用。 下划线的基本用法…

01--nginx基础

前言&#xff1a; 本文用来整理一下nginx的用法&#xff0c;应该是本人中间件专栏的第一篇文章&#xff0c;这里开始概念和实操将会同样重要&#xff0c;面试时基本概念的理解非常重要&#xff0c;深有体会&#xff0c;不会再让概念成为压死骆驼的稻草。 1、nginx简介 Nginx…

3、css3 手写nav导航条(互相学习)

效果例图&#xff1a; 1、首先呈现的是html代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

Keras深度学习框架基础第三讲:层接口(layers API)“层权重正则化器”

1、绪论 在Keras中&#xff0c;层权重正则化器是用于防止模型过拟合的一种技术&#xff0c;它通过向模型的损失函数中添加一个与权重相关的惩罚项来实现。 1.1 Keras正则化器概述 正则化器的概念&#xff1a; 正则化器允许在优化过程中对层的参数或层的激活情况进行惩罚。网络…

ARM32开发——库与包

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 嵌入式软件通用架构库SPL库HAL库MSP 嵌入式软件通用架构 库 标准外设库&#xff08;Standard Peripheral Library&#xff09;和H…

【c#跨线程操作界面方法】

我们知道,在winform中进行跨线程操作,如果处理不好则会出现界面卡顿、“线程间操作无效: 从不是创建控件的线程访问它“等问题,在此提供跨线程操作界面方法,可以很好解决相关问题。 一、 通过设置UI控件的Invoke和BeginInvoke方法实现更新,在子线程中调用如下函数更改主界…

Kafka重平衡导致无限循环消费问题

1. 问题描述 Kafka消费者消费消息超过了5分钟&#xff0c;不停的触发重平衡&#xff0c;消费者的offset因为重平衡提交失败&#xff0c;重复拉取消费&#xff0c;重复消费。 2. 问题原因 kafka默认的消息消费超时时间max.poll.interval.ms 300000, 也就是5分钟&#xff0c;…

Python魔法之旅-魔法方法(03)

目录 一、概述 1、定义 2、作用 二、主要应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类…

【Linux】初识信号及信号的产生

初始信号 初始信号什么是信号站在应用角度的信号查看Linux系统定义的信号列表 信号的常见处理方式信号的产生通过终端按键产生信号什么是core dump?如何开启core dump?core dump有什么用&#xff1f;为什么默认关闭core dump&#xff1f;设置了core文件大小但是没有产生core文…

【SQL学习进阶】从入门到高级应用(八)

文章目录 ✨连接查询✨什么是连接查询✨连接查询的分类✨笛卡尔积现象✨内连接✨什么叫内连接✨内连接之等值连接✨内连接之非等值连接✨内连接之自连接 ✨外连接✨什么叫外连接✨外连接之左外连接&#xff08;左连接&#xff09;✨外连接之右外连接&#xff08;右连接&#xf…

ubuntu 18.04 ros1学习

总结了一下&#xff0c;学习内容主要有&#xff1a; 1.ubuntu的基础命令 pwd: 获得当前路径 cd: 进入或者退出一个目录 ls:列举该文件夹下的所有文件名称 mv 移动一个文件到另一个目录中 cp 拷贝一个文件到另一个目录中 rm -r 删除文件 gedit sudo 给予管理员权限 sudo apt-…