开源全站第一个nextron项目--NextTalk:一款集成chatgpt的实时聊天工具

NextTalk

简介

该项目是一个基于Nextron(NextJS+Electron)的桌面端实时聊天工具。

但由于使用了NextJS中的ssr及api route功能,该程序只能在开发环境运行。

关于生产版本:我将其网页端部分分离,并用Pake将其打包成桌面端,生产体验安装包我放在了release里,目前只打包了windows版本。

github:Mebius1916/NextTalk: A real-time chat tool based on nextron (NextJS+electron) with integrated AI functions

觉得不错的话给个star吧~


技术栈

前端: NextJS (React) + TailwindCSS + TypeScript + ThreeJS + NextUI + MaterialUI (icons) + NextAuth + Cloudinary + Electron + Pusher + React-toastify + OpenAI + React-email

后端: NextJS (SSR) + MongoDB + Mongoose


功能

登陆、注册、重制密码与邮箱验证

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注册和重置模块需要邮箱验证,发送code后请及时查看注册邮箱填写验证码。

聊天界面

在这里插入图片描述

右上角登出按钮可登出账号。

发送消息及图片

在这里插入图片描述

点击输入框左侧图片按钮即可发送图片。

创建聊天

在这里插入图片描述

单选创建一对一聊天,多选创建群组聊天。

右边是个3D星球,可自行旋转。

申请好友、同意申请

在这里插入图片描述

成为好友之前是不能发送消息的,请点击Add friend按钮发送好友请求。

在这里插入图片描述

对方接受到好友请求后点击消息旁的对勾即可加为好友。

圣地巡礼

在这里插入图片描述

用内联框架嵌入,因为个人很喜欢这个网站所以嵌入哈哈哈。

右下角功能键最上方有个刷新图标,点击可以重置页面。

AI助手

在这里插入图片描述

GPT3.5助手,比较粗糙,没有对生产消息做格式处理,不能生产markdown等格式只能生成普通文本格式。

修改个人头像名字、群组头像名称

在这里插入图片描述

点击聊天界面右上角即可修改自己的头像和名字。

在这里插入图片描述

点击聊天中的群聊头像,即可修改群聊头像和名称。


注意

该项目虽然是基于Nextron的,但是当我打包的时候发现Nextron生产环境是不支持NextJS的ssr及api route的(我使用了),所以这个项目只能在开发环境运行,也就是说这个项目严格意义上来说只是个nextjs项目,这就导致我并不喜欢nextron,具体体现在以下几点:

  1. 我认为api route(ssr)是NextJS中不可或缺的一部分,我之所以使用NextJS便是因为其可以快速开发全栈项目的特性,而Nextron阉割掉了这个功能就让我感觉Nextron只是拥有NextJS生态的react+electron。作者说阉割是因为安全问题,而我个人认为这个功能可以不用,但是得存在,像我这种个人开发者并不担心什么安全性问题。
  2. Nextron中不支持app route的写法,只支持传统的pages route,这就是为什么我的项目中使用的是pages route而不是ap route这是不好的,app route才是NextJS的未来。
  3. Nextron只支持webpack打包,我个人认为在现在webpack作为打包工具唯一的优势应该就是其生态广阔,我个人还是更加喜欢vite打包。

运行

下载依赖:npm install

开发环境运行:npm run dev

注意:.env文件在/renderer目录下,请补全后运行。


网页版

网页版通过vercel部署。

github:Mebius1916/NextTalk_web: NextTalk项目的网页版

体验地址:https://nexttalk.mebius.fun


提交pr

可以参考我设置的issue,当然你有不错的想法也是可以的,不局限于我设置的issue

如果有想法且不会配置.env的可以提issue,审核通过后给你发我自己的.env


免责申明

写该项目的初衷是因为我初学reactnextjs所以想自己从0到1写一个项目来熟悉语法,所以该项目代码难免会粗糙,各位当成小玩具看待就可以啦。

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

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

相关文章

河南高校大数据实验室建设案例分享

泰迪智能科技在与中国各地高校的合作中积累了丰富的经验,尤其是在大数据和人工智能领域。过去多年里与河南省内多所高校在大数据领域进行了积极的探索和建设,形成了一系列具有特色的大数据实验室。这些实验室不仅促进了高校内部的科研创新,也…

Kafka自动生产消息软件

点击下载《Kafka服务端(含Zookeeper)一键自启软件》 点击下载《kafka客户端生产者消费者kafka可视化工具(可生产和消费消息)》 点击下载《Kafka自动生产消息软件》 1. 前言 在软件开发过程中,Kafka常被用作消息队列来处理特定的业务功能。为…

龙迅#LT8668EX显示器图像处理芯片 适用于HDMI1.4+VGA转4PORT LVDS,支持4K30HZ分辨率,可做OSD菜单亮度调节!

1. 一般说明 LT8668EX 是 Lontium 的第二代 LCD 控制器,基于 ClearEdge 技术,支持 VGA 接口和 HDMI 接口,符合 HDMI 1.4 规范。它可以支持带 HDMI 接口的双模 DP。为了向后兼容,该 LCD 控制器还包括一个高性能模拟接口&#xff0…

分享SRC漏洞挖掘中js未授权漏洞挖掘的小技巧

文章目录 0x1 前言0x2 js未授权简介一、什么是未授权?二、常见的未授权访问漏洞三、js漏洞挖掘需要获取的几个信息四、如何挖掘五、浅谈 0x3浅谈 js未授权挖掘技巧一、常规js未授权挖掘二、浅谈交流 0x4 Findsomething应该怎样正确使用?问题一:findsome…

如何保护网站安全

1. 使用 Web 应用防火墙(WAF) 功能:WAF 可以实时检测和阻止 SQL 注入、跨站脚本(XSS)、文件包含等常见攻击。它通过分析 HTTP 流量来过滤恶意请求。 推荐:可以使用像 雷池社区版这样的 WAF,它提…

内感受性注意的电生理特征:频谱和源定位分析

摘要 对内感受信号的关注和有意识地处理能力被认为对最小自我、适应性自我调节和情感体验的发展,以及工具性和执行性认知功能的最佳表现至关重要。然而,尽管关于内感受推论解释的理论非常丰富,但实证证据仍然很少。在此基础上,本…

[OPEN SQL] FOR ALL ENTRIES IN

FOR ALL ENTRIES IN 语句用于从一个内部表中检索与另一个内部表中指定字段匹配的记录 语法格式 SELECT ... FOR ALL ENTRIES IN <itab> WHERE <cond>. <itab>&#xff1a;插入目标数据内表 <cond>&#xff1a;查询条件 使用FOR ALL ENTRY IN 语句时&…

GetX的一些高级API

目录 前言 一、一些常用的API 二、局部状态组件 1.可选的全局设置和手动配置 2.局部状态组件 1.ValueBuilder 1.特点 2.基本用法 2.ObxValue 1.特点 2.基本用法 前言 这篇文章主要讲解GetX的一些高级API和一些有用的小组件。 一、一些常用的API GetX提供了一些高级…

Windows下基于fping进行批量IP测试

fping是Linux下一个很好用的IP测试工具&#xff0c;结合代码可以完成批量的IP测试&#xff0c;在网络调试中用途很广。本文是基于fping for Windows结合bat批处理&#xff0c;定制的测试脚本样例。 一、程序信息 本次测试使用fpingV5.1 for Windows版&#xff0c;版本信息如下…

[MRCTF2020]你传你呢

[MRCTF2020]你传你&#x1f40e;呢 审题 一眼文件上传 知识点 .htaccess文件的作用 <FilesMatch "a.png"> SetHandler application/x-httpd-php </FilesMatch>将a.png当做php文件执行 AddType application/x-httpd-php .jpgAddType 是一个 Apach…

stm32cubeIde 使用笔记

划分flash空间 需要更改STM32xxx_FLASH.ld文件 输出其他格式文件

【Rust中的序列化:Serde(一)】

Rust中的序列化&#xff1a;Serde Serde是什么&#xff1f;什么是序列化序列化&#xff1f;Serde运行机制Serde Data ModelVistor ApiSerializer ApiDeserializer Api 具体示例流程分析具体步骤&#xff1a;那么依次这个结论是如何得出的呢?什么是de? 总结 Serde是什么&#…

【Flask】四、flask连接并操作数据库

目录 前言 一、 安装必要的库 二、配置数据库连接 三、定义模型 四、操作数据库 1.添加用户 2.删除用户 3.更新用户信息 4查询所有用户 五、测试结果 前言 在Flask框架中&#xff0c;数据库的操作是一个核心功能&#xff0c;它允许开发者与后端数据库进行交互&#xf…

手机实时提取SIM卡打电话的信令声音-新的篇章(三、Android虚拟声卡探索)

手机实时提取SIM卡打电话的信令声音-新的篇章(三、Android虚拟声卡探索) 前言 前面的篇章中&#xff0c;我们从理论方向和实际市面上出现的音频线传输声音的方式&#xff0c;讨论绕开手机对SIM卡电话通话声音的封锁场景的可行性&#xff0c;并实际选购几款数字和模拟的USB转接…

安装fpm,解决*.deb=> *.rpm

要从生成 .deb 包转换为 .rpm 包&#xff0c;可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具&#xff0c;可以将 .deb 包重新打包成 .rpm&#xff0c;也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…

青出于“蓝”的合资第一新能源,“换壳”背后有门道

文/王俣祺 导语&#xff1a;千呼万唤始出来的新能源“马6”终于亮相了&#xff0c;这款马自达EZ-6本以为凭借马自达多年来在国内市场深耕的底蕴可以收获一片支持&#xff0c;但最近却深陷“换壳”风波。那么今天我们就一起看看&#xff0c;这款马自达EZ-6和被冠以“原型”的深蓝…

HT8787B 可任意限幅、内置自适应升压的2x9.0W立体声音频功放

1 特性 ● 可任意配置的限幅功能 自由配置音频限制幅度&#xff0c;使输出音频信号限制在固定失真水平内 ● 内置自动限温控制功能 适应不同散热条件&#xff0c;避免出现过温关断现象 ● 高效自适应G类升压功能&#xff0c;有效延长播放时间 可调节最大限流值&#xff0c;有效…

Ansible基本使用

目录 介绍 安装 inventory-主机清单 分组 子组 modules-模块 command shell script file copy systemd yum get_url yum_repository user mount cron 介绍 ansible是基于python开发的自动化运维工具。架构相对比较简单&#xff0c;仅需通过ssh连接客户机执行…

Java并发常见面试题总结(上)

线程 ⭐️什么是线程和进程? 何为进程? 进程是程序的一次执行过程&#xff0c;是系统运行程序的基本单位&#xff0c;因此进程是动态的。系统运行一个程序即是一个进程从创建&#xff0c;运行到消亡的过程 在 Java 中&#xff0c;当我们启动 main 函数时其实就是启动了一…