├── .env.example
├── assets
└── imgs
│ └── favicon.png
├── registerSW.js
├── web-dev-server.config.mjs
├── .gitignore
├── manifest.webmanifest
├── README-zh.md
├── package.json
├── lang.js
├── data.js
├── README.md
├── main.css
├── sw.js
├── utils.js
├── script.js
├── workbox.js
├── index.html
└── tailwind.css
/.env.example:
--------------------------------------------------------------------------------
1 | target=
2 |
--------------------------------------------------------------------------------
/assets/imgs/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyio/chatgpt-vue/HEAD/assets/imgs/favicon.png
--------------------------------------------------------------------------------
/registerSW.js:
--------------------------------------------------------------------------------
1 | const isDev = location.port !== ''
2 | const enableSW = 1 || !isDev
3 |
4 | if ('serviceWorker' in navigator && enableSW) {
5 | window.addEventListener('load', () => {
6 | navigator.serviceWorker.register('/sw.js', {
7 | scope: '/'
8 | })
9 | }
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/web-dev-server.config.mjs:
--------------------------------------------------------------------------------
1 | import proxy from 'koa-proxies';
2 | import * as dotenv from 'dotenv'
3 | dotenv.config()
4 |
5 | export default {
6 | port: 8000,
7 | middleware: [
8 | proxy('/api/generate', {
9 | target: process.env.target,
10 | changeOrigin: true,
11 | logs: true
12 | }),
13 | ],
14 | };
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 | .vercel/
4 |
5 | # generated types
6 | .astro/
7 |
8 | # dependencies
9 | node_modules/
10 |
11 | # logs
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 |
17 | # environment variables
18 | .env
19 | .env.production
20 |
21 | # macOS-specific files
22 | .DS_Store
23 |
24 | # Local
25 | *.local
26 |
27 | **/.DS_Store
28 |
29 | # Editor directories and files
30 | .idea
31 | .env
32 |
--------------------------------------------------------------------------------
/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ChatGPT",
3 | "short_name": "ChatGPT",
4 | "icons": [
5 | {
6 | "src": "assets/imgs/favicon.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "assets/imgs/favicon.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "start_url": "/",
17 | "display": "standalone",
18 | "background_color": "#ffffff",
19 | "lang": "zh",
20 | "scope": "/"
21 | }
--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
1 | # ChatGPT Vue Client (no build, easy start)
2 |
3 | 背景：目前 ChatGPT 项目通常将前后端代码放在同一个项目中，需要编译和运行，而且使用了 TypeScript 等高级特性，对于新手用户来说，上手有一定难度，特别是 Vue 相关项目比较少。
4 |
5 | 因此，我们开发了这个项目，它可以简化学习和使用 ChatGPT API 的过程。
6 |
7 | ## 特点
8 |
9 | - 采用简单的 HTML + Script，结合 Vue 3 + Options api 实现
10 | - 代码不编译，不压缩，可直接在生产环境调试
11 | - 界面和体验仿照 ChatGPT 官网
12 |
13 | 
14 |
15 |
16 | ## 使用
17 |
18 | 本项目只是前端部分，需要配合接口服务使用。
19 |
20 | 我们推荐的 API 服务项目是：https://github.com/ddiu8081/chatgpt-demo
21 |
22 | ## 开发
23 |
24 | ```sh
25 | npm i
26 | npm run dev
27 | ```
28 |
29 | 以上是本项目的开发命令。
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "chatgpt-vue",
3 | "version": "1.0.0",
4 | "description": "[中文说明](./README-zh.md)",
5 | "main": "data.js",
6 | "scripts": {
7 | "dev": "web-dev-server --node-resolve --open --watch"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/cyio/chatgpt-vue.git"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "bugs": {
17 | "url": "https://github.com/cyio/chatgpt-vue/issues"
18 | },
19 | "homepage": "https://github.com/cyio/chatgpt-vue#readme",
20 | "devDependencies": {
21 | "@web/dev-server": "^0.1.38",
22 | "koa-proxies": "^0.12.3"
23 | },
24 | "dependencies": {
25 | "dotenv": "^16.0.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/lang.js:
--------------------------------------------------------------------------------
1 | function isChineseLang() {
2 | const lang = navigator.language || navigator.userLanguage;
3 | return lang.indexOf('zh') !== -1
4 | }
5 |
6 | const useEnglish = !isChineseLang()
7 |
8 | const _lang = {
9 | curSet: {
10 | en: 'Current setting',
11 | zh: '当前设定'
12 | },
13 | roleKeywords: {
14 | en: 'role keywords',
15 | zh: '角色关键字'
16 | },
17 | resetThread: {
18 | en: 'Reset Thread',
19 | zh: '重置会话'
20 | },
21 | mode: {
22 | en: 'Mode',
23 | zh: '模式'
24 | },
25 | light: {
26 | en: 'Light',
27 | zh: '浅色'
28 | },
29 | dark: {
30 | en: 'Dark',
31 | zh: '深色'
32 | },
33 | setAPI: {
34 | en: 'Set API',
35 | zh: '设置 API'
36 | },
37 | version: {
38 | en: 'version',
39 | zh: '版本号'
40 | }
41 | }
42 |
43 | const lang = new Proxy(_lang, {
44 | get: function(target, prop) {
45 | if (target[prop]) {
46 | return useEnglish ? target[prop].en : target[prop].zh;
47 | }
48 | }
49 | });
50 |
51 | export {
52 | lang,
53 | useEnglish
54 | }
--------------------------------------------------------------------------------
/data.js:
--------------------------------------------------------------------------------
1 | const prompts = [
2 | {
3 | name: 'Free Mode',
4 | nameZh: '自由模式',
5 | prompt: ''
6 | },
7 | {
8 | name: 'Computer Expert',
9 | nameZh: '电脑专家',
10 | prompt: '你作为计算机专家,提供IT支持'
11 | },
12 | {
13 | name: 'Code Expert',
14 | nameZh: '代码专家',
15 | prompt: '你来协助代码实现，只输出代码'
16 | },
17 | {
18 | name: 'Document Proofreading',
19 | nameZh: '润色文档',
20 | prompt: '你来润色文档'
21 | },
22 | {
23 | name: 'Translation Assistant',
24 | nameZh: '翻译助手',
25 | prompt: '你提供中英互译服务，后续我的输入仅作翻译'
26 | },
27 | {
28 | name: 'English Correction',
29 | nameZh: '英语矫正',
30 | prompt: '你来做英语矫正'
31 | },
32 | {
33 | name: 'SQL Translator',
34 | nameZh: 'SQL翻译',
35 | prompt: 'Translate my natural language query into SQL'
36 | },
37 | {
38 | name: 'Family Doctor',
39 | nameZh: '家庭医生',
40 | prompt: '你提供家庭医生服务，根据我的描述，判断符合哪些病症，最可能是哪种病，给出发病原理和建议'
41 | }
42 | ]
43 |
44 | function getPrompts(prompts, useEnglish) {
45 | if (useEnglish) {
46 | return prompts
47 | } else {
48 | return prompts.map(i => ({
49 | ...i,
50 | name: i.nameZh
51 | }))
52 | }
53 | }
54 |
55 | const version = '1.0.10'
56 |
57 | export {
58 | prompts,
59 | getPrompts,
60 | version,
61 | }
62 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ChatGPT Vue Client (no build, easy start)
2 |
3 | [中文说明](./README-zh.md)
4 |
5 | Background: Currently, the ChatGPT project usually puts the front-end and back-end code in the same project, which requires compilation and running, and uses advanced features such as TypeScript. For novice users, it is difficult to get started, especially for Vue-related projects that are relatively rare.
6 |
7 | Therefore, we have developed this project, which can simplify the process of learning and using the ChatGPT API.
8 |
9 | ## Features
10 |
11 | - Using simple HTML + Script, combined with Vue 3 + Options API implementation
12 | - The code is not compiled or compressed, and can be debugged directly in the production environment
13 | - The interface and experience are modeled after the ChatGPT official website
14 |
15 |
16 |
17 |
18 | ## Usage
19 |
20 | This project is only the front-end part and needs to be used with the server service.
21 |
22 | We recommend using the API service project: https://github.com/ddiu8081/chatgpt-demo
23 |
24 | ## Development
25 |
26 | ```sh
27 | npm i
28 | npm run dev
29 | ```
30 |
31 | The above is the development command for this project.
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | .copy-btn {
2 | transition: opacity .3s ease-in-out;
3 | opacity: 0;
4 | padding: 2px 6px;
5 | position: absolute;
6 | right: 2px;
7 | font-size: 13px;
8 | font-weight: 700;
9 | line-height: 20px;
10 | color: #333;
11 | cursor: pointer;
12 | background-color: #eee;
13 | background-image: linear-gradient(#fcfcfc,#eee);
14 | border: 1px solid #d5d5d5;
15 | border-radius: 3px;
16 | }
17 | .copy-btn.copied {
18 | animation: blink 1s;
19 | }
20 | .hljs:hover .copy-btn {
21 | opacity: 1;
22 | }
23 | .bot-content .copy-btn-content {
24 | bottom: 2px;
25 | opacity: 0.1;
26 | }
27 | .copy-btn-content:hover {
28 | opacity: 1;
29 | }
30 | .clippy {
31 | position: relative;
32 | top: 3px;
33 | }
34 | .active\:bg-gray-800 {
35 | --tw-bg-opacity: 1;
36 | background-color: rgba(52,53,65,var(--tw-bg-opacity));
37 | }
38 |
39 | .blink-cursor {
40 | position: relative;
41 | display: inline-block;
42 | height: 30px;
43 | }
44 |
45 | .blink-cursor::before {
46 | content: '';
47 | position: absolute;
48 | top: 0;
49 | left: 3px;
50 | width: 2px;
51 | height: 30px;
52 | background-color: black;
53 | animation: blink 1s infinite;
54 | }
55 |
56 | @keyframes blink {
57 | 50% {
58 | opacity: 0;
59 | }
60 | }
61 |
62 | #side-bar.open-side {
63 | position: fixed;
64 | bottom: 0;
65 | top: 0;
66 | left: 0;
67 | display: flex;
68 | z-index: 40;
69 | }
70 |
71 | .close-btn svg {
72 | color: #333;
73 | }
74 |
75 | .nav-bottom {
76 | position: absolute;
77 | bottom: 40px;
78 | color: #eee;
79 | left: 20px;
80 | font-size: 12px;
81 | }
--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
1 | importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js')
2 |
3 | const { precaching, routing, strategies } = workbox;
4 |
5 | const {registerRoute} = workbox.routing;
6 | const {CacheFirst, NetworkFirst} = workbox.strategies;
7 | const {CacheableResponse, CacheableResponsePlugin} = workbox.cacheableResponse;
8 |
9 | self.skipWaiting(); // 跳过等待，立即激活 SW
10 | // self.clients.claim(); // 控制所有同源客户端，确保使用新缓存策略，不要用？
11 |
12 | // 离线优先，安装后立即生效
13 | self.addEventListener('install', (event) => {
14 | const urls = [{
15 | url: "data.js",
16 | revision: null
17 | }, {
18 | url: "utils.js",
19 | revision: null
20 | }, {
21 | url: "lang.js",
22 | revision: null
23 | }, {
24 | url: "script.js",
25 | revision: null
26 | }, {
27 | url: "tailwind.css",
28 | revision: null
29 | }, {
30 | url: "main.css",
31 | revision: null
32 | }, {
33 | url: "registerSW.js",
34 | revision: null
35 | }, {
36 | url: "index.html",
37 | revision: null
38 | }, {
39 | url: "manifest.webmanifest",
40 | revision: null
41 | }];
42 |
43 | const precacheManifest = urls.map((url) => {
44 | return {
45 | url: url.url,
46 | revision: url.revision || null
47 | };
48 | });
49 |
50 | precaching.precacheAndRoute(precacheManifest);
51 | });
52 |
53 | // 清理缓存
54 | self.addEventListener('activate', (event) => {
55 | event.waitUntil(caches.keys().then((cacheNames) => {
56 | return Promise.all(
57 | cacheNames.filter((cacheName) => {
58 | return cacheName.startsWith('workbox-');
59 | }).map((cacheName) => {
60 | return caches.delete(cacheName);
61 | })
62 | );
63 | }));
64 | });
65 |
66 | // registerRoute(({request}) => request.destination === 'style', new CacheFirst());
67 | registerRoute(({request}) => {
68 | console.log('request.destination', request.destination)
69 | return /script|document/.test(request.destination)
70 | }, new NetworkFirst({
71 | networkTimeoutSeconds: 3,
72 | cacheName: 'static-resources-critical',
73 | plugins: [
74 | new CacheableResponsePlugin({
75 | statuses: [200],
76 | }),
77 | ],
78 | }));
79 |
80 | registerRoute(({request}) => {
81 | console.log('request.destination', request.destination)
82 | return /image|style/.test(request.destination)
83 | }, new CacheFirst({
84 | networkTimeoutSeconds: 3,
85 | cacheName: 'static-resources',
86 | plugins: [
87 | new CacheableResponsePlugin({
88 | statuses: [200],
89 | }),
90 | ],
91 | }));
92 |
93 | // // 处理 navigation 请求
94 | // routing.registerRoute(
95 | // new strategies.NetworkFirst({
96 | // cacheName: 'navigation-cache',
97 | // plugins: [
98 | // new CacheableResponsePlugin({
99 | // statuses: [0, 200],
100 | // })
101 | // ]
102 | // }),
103 | // // new workbox.NavigationRoute(({ event }) => {
104 | // // return '/';
105 | // // })
106 | // );
107 |
--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
1 | const mockMsgList = [{"role":"user","content":"hi"},{"role":"assistant","content":"Hello! I am an AI language model. How can I assist you today?"},{"role":"user","content":"js 代码实现二分查找"},{"role":"assistant","content":"下面是用JavaScript实现二分查找的示例代码：\n\n```javascript\nfunction binarySearch(arr, target) {\n let left = 0;\n let right = arr.length - 1;\n\n while (left <= right) {\n let mid = Math.floor((left + right) / 2);\n\n if (arr[mid] === target) {\n return mid;\n } else if (arr[mid] < target) {\n left = mid + 1;\n } else {\n right = mid - 1;\n }\n }\n\n return -1;\n}\n\nconst arr = [1, 3, 5, 7, 9];\nconst target = 5;\nconst result = binarySearch(arr, target);\n\nconsole.log(result); // 2\n```\n\n这个函数接受两个参数：一个已排序的数组和要查找的目标值。它使用while循环来迭代左右指针，直到找到目标值或者左指针超过了右指针。在每次循环中，它计算中间索引，然后比较中间值和目标值的大小。如果中间值等于目标值，函数返回中间索引；如果中间值小于目标值，左指针移动到中间索引的右侧；如果中间值大于目标值，右指针移动到中间索引的左侧。如果没有找到目标值，函数返回-1。\n\n在上面的例子中，我们使用了一个已排序的数组[1, 3, 5, 7, 9]和要查找的目标值5。函数返回2，因为5在数组中的索引是2。"},{"role":"user","content":"分条描述如何实现财富自由"},{"role":"assistant","content":"实现财富自由是一个长期的过程，需要有计划地进行，以下是一些步骤：\n\n1. 制定财务计划：了解自己的资产和负债，制定一个详细的财务计划，包括设定目标、预算、储蓄计划和投资计划。\n\n2. 节约开支：查看自己的开支，找到可以减少的地方，例如减少娱乐开支、购物开支等。将节约下来的资金用于储蓄和投资。\n\n3. 储蓄：建立一个储蓄计划，每月将一定比例的收入储蓄起来，可以选择高利率的储蓄账户或定期存款，用于紧急情况和长期储备。\n\n4. 投资：将一部分资金投资于股票、基金、房地产等领域，以获得更高的收益。在投资前，需要了解投资风险和投资目标，并选择适合自己的投资方式。\n\n5. 建立被动收入来源：除了工资以外，建立被动收入来源可以帮助实现财务自由。可以选择投资于房地产出租、股息、版权收益等领域，以获得稳定的被动收入。\n\n6. 持续学习：了解财务知识、投资知识、理财知识等，可以帮助更好地管理自己的财务，提高投资的成功率。\n\n以上是一些实现财富自由的步骤，需要长期坚持和不断努力。"},{"role":"user","content":"以下 json，增加 ja 字段表示日文，只输出代码\n\nconst _lang = {\n curSet: {\n en: 'Current setting',\n zh: '当前设定'\n },\n roleKeywords: {\n en: 'role keywords',\n zh: '角色关键字'\n }\n}"},{"role":"assistant","content":"const _lang = {\n curSet: {\n en: 'Current setting',\n zh: '当前设定',\n ja: '現在の設定'\n },\n roleKeywords: {\n en: 'role keywords',\n zh: '角色关键字',\n ja: '役割のキーワード'\n }\n};"}]
2 | const isDev = location.port !== ''
3 |
4 | function initMarkdown() {
5 | if (!window.hljs || !window.markdownit) return
6 | hljs.highlightAll();
7 | const md = window.markdownit({
8 | linkify: true,
9 | highlight: function(str, lang) {
10 | if (lang && hljs.getLanguage(lang)) {
11 | try {
12 | return `` +
13 | hljs.highlight(str, { language: lang, ignoreIllegals: true}).value +
14 | '
';
15 | } catch (__) {}
16 | }
17 |
18 | return '' + md.utils.escapeHtml(str) + '
';
19 | }
20 | });
21 | return md
22 | }
23 |
24 | function initClipboard(target) {
25 | const clipboard = new ClipboardJS(target, {
26 | text: function(trigger) {
27 | const contentEl = trigger.nextElementSibling;
28 | return contentEl.getAttribute('data-raw') || contentEl.innerText;
29 | }
30 | });
31 |
32 | clipboard.on('success', function(e) {
33 | e.trigger.classList.add('copied')
34 | e.clearSelection()
35 | });
36 |
37 | return clipboard
38 | }
39 |
40 | // 适配不同 api 入参
41 | function getPayload(messages, apiType = 'default') {
42 | if (apiType === 'default') {
43 | return { messages }
44 | } else {
45 | const userMessages = messages.filter(i => i.role === 'user')
46 | const prompt = userMessages[userMessages.length - 1]?.content
47 | return { prompt }
48 | }
49 | }
50 |
51 | function scrollHelper(dom) {
52 | let userScrollFlag = false
53 |
54 | function onScroll() {
55 | console.log('onScroll')
56 | if (!userScrollFlag) {
57 | console.log('onScroll 2')
58 | userScrollFlag = true
59 | dom.removeEventListener('scroll', onScroll)
60 | }
61 | }
62 |
63 | function registerScroll() {
64 | userScrollFlag = false
65 | dom.addEventListener('scroll', onScroll);
66 | }
67 |
68 | function getUserScrollFlag() {
69 | return userScrollFlag
70 | }
71 |
72 | return {
73 | getUserScrollFlag,
74 | onScroll,
75 | registerScroll
76 | }
77 | }
78 |
79 | const fetchConfig = async (key) => {
80 | let url = `https://api.oaker.bid/api/data?key=${key}`
81 | let res = await fetch(url)
82 | let json = await res.json()
83 | return json
84 | }
85 |
86 | export {
87 | mockMsgList,
88 | initMarkdown,
89 | initClipboard,
90 | getPayload,
91 | scrollHelper,
92 | fetchConfig,
93 | isDev
94 | }
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | import {
2 | mockMsgList,
3 | isDev,
4 | initMarkdown,
5 | initClipboard,
6 | scrollHelper,
7 | getPayload,
8 | fetchConfig,
9 | } from './utils.js'
10 | import { getPrompts, version, prompts } from './data.js'
11 | import { lang, useEnglish } from './lang.js'
12 |
13 | let threadContainer = null
14 | let md
15 | let tId
16 |
17 | const defaultPrompts = getPrompts(prompts, useEnglish)
18 |
19 | const app = Vue.createApp({
20 | data() {
21 | return {
22 | message: "",
23 | currentAssistantMessage: '',
24 | messageList: [],
25 | role: '',
26 | loading: false,
27 | controller: null,
28 | useLight: true,
29 | sideOpened: false,
30 | activePromptName: defaultPrompts[0].name,
31 | systemRolePrompt: '',
32 | search: '',
33 | api: null,
34 | apiType: 'default', // default or single
35 | prompts: defaultPrompts,
36 | useEnglish,
37 | lang,
38 | mdReady: false,
39 | version,
40 | scrollHelper: null
41 | }
42 | },
43 | methods: {
44 | resetThread() {
45 | this.messageList = []
46 | },
47 | handleKeydown(e) {
48 | if (e.isComposing || e.shiftKey) {
49 | return
50 | }
51 | if (e.key === 'Enter') {
52 | this.onSend()
53 | }
54 | },
55 | onSend() {
56 | if (!this.api) {
57 | this.inputApi()
58 | return
59 | }
60 | if (this.loading) return
61 | this.scrollEnd()
62 | this.messageList.push({
63 | role: 'user',
64 | content: this.message,
65 | })
66 | this.messageList.push({
67 | role: 'assistant',
68 | content: '',
69 | })
70 | this.requestWithLatestMessage()
71 | },
72 | async requestWithLatestMessage() {
73 | this.loading = true
74 | this.message = ''
75 | this.currentAssistantMessage = ''
76 | try {
77 | const controller = new AbortController()
78 | this.controller = controller
79 | const messages = [...this.messageList].filter(i => i.content !== '')
80 | if (this.systemRolePrompt) {
81 | messages.unshift({
82 | role: 'system',
83 | content: this.systemRolePrompt
84 | })
85 | }
86 | const response = await fetch(this.api, {
87 | method: 'POST',
88 | body: JSON.stringify(getPayload(messages, this.apiType)),
89 | signal: controller.signal,
90 | })
91 | if (!response.ok) {
92 | throw new Error(response.statusText)
93 | }
94 | const data = response.body
95 | if (!data) {
96 | throw new Error('No data')
97 | }
98 | this.scrollHelper.registerScroll()
99 |
100 | const reader = data.getReader()
101 | const decoder = new TextDecoder('utf-8')
102 | let done = false
103 |
104 | while (!done) {
105 | const { value, done: readerDone } = await reader.read()
106 | // isDev && console.log('debug', +new Date(), value, readerDone)
107 | if (value) {
108 | let char = decoder.decode(value)
109 | if (char === '\n' && this.currentAssistantMessage.endsWith('\n')) {
110 | continue
111 | }
112 | if (char) {
113 | this.currentAssistantMessage += char
114 | }
115 | }
116 | done = readerDone
117 | }
118 | } catch (e) {
119 | console.error(e)
120 | this.loading = false
121 | this.controller = null
122 | return
123 | }
124 | this.resEnd()
125 | },
126 | archiveCurrentMessage() {
127 | if (this.currentAssistantMessage) {
128 | console.log('archiveCurrentMessage')
129 | this.setLastMsgContent()
130 | this.currentAssistantMessage = ''
131 | this.loading = false
132 | this.controller = null
133 | } else {
134 | this.currentAssistantMessage = '...'
135 | }
136 | },
137 | stopStreamFetch() {
138 | if (this.controller) {
139 | this.controller.abort()
140 | this.archiveCurrentMessage()
141 | }
142 | },
143 | setLastMsgContent() {
144 | const lastMsg = this.messageList[this.messageList.length - 1]
145 | if (lastMsg.role === 'assistant') {
146 | lastMsg.content = this.currentAssistantMessage
147 | }
148 | },
149 | resEnd() {
150 | if (this.currentAssistantMessage) {
151 | this.currentAssistantMessage = ''
152 | this.loading = false
153 | this.controller = null
154 | }
155 | },
156 | scrollEnd() {
157 | setTimeout(() => {
158 | threadContainer && threadContainer.scrollTo({top: threadContainer.scrollHeight, behavior: 'smooth'})
159 | }, 100)
160 | },
161 | renderMD(content) {
162 | return this.mdReady ? md.render(content) : content;
163 | },
164 | toggleColor() {
165 | this.useLight = !this.useLight
166 | },
167 | onInput() {
168 | const {inputRef} = this.$refs
169 | inputRef.style.height = 'auto'; // 当删减输入时，scrollHeight 重置
170 | inputRef.style.height = inputRef.scrollHeight + 'px';
171 | },
172 | setPromot({prompt, name}) {
173 | this.activePromptName = name
174 | this.systemRolePrompt = prompt
175 | console.info('activePromptName', name)
176 | this.sideOpened = false
177 | this.messageList = []
178 | },
179 | onSearchEnter() {
180 | const cur = this.filteredItems[0]
181 | this.search = ''
182 | if (cur) {
183 | this.setPromot(cur)
184 | this.$refs.inputRef.focus();
185 | }
186 | },
187 | handleOutsideClick(event) {
188 | // const shouldExclude = ['mobile-menu', 'mobile-menu-icon'].some(key => event.target.parentElement.classList.contains(key))
189 | // if (!shouldExclude && this.sideOpened) {
190 | // this.sideOpened = false
191 | // }
192 | },
193 | setApi(value, value1) {
194 | if (value) {
195 | this.api = value
196 | localStorage.setItem('api', this.api)
197 | }
198 | if (value1) {
199 | this.apiType = value1
200 | localStorage.setItem('api-type', this.apiType)
201 | }
202 | },
203 | inputApi() {
204 | const append = this.api ? `\n\n当前 api: ${this.api}` : ''
205 | const input = prompt('请指定 api，形如：https://your.com/api/generate' + append)
206 | if (input) {
207 | this.setApi(input)
208 | }
209 | },
210 | handleMarkdown() {
211 | setTimeout(() => {
212 | md = initMarkdown()
213 | initClipboard('.copy-btn-trigger')
214 | this.mdReady = true
215 | }, 400)
216 | }
217 | },
218 | computed: {
219 | colorScheme() {
220 | return this.useLight ? 'light' : 'dark'
221 | },
222 | filteredItems() {
223 | return this.prompts.filter(
224 | i => i.name.toLowerCase().includes(this.search.toLowerCase())
225 | )
226 | }
227 | },
228 | watch: {
229 | 'currentAssistantMessage': function (val, oldVal) {
230 | if (val) {
231 | if (!oldVal) {
232 | this.setLastMsgContent()
233 | } else {
234 | // 这里没必要节流，stream data 间隔在 50ms 以上
235 | this.messageList[this.messageList.length - 1].content = val
236 | // 当用户滚动时，停止自动滚动
237 | if (!this.scrollHelper.getUserScrollFlag()) {
238 | this.scrollEnd()
239 | }
240 | }
241 | }
242 | }
243 | },
244 | directives: {
245 | 'outside-click': {
246 | mounted(el, binding) {
247 | el.clickOutsideEvent = function(event) {
248 | if (!(el === event.target || el.contains(event.target))) {
249 | binding.value(event);
250 | }
251 | };
252 | document.body.addEventListener('click', el.clickOutsideEvent);
253 | },
254 | unmounted(el) {
255 | document.body.removeEventListener('click', el.clickOutsideEvent);
256 | }
257 | }
258 | },
259 | mounted() {
260 | const params = new URLSearchParams(location.search)
261 | let apiParam = params.get('api') || localStorage.getItem('api')
262 | isDev && (apiParam = '/api/generate')
263 | isDev && (this.messageList = mockMsgList)
264 | const apiTypeParam = params.get('api-type') || localStorage.getItem('api-type')
265 | this.setApi(apiParam, apiTypeParam)
266 | this.handleMarkdown()
267 | threadContainer = document.querySelector('.thread-container')
268 | this.scrollHelper = scrollHelper(threadContainer)
269 | fetchConfig('/chatgpt/prompts').then(res => {
270 | console.log(res)
271 | this.prompts = getPrompts(res, useEnglish)
272 | this.activePromptName = this.prompts[0].name
273 | })
274 | }
275 | })
276 | app.mount('#app')
277 |
--------------------------------------------------------------------------------
/workbox.js:
--------------------------------------------------------------------------------
1 | define(["exports"],(function(t){"use strict";try{self["workbox:core:6.5.3"]&&_()}catch(t){}const e=(t,...e)=>{let s=t;return e.length>0&&(s+=` :: ${JSON.stringify(e)}`),s};class s extends Error{constructor(t,s){super(e(t,s)),this.name=t,this.details=s}}try{self["workbox:routing:6.5.3"]&&_()}catch(t){}const n=t=>t&&"object"==typeof t?t:{handle:t};class i{constructor(t,e,s="GET"){this.handler=n(e),this.match=t,this.method=s}setCatchHandler(t){this.catchHandler=n(t)}}class r extends i{constructor(t,e,s){super((({url:e})=>{const s=t.exec(e.href);if(s&&(e.origin===location.origin||0===s.index))return s.slice(1)}),e,s)}}class o{constructor(){this.t=new Map,this.i=new Map}get routes(){return this.t}addFetchListener(){self.addEventListener("fetch",(t=>{const{request:e}=t,s=this.handleRequest({request:e,event:t});s&&t.respondWith(s)}))}addCacheListener(){self.addEventListener("message",(t=>{if(t.data&&"CACHE_URLS"===t.data.type){const{payload:e}=t.data,s=Promise.all(e.urlsToCache.map((e=>{"string"==typeof e&&(e=[e]);const s=new Request(...e);return this.handleRequest({request:s,event:t})})));t.waitUntil(s),t.ports&&t.ports[0]&&s.then((()=>t.ports[0].postMessage(!0)))}}))}handleRequest({request:t,event:e}){const s=new URL(t.url,location.href);if(!s.protocol.startsWith("http"))return;const n=s.origin===location.origin,{params:i,route:r}=this.findMatchingRoute({event:e,request:t,sameOrigin:n,url:s});let o=r&&r.handler;const c=t.method;if(!o&&this.i.has(c)&&(o=this.i.get(c)),!o)return;let a;try{a=o.handle({url:s,request:t,event:e,params:i})}catch(t){a=Promise.reject(t)}const h=r&&r.catchHandler;return a instanceof Promise&&(this.o||h)&&(a=a.catch((async n=>{if(h)try{return await h.handle({url:s,request:t,event:e,params:i})}catch(t){t instanceof Error&&(n=t)}if(this.o)return this.o.handle({url:s,request:t,event:e});throw n}))),a}findMatchingRoute({url:t,sameOrigin:e,request:s,event:n}){const i=this.t.get(s.method)||[];for(const r of i){let i;const o=r.match({url:t,sameOrigin:e,request:s,event:n});if(o)return i=o,(Array.isArray(i)&&0===i.length||o.constructor===Object&&0===Object.keys(o).length||"boolean"==typeof o)&&(i=void 0),{route:r,params:i}}return{}}setDefaultHandler(t,e="GET"){this.i.set(e,n(t))}setCatchHandler(t){this.o=n(t)}registerRoute(t){this.t.has(t.method)||this.t.set(t.method,[]),this.t.get(t.method).push(t)}unregisterRoute(t){if(!this.t.has(t.method))throw new s("unregister-route-but-not-found-with-method",{method:t.method});const e=this.t.get(t.method).indexOf(t);if(!(e>-1))throw new s("unregister-route-route-not-registered");this.t.get(t.method).splice(e,1)}}let c;const a=()=>(c||(c=new o,c.addFetchListener(),c.addCacheListener()),c);function h(t,e,n){let o;if("string"==typeof t){const s=new URL(t,location.href);o=new i((({url:t})=>t.href===s.href),e,n)}else if(t instanceof RegExp)o=new r(t,e,n);else if("function"==typeof t)o=new i(t,e,n);else{if(!(t instanceof i))throw new s("unsupported-route-type",{moduleName:"workbox-routing",funcName:"registerRoute",paramName:"capture"});o=t}return a().registerRoute(o),o}const u={googleAnalytics:"googleAnalytics",precache:"precache-v2",prefix:"workbox",runtime:"runtime",suffix:"undefined"!=typeof registration?registration.scope:""},l=t=>[u.prefix,t,u.suffix].filter((t=>t&&t.length>0)).join("-"),f=t=>t||l(u.precache),w=t=>t||l(u.runtime);function d(t,e){const s=e();return t.waitUntil(s),s}try{self["workbox:precaching:6.5.3"]&&_()}catch(t){}function p(t){if(!t)throw new s("add-to-cache-list-unexpected-type",{entry:t});if("string"==typeof t){const e=new URL(t,location.href);return{cacheKey:e.href,url:e.href}}const{revision:e,url:n}=t;if(!n)throw new s("add-to-cache-list-unexpected-type",{entry:t});if(!e){const t=new URL(n,location.href);return{cacheKey:t.href,url:t.href}}const i=new URL(n,location.href),r=new URL(n,location.href);return i.searchParams.set("__WB_REVISION__",e),{cacheKey:i.href,url:r.href}}class y{constructor(){this.updatedURLs=[],this.notUpdatedURLs=[],this.handlerWillStart=async({request:t,state:e})=>{e&&(e.originalRequest=t)},this.cachedResponseWillBeUsed=async({event:t,state:e,cachedResponse:s})=>{if("install"===t.type&&e&&e.originalRequest&&e.originalRequest instanceof Request){const t=e.originalRequest.url;s?this.notUpdatedURLs.push(t):this.updatedURLs.push(t)}return s}}}class g{constructor({precacheController:t}){this.cacheKeyWillBeUsed=async({request:t,params:e})=>{const s=(null==e?void 0:e.cacheKey)||this.h.getCacheKeyForURL(t.url);return s?new Request(s,{headers:t.headers}):t},this.h=t}}let R;async function m(t,e){let n=null;if(t.url){n=new URL(t.url).origin}if(n!==self.location.origin)throw new s("cross-origin-copy-response",{origin:n});const i=t.clone(),r={headers:new Headers(i.headers),status:i.status,statusText:i.statusText},o=e?e(r):r,c=function(){if(void 0===R){const t=new Response("");if("body"in t)try{new Response(t.body),R=!0}catch(t){R=!1}R=!1}return R}()?i.body:await i.blob();return new Response(c,o)}function v(t,e){const s=new URL(t);for(const t of e)s.searchParams.delete(t);return s.href}class q{constructor(){this.promise=new Promise(((t,e)=>{this.resolve=t,this.reject=e}))}}const U=new Set;try{self["workbox:strategies:6.5.3"]&&_()}catch(t){}function L(t){return"string"==typeof t?new Request(t):t}class b{constructor(t,e){this.u={},Object.assign(this,e),this.event=e.event,this.l=t,this.p=new q,this.g=[],this.R=[...t.plugins],this.m=new Map;for(const t of this.R)this.m.set(t,{});this.event.waitUntil(this.p.promise)}async fetch(t){const{event:e}=this;let n=L(t);if("navigate"===n.mode&&e instanceof FetchEvent&&e.preloadResponse){const t=await e.preloadResponse;if(t)return t}const i=this.hasCallback("fetchDidFail")?n.clone():null;try{for(const t of this.iterateCallbacks("requestWillFetch"))n=await t({request:n.clone(),event:e})}catch(t){if(t instanceof Error)throw new s("plugin-error-request-will-fetch",{thrownErrorMessage:t.message})}const r=n.clone();try{let t;t=await fetch(n,"navigate"===n.mode?void 0:this.l.fetchOptions);for(const s of this.iterateCallbacks("fetchDidSucceed"))t=await s({event:e,request:r,response:t});return t}catch(t){throw i&&await this.runCallbacks("fetchDidFail",{error:t,event:e,originalRequest:i.clone(),request:r.clone()}),t}}async fetchAndCachePut(t){const e=await this.fetch(t),s=e.clone();return this.waitUntil(this.cachePut(t,s)),e}async cacheMatch(t){const e=L(t);let s;const{cacheName:n,matchOptions:i}=this.l,r=await this.getCacheKey(e,"read"),o=Object.assign(Object.assign({},i),{cacheName:n});s=await caches.match(r,o);for(const t of this.iterateCallbacks("cachedResponseWillBeUsed"))s=await t({cacheName:n,matchOptions:i,cachedResponse:s,request:r,event:this.event})||void 0;return s}async cachePut(t,e){const n=L(t);var i;await(i=0,new Promise((t=>setTimeout(t,i))));const r=await this.getCacheKey(n,"write");if(!e)throw new s("cache-put-with-no-response",{url:(o=r.url,new URL(String(o),location.href).href.replace(new RegExp(`^${location.origin}`),""))});var o;const c=await this.v(e);if(!c)return!1;const{cacheName:a,matchOptions:h}=this.l,u=await self.caches.open(a),l=this.hasCallback("cacheDidUpdate"),f=l?await async function(t,e,s,n){const i=v(e.url,s);if(e.url===i)return t.match(e,n);const r=Object.assign(Object.assign({},n),{ignoreSearch:!0}),o=await t.keys(e,r);for(const e of o)if(i===v(e.url,s))return t.match(e,n)}(u,r.clone(),["__WB_REVISION__"],h):null;try{await u.put(r,l?c.clone():c)}catch(t){if(t instanceof Error)throw"QuotaExceededError"===t.name&&await async function(){for(const t of U)await t()}(),t}for(const t of this.iterateCallbacks("cacheDidUpdate"))await t({cacheName:a,oldResponse:f,newResponse:c.clone(),request:r,event:this.event});return!0}async getCacheKey(t,e){const s=`${t.url} | ${e}`;if(!this.u[s]){let n=t;for(const t of this.iterateCallbacks("cacheKeyWillBeUsed"))n=L(await t({mode:e,request:n,event:this.event,params:this.params}));this.u[s]=n}return this.u[s]}hasCallback(t){for(const e of this.l.plugins)if(t in e)return!0;return!1}async runCallbacks(t,e){for(const s of this.iterateCallbacks(t))await s(e)}*iterateCallbacks(t){for(const e of this.l.plugins)if("function"==typeof e[t]){const s=this.m.get(e),n=n=>{const i=Object.assign(Object.assign({},n),{state:s});return e[t](i)};yield n}}waitUntil(t){return this.g.push(t),t}async doneWaiting(){let t;for(;t=this.g.shift();)await t}destroy(){this.p.resolve(null)}async v(t){let e=t,s=!1;for(const t of this.iterateCallbacks("cacheWillUpdate"))if(e=await t({request:this.request,response:e,event:this.event})||void 0,s=!0,!e)break;return s||e&&200!==e.status&&(e=void 0),e}}class C{constructor(t={}){this.cacheName=w(t.cacheName),this.plugins=t.plugins||[],this.fetchOptions=t.fetchOptions,this.matchOptions=t.matchOptions}handle(t){const[e]=this.handleAll(t);return e}handleAll(t){t instanceof FetchEvent&&(t={event:t,request:t.request});const e=t.event,s="string"==typeof t.request?new Request(t.request):t.request,n="params"in t?t.params:void 0,i=new b(this,{event:e,request:s,params:n}),r=this.q(i,s,e);return[r,this.U(r,i,s,e)]}async q(t,e,n){let i;await t.runCallbacks("handlerWillStart",{event:n,request:e});try{if(i=await this.L(e,t),!i||"error"===i.type)throw new s("no-response",{url:e.url})}catch(s){if(s instanceof Error)for(const r of t.iterateCallbacks("handlerDidError"))if(i=await r({error:s,event:n,request:e}),i)break;if(!i)throw s}for(const s of t.iterateCallbacks("handlerWillRespond"))i=await s({event:n,request:e,response:i});return i}async U(t,e,s,n){let i,r;try{i=await t}catch(r){}try{await e.runCallbacks("handlerDidRespond",{event:n,request:s,response:i}),await e.doneWaiting()}catch(t){t instanceof Error&&(r=t)}if(await e.runCallbacks("handlerDidComplete",{event:n,request:s,response:i,error:r}),e.destroy(),r)throw r}}class E extends C{constructor(t={}){t.cacheName=f(t.cacheName),super(t),this._=!1!==t.fallbackToNetwork,this.plugins.push(E.copyRedirectedCacheableResponsesPlugin)}async L(t,e){const s=await e.cacheMatch(t);return s||(e.event&&"install"===e.event.type?await this.C(t,e):await this.O(t,e))}async O(t,e){let n;const i=e.params||{};if(!this._)throw new s("missing-precache-entry",{cacheName:this.cacheName,url:t.url});{const s=i.integrity,r=t.integrity,o=!r||r===s;n=await e.fetch(new Request(t,{integrity:"no-cors"!==t.mode?r||s:void 0})),s&&o&&"no-cors"!==t.mode&&(this.N(),await e.cachePut(t,n.clone()))}return n}async C(t,e){this.N();const n=await e.fetch(t);if(!await e.cachePut(t,n.clone()))throw new s("bad-precaching-response",{url:t.url,status:n.status});return n}N(){let t=null,e=0;for(const[s,n]of this.plugins.entries())n!==E.copyRedirectedCacheableResponsesPlugin&&(n===E.defaultPrecacheCacheabilityPlugin&&(t=s),n.cacheWillUpdate&&e++);0===e?this.plugins.push(E.defaultPrecacheCacheabilityPlugin):e>1&&null!==t&&this.plugins.splice(t,1)}}E.defaultPrecacheCacheabilityPlugin={cacheWillUpdate:async({response:t})=>!t||t.status>=400?null:t},E.copyRedirectedCacheableResponsesPlugin={cacheWillUpdate:async({response:t})=>t.redirected?await m(t):t};class O{constructor({cacheName:t,plugins:e=[],fallbackToNetwork:s=!0}={}){this.k=new Map,this.K=new Map,this.P=new Map,this.l=new E({cacheName:f(t),plugins:[...e,new g({precacheController:this})],fallbackToNetwork:s}),this.install=this.install.bind(this),this.activate=this.activate.bind(this)}get strategy(){return this.l}precache(t){this.addToCacheList(t),this.T||(self.addEventListener("install",this.install),self.addEventListener("activate",this.activate),this.T=!0)}addToCacheList(t){const e=[];for(const n of t){"string"==typeof n?e.push(n):n&&void 0===n.revision&&e.push(n.url);const{cacheKey:t,url:i}=p(n),r="string"!=typeof n&&n.revision?"reload":"default";if(this.k.has(i)&&this.k.get(i)!==t)throw new s("add-to-cache-list-conflicting-entries",{firstEntry:this.k.get(i),secondEntry:t});if("string"!=typeof n&&n.integrity){if(this.P.has(t)&&this.P.get(t)!==n.integrity)throw new s("add-to-cache-list-conflicting-integrities",{url:i});this.P.set(t,n.integrity)}if(this.k.set(i,t),this.K.set(i,r),e.length>0){const t=`Workbox is precaching URLs without revision info: ${e.join(", ")}\nThis is generally NOT safe. Learn more at https://bit.ly/wb-precache`;console.warn(t)}}}install(t){return d(t,(async()=>{const e=new y;this.strategy.plugins.push(e);for(const[e,s]of this.k){const n=this.P.get(s),i=this.K.get(e),r=new Request(e,{integrity:n,cache:i,credentials:"same-origin"});await Promise.all(this.strategy.handleAll({params:{cacheKey:s},request:r,event:t}))}const{updatedURLs:s,notUpdatedURLs:n}=e;return{updatedURLs:s,notUpdatedURLs:n}}))}activate(t){return d(t,(async()=>{const t=await self.caches.open(this.strategy.cacheName),e=await t.keys(),s=new Set(this.k.values()),n=[];for(const i of e)s.has(i.url)||(await t.delete(i),n.push(i.url));return{deletedURLs:n}}))}getURLsToCacheKeys(){return this.k}getCachedURLs(){return[...this.k.keys()]}getCacheKeyForURL(t){const e=new URL(t,location.href);return this.k.get(e.href)}getIntegrityForCacheKey(t){return this.P.get(t)}async matchPrecache(t){const e=t instanceof Request?t.url:t,s=this.getCacheKeyForURL(e);if(s){return(await self.caches.open(this.strategy.cacheName)).match(s)}}createHandlerBoundToURL(t){const e=this.getCacheKeyForURL(t);if(!e)throw new s("non-precached-url",{url:t});return s=>(s.request=new Request(t),s.params=Object.assign({cacheKey:e},s.params),this.strategy.handle(s))}}let x;const N=()=>(x||(x=new O),x);class k extends i{constructor(t,e){super((({request:s})=>{const n=t.getURLsToCacheKeys();for(const i of function*(t,{ignoreURLParametersMatching:e=[/^utm_/,/^fbclid$/],directoryIndex:s="index.html",cleanURLs:n=!0,urlManipulation:i}={}){const r=new URL(t,location.href);r.hash="",yield r.href;const o=function(t,e=[]){for(const s of[...t.searchParams.keys()])e.some((t=>t.test(s)))&&t.searchParams.delete(s);return t}(r,e);if(yield o.href,s&&o.pathname.endsWith("/")){const t=new URL(o.href);t.pathname+=s,yield t.href}if(n){const t=new URL(o.href);t.pathname+=".html",yield t.href}if(i){const t=i({url:r});for(const e of t)yield e.href}}(s.url,e)){const e=n.get(i);if(e){return{cacheKey:e,integrity:t.getIntegrityForCacheKey(e)}}}}),t.strategy)}}t.NavigationRoute=class extends i{constructor(t,{allowlist:e=[/./],denylist:s=[]}={}){super((t=>this.W(t)),t),this.j=e,this.M=s}W({url:t,request:e}){if(e&&"navigate"!==e.mode)return!1;const s=t.pathname+t.search;for(const t of this.M)if(t.test(s))return!1;return!!this.j.some((t=>t.test(s)))}},t.cleanupOutdatedCaches=function(){self.addEventListener("activate",(t=>{const e=f();t.waitUntil((async(t,e="-precache-")=>{const s=(await self.caches.keys()).filter((s=>s.includes(e)&&s.includes(self.registration.scope)&&s!==t));return await Promise.all(s.map((t=>self.caches.delete(t)))),s})(e).then((t=>{})))}))},t.clientsClaim=function(){self.addEventListener("activate",(()=>self.clients.claim()))},t.createHandlerBoundToURL=function(t){return N().createHandlerBoundToURL(t)},t.precacheAndRoute=function(t,e){!function(t){N().precache(t)}(t),function(t){const e=N();h(new k(e,t))}(e)},t.registerRoute=h}));
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ChatGPT
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
46 |
56 |
57 |
58 |
114 |
116 |
117 |
118 |
120 |
128 |
130 |
137 |
148 |
149 |
150 |
151 |
152 | Developed using gpt-3.5-turbo API. Please refresh the page if you encounter an error.
153 |
155 |
156 |
159 |
160 |
161 |
216 |
217 |
218 |
219 |