当前位置： 首页 > news >正文

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

news 2026/2/8 15:30:39

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

大家好，我是柒八九。一个专注于前端开发技术/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

相关文章：

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

幸福不在于你获得了什么，而在于你比他人多获得了什么 是比较出来的 大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 此篇文章所涉及到的技术有 OpenAILangChainRust/WebAssemblyWeb Workerreact+ts+vite配置环境变量(env)因为，行文字数所限，有些概…...

编程日记 2024/6/1 5:51:54

orin部署tensorrt、cuda、cudnn、pytorch、onnx

绝大部分参考https://blog.csdn.net/qq_41336087/article/details/129661850 非orin可以参考https://blog.csdn.net/JineD/article/details/131201121 报错显卡驱动安装535没法安装、原始是和l4t-cuda的部分文件冲突 Options marked [*] produce a lot of output - pipe it t…...

编程日记 2024/6/1 5:48:51

使用javacv对摄像头视频转码并实现播放

要实现Java接受RTSP流解码，并推送给前端实现播放实时流，可以使用一些流媒体处理库，比如JavaCV或者FFmpeg等。以下是一个简单的示例代码： 1.控制层方面的 根据视频rtsp流链接打开转换，通过响应写出流到前台使用flvjs播…...

编程日记 2024/6/1 5:47:50

Linux网络-Socket套接字_Windows与Linux端双平台基于Udp传输协议进行多线程跨平台的服务器与客户端网络通信的简易聊天室实现

文章目录 一、Socket套接字二、Udp 常见API1. int socket(int domain, int type, int protocol);2. int bind(int socket, const struct sockaddr *address, socklen_t address_len);struct sockaddr 3. ssize_t recvfrom(int socket, void *restrict buffer, size_t length, i…...

编程日记 2024/6/1 5:46:48

20分钟快速入门SQL

SQL（Structured Query Language，结构化查询语言）是一种专门用来管理和操作关系型数据库的编程语言。以下是SQL入门的一些基础概念和教程： 1. SQL基础 数据库（Database）：存储数据的集合。表&am…...

编程日记 2024/6/1 5:44:46

汇总区间，合并区间

题目一&#xff1a; 代码如下&#xff1a; vector<string> summaryRanges(vector<int>& nums) {vector<string> ret;if (nums.size() 0)return ret;int n nums.size();int i 0;while (i < n){int prev i;i;while (i < n && nums[i] n…...

编程日记 2024/6/1 5:42:44

Web程序设计-实验05 DOM与BOM编程

题目 【实验主题】 影视网站后台影视记录管理页设计 【实验任务】 1、浏览并分析多个网站后台的列表页面、编辑页面&#xff08;详见参考资源&#xff0c;建议自行搜索更多后台页面&#xff09;的主要元素构成和版面设计&#xff0c;借鉴并构思预期效果。 2、新建 index.h…...

编程日记 2024/6/1 5:41:43

Window系统安装Docker

因为docker只适合在liunx系统上运行&#xff0c;如果在window上安装的话&#xff0c;就需要开启window的虚拟化&#xff0c;打开控制面板&#xff0c;点击程序&#xff0c;在程序和功能中可以看到启动和关闭window功能&#xff0c;点开后&#xff0c;找到Hyper-V&#xff0c;Wi…...

编程日记 2024/6/1 5:39:41

RabbitMQ不完整的笔记

同步的不足 1、拓展性差&#xff0c;当要添加功能时&#xff0c;需要在原来的功能代码上做修改&#xff0c;高耦合。 2、性能下降&#xff0c;调用者需要等待服务提供者执行完返回结果后&#xff0c;才能继续向下执行 3、级联失败&#xff0c;由于我们是基于OpenFeign调用交易…...

编程日记 2024/6/1 5:37:38

微软Edge浏览器深度解析：功能、同步、隐私与安全

微软Edge浏览器是微软公司开发的一款网页浏览器，它基于Chromium内核，提供了快速、安全和兼容性良好的网页浏览体验。以下是关于微软Edge浏览器的详细信息和使用指南： 微软Edge浏览器的主要特点： 1. 基于Chromium内核： 渲染引擎：Chromium内核是基于开源项目Blink的，它…...

编程日记 2024/6/1 5:34:35

网络性能测试工具：iperf3介绍

文章目录 前言一、iperf3 的安装和使用下载和安装参数说明 二、iperf3 测试服务端启动客户端启动服务端输出反向测试客户端服务端 前言 新接触的网络环境如何评估网络带宽和吞吐量呢&#xff0c;有的项目没有对业务流量进行合理规划&#xff0c;服务或者中间件出口带宽经常有被…...

编程日记 2024/6/1 5:33:34

scp：Linux系统本地与远程文件传输命令

scp 是Linux系统中用于在本地主机和远程主机之间进行文件传输的命令。 详细说明&#xff1a; scp 命令用于安全地将文件从一个主机传输到另一个主机&#xff0c;所有传输数据都是加密的。语法&#xff1a; scp [参数] [源文件路径] [目标主机:目标路径] 参数说明&#xff1a…...

编程日记 2024/6/1 5:32:33

python基础（习题、资料）

免费提取资料&#xff1a; 练习、资料免费提取。持续更新迅雷云盘https://pan.xunlei.com/s/VNz6kH1EXQtK8j-wwwz_c0k8A1?pwdrj2x# 本文为Python的进阶知识合辑&#xff0c;包括列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;、字典&#xff08;Dic…...

编程日记 2024/6/1 5:29:31

shell脚本免交互

shell脚本的编写一方面为了减少我们命令的输入&#xff0c;另一方面也可以进行简单的自动化运行&#xff0c;其中为了实现自动化过程&#xff0c;一个很重要的点就是免交互&#xff0c;本篇文章跟大家简单分享两个常用的免交互的方法。 Here Document Here document 通过内联重…...

编程日记 2024/6/1 5:28:29

WPF学习笔记：给文字添加线性渐变效果

<TextBox Text"XXX信息管理系统" VerticalAlignment"Center" Background"Transparent" HorizontalAlignment"Center" FontSize"35" FontWeight"Normal"> <TextBox.Effect> <…...

编程日记 2024/6/1 5:27:28

Fully Convolutional Networks for Semantic Segmentation--论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/abs/1411.4038 3.数据集地址 论文摘要的翻译 卷积网络是强大的视觉模型&#xff0c;可以产生特征层次结构。我们表明&#xff0c;卷积网络本身&#xff0c;经过端到端&#xff0c;像素对像素的训练&#xff0c;在…...

编程日记 2024/6/1 5:26:27

Camworks编程怎么样：深度解析其四大特点、五大应用领域、六大优势与七大挑战

Camworks编程怎么样&#xff1a;深度解析其四大特点、五大应用领域、六大优势与七大挑战 Camworks编程&#xff0c;作为计算机辅助制造&#xff08;CAM&#xff09;领域的一款重要软件&#xff0c;近年来在制造业中得到了广泛的应用。那么&#xff0c;Camworks编程究竟怎么样呢…...

编程日记 2024/6/1 5:24:24

【Linux】操作系统之冯诺依曼体系

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 操作系统中 冯诺依曼体系 的相关内容。 如果看到最后您觉得这篇文…...

编程日记 2024/6/1 5:23:22

c++ QT 实现QMediaPlayer播放音频显示音频级别指示器

文章目录 效果图概述代码总结 效果图 概述 QMediaPlayer就不介绍了&#xff0c;就提供了一个用于播放音频和视频的媒体播放器 QAudioProbe 它提供了一个探针&#xff0c;用于监控音频流。当音频流被捕获或播放时&#xff0c;QAudioProbe 可以接收到音频数据。这个类在需要访问…...

编程日记 2024/6/1 5:21:20

失之毫厘差之千里之load和loads

起源 最近在读pandas库的一些文档的时候&#xff0c;顺便也会将文档上的一些demo在编辑器中进行运行测试&#xff0c;其中在读到pandas处理Json数据这一节的时候&#xff0c;我还是像往常一样&#xff0c;将文档提供的demo写一遍&#xff0c;结果在运行的时候&#xff0c;直接…...

编程日记 2024/6/1 5:20:19

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2026/1/26 6:01:03

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2026/2/4 18:09:46