25 | {title || value}
26 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/app/icons/copy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/icons/close.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/icons/send-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/components/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import styles from "./button.module.scss";
4 |
5 | export function IconButton(props: {
6 | onClick?: () => void;
7 | icon: JSX.Element;
8 | text?: string;
9 | bordered?: boolean;
10 | shadow?: boolean;
11 | noDark?: boolean;
12 | className?: string;
13 | title?: string;
14 | disabled?: boolean;
15 | }) {
16 | return (
17 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/.github/workflows/sync.yml:
--------------------------------------------------------------------------------
1 | name: Upstream Sync
2 |
3 | permissions:
4 | contents: write
5 |
6 | on:
7 | schedule:
8 | - cron: "0 * * * *" # every hour
9 | workflow_dispatch:
10 |
11 | jobs:
12 | sync_latest_from_upstream:
13 | name: Sync latest commits from upstream repo
14 | runs-on: ubuntu-latest
15 | if: ${{ github.event.repository.fork }}
16 |
17 | steps:
18 | # Step 1: run a standard checkout action
19 | - name: Checkout target repo
20 | uses: actions/checkout@v3
21 |
22 | # Step 2: run the sync action
23 | - name: Sync upstream changes
24 | id: sync
25 | uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
26 | with:
27 | upstream_sync_repo: Yidadaa/ChatGPT-Next-Web
28 | upstream_sync_branch: main
29 | target_sync_branch: main
30 | target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
31 |
32 | # Set test_mode true to run tests instead of the true action!!
33 | test_mode: false
34 |
--------------------------------------------------------------------------------
/app/icons/return.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: "[Bug] "
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Deployment**
27 | - [ ] Docker
28 | - [ ] Vercel
29 | - [ ] Server
30 |
31 | **Desktop (please complete the following information):**
32 | - OS: [e.g. iOS]
33 | - Browser [e.g. chrome, safari]
34 | - Version [e.g. 22]
35 |
36 | **Smartphone (please complete the following information):**
37 | - Device: [e.g. iPhone6]
38 | - OS: [e.g. iOS8.1]
39 | - Browser [e.g. stock browser, safari]
40 | - Version [e.g. 22]
41 |
42 | **Additional Logs**
43 | Add any logs about the problem here.
44 |
--------------------------------------------------------------------------------
/app/config/server.ts:
--------------------------------------------------------------------------------
1 | import md5 from "spark-md5";
2 |
3 | declare global {
4 | namespace NodeJS {
5 | interface ProcessEnv {
6 | OPENAI_API_KEY?: string;
7 | CODE?: string;
8 | PROXY_URL?: string;
9 | VERCEL?: string;
10 | }
11 | }
12 | }
13 |
14 | const ACCESS_CODES = (function getAccessCodes(): Set
28 |
42 | );
43 | }
44 | // if no error occurred, render children
45 | return this.props.children;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/.github/workflows/docker.yml:
--------------------------------------------------------------------------------
1 | name: Publish Docker image
2 |
3 | on:
4 | workflow_dispatch:
5 | release:
6 | types: [published]
7 |
8 | jobs:
9 | push_to_registry:
10 | name: Push Docker image to Docker Hub
11 | runs-on: ubuntu-latest
12 | steps:
13 | -
14 | name: Check out the repo
15 | uses: actions/checkout@v3
16 | -
17 | name: Log in to Docker Hub
18 | uses: docker/login-action@v2
19 | with:
20 | username: ${{ secrets.DOCKER_USERNAME }}
21 | password: ${{ secrets.DOCKER_PASSWORD }}
22 |
23 | -
24 | name: Extract metadata (tags, labels) for Docker
25 | id: meta
26 | uses: docker/metadata-action@v4
27 | with:
28 | images: yidadaa/chatgpt-next-web
29 | tags: |
30 | type=raw,value=latest
31 | type=ref,event=tag
32 |
33 | -
34 | name: Set up QEMU
35 | uses: docker/setup-qemu-action@v2
36 |
37 | -
38 | name: Set up Docker Buildx
39 | uses: docker/setup-buildx-action@v2
40 |
41 | -
42 | name: Build and push Docker image
43 | uses: docker/build-push-action@v4
44 | with:
45 | context: .
46 | platforms: linux/amd64,linux/arm64
47 | push: true
48 | tags: ${{ steps.meta.outputs.tags }}
49 | labels: ${{ steps.meta.outputs.labels }}
50 | cache-from: type=gha
51 | cache-to: type=gha,mode=max
52 |
53 |
--------------------------------------------------------------------------------
/app/icons/edit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/icons/chat.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/icons/three-dots.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-page-custom-font */
2 | import "./styles/globals.scss";
3 | import "./styles/markdown.scss";
4 | import "./styles/highlight.scss";
5 | import { getBuildConfig } from "./config/build";
6 |
7 | const buildConfig = getBuildConfig();
8 |
9 | export const metadata = {
10 | title: "ChatGPT Next Web",
11 | description: "Your personal ChatGPT Chat Bot.",
12 | appleWebApp: {
13 | title: "ChatGPT Next Web",
14 | statusBarStyle: "default",
15 | },
16 | themeColor: "#fafafa",
17 | };
18 |
19 | export default function RootLayout({
20 | children,
21 | }: {
22 | children: React.ReactNode;
23 | }) {
24 | return (
25 |
26 |
27 |
31 |
36 |
37 |
38 |
39 |
40 |
44 |
45 |
46 | {children}
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:18-alpine AS base
2 |
3 | FROM base AS deps
4 |
5 | RUN apk add --no-cache libc6-compat
6 |
7 | WORKDIR /app
8 |
9 | COPY package.json yarn.lock ./
10 |
11 | RUN yarn config set registry 'https://registry.npm.taobao.org'
12 | RUN yarn install
13 |
14 | FROM base AS builder
15 |
16 | RUN apk update && apk add --no-cache git
17 |
18 | ENV OPENAI_API_KEY=""
19 | ENV CODE=""
20 |
21 | WORKDIR /app
22 | COPY --from=deps /app/node_modules ./node_modules
23 | COPY . .
24 |
25 | RUN yarn build
26 |
27 | FROM base AS runner
28 | WORKDIR /app
29 |
30 | RUN apk add proxychains-ng
31 |
32 | ENV PROXY_URL=""
33 | ENV OPENAI_API_KEY=""
34 | ENV CODE=""
35 |
36 | COPY --from=builder /app/public ./public
37 | COPY --from=builder /app/.next/standalone ./
38 | COPY --from=builder /app/.next/static ./.next/static
39 | COPY --from=builder /app/.next/server ./.next/server
40 |
41 | EXPOSE 3000
42 |
43 | CMD if [ -n "$PROXY_URL" ]; then \
44 | protocol=$(echo $PROXY_URL | cut -d: -f1); \
45 | host=$(echo $PROXY_URL | cut -d/ -f3 | cut -d: -f1); \
46 | port=$(echo $PROXY_URL | cut -d: -f3); \
47 | conf=/etc/proxychains.conf; \
48 | echo "strict_chain" > $conf; \
49 | echo "proxy_dns" >> $conf; \
50 | echo "remote_dns_subnet 224" >> $conf; \
51 | echo "tcp_read_time_out 15000" >> $conf; \
52 | echo "tcp_connect_time_out 8000" >> $conf; \
53 | echo "[ProxyList]" >> $conf; \
54 | echo "$protocol $host $port" >> $conf; \
55 | cat /etc/proxychains.conf; \
56 | proxychains -f $conf node server.js; \
57 | else \
58 | node server.js; \
59 | fi
60 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chatgpt-next-web",
3 | "version": "1.9.3",
4 | "private": false,
5 | "license": "Anti 996",
6 | "scripts": {
7 | "dev": "yarn fetch && next dev",
8 | "build": "yarn fetch && next build",
9 | "start": "next start",
10 | "lint": "next lint",
11 | "fetch": "node ./scripts/fetch-prompts.mjs",
12 | "prepare": "husky install"
13 | },
14 | "dependencies": {
15 | "@hello-pangea/dnd": "^16.2.0",
16 | "@svgr/webpack": "^6.5.1",
17 | "@vercel/analytics": "^0.1.11",
18 | "emoji-picker-react": "^4.4.7",
19 | "eventsource-parser": "^0.1.0",
20 | "fuse.js": "^6.6.2",
21 | "next": "^13.2.3",
22 | "node-fetch": "^3.3.1",
23 | "openai": "^3.2.1",
24 | "react": "^18.2.0",
25 | "react-dom": "^18.2.0",
26 | "react-markdown": "^8.0.5",
27 | "rehype-highlight": "^6.0.0",
28 | "rehype-katex": "^6.0.2",
29 | "remark-breaks": "^3.0.2",
30 | "remark-gfm": "^3.0.1",
31 | "remark-math": "^5.1.1",
32 | "sass": "^1.59.2",
33 | "spark-md5": "^3.0.2",
34 | "use-debounce": "^9.0.3",
35 | "zustand": "^4.3.6"
36 | },
37 | "devDependencies": {
38 | "@types/node": "^18.14.6",
39 | "@types/react": "^18.0.28",
40 | "@types/react-dom": "^18.0.11",
41 | "@types/react-katex": "^3.0.0",
42 | "@types/spark-md5": "^3.0.2",
43 | "cross-env": "^7.0.3",
44 | "eslint": "^8.36.0",
45 | "eslint-config-next": "13.2.3",
46 | "eslint-config-prettier": "^8.8.0",
47 | "eslint-plugin-prettier": "^4.2.1",
48 | "husky": "^8.0.0",
49 | "lint-staged": "^13.2.0",
50 | "prettier": "^2.8.7",
51 | "typescript": "4.9.5"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/app/icons/download.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/icons/user.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/scripts/fetch-prompts.mjs:
--------------------------------------------------------------------------------
1 | import fetch from "node-fetch";
2 | import fs from "fs/promises";
3 |
4 | const RAW_FILE_URL = "https://raw.githubusercontent.com/";
5 | const MIRRORF_FILE_URL = "https://raw.fgit.ml/";
6 |
7 | const RAW_CN_URL = "PlexPt/awesome-chatgpt-prompts-zh/main/prompts-zh.json";
8 | const CN_URL = MIRRORF_FILE_URL + RAW_CN_URL;
9 | const RAW_EN_URL = "f/awesome-chatgpt-prompts/main/prompts.csv";
10 | const EN_URL = MIRRORF_FILE_URL + RAW_EN_URL;
11 | const FILE = "./public/prompts.json";
12 |
13 | async function fetchCN() {
14 | console.log("[Fetch] fetching cn prompts...");
15 | try {
16 | const raw = await (await fetch(CN_URL)).json();
17 | return raw.map((v) => [v.act, v.prompt]);
18 | } catch (error) {
19 | console.error("[Fetch] failed to fetch cn prompts", error);
20 | return [];
21 | }
22 | }
23 |
24 | async function fetchEN() {
25 | console.log("[Fetch] fetching en prompts...");
26 | try {
27 | const raw = await (await fetch(EN_URL)).text();
28 | return raw
29 | .split("\n")
30 | .slice(1)
31 | .map((v) => v.split('","').map((v) => v.replace('"', "")));
32 | } catch (error) {
33 | console.error("[Fetch] failed to fetch cn prompts", error);
34 | return [];
35 | }
36 | }
37 |
38 | async function main() {
39 | Promise.all([fetchCN(), fetchEN()])
40 | .then(([cn, en]) => {
41 | fs.writeFile(FILE, JSON.stringify({ cn, en }));
42 | })
43 | .catch((e) => {
44 | console.error("[Fetch] failed to fetch prompts");
45 | fs.writeFile(FILE, JSON.stringify({ cn: [], en: [] }));
46 | })
47 | .finally(() => {
48 | console.log("[Fetch] saved to " + FILE);
49 | });
50 | }
51 |
52 | main();
53 |
--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { getServerSideConfig } from "./app/config/server";
3 | import md5 from "spark-md5";
4 |
5 | export const config = {
6 | matcher: ["/api/openai", "/api/chat-stream"],
7 | };
8 |
9 | const serverConfig = getServerSideConfig();
10 |
11 | export function middleware(req: NextRequest) {
12 | const accessCode = req.headers.get("access-code");
13 | const token = req.headers.get("token");
14 | const hashedCode = md5.hash(accessCode ?? "").trim();
15 |
16 | console.log("[Auth] allowed hashed codes: ", [...serverConfig.codes]);
17 | console.log("[Auth] got access code:", accessCode);
18 | console.log("[Auth] hashed access code:", hashedCode);
19 |
20 | if (serverConfig.needCode && !serverConfig.codes.has(hashedCode) && !token) {
21 | return NextResponse.json(
22 | {
23 | error: true,
24 | needAccessCode: true,
25 | msg: "Please go settings page and fill your access code.",
26 | },
27 | {
28 | status: 401,
29 | },
30 | );
31 | }
32 |
33 | // inject api key
34 | if (!token) {
35 | const apiKey = serverConfig.apiKey;
36 | if (apiKey) {
37 | console.log("[Auth] set system token");
38 | req.headers.set("token", apiKey);
39 | } else {
40 | return NextResponse.json(
41 | {
42 | error: true,
43 | msg: "Empty Api Key",
44 | },
45 | {
46 | status: 401,
47 | },
48 | );
49 | }
50 | } else {
51 | console.log("[Auth] set user token");
52 | }
53 |
54 | return NextResponse.next({
55 | request: {
56 | headers: req.headers,
57 | },
58 | });
59 | }
60 |
--------------------------------------------------------------------------------
/app/locales/index.ts:
--------------------------------------------------------------------------------
1 | import CN from "./cn";
2 | import EN from "./en";
3 | import TW from "./tw";
4 | import ES from "./es";
5 | import IT from "./it";
6 | import TR from "./tr";
7 | import JP from "./jp";
8 |
9 | export type { LocaleType } from "./cn";
10 |
11 | export const AllLangs = ["en", "cn", "tw", "es", "it", "tr", "jp"] as const;
12 | type Lang = (typeof AllLangs)[number];
13 |
14 | const LANG_KEY = "lang";
15 |
16 | function getItem(key: string) {
17 | try {
18 | return localStorage.getItem(key);
19 | } catch {
20 | return null;
21 | }
22 | }
23 |
24 | function setItem(key: string, value: string) {
25 | try {
26 | localStorage.setItem(key, value);
27 | } catch {}
28 | }
29 |
30 | function getLanguage() {
31 | try {
32 | return navigator.language.toLowerCase();
33 | } catch {
34 | return "cn";
35 | }
36 | }
37 |
38 | export function getLang(): Lang {
39 | const savedLang = getItem(LANG_KEY);
40 |
41 | if (AllLangs.includes((savedLang ?? "") as Lang)) {
42 | return savedLang as Lang;
43 | }
44 |
45 | const lang = getLanguage();
46 |
47 | if (lang.includes("zh") || lang.includes("cn")) {
48 | return "cn";
49 | } else if (lang.includes("tw")) {
50 | return "tw";
51 | } else if (lang.includes("es")) {
52 | return "es";
53 | } else if (lang.includes("it")) {
54 | return "it";
55 | } else if (lang.includes("tr")) {
56 | return "tr";
57 | } else if (lang.includes("jp")) {
58 | return "jp";
59 | } else {
60 | return "en";
61 | }
62 | }
63 |
64 | export function changeLang(lang: Lang) {
65 | setItem(LANG_KEY, lang);
66 | location.reload();
67 | }
68 |
69 | export default { en: EN, cn: CN, tw: TW, es: ES, it: IT, tr: TR, jp: JP }[
70 | getLang()
71 | ];
72 |
--------------------------------------------------------------------------------
/app/components/chat.module.scss:
--------------------------------------------------------------------------------
1 | @import "../styles/animation.scss";
2 |
3 | .prompt-toast {
4 | position: absolute;
5 | bottom: -50px;
6 | z-index: 999;
7 | display: flex;
8 | justify-content: center;
9 | width: calc(100% - 40px);
10 |
11 | .prompt-toast-inner {
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | font-size: 12px;
16 | background-color: var(--white);
17 | color: var(--black);
18 |
19 | border: var(--border-in-light);
20 | box-shadow: var(--card-shadow);
21 | padding: 10px 20px;
22 | border-radius: 100px;
23 |
24 | animation: slide-in-from-top ease 0.3s;
25 |
26 | .prompt-toast-content {
27 | margin-left: 10px;
28 | }
29 | }
30 | }
31 |
32 | .context-prompt {
33 | .context-prompt-row {
34 | display: flex;
35 | justify-content: center;
36 | width: 100%;
37 | margin-bottom: 10px;
38 |
39 | .context-role {
40 | margin-right: 10px;
41 | }
42 |
43 | .context-content {
44 | flex: 1;
45 | max-width: 100%;
46 | text-align: left;
47 | }
48 |
49 | .context-delete-button {
50 | margin-left: 10px;
51 | }
52 | }
53 |
54 | .context-prompt-button {
55 | flex: 1;
56 | }
57 | }
58 |
59 | .memory-prompt {
60 | margin-top: 20px;
61 |
62 | .memory-prompt-title {
63 | font-size: 12px;
64 | font-weight: bold;
65 | margin-bottom: 10px;
66 | display: flex;
67 | justify-content: space-between;
68 | align-items: center;
69 |
70 | .memory-prompt-action {
71 | display: flex;
72 | align-items: center;
73 | }
74 | }
75 |
76 | .memory-prompt-content {
77 | background-color: var(--gray);
78 | border-radius: 6px;
79 | padding: 10px;
80 | font-size: 12px;
81 | user-select: text;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/app/icons/eye-off.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/app/icons/brain.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/store/access.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { persist } from "zustand/middleware";
3 |
4 | export interface AccessControlStore {
5 | accessCode: string;
6 | token: string;
7 |
8 | needCode: boolean;
9 |
10 | updateToken: (_: string) => void;
11 | updateCode: (_: string) => void;
12 | enabledAccessControl: () => boolean;
13 | isAuthorized: () => boolean;
14 | fetch: () => void;
15 | }
16 |
17 | export const ACCESS_KEY = "access-control";
18 |
19 | let fetchState = 0; // 0 not fetch, 1 fetching, 2 done
20 |
21 | export const useAccessStore = createOops, something went wrong!
29 |30 |33 | 34 | 35 |{this.state.error?.toString()}31 |{this.state.info?.componentStack}32 |
16 | {
19 | if (ref.current) {
20 | const code = ref.current.innerText;
21 | copyToClipboard(code);
22 | }
23 | }}
24 | >
25 | {props.children}
26 |
27 | );
28 | }
29 |
30 | const useLazyLoad = (ref: RefObject
37 |
48 | )}
49 | {props.title}
38 |
39 |
44 |
40 | {Locale.ChatItem.ChatItemCount(props.count)}
41 |
42 | {props.time}
43 |
45 |
47 |
89 | {sessions.map((item, i) => (
90 | selectSession(i)}
99 | onDelete={() => chatStore.deleteSession(i)}
100 | />
101 | ))}
102 | {provided.placeholder}
103 |
104 | )}
105 |
2 | 
3 |
4 |
17 |
18 | ## 主要功能
19 |
20 | - 在 1 分钟内使用 Vercel **免费一键部署**
21 | - 精心设计的 UI，响应式设计，支持深色模式
22 | - 极快的首屏加载速度（~100kb）
23 | - 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
24 | - 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
25 | - 一键导出聊天记录，完整的 Markdown 支持
26 | - 拥有自己的域名？好上加好，绑定后即可在任何地方**无障碍**快速访问
27 |
28 | ## 开始使用
29 |
30 | 1. 准备好你的 [OpenAI API Key](https://platform.openai.com/account/api-keys);
31 | 2. 点击右侧按钮开始部署：
32 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)，直接使用 Github 账号登录即可，记得在环境变量页填入 API Key 和[页面访问密码](#配置页面访问密码) CODE；
33 | 3. 部署完毕后，即可开始使用；
34 | 4. （可选）[绑定自定义域名](https://vercel.com/docs/concepts/projects/domains/add-a-domain)：Vercel 分配的域名 DNS 在某些区域被污染了，绑定自定义域名即可直连。
35 |
36 | ## 保持更新
37 |
38 | 如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
39 | 推荐你按照下列步骤重新部署：
40 |
41 | - 删除掉原先的仓库；
42 | - 使用页面右上角的 fork 按钮，fork 本项目；
43 | - 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
44 |
45 | ### 打开自动更新
46 | 当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新：
47 |
48 | 
49 |
50 | 
51 |
52 | ### 手动更新代码
53 |
54 | 如果你想让手动立即更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步。
55 |
56 | 你可以 star/watch 本项目或者 follow 作者来及时获得新功能更新通知。
57 |
58 | ## 配置页面访问密码
59 |
60 | > 配置密码后，用户需要在设置页手动填写访问码才可以正常聊天，否则会通过消息提示未授权状态。
61 |
62 | > **警告**：请务必将密码的位数设置得足够长，最好 7 位以上，否则[会被爆破](https://github.com/Yidadaa/ChatGPT-Next-Web/issues/518)。
63 |
64 | 本项目提供有限的权限控制功能，请在 Vercel 项目控制面板的环境变量页增加名为 `CODE` 的环境变量，值为用英文逗号分隔的自定义密码：
65 |
66 | ```
67 | code1,code2,code3
68 | ```
69 |
70 | 增加或修改该环境变量后，请**重新部署**项目使改动生效。
71 |
72 | ## 环境变量
73 |
74 | > 本项目大多数配置项都通过环境变量来设置。
75 |
76 | ### `OPENAI_API_KEY` （必填项）
77 |
78 | OpanAI 密钥，你在 openai 账户页面申请的 api key。
79 |
80 | ### `CODE` （可选）
81 |
82 | 访问密码，可选，可以使用逗号隔开多个密码。
83 |
84 | **警告**：如果不填写此项，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。
85 |
86 | ### `BASE_URL` （可选）
87 |
88 | > Default: `api.openai.com`
89 |
90 | OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填写此选项。
91 |
92 | ### `PROTOCOL` （可选）
93 |
94 | > Default: `https`
95 |
96 | > Values: `http` | `https`
97 |
98 | OpenAI 代理接口协议，如果遇到 ssl 证书问题，请尝试通过此选项设置为 http。
99 |
100 | ## 开发
101 |
102 | > 强烈不建议在本地进行开发或者部署，由于一些技术原因，很难在本地配置好 OpenAI API 代理，除非你能保证可以直连 OpenAI 服务器。
103 |
104 | 点击下方按钮，开始二次开发：
105 |
106 | [](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
107 |
108 | 在开始写代码之前，需要在项目根目录新建一个 `.env.local` 文件，里面填入环境变量：
109 |
110 | ```
111 | OPENAI_API_KEY=
3 |
4 | ChatGPT Next Web
5 | 6 | 一键免费部署你的私人 ChatGPT 网页应用。 7 | 8 | [演示 Demo](https://chat-gpt-next-web.vercel.app/) 9 | 10 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web) 11 | 12 | [](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web) 13 | 14 |  15 | 16 |
15 | {props.children}
16 | {props.open && (
17 |
23 | );
24 | }
25 |
26 | export function Card(props: { children: JSX.Element[]; className?: string }) {
27 | return (
28 |
18 |
19 | {props.content}
20 |
21 | )}
22 | {props.children}
29 | );
30 | }
31 |
32 | export function ListItem(props: { children: JSX.Element[] }) {
33 | if (props.children.length > 2) {
34 | throw Error("Only Support Two Children");
35 | }
36 |
37 | return {props.children}
;
38 | }
39 |
40 | export function List(props: { children: JSX.Element[] | JSX.Element }) {
41 | return {props.children}
;
42 | }
43 |
44 | export function Loading() {
45 | return (
46 |
55 |
57 | );
58 | }
59 |
60 | interface ModalProps {
61 | title: string;
62 | children?: JSX.Element;
63 | actions?: JSX.Element[];
64 | onClose?: () => void;
65 | }
66 | export function Modal(props: ModalProps) {
67 | return (
68 |
69 |
89 | );
90 | }
91 |
92 | export function showModal(props: ModalProps) {
93 | const div = document.createElement("div");
94 | div.className = "modal-mask";
95 | document.body.appendChild(div);
96 |
97 | const root = createRoot(div);
98 | const closeModal = () => {
99 | props.onClose?.();
100 | root.unmount();
101 | div.remove();
102 | };
103 |
104 | div.onclick = (e) => {
105 | if (e.target === div) {
106 | closeModal();
107 | }
108 | };
109 |
110 | root.render(
70 |
76 |
77 | {props.title}
71 |
72 |
73 |
75 | {props.children}
78 |
79 |
80 |
88 |
81 | {props.actions?.map((action, i) => (
82 |
87 |
83 | {action}
84 |
85 | ))}
86 |
124 |
136 | );
137 | }
138 |
139 | export function showToast(
140 | content: string,
141 | action?: ToastProps["action"],
142 | delay = 3000,
143 | ) {
144 | const div = document.createElement("div");
145 | div.className = styles.show;
146 | document.body.appendChild(div);
147 |
148 | const root = createRoot(div);
149 | const close = () => {
150 | div.classList.add(styles.hide);
151 |
152 | setTimeout(() => {
153 | root.unmount();
154 | div.remove();
155 | }, 300);
156 | };
157 |
158 | setTimeout(() => {
159 | close();
160 | }, delay);
161 |
162 | root.render(
125 | {props.content}
126 | {props.action && (
127 |
133 | )}
134 |
135 |
31 | {!props.noLogo &&
34 | );
35 | }
36 |
37 | const Settings = dynamic(async () => (await import("./settings")).Settings, {
38 | loading: () =>
168 |
251 | );
252 | }
253 |
254 | export function Home() {
255 | return (
256 |
171 |
233 |
234 |
172 |
180 |
181 | ChatGPT Next
173 |
174 | Build your own AI assistant.
175 |
176 |
177 |
179 | {
184 | setOpenSettings(false);
185 | setShowSideBar(false);
186 | }}
187 | >
188 |
190 |
191 |
192 |
227 |
228 |
193 |
215 |
194 |
199 |
200 |
209 |
210 |
211 |
214 |
216 |
226 | onDragMouseDown(e as any)}
231 | >
232 |
235 | {openSettings ? (
236 | {
238 | setOpenSettings(false);
239 | setShowSideBar(true);
240 | }}
241 | />
242 | ) : (
243 | setShowSideBar(true)}
246 | sideBarShowing={showSideBar}
247 | />
248 | )}
249 |
250 |