that has the specified color
7 | div.style.display = 'hidden'
8 | div.style.color = color
9 | document.body.appendChild(div)
10 |
11 | // Retrieve the computed color style of the temporary element
12 | const computedColor = getComputedStyle(div).color
13 | document.body.removeChild(div)
14 |
15 | // Match the RGB or RGBA format using a regular expression
16 | const rgbMatch = computedColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)$/)
17 | if (rgbMatch) {
18 | // Return an RGB object with parsed red, green, and blue values
19 | return [
20 | parseInt(rgbMatch[1], 10),
21 | parseInt(rgbMatch[2], 10),
22 | parseInt(rgbMatch[3], 10),
23 | ]
24 | } else {
25 | // Throw an error if the color format is invalid
26 | throw new Error('Invalid color format')
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/icons/Refresh.tsx:
--------------------------------------------------------------------------------
1 | export default () => {
2 | return (
3 |
4 | )
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/MessageList.tsx:
--------------------------------------------------------------------------------
1 | import { Index } from 'solid-js'
2 |
3 | import { useChat } from '@/context/ChatContext'
4 |
5 | import ErrorMessageItem from './ErrorMessageItem'
6 | import MessageItem from './MessageItem'
7 |
8 | export default () => {
9 | const { messageList, currentAssistantMessage, streaming, currentError, retryLastFetch } = useChat()
10 |
11 | return (
12 | <>
13 |
14 | {(message, index) => (
15 | (!streaming() && !currentError() && !currentAssistantMessage() && index === messageList().length - 1)}
19 | onRetry={retryLastFetch}
20 | />
21 | )}
22 |
23 | {currentAssistantMessage() && (
24 |
29 | )}
30 | {currentError() &&
}
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [push, fork, pull_request, workflow_dispatch, workflow_call]
4 |
5 | jobs:
6 |
7 | typos:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - uses: actions/checkout@v6
11 | - uses: crate-ci/typos@master
12 |
13 | lint:
14 | strategy:
15 | matrix:
16 | os: [ubuntu, windows, macos]
17 | fail-fast: false
18 | runs-on: ${{ matrix.os }}-latest
19 | steps:
20 | - uses: actions/checkout@v6
21 |
22 | - name: Pull changes
23 | run: git pull
24 | continue-on-error: true
25 |
26 | - name: Install pnpm
27 | uses: pnpm/action-setup@v4
28 | with:
29 | version: latest
30 |
31 | - name: Set node
32 | uses: actions/setup-node@v6
33 | with:
34 | node-version: 24.x
35 | cache: pnpm
36 |
37 | - name: Install
38 | run: pnpm install
39 |
40 | - name: Lint
41 | run: pnpm lint
42 |
43 | - name: Astro check
44 | run: pnpm astro sync && pnpx @astrojs/check
45 |
46 | - name: Svelte check
47 | run: pnpx svelte-check
48 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Muspi Merol
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/ErrorMessageItem.tsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onMount } from 'solid-js'
2 |
3 | import type { ErrorMessage } from '@/types'
4 |
5 | import { fetchTranslation } from '@/utils/misc'
6 |
7 | import IconRefresh from './icons/Refresh'
8 |
9 | interface Props {
10 | data: ErrorMessage
11 | onRetry?: () => void
12 | }
13 |
14 | export default ({ data, onRetry }: Props) => {
15 | const [title, setTitle] = createSignal(data.code)
16 | const [description, setDescription] = createSignal(data.message)
17 |
18 | onMount(() => {
19 | fetchTranslation(data.code).then(setTitle)
20 | fetchTranslation(data.message).then(setDescription)
21 | })
22 |
23 | return (
24 |
25 | {data.code &&
{title()}
}
26 |
{description()}
27 | {onRetry && (
28 |
29 |
30 |
31 | 重新生成
32 |
33 |
34 | )}
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/api/translate.ts:
--------------------------------------------------------------------------------
1 | import type { APIRoute } from 'astro'
2 |
3 | import { DEEPL_API_HOST, DEEPL_AUTH_TOKEN, TRANSLATE_PROVIDER, TRANSLATE_TARGET_LANG } from 'astro:env/server'
4 |
5 | import { run } from '../../utils/cf-workers-ai'
6 |
7 | const deeplAuthKey = DEEPL_AUTH_TOKEN
8 | const useDeepL = deeplAuthKey && TRANSLATE_PROVIDER !== 'cf'
9 | const target_lang = TRANSLATE_TARGET_LANG ?? (useDeepL ? 'ZH' : 'chinese')
10 |
11 | export const GET: APIRoute = async(context) => {
12 | const text = context.url.searchParams.get('text')
13 | if (useDeepL) {
14 | const host = DEEPL_API_HOST ?? (deeplAuthKey.endsWith(':fx') ? 'api-free.deepl.com' : 'api.deepl.com')
15 | const headers = { 'Authorization': `DeepL-Auth-Key ${deeplAuthKey}`, 'Content-Type': 'application/json' }
16 | const { translations: [{ text: translated_text, detected_source_language }] } = await fetch(`https://${host}/v2/translate`, { method: 'POST', headers, body: JSON.stringify({ text: [text], target_lang }) }).then(res => res.json())
17 | return new Response(translated_text, { headers: { 'x-detected-source-language': detected_source_language } })
18 | }
19 | const { result: { translated_text } } = await run('@cf/meta/m2m100-1.2b', { text, target_lang })
20 | return new Response(translated_text)
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/tutorial/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { TUTORIAL_MD_URL } from 'astro:env/server'
3 | import Layout from '../../layouts/Layout.astro'
4 | import 'reveal.js/dist/reveal.css'
5 | import 'reveal.js/dist/theme/black.css'
6 | ---
7 |
8 |
15 |
16 |
17 |
22 |
23 |
24 |
40 |
--------------------------------------------------------------------------------
/src/components/ThemeColor.svelte:
--------------------------------------------------------------------------------
1 |
32 |
33 |
51 |
--------------------------------------------------------------------------------
/src/pages/api/moderate.ts:
--------------------------------------------------------------------------------
1 | import type { APIRoute } from 'astro'
2 |
3 | import { OPENAI_API_BASE_URL } from 'astro:env/server'
4 |
5 | const baseUrl = OPENAI_API_BASE_URL.trim().replace(/\/$/, '')
6 |
7 | const FORWARD_HEADERS = ['origin', 'referer', 'cookie', 'user-agent', 'via']
8 |
9 | export const POST: APIRoute = async({ request }) => {
10 | const input = await request.text()
11 |
12 | const headers: Record
= { 'Content-Type': 'application/json', 'Authorization': request.headers.get('Authorization') ?? '' }
13 |
14 | if (baseUrl) request.headers.forEach((val, key) => (FORWARD_HEADERS.includes(key) || key.startsWith('sec-') || key.startsWith('x-')) && (headers[key] = val))
15 |
16 | const body = JSON.stringify({ model: 'text-moderation-latest', input })
17 |
18 | const response = await fetch(`${baseUrl}/v1/moderations`, { method: 'POST', headers, body }).catch((err: Error) => {
19 | console.error(err)
20 |
21 | return new Response(JSON.stringify({
22 | error: {
23 | code: err.name,
24 | message: err.message,
25 | },
26 | }), { status: 500 })
27 | })
28 |
29 | if (!response.ok) return response
30 |
31 | const { results: [{ categories, category_scores }] } = await response.json()
32 |
33 | const flags = Object.keys(categories).filter(key => categories[key])
34 |
35 | return new Response(JSON.stringify({ flags, scores: category_scores }), { headers: { 'content-type': 'application/json' } })
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/controls/Toggle.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
40 |
--------------------------------------------------------------------------------
/src/components/Tips.tsx:
--------------------------------------------------------------------------------
1 | import { useChat } from '@/context/ChatContext'
2 |
3 | export default () => {
4 | const { streaming, messageList, systemRoleEditing } = useChat()
5 |
6 | return (
7 | <>
8 | {
9 | !streaming() && messageList().length === 0 && !systemRoleEditing() && (
10 |
11 |
TIPS
12 |
B 开启/关闭跟随最新消息功能
13 |
/ 聚焦到输入框
14 |
Alt/Option + C 清空上下文
15 |
Alt/Option + O 打开/关闭设置
16 |
Alt/Option + Backspace 删除最后一条消息
17 |
12 |
13 | }>
14 |
15 | {(item, index) => }
16 |
17 |
18 |
19 |
23 |
40 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
58 |
Free Chat
2 |
3 |
4 |
5 |
6 |
7 | > 源于 [chatgpt-demo](https://github.com/anse-app/chatgpt-demo). 部署方式参见原仓库
8 |
9 | ## 分支
10 |
11 | - `main`: 基础分支，包含全部的样式
12 | - `endless`: 加上了基于 token 上限的消息列表裁剪
13 | - `promplate-demo`: 积极开发中，用于展示 [`promplate`](http://promplate.dev/) 库的用途
14 |
15 | ## 环境变量
16 |
17 | 配置本地或者部署的环境变量
18 |
19 | | 名称 | 描述 | 默认 |
20 | | --- | --- | --- |
21 | | `OPENAI_API_KEY` | 你的 OpenAI API Key | `null` |
22 | | `OPENAI_API_TEMPERATURE` | 传给模型的 `temperature` 参数 | `1.0` |
23 | | `HTTPS_PROXY` | 为 OpenAI API 提供代理. | `null` |
24 | | `OPENAI_API_BASE_URL` | 请求 OpenAI API 的自定义 Base URL. | `https://api.openai.com` |
25 | | `HEAD_SCRIPTS` | 在页面的 `` 之前注入分析或其他脚本 | `null` |
26 | | `PUBLIC_SECRET_KEY` | 项目的秘密字符串。用于生成 API 调用的签名 | `null` |
27 | | `SITE_PASSWORD` | 为网站设置密码。如果未设置，则该网站将是公开的 | `null` |
28 | | `OPENAI_API_MODEL` | 使用的 [Chat 模型](https://platform.openai.com/docs/models/model-endpoint-compatibility) | `gpt-4o-mini` |
29 | | `TUTORIAL_MD_URL` | 教程页对应的 markdown 文件 url | `null` |
30 | | `PUBLIC_IFRAME_URL` | 通知栏 iframe 横幅的 url | `null` |
31 | | `UNDICI_UA` | 后端请求的 user-agent | `(forward)` |
32 | | `PUBLIC_RIGHT_ALIGN_MY_MSG` | 用户消息是否右对齐 | `null` |
33 | | `PUBLIC_CL100K_BASE_JSON_URL` | 从 CDN 加载 `cl100k_base.json`，比如可以设为 [jsdelivr.net](https://cdn.jsdelivr.net/npm/tiktoken@1.0.10/encoders/cl100k_base.json) | `null` |
34 | | `PUBLIC_TIKTOKEN_BG_WASM_URL` | 从 CDN 加载 `tiktoken_bg.wasm`，比如可设为 [esm.sh](https://esm.sh/tiktoken/lite/tiktoken_bg.wasm) | `null` |
35 |
36 | ## 参与贡献
37 |
38 | 这个项目的存在要感谢[原项目](https://github.com/anse-app/chatgpt-demo)。
39 |
40 | 感谢我们所有的支持者！🙏
41 |
42 | [](https://github.com/ddiu8081/chatgpt-demo/graphs/contributors)
43 |
44 | ## License
45 |
46 | MIT © [Muspi Merol](./LICENSE)
47 |
--------------------------------------------------------------------------------
/src/components/Footer.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
25 |
26 |
54 |
--------------------------------------------------------------------------------
/src/pages/password.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from '../layouts/Layout.astro'
3 | ---
4 |
5 |
6 |
7 | Please input password
8 |
14 |
15 |
16 |
17 |
51 |
52 |
72 |
--------------------------------------------------------------------------------
/src/components/Popup.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
27 |
--------------------------------------------------------------------------------
/src/utils/tiktoken.ts:
--------------------------------------------------------------------------------
1 | import type { Tiktoken } from 'tiktoken'
2 |
3 | import { PUBLIC_CL100K_BASE_JSON_URL, PUBLIC_TIKTOKEN_BG_WASM_URL } from 'astro:env/client'
4 |
5 | import type { ChatMessage } from '@/types'
6 |
7 | export const tokenCountCache = new Map()
8 |
9 | const countTokensSingleMessage = (enc: Tiktoken, message: ChatMessage) => {
10 | return 4 + enc.encode(message.content, 'all').length // im_start, im_end, role/name, "\n"
11 | }
12 |
13 | const countTokensSingleMessageWithCache = (enc: Tiktoken, cacheIt: boolean, message: ChatMessage) => {
14 | if (tokenCountCache.has(message.content)) return tokenCountCache.get(message.content)!
15 |
16 | const count = countTokensSingleMessage(enc, message)
17 | if (cacheIt) tokenCountCache.set(message.content, count)
18 | return count
19 | }
20 |
21 | export const countTokens = (enc: Tiktoken, messages: ChatMessage[]) => {
22 | if (messages.length === 0) return
23 |
24 | if (!enc) return { total: Infinity }
25 |
26 | const lastMsg = messages.at(-1)
27 | const context = messages.slice(0, -1)
28 |
29 | const countTokens: (cacheIt: boolean, message: ChatMessage) => number = countTokensSingleMessageWithCache.bind(null, enc)
30 |
31 | const countLastMsg = countTokens(false, lastMsg!)
32 | const countContext = context.map(countTokens.bind(null, true)).reduce((a, b) => a + b, 3) // im_start, "assistant", "\n"
33 |
34 | return { countContext, countLastMsg, total: countContext + countLastMsg }
35 | }
36 |
37 | const cl100k_base_json = PUBLIC_CL100K_BASE_JSON_URL
38 | const tiktoken_bg_wasm = PUBLIC_TIKTOKEN_BG_WASM_URL
39 |
40 | async function getBPE() {
41 | return fetch(cl100k_base_json).then(r => r.json())
42 | }
43 |
44 | export const initTikToken = async() => {
45 | const { init } = await import('tiktoken/lite/init')
46 | const [{ bpe_ranks, special_tokens, pat_str }, { Tiktoken }] = await Promise.all([
47 | getBPE().catch(console.error),
48 | import('tiktoken/lite/init'),
49 | fetch(tiktoken_bg_wasm).then(r => r.arrayBuffer()).then(wasm => init(imports => WebAssembly.instantiate(wasm, imports))),
50 | ])
51 | return new Tiktoken(bpe_ranks, special_tokens, pat_str)
52 | }
53 |
--------------------------------------------------------------------------------
/src/hooks/createSmoothStreaming.ts:
--------------------------------------------------------------------------------
1 | import { createSpring } from '@solid-primitives/spring'
2 | import { batch, createEffect, createMemo, createSignal } from 'solid-js'
3 |
4 | interface CreateSmoothStreamingParams {
5 | onDone: (content: string) => void
6 | damping?: number
7 | }
8 |
9 | export function createSmoothStreaming({ onDone, damping = 0.25 }: CreateSmoothStreamingParams) {
10 | const [realValue, setRealValue] = createSignal('')
11 | const [done, setDone] = createSignal(true)
12 | const [currentAssistantMessage, setCurrentAssistantMessage] = createSignal('')
13 |
14 | const stiffness = (damping ** 2) / 4.1
15 | const [_displayedLength, setDisplayedLength] = createSpring(0, { stiffness, damping, precision: 0.001 })
16 | const displayedLength = createMemo(() => Math.round(_displayedLength()))
17 |
18 | createEffect(() => {
19 | const length = displayedLength()
20 | setCurrentAssistantMessage(realValue().slice(0, length))
21 |
22 | if (done() && length >= realValue().length) {
23 | if (currentAssistantMessage()) {
24 | onDone(currentAssistantMessage())
25 | }
26 | // Reset internal state after archiving
27 | batch(() => {
28 | setCurrentAssistantMessage('')
29 | setDisplayedLength(0, { hard: true })
30 | setRealValue('')
31 | })
32 | }
33 | })
34 |
35 | const start = () => {
36 | batch(() => {
37 | setCurrentAssistantMessage('')
38 | setRealValue('')
39 | setDone(false)
40 | setDisplayedLength(0, { hard: true })
41 | })
42 | }
43 |
44 | const append = (delta: string) => {
45 | setRealValue((prev) => {
46 | const next = prev + delta
47 | if (delta.trim())
48 | setDisplayedLength(next.length)
49 |
50 | return next
51 | })
52 | }
53 |
54 | const finish = () => {
55 | batch(() => {
56 | setDisplayedLength(realValue().length + 7)
57 | setDone(true)
58 | })
59 | }
60 |
61 | const clear = () => {
62 | batch(() => {
63 | setCurrentAssistantMessage('')
64 | setDisplayedLength(0, { hard: true })
65 | setRealValue('')
66 | setDone(true)
67 | })
68 | }
69 |
70 | return {
71 | currentAssistantMessage,
72 | start,
73 | append,
74 | finish,
75 | clear,
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "free-chat",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "prepare": "node prepare.cjs",
6 | "dev": "astro dev",
7 | "build": "astro build",
8 | "preview": "astro preview",
9 | "astro": "astro",
10 | "lint": "eslint .",
11 | "lint:fix": "eslint . --fix"
12 | },
13 | "dependencies": {
14 | "@astrojs/netlify": "~6.6.0",
15 | "@astrojs/node": "~9.5.0",
16 | "@astrojs/solid-js": "~5.1.0",
17 | "@astrojs/svelte": "~7.2.0",
18 | "@astrojs/vercel": "~9.0.0",
19 | "@joplin/turndown-plugin-gfm": "^1.0.63",
20 | "@lobehub/icons-static-svg": "^1.65.0",
21 | "@solid-primitives/clipboard": "^1.6.2",
22 | "@solid-primitives/event-listener": "^2.4.3",
23 | "@solid-primitives/scheduled": "^1.5.2",
24 | "@solid-primitives/spring": "^0.1.2",
25 | "@xsai/stream-text": "^0.2.2",
26 | "astro": "~5.16.0",
27 | "eslint": "~9.39.0",
28 | "eventsource-parser": "~3.0.6",
29 | "highlight.js": "~11.11.1",
30 | "katex": "^0.16.22",
31 | "lenis": "~1.3.11",
32 | "markdown-it": "~14.1.0",
33 | "markdown-it-highlightjs": "~4.2.0",
34 | "markdown-it-katex": "~2.0.3",
35 | "partial-json": "^0.1.7",
36 | "reveal.js": "~5.2.1",
37 | "solid-js": "~1.9.9",
38 | "solid-toast": "^0.5.0",
39 | "svelte": "~5.46.0",
40 | "svelte-sonner": "~1.0.5",
41 | "tiktoken": "~1.0.22",
42 | "turndown": "^7.2.1",
43 | "vite": "~7.3.0",
44 | "xsfetch": "^0.3.5"
45 | },
46 | "devDependencies": {
47 | "@antfu/eslint-config": "~6.7.0",
48 | "@iconify/json": "latest",
49 | "@julr/unocss-preset-heropatterns": "~2.0.0",
50 | "@sveltejs/vite-plugin-svelte": "~6.2.1",
51 | "@types/markdown-it": "~14.1.2",
52 | "@types/reveal.js": "~5.2.0",
53 | "@types/turndown": "^5.0.5",
54 | "@typescript-eslint/parser": "^8.42.0",
55 | "@unocss/core": "~66.4.2",
56 | "@unocss/eslint-config": "~66.4.2",
57 | "@unocss/extractor-svelte": "~66.4.2",
58 | "@unocss/reset": "~66.4.2",
59 | "@vite-pwa/astro": "~1.2.0",
60 | "bits-ui": "~2.14.0",
61 | "eslint-plugin-astro": "~1.5.0",
62 | "eslint-plugin-format": "~1.1.0",
63 | "eslint-plugin-svelte": "~3.13.0",
64 | "svelte-inview": "~4.0.4",
65 | "svelte-persisted-store": "^0.12.0",
66 | "svelte-ripple-action": "~2.0.0",
67 | "unocss": "~66.4.2",
68 | "unocss-preset-scrollbar": "~3.2.0",
69 | "vite-plugin-devtools-json": "~1.0.0"
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { pwaInfo } from 'virtual:pwa-info'
3 | import { HEAD_SCRIPTS } from 'astro:env/client'
4 |
5 | export interface Props {
6 | title: string;
7 | }
8 |
9 | const { title } = Astro.props
10 | const origin = Astro.request.headers.get('host')
11 | ---
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {title} - {origin}
24 |
25 | { HEAD_SCRIPTS && }
26 | { pwaInfo && }
27 | { import.meta.env.PROD && pwaInfo && }
28 |
29 |
30 |
31 |
32 |
33 |
34 |
57 |
58 | { Astro.cookies.get('dark') === undefined
59 | &&
67 | }
68 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Free Chat
2 |
3 |
4 |
5 |
6 |
7 | > Forked from [chatgpt-demo](https://github.com/anse-app/chatgpt-demo). Find deployment instructions in the original repository.
8 |
9 | ## Branches
10 |
11 | - `main`: the base branch containing all the styles
12 | - `endless`: includes token-based message list trimming
13 | - `promplate-demo`: active developed, for demonstrating the usage of [`promplate`](http://promplate.dev/)
14 |
15 | ## Environment Variables
16 |
17 | You can control the website through environment variables.
18 |
19 | | Name | Description | Default |
20 | | --- | --- | --- |
21 | | `OPENAI_API_KEY` | Your API Key for OpenAI. | `null` |
22 | | `OPENAI_API_TEMPERATURE` | Default `temperature` parameter for model. | `1.0` |
23 | | `HTTPS_PROXY` | Provide proxy for OpenAI API. | `null` |
24 | | `OPENAI_API_BASE_URL` | Custom base url for OpenAI API. | `https://api.openai.com` |
25 | | `HEAD_SCRIPTS` | Inject analytics or other scripts before `` of the page | `null` |
26 | | `PUBLIC_SECRET_KEY` | Secret string for the project. Use for generating signatures for API calls | `null` |
27 | | `SITE_PASSWORD` | Set password for site. If not set, site will be public | `null` |
28 | | `OPENAI_API_MODEL` | ID of the model to use. [Model endpoint compatibility](https://platform.openai.com/docs/models/model-endpoint-compatibility) | `gpt-4o-mini` |
29 | | `TUTORIAL_MD_URL` | url of the tutorial markdown file | `null` |
30 | | `PUBLIC_IFRAME_URL` | url of the advertisement iframe | `null` |
31 | | `UNDICI_UA` | user-agent for backend requests | `(forward)` |
32 | | `PUBLIC_RIGHT_ALIGN_MY_MSG` | whether user messages should be right-aligned | `null` |
33 | | `PUBLIC_CL100K_BASE_JSON_URL` | CDN url for `cl100k_base.json`, such as [file at jsdelivr.net](https://cdn.jsdelivr.net/npm/tiktoken@1.0.10/encoders/cl100k_base.json) | `null` |
34 | | `PUBLIC_TIKTOKEN_BG_WASM_URL` | CDN url for `tiktoken_bg.wasm`, such as [file at esm.sh](https://esm.sh/tiktoken/lite/tiktoken_bg.wasm) | `null` |
35 |
36 | ## Contributing
37 |
38 | This project exists thanks to all those who contributed to [the original project](https://github.com/anse-app/chatgpt-demo).
39 |
40 | Thank you to all our supporters!🙏
41 |
42 | [](https://github.com/ddiu8081/chatgpt-demo/graphs/contributors)
43 |
44 | ## License
45 |
46 | MIT © [Muspi Merol](./LICENSE)
47 |
--------------------------------------------------------------------------------
/src/components/BackTop.astro:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
29 |
30 |
31 |
32 |
33 |
}>
34 |
props.setCurrentSystemRoleSettings('')} class="sys-edit-btn rd-50% p-1">
35 |
36 |
自定义场景
37 |
38 |
39 | {props.currentSystemRoleSettings()}
40 |
41 |
50 |
51 |
52 |
53 |
54 | 自定义场景
55 |
56 |
通过 system message 设定指令、角色、情境等
57 |
58 |
66 |
67 |
70 |
72 |
68 | {getTokensUsage()?.total ?? 0}
69 | tokens
70 |
71 |
72 |
73 | )
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/ParallaxBackground.tsx:
--------------------------------------------------------------------------------
1 | import { createSpring } from '@solid-primitives/spring'
2 | import { createEffect, createSignal, onMount } from 'solid-js'
3 |
4 | import { useChat } from '@/context/ChatContext'
5 |
6 | export default () => {
7 | const { isStick, streaming, messageList, currentError } = useChat()
8 |
9 | let bgd!: HTMLDivElement
10 | const [bgdAnimating, setBgdAnimating] = createSignal(false)
11 |
12 | onMount(() => {
13 | const damping = 0.5
14 | const stiffness = (damping ** 2) / 4.1
15 | const [bgdOffset, setBgdOffset] = createSpring(0, { stiffness, damping })
16 | const [bgdOffsetTarget, setBgdOffsetTarget] = createSignal(-document.documentElement.scrollTop / 10)
17 |
18 | function applyBgdOffset(value: number) {
19 | bgd.style.setProperty('--scroll', `${value}pt`)
20 | }
21 |
22 | // Update target on scroll
23 | window.addEventListener('scroll', () => {
24 | setBgdOffsetTarget(-document.documentElement.scrollTop / 10)
25 | })
26 |
27 | // Update target on resize
28 | window.addEventListener('resize', () => {
29 | setBgdOffsetTarget(-document.documentElement.scrollTop / 10)
30 | })
31 |
32 | // Animate when streaming
33 | createEffect(() => {
34 | if (streaming()) {
35 | isStick() // Track the signal change
36 | setBgdAnimating(true)
37 | }
38 | })
39 |
40 | // Animate when new user message is added
41 | createEffect(() => {
42 | if (messageList().at(-1)?.role === 'user') {
43 | setBgdAnimating(true)
44 | }
45 | })
46 |
47 | // Animate when error occurs in stick-to-bottom mode
48 | createEffect(() => {
49 | if (currentError() && isStick()) {
50 | setBgdAnimating(true)
51 | }
52 | })
53 |
54 | // Stop animating when spring reaches target
55 | createEffect(() => {
56 | const reached = Math.round(bgdOffset()) === Math.round(bgdOffsetTarget())
57 | if (reached && !(isStick() && streaming())) setBgdAnimating(false)
58 | })
59 |
60 | // Apply offset
61 | createEffect(() => {
62 | applyBgdOffset(bgdAnimating() ? bgdOffset() : bgdOffsetTarget())
63 | })
64 |
65 | // Drive spring
66 | createEffect(() => {
67 | setBgdOffset(bgdOffsetTarget(), { hard: !bgdAnimating() })
68 | })
69 |
70 | // Listen for Alt+C clear event
71 | window.addEventListener('keydown', (event) => {
72 | if (event.altKey && event.code === 'KeyC') {
73 | setBgdAnimating(true)
74 | }
75 | }, false)
76 | })
77 |
78 | return (
79 |
83 | )
84 | }
85 |
--------------------------------------------------------------------------------
/src/components/Header.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
49 |
50 |
51 |
52 | 已支持
53 |
54 | {@html openai} OpenAI 最新的 gpt-5 系列模型
55 |
56 |
15 |
16 |
17 |
18 |
19 | { Astro.cookies.get('privacyPolicy')?.value !== 'confirmed' &&
}
20 |
(show = false)} class="fixed inset-0 z-100 bg-black/10 transition-opacity duration-800 dark:bg-black/40" class:pointer-events-none={!show} class:op-0={!show} ontransitionstart={() => { transitioning = true }} ontransitionend={() => { transitioning = false }}>
47 |
48 |
73 |
74 |
--------------------------------------------------------------------------------
/src/components/controls/ModelSelector.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/Themetoggle.svelte:
--------------------------------------------------------------------------------
1 |
48 |
49 |
50 |
51 |
70 |
71 |
103 |
--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
1 | import { presetHeroPatterns } from '@julr/unocss-preset-heropatterns'
2 | import extractorSvelte from '@unocss/extractor-svelte'
3 | import { defineConfig, presetAttributify, presetIcons, presetTypography, presetWebFonts, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss'
4 | import { presetScrollbar } from 'unocss-preset-scrollbar'
5 |
6 | export default defineConfig({
7 | presets: [
8 | presetWind3(),
9 | presetAttributify(),
10 | presetIcons({ scale: 1.1 }),
11 | presetWebFonts({ provider: 'google', fonts: { mono: 'JetBrains Mono', fira: 'Fira Code:400,500,600,700' } }),
12 | presetTypography({ cssExtend: { 'ul,ol': { 'padding-left': '2.25em', 'position': 'relative' } } }),
13 | presetHeroPatterns(),
14 | presetScrollbar(),
15 | ],
16 | extractors: [extractorSvelte()],
17 | transformers: [transformerVariantGroup(), transformerDirectives()],
18 | shortcuts: {
19 | 'fc': 'flex justify-center',
20 | 'fi': 'flex items-center',
21 | 'fb': 'flex justify-between',
22 | 'fcc': 'fc items-center',
23 | 'fie': 'fi justify-end',
24 | 'col-fcc': 'flex-col fcc',
25 | 'inline-fcc': 'inline-flex items-center justify-center',
26 | 'base-focus': 'focus:(bg-op-20 ring-0 outline-none)',
27 | 'b-slate-link': 'border-b border-($c-fg-70 none) hover:border-dashed',
28 | 'gpt-title': 'text-lg font-extrabold sm:text-xl',
29 | 'gpt-subtitle': 'bg-gradient-(from-emerald-400 to-sky-200 to-r) bg-clip-text text-lg text-transparent font-extrabold sm:text-xl',
30 | 'gpt-copy-btn': 'absolute top-12px right-12px z-3 fcc border b-transparent w-fit min-w-8 h-8 p-2 bg-white/4 hover:bg-white/8 text-white/85 dark:(bg-$c-fg-5 hover:bg-$c-fg-10 text-$c-fg-90) cursor-pointer transition-all duration-150 active:scale-90 op-0 group-hover:op-100 rounded-1.1 backdrop-blur-10',
31 | 'gpt-retry-btn': 'fi gap-1 px-2 py-0.5 op-70 ring-1.2 ring-$c-fg-50 rounded-md text-sm code]:font-mono code]:(font-700 dark:font-600) [&_li_p]:my-0 [&_li]:my-1 *]:mt-2 *]:mb-2 [&_li]:relative [&_ul]:pl-7 [&_ol]:pl-7 [&_ul>li]:(pl-1.5 list-none before:absolute before:-left-3.8 before:top-sm before:-translate-y-1/2 before:rounded-full before:bg-$c-fg-50 before:px-0.8 before:py-0.36 before:content-empty) [&_ol>li]:(marker:text-$c-fg-70 pl-1.5) overflow-x-overlay',
44 | },
45 | })
46 |
--------------------------------------------------------------------------------
/src/components/Sponsorship.svelte:
--------------------------------------------------------------------------------
1 |
50 |
51 |
52 | {#if showModal}
53 |
54 |
大家好！
55 |
56 | 我，
Muspi Merol
57 | 是一名学生、一位活跃的开源开发者，致力于将 JavaScript 的 DX 带给 Python 生态。生活上，我是一个理想主义者，半个 e/acc，典型的 ENFP🐕，欢迎交朋友~
58 |
59 |
我关注 LLM 及其应用、开发者工具、社交、教育以及设计。
60 |
大家的持续捐赠鼓励是我维护该免费产品的重要动力，所以我每周在检测到一次长对话之后会提示一次捐赠。谢谢理解！
61 |
62 |
63 | 感谢您的使用！我们非常喜欢听到大家的意见，因此有任何问题 / 建议 / 合作意向，欢迎提给我！您可以通过
64 |
邮件
65 | /
66 |
微信
67 | /
68 |
Telegram 群组联系我。
但捐赠留言是没法回复的哦~
69 |
70 | {#await import('./Sponsor.svelte').finally(() => { svgReady = true }) then QR}
71 | {#if showQR && pngReady && svgReady}
72 |
73 |
74 |
75 | {/if}
76 | {/await}
77 | {#if showButton}
78 |
79 |
80 |
81 | {/if}
82 |
87 |
88 |
89 | {#each parsed as { translated }}
90 | {#if translated}
91 | {translated}
92 | {/if}
93 | {:else}
94 | translated text will display here
95 | {/each}
96 |
97 |
109 |
110 |
