chore: version 2.7.0

feat: 流式输出内容 (#93 )
* feat: 流式输出内容 * fix: 修复异常状态 * feat: markdown 链接颜色
2025-07-24 23:13:47 +00:00 · 2023-02-22 23:08:00 +08:00 · 2023-02-22 23:03:20 +08:00 · 2023-02-22 22:57:09 +08:00 · 2023-02-22 22:55:53 +08:00 · 2023-02-22 14:43:55 +08:00
15 changed files with 249 additions and 59 deletions
--- a/.env
+++ b/.env
@@ -3,4 +3,5 @@ VITE_GLOB_API_URL=/api

 VITE_APP_API_BASE_URL=http://localhost:3002/

+# Glob API Timeout (ms)
 VITE_GLOB_API_TIMEOUT=100000
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,29 @@
+## v2.7.0
+
+`2023-02-23`
+
+### Feature
+- 使用消息流返回信息，反应更迅速
+
+### Enhancement
+- 样式的一点小改动
+
+## v2.6.2
+
+`2023-02-22`
+### BugFix
+- 还原修改代理导致的异常问题
+
+## v2.6.1
+
+`2023-02-22`
+
+### Feature
+- 新增 `Railway` 部署模版
+
+### BugFix
+- 手动打包 `Proxy` 问题
+
 ## v2.6.0

 `2023-02-21`
--- a/README.md
+++ b/README.md
@@ -1,10 +1,36 @@
 # ChatGPT Web

-使用 `express` 和 `vue3` 搭建的支持 `ChatGPT` 双模型演示网页
+> 使用 `express` 和 `vue3` 搭建的支持 `ChatGPT` 双模型演示网页

 ![cover](./docs/cover.png)
 ![cover2](./docs/cover2.png)

+- [ChatGPT Web](#chatgpt-web)
+	- [介绍](#介绍)
+	- [待实现路线](#待实现路线)
+	- [前置要求](#前置要求)
+		- [Node](#node)
+		- [PNPM](#pnpm)
+		- [填写密钥](#填写密钥)
+	- [安装依赖](#安装依赖)
+		- [后端](#后端)
+		- [前端](#前端)
+	- [测试环境运行](#测试环境运行)
+		- [后端服务](#后端服务)
+		- [前端网页](#前端网页)
+	- [打包](#打包)
+		- [使用 Docker](#使用-docker)
+			- [Docker 参数示例](#docker-参数示例)
+			- [Docker build \& Run](#docker-build--run)
+			- [Docker compose](#docker-compose)
+		- [使用 Railway 部署](#使用-railway-部署)
+			- [Railway 环境变量](#railway-环境变量)
+		- [手动打包](#手动打包)
+			- [后端服务](#后端服务-1)
+			- [前端网页](#前端网页-1)
+	- [常见问题](#常见问题)
+	- [参与贡献](#参与贡献)
+	- [License](#license)
 ## 介绍

 支持双模型，提供了两种非官方 `ChatGPT API` 方法
@@ -52,7 +78,7 @@ API_REVERSE_PROXY=

 ### Node

-`node` 需要 `^16 || ^18` 版本（或者 `node >= 14` 需要安装 [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)），使用 [nvm](https://github.com/nvm-sh/nvm) 可管理本地多个 `node` 版本
+`node` 需要 `^16 || ^18` 版本（`node >= 14` 需要安装 [fetch polyfill](https://github.com/developit/unfetch#usage-as-a-polyfill)），使用 [nvm](https://github.com/nvm-sh/nvm) 可管理本地多个 `node` 版本

 ```shell
 node -v
@@ -81,7 +107,7 @@ OPENAI_ACCESS_TOKEN=

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

-### 后端服务
+### 后端

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

@@ -89,7 +115,7 @@ OPENAI_ACCESS_TOKEN=
 pnpm install
 ```

-### 网页
+### 前端
 根目录下运行以下命令
 ```shell
 pnpm bootstrap
@@ -114,7 +140,7 @@ pnpm dev

 ### 使用 Docker

-### Docker 参数示例
+#### Docker 参数示例

 - `OPENAI_API_KEY` 二选一
 - `OPENAI_ACCESS_TOKEN`  二选一，同时存在时，`OPENAI_API_KEY` 优先
@@ -123,7 +149,7 @@ pnpm dev

 ![docker](./docs/docker.png)

-### Docker build & Run
+#### Docker build & Run

 ```bash
 docker build -t chatgpt-web .
@@ -138,7 +164,7 @@ docker run --name chatgpt-web -d -p 3002:3002 --env OPENAI_API_KEY=your_api_key
 http://localhost:3002/
 ```

-### Docker compose
+#### Docker compose

 [Hub 地址](https://hub.docker.com/repository/docker/chenzhaoyu94/chatgpt-web/general)

@@ -161,9 +187,24 @@ services:
      TIMEOUT_MS: 60000
 ```

+###  使用 Railway 部署

-## 手动打包
-### 后端服务
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/yytmgc)
+
+#### Railway 环境变量
+
+| 环境变量名称                | 必填 | 备注                    |
+| --------------------------- | ---- | ----------------------- |
+| `PORT` | 必填    | 默认 `3002`  |
+| `TIMEOUT_MS` | 可选    | 超时时间，单位毫秒，   |
+| `OPENAI_API_KEY` | `OpenAI API` 二选一    | 使用 `OpenAI API` 所需的 `apiKey` [(获取 apiKey)](https://platform.openai.com/overview)   |
+| `OPENAI_ACCESS_TOKEN` | `Web API` 二选一   | 使用 `Web API` 所需的 `accessToken` [(获取 accessToken)](https://chat.openai.com/api/auth/session)   |
+| `API_REVERSE_PROXY` | 可选，`Web API` 时可用    | `Web API` 反向代理地址 [详情](https://github.com/transitive-bullshit/chatgpt-api#reverse-proxy)   |
+
+> 注意: `Railway` 修改环境变量会重新 `Deploy`
+
+### 手动打包
+#### 后端服务
 > 如果你不需要本项目的 `node` 接口，可以省略如下操作

 复制 `service` 文件夹到你有 `node` 服务环境的服务器上。
@@ -181,7 +222,7 @@ pnpm prod

 PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可

-### 前端网页
+#### 前端网页

 1、修改根目录下 `.env` 内 `VITE_APP_API_BASE_URL` 为你的实际后端接口地址

@@ -193,7 +234,7 @@ PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可
 pnpm build
 ```

-### 常见问题
+## 常见问题
 Q: 为什么 `Git` 提交总是报错？

 A: 因为有提交信息验证，请遵循 [Commit 指南](./CONTRIBUTING.md)
--- a/config/index.ts
+++ b/config/index.ts
@@ -0,0 +1 @@
+export * from './proxy'
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -0,0 +1,16 @@
+import type { ProxyOptions } from 'vite'
+
+export function createViteProxy(isOpenProxy: boolean, viteEnv: ImportMetaEnv) {
+  if (!isOpenProxy)
+    return
+
+  const proxy: Record<string, string | ProxyOptions> = {
+    '/api': {
+      target: viteEnv.VITE_GLOB_API_URL,
+      changeOrigin: true,
+      rewrite: path => path.replace(/^\/api/, ''),
+    },
+  }
+
+  return proxy
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
-  "version": "2.6.0",
+  "version": "2.7.0",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
--- a/service/package.json
+++ b/service/package.json
@@ -15,6 +15,7 @@
  },
  "scripts": {
    "start": "esno ./src/index.ts",
+    "dev": "esno watch ./src/index.ts",
    "prod": "esno ./build/index.js",
    "build": "pnpm clean && tsup",
    "clean": "rimraf build",
--- a/service/src/chatgpt.ts
+++ b/service/src/chatgpt.ts
@@ -1,6 +1,6 @@
 import * as dotenv from 'dotenv'
 import 'isomorphic-fetch'
-import type { ChatGPTAPI, SendMessageOptions } from 'chatgpt'
+import type { ChatGPTAPI, ChatMessage, SendMessageOptions } from 'chatgpt'
 import { ChatGPTUnofficialProxyAPI } from 'chatgpt'
 import { sendResponse } from './utils'

@@ -8,7 +8,7 @@ dotenv.config()

 let apiModel: 'ChatGPTAPI' | 'ChatGPTUnofficialProxyAPI' | undefined

-export interface ChatContext {
+interface ChatContext {
  conversationId?: string
  parentMessageId?: string
 }
@@ -65,6 +65,34 @@ async function chatReply(
  }
 }

+async function chatReplyProcess(
+  message: string,
+  lastContext?: { conversationId?: string; parentMessageId?: string },
+  process?: (chat: ChatMessage) => void,
+) {
+  if (!message)
+    return sendResponse({ type: 'Fail', message: 'Message is empty' })
+
+  try {
+    let options: SendMessageOptions = { timeoutMs }
+
+    if (lastContext)
+      options = { ...lastContext }
+
+    const response = await api.sendMessage(message, {
+      ...options,
+      onProgress: (partialResponse) => {
+        process?.(partialResponse)
+      },
+    })
+
+    return sendResponse({ type: 'Success', data: response })
+  }
+  catch (error: any) {
+    return sendResponse({ type: 'Fail', message: error.message })
+  }
+}
+
 async function chatConfig() {
  return sendResponse({
    type: 'Success',
@@ -76,4 +104,6 @@ async function chatConfig() {
  })
 }

-export { chatReply, chatConfig }
+export type { ChatContext, ChatMessage }
+
+export { chatReply, chatReplyProcess, chatConfig }
--- a/service/src/index.ts
+++ b/service/src/index.ts
@@ -1,6 +1,6 @@
 import express from 'express'
-import type { ChatContext } from './chatgpt'
-import { chatConfig, chatReply } from './chatgpt'
+import type { ChatContext, ChatMessage } from './chatgpt'
+import { chatConfig, chatReply, chatReplyProcess } from './chatgpt'

 const app = express()
 const router = express.Router()
@@ -26,6 +26,23 @@ router.post('/chat', async (req, res) => {
  }
 })

+router.post('/chat-process', async (req, res) => {
+  res.setHeader('Content-type', 'application/octet-stream')
+
+  try {
+    const { prompt, options = {} } = req.body as { prompt: string; options?: ChatContext }
+    await chatReplyProcess(prompt, options, (chat: ChatMessage) => {
+      res.write(JSON.stringify(chat))
+    })
+  }
+  catch (error) {
+    res.write(JSON.stringify(error))
+  }
+  finally {
+    res.end()
+  }
+})
+
 router.post('/config', async (req, res) => {
  try {
    const response = await chatConfig()
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,4 +1,4 @@
-import type { GenericAbortSignal } from 'axios'
+import type { AxiosProgressEvent, GenericAbortSignal } from 'axios'
 import { post } from '@/utils/request'

 export function fetchChatAPI<T = any>(
@@ -13,6 +13,21 @@ export function fetchChatAPI<T = any>(
  })
 }

+export function fetchChatAPIProcess<T = any>(
+  params: {
+    prompt: string
+    options?: { conversationId?: string; parentMessageId?: string }
+    signal?: GenericAbortSignal
+    onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void },
+) {
+  return post<T>({
+    url: '/chat-process',
+    data: { prompt: params.prompt, options: params.options },
+    signal: params.signal,
+    onDownloadProgress: params.onDownloadProgress,
+  })
+}
+
 export function fetchChatConfig<T = any>() {
  return post<T>({
    url: '/config',
--- a/src/utils/functions/includeCode.ts
+++ b/src/utils/functions/includeCode.ts
@@ -1,8 +1,6 @@
 function includeCode(text: string | null | undefined) {
  const regexp = /^(?:\s{4}|\t).+/gm
-  if (text?.includes(' = ') || text?.match(regexp))
-    return true
-  return false
+  return !!(text?.includes(' = ') || text?.match(regexp))
 }

 export default includeCode
--- a/src/utils/request/index.ts
+++ b/src/utils/request/index.ts
@@ -1,4 +1,4 @@
-import type { AxiosResponse, GenericAbortSignal } from 'axios'
+import type { AxiosProgressEvent, AxiosResponse, GenericAbortSignal } from 'axios'
 import request from './axios'

 export interface HttpOption {
@@ -6,6 +6,7 @@ export interface HttpOption {
  data?: any
  method?: string
  headers?: any
+  onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void
  signal?: GenericAbortSignal
  beforeRequest?: () => void
  afterRequest?: () => void
@@ -17,9 +18,11 @@ export interface Response<T = any> {
  status: string
 }

-function http<T = any>({ url, data, method, headers, signal, beforeRequest, afterRequest }: HttpOption) {
+function http<T = any>(
+  { url, data, method, headers, onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
+) {
  const successHandler = (res: AxiosResponse<Response<T>>) => {
-    if (res.data.status === 'Success')
+    if (res.data.status === 'Success' || typeof res.data === 'string')
      return res.data

    return Promise.reject(res.data)
@@ -37,17 +40,18 @@ function http<T = any>({ url, data, method, headers, signal, beforeRequest, afte
  const params = Object.assign(typeof data === 'function' ? data() : data ?? {}, {})

  return method === 'GET'
-    ? request.get(url, { params, signal }).then(successHandler, failHandler)
-    : request.post(url, params, { headers, signal }).then(successHandler, failHandler)
+    ? request.get(url, { params, signal, onDownloadProgress }).then(successHandler, failHandler)
+    : request.post(url, params, { headers, signal, onDownloadProgress }).then(successHandler, failHandler)
 }

 export function get<T = any>(
-  { url, data, method = 'GET', signal, beforeRequest, afterRequest }: HttpOption,
+  { url, data, method = 'GET', onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
 ): Promise<Response<T>> {
  return http<T>({
    url,
    method,
    data,
+    onDownloadProgress,
    signal,
    beforeRequest,
    afterRequest,
@@ -55,13 +59,14 @@ export function get<T = any>(
 }

 export function post<T = any>(
-  { url, data, method = 'POST', headers, signal, beforeRequest, afterRequest }: HttpOption,
+  { url, data, method = 'POST', headers, onDownloadProgress, signal, beforeRequest, afterRequest }: HttpOption,
 ): Promise<Response<T>> {
  return http<T>({
    url,
    method,
    data,
    headers,
+    onDownloadProgress,
    signal,
    beforeRequest,
    afterRequest,
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 const wrapClass = computed(() => {
  return [
    'text-wrap',
-    'p-2',
+    'p-3',
    'min-w-[20px]',
    'rounded-md',
    props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
@@ -51,6 +51,9 @@ const text = computed(() => {
    max-width: 100%;
    vertical-align: middle;
  }
+  a {
+    color: #2d5cf6
+  }
 }

 .hljs {
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -8,7 +8,7 @@ import { useChat } from './hooks/useChat'
 import { HoverButton, SvgIcon } from '@/components/common'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore } from '@/store'
-import { fetchChatAPI } from '@/api'
+import { fetchChatAPIProcess } from '@/api'

 let controller = new AbortController()

@@ -80,22 +80,39 @@ async function onConversation() {
  )
  scrollToBottom()

+  let offset = 0
  try {
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      dataSources.value.length - 1,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, options: { ...options } },
+    await fetchChatAPIProcess<Chat.ConversationResponse>({
+      prompt: message,
+      options,
+      signal: controller.signal,
+      onDownloadProgress: ({ event }) => {
+        const xhr = event.target
+        const { responseText } = xhr
+        const chunk = responseText.substring(offset)
+        offset = responseText.length
+        try {
+          const data = JSON.parse(chunk)
+          updateChat(
+            +uuid,
+            dataSources.value.length - 1,
+            {
+              dateTime: new Date().toLocaleString(),
+              text: data.text ?? '',
+              inversion: false,
+              error: false,
+              loading: false,
+              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+              requestOptions: { prompt: message, options: { ...options } },
+            },
+          )
+          scrollToBottom()
+        }
+        catch (error) {
+          //
+        }
      },
-    )
-    scrollToBottom()
+    })
  }
  catch (error: any) {
    let errorMessage = error?.message ?? 'Something went wrong, please try again later.'
@@ -119,6 +136,7 @@ async function onConversation() {
    scrollToBottom()
  }
  finally {
+    offset = 0
    loading.value = false
  }
 }
@@ -154,24 +172,41 @@ async function onRegenerate(index: number) {
    },
  )

+  let offset = 0
  try {
-    const { data } = await fetchChatAPI<Chat.ConversationResponse>(message, options, controller.signal)
-    updateChat(
-      +uuid,
-      index,
-      {
-        dateTime: new Date().toLocaleString(),
-        text: data.text ?? '',
-        inversion: false,
-        error: false,
-        loading: false,
-        conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
-        requestOptions: { prompt: message, ...options },
+    await fetchChatAPIProcess<Chat.ConversationResponse>({
+      prompt: message,
+      options,
+      signal: controller.signal,
+      onDownloadProgress: ({ event }) => {
+        const xhr = event.target
+        const { responseText } = xhr
+        const chunk = responseText.substring(offset)
+        offset = responseText.length
+        try {
+          const data = JSON.parse(chunk)
+          updateChat(
+            +uuid,
+            index,
+            {
+              dateTime: new Date().toLocaleString(),
+              text: data.text ?? '',
+              inversion: false,
+              error: false,
+              loading: false,
+              conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
+              requestOptions: { prompt: message, ...options },
+            },
+          )
+        }
+        catch (error) {
+          //
+        }
      },
-    )
+    })
  }
  catch (error: any) {
-    let errorMessage = 'Something went wrong, please try again later.'
+    let errorMessage = error?.message ?? 'Something went wrong, please try again later.'

    if (error.message === 'canceled')
      errorMessage = 'Request canceled. Please try again.'
@@ -192,6 +227,7 @@ async function onRegenerate(index: number) {
  }
  finally {
    loading.value = false
+    offset = 0
  }
 }

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,8 +13,8 @@ export default defineConfig((env) => {
    },
    plugins: [vue()],
    server: {
-      port: 1002,
      host: '0.0.0.0',
+      port: 1002,
      open: false,
      proxy: {
        '/api': {
Author	SHA1	Message	Date
ChenZhaoYu	10058f151c	chore: version 2.7.0	2023-02-22 23:08:00 +08:00
Redon	09359c3c46	feat: 流式输出内容 (#93 ) * feat: 流式输出内容 * fix: 修复异常状态 * feat: markdown 链接颜色	2023-02-22 23:03:20 +08:00
ChenZhaoYu	ba83856173	chore: v2.6.2	2023-02-22 22:57:09 +08:00
ChenZhaoYu	b84f7e4c72	fix: 还原配置	2023-02-22 22:55:53 +08:00
ChenZhaoYu	c0f8e4316e	chore: version 2.6.1	2023-02-22 14:43:55 +08:00
Redon	bf5c0cdf04	fix: 手动打包 Proxy 问题(#91 ) * perf: 检查代码 * feat: proxy setting * chore: 调整为测试环境使用 `proxy`	2023-02-22 14:29:05 +08:00
Redon	66cecb6049	Update README.md	2023-02-22 10:40:26 +08:00
闫冰	808ae600c2	chore: 新增 Railway 部署模版！ (#85 ) * 新增使用 Railway 免费一键部署模版！ * 修改描述 * 修改模版的必填项以及新增超时时间参数 * 移除推广code * Update README.md --------- Co-authored-by: Redon <790348264@qq.com>	2023-02-22 10:36:11 +08:00