ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

06-01 1728阅读
引言

随着人工智能技术的飞速发展，AI对话系统已经成为众多应用场景中的核心组件。无论是客户服务、教育辅导还是娱乐互动，AI对话系统都以其高效、便捷的特点赢得了广泛的关注和应用。本文将介绍一个基于Vue3和Express开发的ChatGPT Web项目，它不仅具备强大的AI对话功能，还包含了界面主题设置、国际化语言支持、多会话存储、权限控制等丰富特性。通过这一项目，我们可以深入了解AI对话系统的构建与部署，以及其在不同场景下的应用实践。

ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

一、项目简介

ChatGPT Web是一个集AI对话、界面定制、多会话管理等功能于一体的Web端应用。它利用Vue3构建前端界面，结合Node.js开发框架Express处理后端逻辑，为用户提供了一个简洁、高效、易用的AI对话平台。该项目旨在提供一个学习和交流的平台，帮助开发者深入了解AI对话系统的构建与优化。

二、技术框架

ChatGPT Web项目采用了以下技术栈：

  • 前端：Vue3 + TypeScript + Vite + Naive UI + Pinia + Axios
  • 后端：Express

    Vue3作为最新的Vue版本，带来了性能提升和更好的类型支持；TypeScript为JavaScript添加了类型系统，提高了代码的可读性和可维护性；Vite是一个现代的前端构建工具，提供了极快的冷启动和热模块更新；Naive UI是一套简洁易用的Vue3组件库；Pinia是Vue3的官方状态管理库；Axios是一个基于Promise的HTTP客户端，用于前后端通信；Express是一个灵活且高效的Node.js Web应用框架。

    ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

    三、项目介绍与API选择

    ChatGPT Web项目支持双模型，提供了两种非官方的ChatGPT API方法：

    1. ChatGPTAPI(gpt-3.5-turbo-0301)

      ：通过OpenAI官方API调用ChatGPT，可靠性高但非免费。

    2. ChatGPTUnofficialProxyAPI(网页accessToken)

      ：使用非官方代理服务器访问ChatGPT后端API，绕过Cloudflare限制，相对不可靠但免费。

    在使用这两种API时，需要注意以下几点：

    • 优先使用ChatGPTAPI，因其可靠性更高。

    • 若国内网络不通，可考虑自建代理或使用推荐的社区代理（如pengzhile的https://ai.fakeopen.com/api/conversation）。

    • 使用accessToken方式时，需考虑暴露访问令牌的风险，并设置AUTH_SECRET_KEY变量添加密码访问权限。

      切换API方式时，只需修改service/.env文件中的相关配置即可。

      四、功能与特性

      ChatGPT Web项目具备以下功能与特性：

      1. AI对话

        ：通过集成大模型，实现人工智能对话，快速响应用户问题。

      2. 保存下载

        ：支持会话记录保存为图片并下载，方便分享、记录与存档。

      3. 快捷输入

        ：聊天框输入“/”可触发提示词，提高对话效率。

      4. 功能扩展

        ：支持自定义开发其他功能模块，满足更多需求。

      5. 打包部署

        ：支持Docker、Railway、Sealos等多种方式打包部署应用。

      6. 自适应

        ：支持移动端与PC端，根据设备分辨率进行优化，提供最佳用户体验。

      ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

      五、应用场景及案例说明

      ChatGPT Web项目可广泛应用于以下场景：

      1. 客户服务：企业可将其集成到官网或APP中，为用户提供24/7的在线客服支持。例如，电商网站可利用AI对话系统解答用户关于商品、订单、支付等问题的疑问，提高客户满意度。

      2. 教育辅导：教育机构可将其应用于在线学习平台，为学生提供个性化的学习辅导。例如，英语学习平台可利用AI对话系统进行口语练习、语法纠正等，帮助学生提高英语水平。

      3. 娱乐互动：游戏开发者可将其集成到游戏中，为玩家提供有趣的AI角色互动。例如，角色扮演游戏可利用AI对话系统实现NPC与玩家的对话交流，增强游戏的沉浸感和趣味性。

      案例说明：

      某在线教育平台集成了ChatGPT Web项目作为其在线辅导工具。学生可通过平台与AI对话系统进行实时互动，获取个性化的学习建议和解答。该平台还利用AI对话系统的保存下载功能，将学生的对话记录保存为图片并分享给教师，以便教师进行针对性的辅导和评估。通过这一应用实践，该平台显著提高了学生的学习效率和满意度。

      ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

      五、安装部署

      Node

      node 需要 ^16 || ^18 || ^19 版本（node >= 14 需要安装 fetch polyfill），使用 nvm 可管理本地多个 node 版本

      node -v

      PNPM

      如果你没有安装过 pnpm

      • npm install pnpm -g

        填写密钥

        获取 Openai Api Key 或 accessToken 并填写本地环境变量 跳转

        • # service/.env 文件# OpenAI API Key - https://platform.openai.com/overviewOPENAI_API_KEY=# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` responseOPENAI_ACCESS_TOKEN=

          安装依赖

          为了简便 后端开发人员 的了解负担，所以并没有采用前端 workspace 模式，而是分文件夹存放。如果只需要前端页面做二次开发，删除 service 文件夹即可。

          后端

          进入文件夹 /service 运行以下命令

          • pnpm install

            前端

            根目录下运行以下命令

            • pnpm bootstrap

              测试环境运行

              后端服务

              进入文件夹 /service 运行以下命令

              • pnpm start

                前端网页

                根目录下运行以下命令

                • pnpm dev

                  环境变量

                  API 可用：

                  • OPENAI_API_KEY

                     和 OPENAI_ACCESS_TOKEN 二选一

                  • OPENAI_API_MODEL

                     设置模型，可选，默认：gpt-3.5-turbo

                  • OPENAI_API_BASE_URL

                     设置接口地址，可选，默认：https://api.openai.com

                  • OPENAI_API_DISABLE_DEBUG

                     设置接口关闭 debug 日志，可选，默认：empty 不关闭

                    ACCESS_TOKEN 可用：

                    • OPENAI_ACCESS_TOKEN

                       和 OPENAI_API_KEY 二选一，同时存在时，OPENAI_API_KEY 优先

                    • API_REVERSE_PROXY

                       设置反向代理，可选，默认：https://ai.fakeopen.com/api/conversation，社区（注意：只有这两个是推荐，其他第三方来源，请自行甄别）

                      通用：

                      • AUTH_SECRET_KEY

                         访问权限密钥，可选

                      • MAX_REQUEST_PER_HOUR

                         每小时最大请求次数，可选，默认无限

                      • TIMEOUT_MS

                         超时，单位毫秒，可选

                      • SOCKS_PROXY_HOST

                         和 SOCKS_PROXY_PORT 一起时生效，可选

                      • SOCKS_PROXY_PORT

                         和 SOCKS_PROXY_HOST 一起时生效，可选

                      • HTTPS_PROXY

                         支持 http，https, socks5，可选

                      • ALL_PROXY

                         支持 http，https, socks5，可选

                        打包

                        使用 Docker

                        Docker 参数示例

                        ChatGPT Web：基于Vue3与Express的AI智能对话应用实践

                        Docker build & Run
                        • docker build -t chatgpt-web .# 前台运行docker run --name chatgpt-web --rm -it -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web# 后台运行docker run --name chatgpt-web -d -p 127.0.0.1:3002:3002 --env OPENAI_API_KEY=your_api_key chatgpt-web# 运行地址http://localhost:3002/
                          Docker compose

                          Hub 地址

                          • version: '3'services:  app:    image: chenzhaoyu94/chatgpt-web # 总是使用 latest ,更新时重新 pull 该 tag 镜像即可    ports:      - 127.0.0.1:3002:3002    environment:      # 二选一      OPENAI_API_KEY: sk-xxx      # 二选一      OPENAI_ACCESS_TOKEN: xxx      # API接口地址，可选，设置 OPENAI_API_KEY 时可用      OPENAI_API_BASE_URL: xxx      # API模型，可选，设置 OPENAI_API_KEY 时可用，https://platform.openai.com/docs/models      # gpt-4, gpt-4o, gpt-4o-mini, gpt-4-turbo, gpt-4-turbo-preview, gpt-4-0125-preview, gpt-4-1106-preview, gpt-4-0314, gpt-4-0613, gpt-4-32k, gpt-4-32k-0314, gpt-4-32k-0613, gpt-3.5-turbo-16k, gpt-3.5-turbo-16k-0613, gpt-3.5-turbo, gpt-3.5-turbo-0301, gpt-3.5-turbo-0613, text-davinci-003, text-davinci-002, code-davinci-002      OPENAI_API_MODEL: xxx      # 反向代理，可选      API_REVERSE_PROXY: xxx      # 访问权限密钥，可选      AUTH_SECRET_KEY: xxx      # 每小时最大请求次数，可选，默认无限      MAX_REQUEST_PER_HOUR: 0      # 超时，单位毫秒，可选      TIMEOUT_MS: 60000      # Socks代理，可选，和 SOCKS_PROXY_PORT 一起时生效      SOCKS_PROXY_HOST: xxx      # Socks代理端口，可选，和 SOCKS_PROXY_HOST 一起时生效      SOCKS_PROXY_PORT: xxx      # HTTPS 代理，可选，支持 http，https，socks5      HTTPS_PROXY: http://xxx:7890
                            • OPENAI_API_BASE_URL

                               可选，设置 OPENAI_API_KEY 时可用

                            • OPENAI_API_MODEL

                               可选，设置 OPENAI_API_KEY 时可用

                              防止爬虫抓取

                              nginx

                              将下面配置填入nginx配置文件中，可以参考 docker-compose/nginx/nginx.conf 文件中添加反爬虫的方法

                              •   # 防止爬虫抓取    if ($http_user_agent ~* "360Spider|JikeSpider|Spider|spider|bot|Bot|2345Explorer|curl|wget|webZIP|qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediapartners-Google|Adsbot-Google|Feedfetcher-Google|Yahoo! Slurp|Yahoo! Slurp China|YoudaoBot|Sosospider|Sogou spider|Sogou web spider|MSNBot|ia_archiver|Tomato Bot|NSPlayer|bingbot")    {      return 403;    }
                                 

                                七、总结与展望
                                 

                                ChatGPT Web项目是一个基于Vue3和Express开发的AI智能对话应用。它集成了多种先进技术，具备强大的功能和丰富的特性。通过这一项目，我们可以深入了解AI对话系统的构建与部署过程，以及其在不同场景下的应用实践。未来，我们将继续优化和完善该项目，探索更多创新的应用场景和技术方案，为AI对话系统的发展贡献更多的力量。
                                 
 

                                项目地址
                                 
 
 
                                https://github.com/Chanzhaoyu/chatgpt-web
                                 

		

		
		

		免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。		
			

	




	
相关阅读

	
    
	
				



				

		
	





	
目录[+]

	






	取消
	

		微信二维码
	

	

		

			
			微信二维码
		

		

			
			支付宝二维码