ChatGPT 以及相关开源项目体验

本月初,ChatGPT 以惊人的速度问世,在技术圈中引起了广泛讨论。在 GitHub 上近期还诞生了多个 ChatGPT 相关的开源项目,数量之多令人瞠目结舌,甚至 ChatGPT 独霸了大半个 GitHub Trending,那么,它究竟有什么样的魅力,让诸多开发者如此激动不已呢?让我们一起来探究一下。

注册

目前,ChatGPT 在国内无法直接注册,访问需要通过代理,并且需要使用其他国家的手机号注册,具体注册方法,大家可以看下这篇文章[1]

功能体验

ChatGPT 可以实现诸如智能聊天、诗歌、写作、编程、改 Bug、撰写周报、知乎问答等工作。

比如我可以使用它来写

1、前端组件

使用 React hooks 写一个 echarts 组件

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

图片

上面代码实现基础的组件,并没有给出示例代码,我们可以继续追问

给一个折线图的 options 示例

图片

2、优化周报

优化上周周报,使其更加丰富

图片

在周报上,不但帮我优化了内容,还帮我安排了下周工作,大家觉得 ChatGPT 整理的如何呢?

笔者认为,它虽不是完美,但在给出关键词之内给出的回答,这些已经非常让人出乎意料了。

更多体验,大家可以自行探索下,下面我们来看看 GitHub 上关于 ChatGPT 的项目。

Node.js API 接口

前端工程师对 Nodejs 比较熟悉,官网就有 nodejs 的接口

openai

首先通过 npm 安装 openai

npm install openai

然后可以在任意接口中使用以下代码

const { Configuration, OpenAIApi } = require("openai");const configuration = new Configuration({apiKey: process.env.OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);const response = await openai.createCompletion({model: "text-davinci-003",prompt: "你好",max_tokens: 255,temperature: 0.5,});// 打印 API 返回的结果console.log(response.data.choices[0].text);

createCompletion 的意思是自动完成,它跟官网的回话方式一致;max_tokens 最大的令牌数量,可以理解为返回的字符数量,大多数内容 2048 内,当然 max_tokens 返回接口的速度越慢。temperature:0-1 之间,温度参数表示生成文本中的随机性或不可预测性程度。较高的温度值将产生更具创造性和多样性的输出,而较低的温度值会产生更可预测和重复的文本。OPENAI_API_KEY 可以通过View API keys 页面生成。

图片

chatgpt

另一个是个人开发的项目,它将 ChatGPT 的 API 进行了二次封装,让定制化开发变得更加方便。

通过 npm 安装 chatgpt。

npm install chatgpt
import { ChatGPTAPI } from 'chatgpt'async function example() {// sessionToken is required; see below for detailsconst api = new ChatGPTAPI({sessionToken: process.env.SESSION_TOKEN})// ensure the API is properly authenticatedawait api.ensureAuth()// send a message and wait for the responseconst response = await api.sendMessage('Write a python version of bubble sort.')// response is a markdown-formatted stringconsole.log(response)}

SESSION_TOKEN 值需要登录账号后,通过 chome 控制台复制出来。

图片

GitHub:https://github.com/transitive-bullshit/chatgpt-api

chatgpt 模拟的是 ChatGPT 网页版,需要使用 node 服务器(一般来说是海外的),使用了 stream ,当前尝试还无法部署到 vercelopenai 是官方提供的包,可以部署到 vercel 环境,但是返回受到了时间限制和字数限制,需要将 max_tokens 值设置小一些,这样会导致回复不完整。

微信聊天助手

WeChat GPT

这个项目基于 wechaty ,让你快速通过微信聊天窗口,发起与 ChatGPT 的对话。

在使用之前,需先配置 OpenAI 的Session Token信息,以及对应的「关键词」触发。

图片

功能特性

图片

接入公众号

GitHub:https://github.com/fuergaosi233/wechat-chatgpt

WeChat Bot

一个 基于 chatgpt + wechaty 的微信机器人,可以用来帮助你自动回复微信消息,或者管理微信群/好友,简单,好用,2 分钟 就能玩起来了,

git 克隆项目后执行 npm install,修改 env 相关配置,

然后根据你的需求,自己修改相关逻辑文件

图片

修改配置

便可以扫码登录

图片

扫码登录

这是实际使用效果:

ChatGPT ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

ChatGPT 211 查看详情 ChatGPT

图片

微信接入演示

GitHub:https://github.com/wangrongding/wechat-bot

浏览器插件

ChatGPT for Google

这款插件支持 Chrome / Edge / Firefox 等浏览器。

在安装之后,除了会在浏览器正常展示 Google 搜索内容,还会在右侧展示 ChatGPT 反馈结果,可以进一步提升搜索效率。

图片

搜索演示

GitHub:https://github.com/wong2/chat-gpt-google-extension

ChatGPT Chrome Extension

这是专为 Chrome 用户开发的一款 ChatGPT 插件。

安装之后,在任意页面文本框中点击右键,即可弹出「Ask ChatGPT」的选项。

ChatGPT 会根据当前文本框中的内容,进行搜索。这个的扩展还包括一个插件系统,可以更好地控制 ChatGPT 的行为,并能够与第三方 API 交互。

图片

插件演示

GitHub:https://github.com/gragland/chatgpt-chrome-extension

油猴脚本

来自台湾的 Will 保哥 ,可以将 ChatGPT 变为你的语音助手,实现了语音输入和自动朗读功能。通过浏览器自带的 Web Speech API,让我们告别打字模式。

他在 B 站有视频讲解[2],大家可以观看下,非常有意思。

GitHub:https://github.com/doggy8088/TampermonkeyUserscripts

ChatGPT 以及相关开源项目体验

逆向工程

任何让工程师充满好奇心的项目,都逃不过逆向,在这一点上,ChatGPT 也不例外。

GitHub 上一位来自马来西亚的开发者 Antonio Cheong,在 ChatGPT 发布没多久后,便对其进行了逆向,成功提取了 API。

有了这些 API,我们便可以自行开发一款好玩的聊天机器人、AI 智能助手、代码辅助工具等应用。

图片

GitHub:https://github.com/acheong08/ChatGPT

Mac 软件

为 Mac 用户量身定制了一款小工具:ChatGPT for desktop,支持 M1 和 Mac Intel,安装之后,可通过 Cmd+Shift+G 快捷键,快速在系统菜单栏启动 ChatGPT。

图片

GitHub:https://github.com/vincelwt/chatgpt-mac

最后

对于前端工程师来说,我们可以使用 api 将 ChatGPT 集成到自己的应用中,所以说了解 nodejs和 docker 相关知识,是很有必要的。

它的优点是语言组织能力非常强,并且可以结合上下文。但它给的答案也不一定正确,有时候甚至是错误的

正如官网所说,它还不能通过互联网搜索。

Limited knowledge of world and events after 2021

对于 2021 年以后得知识了解有限。我们可以使用它来强化自己的搜索能力,至于答案是否采纳,还的自己甄辨。

以上就是本文全部内容,如果对你有帮助,可以随手点个赞,这对我真的很重要,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

[1]OpenAI 推出超神 ChatGPT 注册攻略来了: https://juejin.cn/post/7173447848292253704

[2]ChatGPT 语音油猴脚本: https://www.bilibili.com/video/BV12P411K7gc/?vd_source=93efb77f3c9b0f1580f0a8d631b74ce2

以上就是ChatGPT 以及相关开源项目体验的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/564846.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月10日 02:48:02
下一篇 2025年11月10日 02:49:34

相关推荐

  • ai做html怎么运行_AI生成html运行步骤【教程】

    答案是使用AI生成HTML代码后,将其保存为.html文件并用浏览器打开即可运行。具体步骤为:1. 在AI工具中输入需求生成HTML代码;2. 将代码复制到文本编辑器并另存为index.html,编码选UTF-8,类型选“所有文件”;3. 双击该文件用浏览器打开,若无法正常显示需检查文件后缀、编码及…

    2025年12月23日
    000
  • 如何用HTML插入标签云组件_HTML CSS3变换与随机颜色生成算法

    使用HTML构建标签结构,CSS3添加旋转与过渡效果,JavaScript生成随机HSL颜色并设置字体大小,实现动态交互的标签云组件。 要在网页中实现一个动态的标签云组件,结合 HTML、CSS3 变换和随机颜色生成算法,可以按照以下步骤操作。这个组件不仅能提升页面视觉效果,还能通过色彩和旋转增加交…

    2025年12月23日
    000
  • 如何在Go Gin应用中集成前端JavaScript模块(如Sentry)

    本文探讨了在Go Gin框架下,通过HTML模板服务前端页面时,如何有效集成JavaScript模块(如Sentry)。针对浏览器不直接支持Node.js模块导入语法的问题,文章详细阐述了利用CDN引入Sentry SDK的解决方案,并提供了具体的代码示例,帮助开发者实现前端错误监控功能,避免了复杂…

    2025年12月23日
    000
  • html官网浏览入口_html网站设计免费平台

    html官网浏览入口在https://www.codepen.io,该平台支持实时预览代码、创建Pen项目、Fork开源示例,可添加外部资源,具备点赞评论收藏等社区互动功能,设有挑战活动与作品集分类,开放API接口,界面简洁适合初学者,在线编写无需配置环境,支持多种预处理器和响应式测试。 html官…

    2025年12月23日
    000
  • 项目如何使用localstorage包?

    如何在项目中引入Local Storage包? Local Storage是一种Web浏览器中的本地存储机制,允许网页在用户的浏览器中存储和检索数据。它提供了一种简单且易于使用的方法,在项目开发中存储和读取数据。在本文中,我们将介绍如何在项目中引入Local Storage包,并提供具体的代码示例。…

    2025年12月21日
    000
  • html如何修改日期样式

    在html中,可以使用“::-webkit-datetime-edit”伪元素选择器来修改日期格式,只需要用该选择器选中元素,在设置具体样式即可,具体语法为“::-webkit-datetime-edit{属性:属性值}”。 本教程操作环境:windows7系统、CSS3&&HTML…

    2025年12月21日
    100
  • 单选框的type属性值为什么

    单选框的type属性值为“radio”。html type属性可以规定要显示的输入框“”元素的类型;值为“radio”时显示为单选框、“checkbox”时显示为复选框、“select”时显示为下拉式选框等等。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在HTML中,…

    2025年12月21日
    000
  • HTML中type是什么意思

    在HTML中,type是类型的意思,是一个标签属性,主要用于定义标签元素的类型或文档(脚本)的MIME类型;例在input标签中type属性可以规定input元素的类型,在script标签中type属性可以规定脚本的MIME类型。 本教程操作环境:windows7系统、html5版、Dell G3电…

    2025年12月21日
    000
  • HTML中ul标签如何去掉点?HTML无序列表的样式实例解析

    本篇文章主要讲述的是关于html中的ul标签的默认小点给取消掉,还有关于html的无序列表ul标签的样式解释,给出了ul标签中的type属性三种值的介绍。现在就让我们一起来看本篇文章吧 首先这篇文章一开始我们就开始介绍在html中是怎么把ul标签的点给去掉的: 大家应该都使用过ul无序列表标签,ul…

    2025年12月21日 好文分享
    000
  • html中的ol标签如何去掉标号呢?标签的使用方法总结

    本篇文章介绍了html的ol标签是怎么去掉序号标号的,这里还有代码的详细解释,还有介绍了关于html ol有序列表标签如何更改序号,下文介绍了三种序号,大家也可以自己去想填写怎样的序号。现在来看这篇文章吧 一、我们先看看html中的ol标签是如何去掉标号的呢: 我们都知道html的ol标签是个有序列…

    2025年12月21日 好文分享
    000
  • HTML ul标签的什么意思?HTML ul标签的作用详解

    本篇文章主要的为大家讲解了关于html ul标签的三种重要的用法,还有关于html ul标签的解释,包含li标签的还有type属性对ul标签的使用情况,好了,下面大家一起来看文章吧 首先让我们先来解释一下HTML ul标签的意思: ul标签定义的是表格当中无序列表,表格当中的无序列表都是在 标签之中…

    2025年12月21日
    000
  • javascript框架和库是什么_如何选择React、Vue或Angular?

    JavaScript框架与库分别提供按需调用的功能集合和约束性开发结构;React是UI组件库,生态灵活但需自行整合工具;Vue渐进式易上手,兼顾原型与工程化;Angular是全功能TypeScript框架,适合强规范企业级项目。 JavaScript框架和库是封装好的代码集合,用来简化前端开发——…

    2025年12月21日
    000
  • React应用生产环境环境变量配置深度指南

    本文针对react应用在生产环境中无法读取`.env`文件配置的环境变量问题,深入剖析其工作原理、常见原因及排查方法。通过详细的步骤和示例代码,指导开发者正确配置和使用环境变量,解决api调用层面的`null`响应问题,确保应用在生产环境下的稳定运行。 在React应用开发中,环境变量(如API密钥…

    2025年12月21日
    000
  • p5.js中类方法声明的语法解析与常见错误修复指南

    本文旨在解决从java processing迁移至p5.js时常见的语法错误,特别是类内部方法声明不当引发的问题。我们将深入探讨javascript中全局函数与类方法声明的语法差异,提供清晰的示例代码,并指导如何识别和修复“unexpected token”及“declaration or stat…

    2025年12月21日
    000
  • p5.js中类方法声明的语法修正与迁移指南

    本文深入探讨了将Processing/Java代码转换为p5.js时,因JavaScript类方法声明语法差异而引发的常见错误。我们将重点解析`Unexpected token`和`Declaration or statement expected`等错误信息,明确全局函数与类成员方法在JavaSc…

    2025年12月21日
    000
  • JS注解怎么实现文档化_ JS注解生成开发文档的流程与工具

    JSDoc是一种JavaScript结构化注释规范,通过@param、@returns等标签描述代码元素,并借助工具生成HTML文档,结合IDE支持和CI/CD可提升团队协作效率。 JavaScript本身不支持原生注解(Annotation)像Java那样的语法,但通过约定的注释格式和配套工具,可…

    2025年12月21日
    000
  • TypeScript泛型函数中复杂对象结构类型推断的精确控制

    本文探讨了在typescript中处理复杂嵌套对象结构时,如何为泛型函数实现精确的类型推断。通过一个具体的汽车品牌和车型数据场景,我们分析了`object.values`等操作可能导致类型信息丢失的问题。核心解决方案是利用映射类型(mapped types)重构数据结构,以显式地建立泛型键与对应值之…

    2025年12月21日
    000
  • JS注解怎么标注联合类型_ JS联合类型的注解书写与使用技巧

    在JavaScript中可通过JSDoc使用联合类型注解,如string|number表示多类型支持,结合@param、@typedef等标签提升代码可读性与编辑器提示,适用于函数参数、返回值等场景。 在JavaScript中,虽然原生不支持类型注解,但在使用JSDoc配合现代编辑器(如VS Cod…

    2025年12月21日
    000
  • VS Code主题开发:告别JSON,拥抱脚本化生成

    vs code主题扩展最终需json格式定义,但开发者可通过javascript或typescript等脚本语言生成此json文件。这种方法有效解决了大型json文件难以维护、不支持注释等问题,并能实现颜色动态计算,显著提升主题开发的灵活性与效率。 为什么选择脚本化生成VS Code主题? 在开发V…

    2025年12月20日
    000
  • 解决 ChatGPT 扩展选择器失效问题:一个实战教程

    本文旨在帮助开发者解决 ChatGPT 网页更新导致扩展选择器失效的问题。通过分析问题原因,提供利用开发者工具查找新选择器的方法,并展示了使用 getElementsByClassName() 替代 querySelector() 的解决方案,以确保扩展功能在 ChatGPT 最新版本中正常运行。 …

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信