mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-10-09 03:26:38 +08:00
Merge branch 'Yidadaa:main' into main
This commit is contained in:
EricYangXD
GitHub
commit
72eaedfbca
7
.github/workflows/sync.yml
vendored
7
.github/workflows/sync.yml
vendored
@ -31,3 +31,10 @@ jobs:
|
||||
|
||||
# Set test_mode true to run tests instead of the true action!!
|
||||
test_mode: false
|
||||
|
||||
- name: Sync check
|
||||
if: failure()
|
||||
run: |
|
||||
echo "::error::由于权限不足，导致同步失败（这是预期的行为），请前往仓库首页手动执行[Sync fork]。"
|
||||
echo "::error::Due to insufficient permissions, synchronization failed (as expected). Please go to the repository homepage and manually perform [Sync fork]."
|
||||
exit 1
|
||||
|
||||
32
README.md
32
README.md
@ -7,11 +7,15 @@ This project is forked from [ChatGPT-Next-Web](https://github.com/Yidadaa/ChatGP
|
||||
|
||||
<h1 align="center">ChatGPT Next Web</h1>
|
||||
|
||||
English / [简体中文](./README_CN.md)
|
||||
|
||||
One-Click to deploy well-designed ChatGPT web UI on Vercel.
|
||||
|
||||
一键免费部署你的私人 ChatGPT 网页应用。
|
||||
|
||||
[演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Join Discord](https://discord.gg/zrhvHCr79N) / [QQ 群](https://user-images.githubusercontent.com/16968934/231095592-330adc52-0337-4c13-8452-938ec169e367.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
|
||||
[Demo](https://chat-gpt-next-web.vercel.app/) / [Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [Join Discord](https://discord.gg/zrhvHCr79N) / [Buy Me a Coffee](https://www.buymeacoffee.com/yidadaa)
|
||||
|
||||
[演示](https://chat-gpt-next-web.vercel.app/) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://user-images.githubusercontent.com/16968934/231095592-330adc52-0337-4c13-8452-938ec169e367.jpeg) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg)
|
||||
|
||||
[](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)
|
||||
|
||||
@ -26,7 +30,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
|
||||
- **Deploy for free with one-click** on Vercel in under 1 minute
|
||||
- Privacy first, all data stored locally in the browser
|
||||
- Responsive design, dark mode and PWA
|
||||
- Fast first screen loading speed (~100kb)
|
||||
- Fast first screen loading speed (~100kb), support streaming response
|
||||
- Awesome prompts powered by [awesome-chatgpt-prompts-zh](https://github.com/PlexPt/awesome-chatgpt-prompts-zh) and [awesome-chatgpt-prompts](https://github.com/f/awesome-chatgpt-prompts)
|
||||
- Automatically compresses chat history to support long conversations while also saving your tokens
|
||||
- One-click export all chat history with full Markdown support
|
||||
@ -49,7 +53,7 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
|
||||
|
||||
- 在 1 分钟内使用 Vercel **免费一键部署**
|
||||
- 精心设计的 UI，响应式设计，支持深色模式，支持 PWA
|
||||
- 极快的首屏加载速度（~100kb）
|
||||
- 极快的首屏加载速度（~100kb），支持流式响应
|
||||
- 隐私安全，所有数据保存在用户浏览器本地
|
||||
- 海量的内置 prompt 列表，来自[中文](https://github.com/PlexPt/awesome-chatgpt-prompts-zh)和[英文](https://github.com/f/awesome-chatgpt-prompts)
|
||||
- 自动压缩上下文聊天记录，在节省 Token 的同时支持超长对话
|
||||
@ -80,7 +84,9 @@ One-Click to deploy well-designed ChatGPT web UI on Vercel.
|
||||
|
||||
## FAQ
|
||||
|
||||
[简体中文 > 常见问题](./docs/faq-cn.md) | [English > FAQ](./docs/faq.en.md)
|
||||
[简体中文 > 常见问题](./docs/faq-cn.md)
|
||||
|
||||
[English > FAQ](./docs/faq-en.md)
|
||||
|
||||
## Keep Updated
|
||||
|
||||
@ -90,13 +96,18 @@ If you have deployed your own project with just one click following the steps ab
|
||||
|
||||
We recommend that you follow the steps below to re-deploy:
|
||||
|
||||
- Delete the original repo;
|
||||
- Fork this project;
|
||||
- Go to the Vercel dashboard, delete the original project, then create a new project and select the project you just forked to redeploy;
|
||||
- Please manually add an environment variable named `OPENAI_API_KEY` and enter your API key as the value during the redeploy process.
|
||||
- Delete the original repository;
|
||||
- Use the fork button in the upper right corner of the page to fork this project;
|
||||
- Choose and deploy in Vercel again, [please see the detailed tutorial](./docs/vercel-cn.md).
|
||||
|
||||
This project will be continuously updated, and after forking the project, the upstream code will be automatically synchronized every day without additional operations.
|
||||
### Enable Automatic Updates
|
||||
After forking the project, due to the limitations imposed by Github, you need to manually enable Workflows and Upstream Sync Action on the Actions page of the forked project. Once enabled, automatic updates will be scheduled every hour:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Manually Updating Code
|
||||
If you want to update instantly, you can check out the [Github documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to learn how to synchronize a forked project with upstream code.
|
||||
|
||||
You can star or watch this project or follow author to get release notifictions in time.
|
||||
@ -206,6 +217,8 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s
|
||||
|
||||
### Sponsor
|
||||
|
||||
> 仅列出捐赠金额 >= 100RMB 的用户。
|
||||
|
||||
[@mushan0x0](https://github.com/mushan0x0)
|
||||
[@ClarenceDan](https://github.com/ClarenceDan)
|
||||
[@zhangjia](https://github.com/zhangjia)
|
||||
@ -215,6 +228,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s
|
||||
[@webees](https://github.com/webees)
|
||||
[@chazzhou](https://github.com/chazzhou)
|
||||
[@hauy](https://github.com/hauy)
|
||||
[@Corwin006](https://github.com/Corwin006)
|
||||
|
||||
### Contributor
|
||||
|
||||
|
||||
23
README_CN.md
23
README_CN.md
@ -38,12 +38,18 @@
|
||||
如果你按照上述步骤一键部署了自己的项目，可能会发现总是提示“存在更新”的问题，这是由于 Vercel 会默认为你创建一个新项目而不是 fork 本项目，这会导致无法正确地检测更新。
|
||||
推荐你按照下列步骤重新部署：
|
||||
|
||||
- 删除掉原先的 repo；
|
||||
- fork 本项目；
|
||||
- 前往 vercel 控制台，删除掉原先的 project，然后新建 project，选择你刚刚 fork 出来的项目重新进行部署即可；
|
||||
- 在重新部署的过程中，请手动添加名为 `OPENAI_API_KEY` 的环境变量，并填入你的 api key 作为值。
|
||||
- 删除掉原先的仓库；
|
||||
- 使用页面右上角的 fork 按钮，fork 本项目；
|
||||
- 在 Vercel 重新选择并部署，[请查看详细教程](./docs/vercel-cn.md#如何新建项目)。
|
||||
|
||||
本项目会持续更新，当你 Fork 项目之后，默认会每天自动同步上游代码，无需额外操作。
|
||||
### 打开自动更新
|
||||
当你 fork 项目之后，由于 Github 的限制，需要手动去你 fork 后的项目的 Actions 页面启用 Workflows，并启用 Upstream Sync Action，启用之后即可开启每小时定时自动更新：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 手动更新代码
|
||||
|
||||
如果你想让手动立即更新，可以查看 [Github 的文档](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 了解如何让 fork 的项目与上游代码同步。
|
||||
|
||||
@ -147,12 +153,7 @@ bash <(curl -s https://raw.githubusercontent.com/Yidadaa/ChatGPT-Next-Web/main/s
|
||||
|
||||
### 捐赠者
|
||||
|
||||
> 仅列出了部分大额打赏，小额打赏（< 100RMB）人数太多，在此不再列出，敬请谅解。
|
||||
|
||||
[@mushan0x0](https://github.com/mushan0x0)
|
||||
[@ClarenceDan](https://github.com/ClarenceDan)
|
||||
[@zhangjia](https://github.com/zhangjia)
|
||||
[@hoochanlon](https://github.com/hoochanlon)
|
||||
> 见英文版。
|
||||
|
||||
### 贡献者
|
||||
|
||||
|
||||
@ -1,5 +1,29 @@
|
||||
@import "../styles/animation.scss";
|
||||
|
||||
.chat-input-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.chat-input-action {
|
||||
display: inline-flex;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
background-color: var(--white);
|
||||
color: var(--black);
|
||||
border: var(--border-in-light);
|
||||
padding: 4px 10px;
|
||||
animation: slide-in ease 0.3s;
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: all ease 0.3s;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-toast {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
|
||||
@ -14,6 +14,11 @@ import DeleteIcon from "../icons/delete.svg";
|
||||
import MaxIcon from "../icons/max.svg";
|
||||
import MinIcon from "../icons/min.svg";
|
||||
|
||||
import LightIcon from "../icons/light.svg";
|
||||
import DarkIcon from "../icons/dark.svg";
|
||||
import AutoIcon from "../icons/auto.svg";
|
||||
import BottomIcon from "../icons/bottom.svg";
|
||||
|
||||
import {
|
||||
Message,
|
||||
SubmitKey,
|
||||
@ -22,6 +27,7 @@ import {
|
||||
ROLES,
|
||||
createMessage,
|
||||
useAccessStore,
|
||||
Theme,
|
||||
} from "../store";
|
||||
|
||||
import {
|
||||
@ -31,6 +37,7 @@ import {
|
||||
isMobileScreen,
|
||||
selectOrCopy,
|
||||
autoGrowTextArea,
|
||||
getCSSVar,
|
||||
} from "../utils";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
@ -60,7 +67,11 @@ export function Avatar(props: { role: Message["role"] }) {
|
||||
const config = useChatStore((state) => state.config);
|
||||
|
||||
if (props.role !== "user") {
|
||||
return <BotIcon className={styles["user-avtar"]} />;
|
||||
return (
|
||||
<div className="no-dark">
|
||||
<BotIcon className={styles["user-avtar"]} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -316,22 +327,78 @@ function useScrollToBottom() {
|
||||
// for auto-scroll
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const scrollToBottom = () => {
|
||||
const dom = scrollRef.current;
|
||||
if (dom) {
|
||||
setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
|
||||
}
|
||||
};
|
||||
|
||||
// auto scroll
|
||||
useLayoutEffect(() => {
|
||||
const dom = scrollRef.current;
|
||||
if (dom && autoScroll) {
|
||||
setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
|
||||
}
|
||||
autoScroll && scrollToBottom();
|
||||
});
|
||||
|
||||
return {
|
||||
scrollRef,
|
||||
autoScroll,
|
||||
setAutoScroll,
|
||||
scrollToBottom,
|
||||
};
|
||||
}
|
||||
|
||||
export function ChatActions(props: {
|
||||
showPromptModal: () => void;
|
||||
scrollToBottom: () => void;
|
||||
hitBottom: boolean;
|
||||
}) {
|
||||
const chatStore = useChatStore();
|
||||
|
||||
const theme = chatStore.config.theme;
|
||||
|
||||
function nextTheme() {
|
||||
const themes = [Theme.Auto, Theme.Light, Theme.Dark];
|
||||
const themeIndex = themes.indexOf(theme);
|
||||
const nextIndex = (themeIndex + 1) % themes.length;
|
||||
const nextTheme = themes[nextIndex];
|
||||
chatStore.updateConfig((config) => (config.theme = nextTheme));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={chatStyle["chat-input-actions"]}>
|
||||
{!props.hitBottom && (
|
||||
<div
|
||||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||||
onClick={props.scrollToBottom}
|
||||
>
|
||||
<BottomIcon />
|
||||
</div>
|
||||
)}
|
||||
{props.hitBottom && (
|
||||
<div
|
||||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||||
onClick={props.showPromptModal}
|
||||
>
|
||||
<BrainIcon />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||||
onClick={nextTheme}
|
||||
>
|
||||
{theme === Theme.Auto ? (
|
||||
<AutoIcon />
|
||||
) : theme === Theme.Light ? (
|
||||
<LightIcon />
|
||||
) : theme === Theme.Dark ? (
|
||||
<DarkIcon />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chat(props: {
|
||||
showSideBar?: () => void;
|
||||
sideBarShowing?: boolean;
|
||||
@ -350,7 +417,7 @@ export function Chat(props: {
|
||||
const [beforeInput, setBeforeInput] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { submitKey, shouldSubmit } = useSubmitHandler();
|
||||
const { scrollRef, setAutoScroll } = useScrollToBottom();
|
||||
const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
|
||||
const [hitBottom, setHitBottom] = useState(false);
|
||||
|
||||
const onChatBodyScroll = (e: HTMLElement) => {
|
||||
@ -672,22 +739,20 @@ export function Chat(props: {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(message.preview || message.content.length === 0) &&
|
||||
!isUser ? (
|
||||
<LoadingIcon />
|
||||
) : (
|
||||
<div
|
||||
className="markdown-body"
|
||||
style={{ fontSize: `${fontSize}px` }}
|
||||
onContextMenu={(e) => onRightClick(e, message)}
|
||||
onDoubleClickCapture={() => {
|
||||
if (!isMobileScreen()) return;
|
||||
setUserInput(message.content);
|
||||
}}
|
||||
>
|
||||
<Markdown content={message.content} />
|
||||
</div>
|
||||
)}
|
||||
<Markdown
|
||||
content={message.content}
|
||||
loading={
|
||||
(message.preview || message.content.length === 0) &&
|
||||
!isUser
|
||||
}
|
||||
onContextMenu={(e) => onRightClick(e, message)}
|
||||
onDoubleClickCapture={() => {
|
||||
if (!isMobileScreen()) return;
|
||||
setUserInput(message.content);
|
||||
}}
|
||||
fontSize={fontSize}
|
||||
parentRef={scrollRef}
|
||||
/>
|
||||
</div>
|
||||
{isUser &&
|
||||
!(message.preview || message.content.length === 0) && (
|
||||
@ -715,6 +780,12 @@ export function Chat(props: {
|
||||
|
||||
<div className={styles["chat-input-panel"]}>
|
||||
<PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
|
||||
|
||||
<ChatActions
|
||||
showPromptModal={() => setShowPromptModal(true)}
|
||||
scrollToBottom={scrollToBottom}
|
||||
hitBottom={hitBottom}
|
||||
/>
|
||||
<div className={styles["chat-input-panel-inner"]}>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
max-height: var(--full-height);
|
||||
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -231,6 +232,7 @@
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
padding-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -389,11 +391,16 @@
|
||||
}
|
||||
|
||||
.chat-input-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding-top: 5px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-top: var(--border-in-light);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
@mixin single-line {
|
||||
|
||||
@ -17,7 +17,7 @@ import LoadingIcon from "../icons/three-dots.svg";
|
||||
import CloseIcon from "../icons/close.svg";
|
||||
|
||||
import { useChatStore } from "../store";
|
||||
import { isMobileScreen } from "../utils";
|
||||
import { getCSSVar, isMobileScreen } from "../utils";
|
||||
import Locale from "../locales";
|
||||
import { Chat } from "./chat";
|
||||
|
||||
@ -66,9 +66,7 @@ function useSwitchTheme() {
|
||||
metaDescriptionDark?.setAttribute("content", "#151515");
|
||||
metaDescriptionLight?.setAttribute("content", "#fafafa");
|
||||
} else {
|
||||
const themeColor = getComputedStyle(document.body)
|
||||
.getPropertyValue("--theme-color")
|
||||
.trim();
|
||||
const themeColor = getCSSVar("--themeColor");
|
||||
metaDescriptionDark?.setAttribute("content", themeColor);
|
||||
metaDescriptionLight?.setAttribute("content", themeColor);
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ import RehypeHighlight from "rehype-highlight";
|
||||
import { useRef, useState, RefObject, useEffect } from "react";
|
||||
import { copyToClipboard } from "../utils";
|
||||
|
||||
import LoadingIcon from "../icons/three-dots.svg";
|
||||
|
||||
export function PreCode(props: { children: any }) {
|
||||
const ref = useRef<HTMLPreElement>(null);
|
||||
|
||||
@ -27,49 +29,78 @@ export function PreCode(props: { children: any }) {
|
||||
);
|
||||
}
|
||||
|
||||
const useLazyLoad = (ref: RefObject<Element>): boolean => {
|
||||
const [isIntersecting, setIntersecting] = useState<boolean>(false);
|
||||
export function Markdown(
|
||||
props: {
|
||||
content: string;
|
||||
loading?: boolean;
|
||||
fontSize?: number;
|
||||
parentRef: RefObject<HTMLDivElement>;
|
||||
} & React.DOMAttributes<HTMLDivElement>,
|
||||
) {
|
||||
const mdRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const parent = props.parentRef.current;
|
||||
const md = mdRef.current;
|
||||
const rendered = useRef(true); // disable lazy loading for bad ux
|
||||
const [counter, setCounter] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIntersecting(true);
|
||||
observer.disconnect();
|
||||
// to triggr rerender
|
||||
setCounter(counter + 1);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.loading]);
|
||||
|
||||
const inView =
|
||||
rendered.current ||
|
||||
(() => {
|
||||
if (parent && md) {
|
||||
const parentBounds = parent.getBoundingClientRect();
|
||||
const mdBounds = md.getBoundingClientRect();
|
||||
const isInRange = (x: number) =>
|
||||
x <= parentBounds.bottom && x >= parentBounds.top;
|
||||
const inView = isInRange(mdBounds.top) || isInRange(mdBounds.bottom);
|
||||
|
||||
if (inView) {
|
||||
rendered.current = true;
|
||||
}
|
||||
|
||||
return inView;
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
const shouldLoading = props.loading || !inView;
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [ref]);
|
||||
|
||||
return isIntersecting;
|
||||
};
|
||||
|
||||
export function Markdown(props: { content: string }) {
|
||||
return (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
|
||||
rehypePlugins={[
|
||||
RehypeKatex,
|
||||
[
|
||||
RehypeHighlight,
|
||||
{
|
||||
detect: false,
|
||||
ignoreMissing: true,
|
||||
},
|
||||
],
|
||||
]}
|
||||
components={{
|
||||
pre: PreCode,
|
||||
}}
|
||||
linkTarget={"_blank"}
|
||||
<div
|
||||
className="markdown-body"
|
||||
style={{ fontSize: `${props.fontSize ?? 14}px` }}
|
||||
ref={mdRef}
|
||||
onContextMenu={props.onContextMenu}
|
||||
onDoubleClickCapture={props.onDoubleClickCapture}
|
||||
>
|
||||
{props.content}
|
||||
</ReactMarkdown>
|
||||
{shouldLoading ? (
|
||||
<LoadingIcon />
|
||||
) : (
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
|
||||
rehypePlugins={[
|
||||
RehypeKatex,
|
||||
[
|
||||
RehypeHighlight,
|
||||
{
|
||||
detect: false,
|
||||
ignoreMissing: true,
|
||||
},
|
||||
],
|
||||
]}
|
||||
components={{
|
||||
pre: PreCode,
|
||||
}}
|
||||
linkTarget={"_blank"}
|
||||
>
|
||||
{props.content}
|
||||
</ReactMarkdown>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
11
app/global.d.ts
vendored
Normal file
11
app/global.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
declare module "*.jpg";
|
||||
declare module "*.png";
|
||||
declare module "*.woff2";
|
||||
declare module "*.woff";
|
||||
declare module "*.ttf";
|
||||
declare module "*.scss" {
|
||||
const content: Record<string, string>;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module "*.svg";
|
||||
1
app/icons/auto.svg
Normal file
1
app/icons/auto.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0) rotate(0 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="分组 1" style="stroke:#333333; stroke-width:1; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(5.666666666666666 5.333333333333333) rotate(0 2.333750009536743 2.6666666666666665)" d="M0 5.33667L0.73 3.66667 M4.6675 5.33667L3.9375 3.66667 M0.729167 3.67L2.32917 0L3.93917 3.67 M0.729167 3.66667L3.93917 3.66667 " /><path id="路径 5" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333333333333333 1.3333333333333333) rotate(0 6.533316666666666 2.6666666666666665)" d="M13.07,5.33C12.45,2.29 9.76,0 6.53,0C3.31,0 0.62,2.29 0,5.33L2,4.67 " /><path id="路径 6" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333333333333333 9.333333333333332) rotate(0 6.533316666666666 2.6666666666666665)" d="M0,0C0.62,3.04 3.31,5.33 6.53,5.33C9.76,5.33 12.45,3.04 13.07,0L11.33,0.67 " /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
app/icons/bottom.svg
Normal file
1
app/icons/bottom.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0) rotate(0 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="路径 1" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8.002766666666666 2) rotate(0 0 4.649916666666667)" d="M0,9.3L0,0 " /><path id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(4 7.333333333333333) rotate(0 4 2)" d="M8,0L4,4L0,0 " /><path id="路径 3" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(4 14) rotate(0 4 0)" d="M8,0L0,0 " /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 958 B |
1
app/icons/dark.svg
Normal file
1
app/icons/dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0) rotate(0 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="路径 1" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333333333333333 1.333333333333485) rotate(0 6.666666666666666 6.666666666666666)" d="M6.67,0L4.91,1.76L1.76,1.76L1.76,4.91L0,6.67L1.76,8.42L1.76,11.58L4.91,11.58L6.67,13.33L8.42,11.58L11.58,11.58L11.58,8.42L13.33,6.67L11.58,4.91L11.58,1.76L8.42,1.76L6.67,0Z " /><path id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(5.666666666666666 5.44771525016904) rotate(0 2.4732087011352872 2.442809041582063)" d="M4,0.55C2.17,-0.78 0,0.55 0,1.89C1.67,1.89 3.33,2.22 3.33,4.89C4.67,4.89 5.83,1.89 4,0.55Z " /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
app/icons/light.svg
Normal file
1
app/icons/light.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs><g opacity="1" transform="translate(0 0) rotate(0 8 8)"><mask id="bg-mask-0" fill="white"><use xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="路径 1" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(4.340166666666667 4.21550000000002) rotate(0 3.6666666666666665 3.666666666666666)" d="M0,3.67C0,5.69 1.64,7.33 3.67,7.33C5.69,7.33 7.33,5.69 7.33,3.67C7.33,1.64 5.69,0 3.67,0C1.64,0 0,1.64 0,3.67Z " /><path id="路径 2" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(12.166666666666666 12.1719333333333) rotate(0 0.4100499999999994 0.41240499999999997)" d="M0.82,0.82L0,0 " /><path id="路径 3" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(3.0068366666666666 3.0654333333332033) rotate(0 0.3411483333333332 0.34309999999999974)" d="M0.68,0.69L0,0 " /><path id="路径 4" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8 1.2155666666667457) rotate(0 0 0.5)" d="M0,1L0,0 " /><path id="路径 5" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(13.333266666666667 8.21550000000002) rotate(0 0.6666666666666666 0)" d="M1.33,0L0,0 " /><path id="路径 6" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(12.5108 3.065499999999929) rotate(0 0.41123333333333295 0.41123333333333295)" d="M0,0.82L0.82,0 " /><path id="路径 7" fill-rule="evenodd" style="fill:#333333" transform="translate(5.673499999999999 5.5488333333332776) rotate(0 1.1666666666666665 2.333333333333333)" opacity="1" d="M2.33,0C1.04,0 0,1.04 0,2.33C0,3.62 1.04,4.67 2.33,4.67L2.33,0Z " /><path id="路径 8" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(1.3333966666666666 7.8821666666667625) rotate(0 0.6666666666666666 0)" d="M0,0L1.33,0 " /><path id="路径 9" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(3.348133333333333 12.3125) rotate(0 0.3421333333333335 0.3421266666666665)" d="M0,0.68L0.68,0 " /><path id="路径 10" style="stroke:#333333; stroke-width:1.3333333333333333; stroke-opacity:1; stroke-dasharray:0 0" transform="translate(8 13.548763333333454) rotate(0 0 0.6666666666666666)" d="M0,1.33L0,0 " /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -171,10 +171,15 @@ export async function requestChatStream(
|
||||
const resTimeoutId = setTimeout(() => finish(), TIME_OUT_MS);
|
||||
const content = await reader?.read();
|
||||
clearTimeout(resTimeoutId);
|
||||
const text = decoder.decode(content?.value, { stream: true });
|
||||
|
||||
if (!content || !content.value) {
|
||||
break;
|
||||
}
|
||||
|
||||
const text = decoder.decode(content.value, { stream: true });
|
||||
responseText += text;
|
||||
|
||||
const done = !content || content.done;
|
||||
const done = content.done;
|
||||
options?.onMessage(responseText, false);
|
||||
|
||||
if (done) {
|
||||
@ -184,8 +189,8 @@ export async function requestChatStream(
|
||||
|
||||
finish();
|
||||
} else if (res.status === 401) {
|
||||
console.error("Anauthorized");
|
||||
options?.onError(new Error("Anauthorized"), res.status);
|
||||
console.error("Unauthorized");
|
||||
options?.onError(new Error("Unauthorized"), res.status);
|
||||
} else {
|
||||
console.error("Stream Error", res.body);
|
||||
options?.onError(new Error("Stream Error"), res.status);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
@mixin light {
|
||||
--theme: light;
|
||||
|
||||
/* color */
|
||||
--white: white;
|
||||
--black: rgb(48, 48, 48);
|
||||
@ -18,6 +20,8 @@
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
--theme: dark;
|
||||
|
||||
/* color */
|
||||
--white: rgb(30, 30, 30);
|
||||
--black: rgb(187, 187, 187);
|
||||
@ -31,6 +35,10 @@
|
||||
--border-in-light: 1px solid rgba(255, 255, 255, 0.192);
|
||||
|
||||
--theme-color: var(--gray);
|
||||
|
||||
div:not(.no-dark) > svg {
|
||||
filter: invert(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.light {
|
||||
@ -282,10 +290,6 @@ pre {
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
|
||||
div:not(.no-dark) > svg {
|
||||
filter: invert(0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
@ -120,3 +120,7 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) {
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export function getCSSVar(varName: string) {
|
||||
return getComputedStyle(document.body).getPropertyValue(varName).trim();
|
||||
}
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
|
||||
# 部署相关问题
|
||||
|
||||
各种部署方式详细教程参考：https://rptzik3toh.feishu.cn/docx/XtrdduHwXoSCGIxeFLlcEPsdn8b
|
||||
|
||||
## 为什么 Docker 部署版本一直提示更新
|
||||
Docker 版本相当于稳定版，latest Docker 总是与 latest release version 一致，目前我们的发版频率是一到两天发一次，所以 Docker 版本会总是落后最新的提交一到两天，这在预期内。
|
||||
|
||||
@ -51,6 +53,18 @@ keepalive_timeout 300; # 设定keep-alive超时时间为65秒
|
||||
- 到服务器的路由通吗？
|
||||
- 域名正确解析了吗？
|
||||
|
||||
## 什么是代理，如何使用？
|
||||
由于OpenAI的IP限制，中国和其他一些国家/地区无法直接连接OpenAI API，需要通过代理。你可以使用代理服务器（正向代理），或者已经设置好的OpenAI API反向代理。
|
||||
- 正向代理例子：科学上网梯子。docker部署的情况下，设置环境变量HTTP_PROXY为你的代理地址（例如：10.10.10.10:8002）。
|
||||
- 反向代理例子：可以用别人搭建的代理地址，或者通过Cloudflare免费设置。设置项目环境变量BASE_URL为你的代理地址。
|
||||
|
||||
## 国内服务器可以部署吗？
|
||||
可以但需要解决的问题：
|
||||
- 需要代理才能连接github和openAI等网站；
|
||||
- 国内服务器要设置域名解析的话需要备案；
|
||||
- 国内政策限制代理访问外网/ChatGPT相关应用，可能被封。
|
||||
|
||||
|
||||
# 使用相关问题
|
||||
|
||||
## 为什么会一直提示“出错了，稍后重试吧”
|
||||
@ -69,17 +83,6 @@ keepalive_timeout 300; # 设定keep-alive超时时间为65秒
|
||||
## 使用时提示"You exceeded your current quota, ..."
|
||||
API KEY有问题。余额不足。
|
||||
|
||||
## 什么是代理，如何使用？
|
||||
由于OpenAI的IP限制，中国和其他一些国家/地区无法直接连接OpenAI API，需要通过代理。你可以使用代理服务器（正向代理），或者已经设置好的OpenAI API反向代理。
|
||||
- 正向代理例子：科学上网梯子。docker部署的情况下，设置环境变量HTTP_PROXY为你的代理地址（http://地址:端口）。
|
||||
- 反向代理例子：可以用别人搭建的代理地址，或者通过Cloudflare免费设置。设置项目环境变量BASE_URL为你的代理地址。
|
||||
|
||||
## 国内服务器可以部署吗？
|
||||
可以但需要解决的问题：
|
||||
- 需要代理才能连接github和openAI等网站；
|
||||
- 国内服务器要设置域名解析的话需要备案；
|
||||
- 国内政策限制代理访问外网/ChatGPT相关应用，可能被封。
|
||||
|
||||
# 网络服务相关问题
|
||||
## Cloudflare是什么？
|
||||
Cloudflare（CF）是一个提供CDN，域名管理，静态页面托管，边缘计算函数部署等的网络服务供应商。常见的用途：购买和/或托管你的域名（解析、动态域名等），给你的服务器套上CDN（可以隐藏ip免被墙），部署网站（CF Pages）。CF免费提供大多数服务。
|
||||
@ -98,6 +101,17 @@ Vercel 是一个全球化的云平台，旨在帮助开发人员更快地构建
|
||||
- 国内服务器供应商：阿里云，腾讯等；
|
||||
国内服务器事项：解析域名需要备案；国内服务器带宽较贵；访问国外网站（Github, openAI等）需要代理。
|
||||
|
||||
## 什么情况下服务器要备案？
|
||||
在中国大陆经营的网站按监管要求需要备案。实际操作中，服务器位于国内且有域名解析的情况下，服务器供应商会执行监管的备案要求，否则会关停服务。通常的规则如下：
|
||||
|服务器位置|域名供应商|是否需要备案|
|
||||
|---|---|---|
|
||||
|国内|国内|是|
|
||||
|国内|国外|是|
|
||||
|国外|国外|否|
|
||||
|国外|国内|通常否|
|
||||
|
||||
换服务器供应商后需要转备案。
|
||||
|
||||
# OpenAI相关问题
|
||||
## 如何注册OpenAI账号？
|
||||
去chat.openai.com注册。你需要：
|
||||
@ -135,3 +149,17 @@ OpenAI只接受指定地区的信用卡（中国信用卡无法使用）。一
|
||||
- 通过上述两个方法就可以定位到你的 token 被快速消耗的原因：
|
||||
- 如果 openai 消费记录异常，但是 docker 日志没有问题，那么说明是 api key 泄露；
|
||||
- 如果 docker 日志发现大量 got access code 爆破记录，那么就是密码被爆破了。
|
||||
|
||||
## API是怎么计费的？
|
||||
OpenAI网站计费说明：https://openai.com/pricing#language-models
|
||||
OpenAI根据token数收费，1000个token通常可代表750个英文单词，或500个汉字。输入（Prompt）和输出（Completion）分别统计费用。
|
||||
|模型|用户输入（Prompt）计费|模型输出（Completion）计费|每次交互最大token数|
|
||||
|----|----|----|----|
|
||||
|gpt-3.5|$0.002 / 1千tokens|$0.002 / 1千tokens|4096|
|
||||
|gpt-4|$0.03 / 1千tokens|$0.06 / 1千tokens|8192|
|
||||
|gpt-4-32K|$0.06 / 1千tokens|$0.12 / 1千tokens|32768|
|
||||
|
||||
## gpt-3.5-turbo和gpt3.5-turbo-0301(或者gpt3.5-turbo-mmdd)模型有什么区别?
|
||||
官方文档说明：https://platform.openai.com/docs/models/gpt-3-5
|
||||
- gpt-3.5-turbo是最新的模型，会不断得到更新。
|
||||
- gpt-3.5-turbo-0301是3月1日定格的模型快照，不会变化，预期3个月后被新快照替代。
|
||||
|
||||
BIN
docs/images/enable-actions-sync.jpg
Normal file
BIN
docs/images/enable-actions-sync.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
docs/images/enable-actions.jpg
Normal file
BIN
docs/images/enable-actions.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
docs/images/vercel/vercel-create-1.jpg
Normal file
BIN
docs/images/vercel/vercel-create-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
docs/images/vercel/vercel-create-2.jpg
Normal file
BIN
docs/images/vercel/vercel-create-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
docs/images/vercel/vercel-create-3.jpg
Normal file
BIN
docs/images/vercel/vercel-create-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
docs/images/vercel/vercel-env-edit.jpg
Normal file
BIN
docs/images/vercel/vercel-env-edit.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
docs/images/vercel/vercel-redeploy.jpg
Normal file
BIN
docs/images/vercel/vercel-redeploy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
39
docs/vercel-cn.md
Normal file
39
docs/vercel-cn.md
Normal file
@ -0,0 +1,39 @@
|
||||
# Vercel 的使用说明
|
||||
|
||||
## 如何新建项目
|
||||
当你从 Github fork 本项目之后，需要重新在 Vercel 创建一个全新的 Vercel 项目来重新部署，你需要按照下列步骤进行。
|
||||
|
||||
|
||||
1. 进入 Vercel 控制台首页；
|
||||
2. 点击 Add New；
|
||||
3. 选择 Project。
|
||||
|
||||
|
||||
1. 在 Import Git Repository 处，搜索 chatgpt-next-web；
|
||||
2. 选中新 fork 的项目，点击 Import。
|
||||
|
||||
|
||||
1. 在项目配置页，点开 Environmane Variables 开始配置环境变量；
|
||||
2. 依次新增名为 OPENAI_API_KEY 和 CODE 的环境变量；
|
||||
3. 填入环境变量对应的值；
|
||||
4. 点击 Add 确认增加环境变量；
|
||||
5. 请确保你添加了 OPENAI_API_KEY，否则无法使用；
|
||||
6. 点击 Deploy，创建完成，耐心等待 5 分钟左右部署完成。
|
||||
|
||||
## 如何增加自定义域名
|
||||
[TODO]
|
||||
|
||||
## 如何更改环境变量
|
||||
|
||||
1. 进去 Vercel 项目内部控制台，点击顶部的 Settings 按钮；
|
||||
2. 点击左侧的 Environment Variables；
|
||||
3. 点击已有条目的右侧按钮；
|
||||
4. 选择 Edit 进行编辑，然后保存即可。
|
||||
|
||||
⚠️️ 注意：每次修改完环境变量，你都需要[重新部署项目](#如何重新部署)来让改动生效！
|
||||
|
||||
## 如何重新部署
|
||||
|
||||
1. 进入 Vercel 项目内部控制台，点击顶部的 Deployments 按钮；
|
||||
2. 选择列表最顶部一条的右侧按钮；
|
||||
3. 点击 Redeploy 即可重新部署。
|
||||
Loading…
Reference in New Issue
Block a user