用ChatGPT做一个Chrome扩展 | 京东云技术团队

用ChatGPT做了个Chrome Extension

最近科技圈儿最火的话题莫过于ChatGPT了。

最近又发布了GPT-4,发布会上的Demo着实吸睛。

笔记本上手画个网页原型,直接生成网页。网友直呼:前端失业了!

但我觉着啊,真就外行看热闹,内行看笑话。虽然ChatGPT很强大,但没有经过针对某个领域自定义化过的模型真就没啥用。。。
就比如写代码这事儿,我觉着还不如GitHub的Copilot用着方便。

回归我们的主题,今天咱就蹭蹭热度,用ChatGPT的API做个Chrome Extension。

说实话,开始还真没想到能用ChatGPT做点儿啥,后来看过一些视频,发现用它来做翻译比较好,感觉没有以往的翻译软件生硬。甚至你可以让他模仿某位大师的风格去翻译。惊了!

我就想,是不是可以把他和Chrome Extension组合下,来个划词翻译。

开干

我们可以用官网提供的脚手架快速起一个ChatGPT应用:

git clone https://github.com/openai/openai-quickstart-node.git

运行前你需要去openai生成一个OPENAI_API_KEY!

它是一个Next应用,运行起来是一个给宠物起名字的页面,你可以输入动物名称,他会生成相应的名字。

我们看下源码实现,下面这段比较关键:

const completion = await openai.createCompletion({model: "text-davinci-003",prompt: generatePrompt(req.body.animal),temperature: 0.6,
});

text-davinci-003是使用的模型,他是专门用来处理语言相关的模型:

image

有兴趣可以看官网文档对Text Completion的解释。

temperature是一个0-2之间的系数,用来表示结果的贴合度,越大结果就越发散,越小就越针对你的问题。

prompt这里比较关键,就是提问的艺术了。你对问题的描述越详细,它的反馈就越贴近你想要的。
示例代码给我们打了个样儿:

function generatePrompt(animal) {const capitalizedAnimal = animal[0].toUpperCase() + animal.slice(1).toLowerCase();return `Suggest three names for an animal that is a superhero.Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: ${capitalizedAnimal}
Names:`;
}

我们要做的是划词翻译,这里我们改一下:

function generatePrompt(text) {return `Please translate the following text into chinese: Text: ${text}Result:`;
}

运行试下,还不错。

到这里其实我们相当于把划词翻译的API做完了。然后就是找地方部署下,部署Next应用当然用Vercel,自家的东西。

👻 部署好了:

image

接下来我们再做个Chrome扩展就行了

Chrome Extension

这里向大家推荐一个vite插件:@crxjs/vite-plugin
用它可以使用vite的特性来开发Chrome Extension,包括hmr啥的都有,也可以支持React。想想早年开发Chrome扩展那叫一个苦。

这里我们做的是划词翻译,所以需要在网页中注入脚本,就要用到content-script。
另外,我们也要用到background service worker来接收网页端发来的划中词,再跳用我们的上面搭好的API来获得翻译结果。

content-script.js
这部分比较简单,就是获取用户划词,然后调用Chrome的api发送给background.js

chrome.runtime.sendMessage({ text }, function (response: any) {});

background.js

background里面通过chrome.runtime.onMessage监听网页端发来的词语,然后调用我们的ChatGPT API来获取翻译结果即可。

chrome.runtime.onMessage.addListener(function (request,sender,sendResponse) {chrome.storage.sync.get(["text", "enable"], async function (result) {const response = await fetch(API, {method: "POST",headers: {"Content-Type": "application/json",withCredentials: true,},body: JSON.stringify({ animal: request.text }),});});});

看看效果:

image

这里要注意的是,我使用的是Vercel的Serverless部署的api,由于只是Hobby账号,所以请求有个10s限制,划的词太长的话,ChatGPT处理时间会超过10s,导致api报错。

image

好了,收工!

作者:京东零售 于弘达

来源:京东云开发者社区 转载请注明来源

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

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

相关文章

JVM之堆和方法区

目录 1.堆 1.1 堆的结构 1.1.1 新生代(Young Generation) 1.1.2 年老代(Old Generation) 1.1.3 永久代/元空间(Permanent Generation/Metaspace) 1.2 堆的内存溢出 1.3 堆内存诊断 1.3.1 jmap 1.3.2…

Three.js添加阴影和简单后期处理

在Three.js中,可以使用渲染器的一些特性来实现阴影和后期处理效果。 添加阴影 要在Three.js中添加阴影效果,需要做以下几个步骤: 1.开启阴影 首先,要在渲染器中开启阴影: renderer.shadowMap.enabled true;2.设置…

minio文件服务器开启https

一、准备证书 你要有https安全证书,我的是适用于nginx的证书 私钥 xxxx.key 公钥 xxxx.pem 二、上传证书到minio服务器 然后看看你的minio docker 有没有把 /root/.minio 挂载在主机上,如果有那么把两个证书文件放在/root/.minio/certs目录里面。…

STM32启动模式详解

文章目录 前置知识1. 单片机最小系统组成2. BOOT电路3. 三种启动模式4. 存储器映射 从主FLASH启动从系统存储区启动从SRAM启动 前置知识 1. 单片机最小系统组成 一个单片机最小系统由电源、晶振、下载电路、BOOT电路、和复位电路组成。少一个单片机都启动不了。 2. BOOT电路 …

Linux基础(三)

一.系统基本优化 关闭selinux:getenforce 查看selinux状态setenforce 0 临时关闭vim /etc/sysconfig/selinux 永久关闭SELINUXdisabled 关闭防火墙:systemctl stop firewalld 临时关闭防火墙systemctl disable firewalld 永久关闭防火墙sys…

几种反序列化漏洞

1.PHP魔术方法 <?php class c {private $name hacker;function __construct() { // 构造方法&#xff0c;new时调用echo construct<br>;}function __serialize() { // 序列化时调用echo serialize<br>;return [hack];}function __unserialize($data) { // 反…

LeetCode-1005-K次取反后最大化的数组和-贪心算法

题目描述&#xff1a; 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下标 i 。 以这种方式修改数组后&#xff0c;返回数组 可能的最大和 。 …

多源最短路径算法:Floyd-Warshall算法分析

文章目录 图的邻接矩阵 一.Floyd-Warshall算法思想(基于动态规划)二.Floyd-Warshall算法接口笔记附录:单源最短路径--Bellman-Ford算法1.Bellman-Ford算法接口核心部分2.Bellman-Ford算法接口 图的邻接矩阵 namespace Graph_Structure {//Vertex是代表顶点的数据类型,Weight是…

python二级选择题必备

输出带有引号的字符串&#xff0c;可以使用转义字符\ 可以使用datatype()测试字符串的类型(没有datatype) 程序员可以调整的是异常(Exception)&#xff0c;开发者调整的是错误(Error) 序列类型是二维元素向量(一维)、元素之间存在先后关系&#xff0c;通过序号访问 Python的…

three.js(九):内置的路径合成几何体

路径合成几何体 TubeGeometry 管道LatheGeometry 车削ExtrudeGeometry 挤压 TubeGeometry 管道 TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean) path — Curve - 一个由基类Curve继承而来的3D路径。 De…

【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

代码示例 : <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Banner 轮播</title><style>/* 取消浏览器或者其它标签的默认的内外边距 */* {margin: 0;padding: 0;}/* 取消列表样式 主要是…

【Java】基础入门(十七)--- 类

1. 类 Java有各种各样类&#xff0c;如&#xff1a;顶级类、嵌套类、内部类、成员类、局部类&#xff08;本地类&#xff09;、静态类、匿名类、文件类以及这些组合起来的称呼类&#xff0c;成员内部类&#xff0c;成员匿名类&#xff0c;成员嵌套类&#xff0c;匿名内部类等 1…

百万级并发IM即时消息系统(2)

1.用户model type UserBasic struct {gorm.ModelName stringPassWord stringPhone string valid:"matches(^1[3-9]{1}\\d{9}$)"Email string valid:"email"Avatar string //头像Identity stringClientIp s…

nepctf2023 部分web复现

目录 <1> EZJAVA_CHECKIN(shiro550) <2> 独步天下-转生成为镜花水月中的王者(环境变量提权) <3> 独步天下-破除虚妄_探见真实(Venom代理&ping%0a绕过rce&c文件描述符未关闭连接父进程修改文件权限) <4> 独步天下-破除试炼_加冕成王(tp6rceu…

【Go 基础篇】Go语言数组内存分析:深入了解内部机制

在Go语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储一系列相同类型的元素。虽然数组在应用中非常常见&#xff0c;但了解其在内存中的存储方式和分配机制仍然是一个重要的课题。本文将深入探讨Go语言数组的内存分析&#xff0c;揭示数组在内存中的布局和分配…

网络协议三要素

计算机语言作为程序员控制一台计算机工作的协议&#xff0c;具备了协议的三要素。 语法&#xff0c;就是这一段内容要符合一定的规则和格式。例如&#xff0c;括号要成对&#xff0c;结束要使用分号等。语义&#xff0c;就是这一段内容要代表某种意义。例如数字减去数字是有意…

PHP 面试 - 2023

文章目录 一、排序算法 原文链接1 排序算法2 二、设计模式 23种设计模式

【Hadoop】Hadoop入门概念简介

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的…

spring 自定义类型转换-ConverterRegistry

1背景介绍 一个应用工程里面&#xff0c;一遍会涉及到很多的模型转换&#xff0c;如DTO模型转DO模型&#xff0c;DO模型转DTO, 或者Request转DTO模型&#xff0c;总的来说&#xff0c;维护起来还是相对比较复杂。每涉及一个转换都需要重新写对应类的get或者set方法&#xff0c…

10、监测数据采集物联网应用开发步骤(8.1)

监测数据采集物联网应用开发步骤(7) TCP/IP Client开发 在com.zxy.common.Com_Para.py中添加如下内容 #socket链接的自动链接时间,定时清除无效tcp连接 dSockList {} #本机作为客户端连接socket list dClientThreadList {} #作为客户端接收数据拦截器 ClientREFLECT_IN_CL…