wood/ChatGPT-Tailwind
1
0
Fork 0
mirror of https://github.com/woodchen-ink/ChatGPT-Tailwind.git synced 2025-07-18 14:02:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: wood:0.0.1
Branches Tags
wood:main
wood:0.0.3
wood:0.0.2
wood:0.0.1
...
compare: wood:main
Branches Tags
wood:main
wood:0.0.3
wood:0.0.2
wood:0.0.1

22 Commits
0.0.1 ... main

Author SHA1 Message Date
wood chen
a6cd8d1df5
Update index.html 2024-11-09 14:08:33 +08:00
wood chen
e11323f211
Update README.md 2024-04-15 20:53:15 +08:00
wood chen
bfbcfb7559
Update index.html 2024-03-22 21:00:09 +08:00
wood
74a24d7426 Add gemini-pro model option 
Add Google's gemini-pro conversational AI model as a selectable option
for the chatbot user interface. Provides users with access to an
additional high-quality dialogue model created by DeepMind, allowing
expanded choice.

Fixes #123
 2023-12-18 03:55:11 +08:00
wood
33c06b4fb7 Merge branch 'main' of 
https://github.com/woodchen-ink/ChatGPT-Tailwind

Updated image links in README
 2023-12-17 23:42:09 +08:00
wood
5d35b854aa 1 2023-12-17 23:40:39 +08:00
wood
25ff724634 update 2023-10-26 16:29:48 +08:00
wood
da4872a8db update 2023-10-26 16:08:18 +08:00
wood chen
50bb227a04
Update README.md 2023-10-07 18:20:58 +08:00
wood chen
93d02d356b
Merge pull request #6 from woodchen-ink:woodchen-ink/issue5 
新增支持模型，库改为使用staticfile，可以加快国内访问
 2023-10-07 18:17:16 +08:00
wood
af4bee0d29 新增支持模型，库改为使用staticfile，可以加快国内访问 2023-10-07 18:15:55 +08:00
wood chen
40f3c0ff8a
Merge pull request #4 from woodchen-ink:woodchen-ink/issue3 
添加语法高亮
 2023-09-13 03:40:30 -05:00
wood
0f4d3d8f7c 添加语法高亮 
Fixes #3
 2023-09-13 16:40:16 +08:00
wood
aa46949beb udpate 2023-09-09 15:54:26 +08:00
wood chen
9e94ed324e
Merge pull request #2 from woodchen-ink/woodchen-ink/issue1 2023-09-09 15:53:53 +08:00
wood
0cf86e95f7 比如问GPT生成一段语法代码，代码出加个COPY功能比较好 
Fixes #1
 2023-09-09 15:51:51 +08:00
wood
70bdbca546 udpate 2023-09-03 19:33:18 +08:00
wood
9e10c9c0eb Merge branch 'main' of https://github.com/woodchen-ink/ChatGPT-Tailwind 2023-09-03 19:32:22 +08:00
wood
94a08600ff update 2023-09-03 19:30:39 +08:00
woodchen
6ed5ab7a97 update 2023-08-14 14:16:00 +08:00
woodchen
a893f6c600 Revert "update" 
This reverts commit 01643253bce7578720a545c4b94c49064c426d7d.
 2023-08-14 12:00:19 +08:00
woodchen
01643253bc update 2023-08-14 11:52:40 +08:00
3 changed files with 123 additions and 712 deletions
Show Stats Expand all files Collapse all files

7
README.md
View File

@ -4,16 +4,11 @@
可以自定义修改模型参数，不过请求方式都是openai接口
*练手页面，有问题请进群反馈*
Telegram交流群：https://t.me/ai_cn2023
## 例子
![1691602575992.png](https://cdn-img.czl.net/2023/08/10/64d3cea9db3be.png)
![image](https://github.com/woodchen-ink/ChatGPT-Tailwind/assets/95951386/30f33fb7-5c45-4389-be41-4c9575695106)
![1691602613726.png](https://cdn-img.czl.net/2023/08/10/64d3cecf903b7.png)
## 使用方法

655
css.css
View File

@ -1,655 +0,0 @@
.prose{
color: var(--tw-prose-body);
/* max-width: 65ch; */
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em
}
.prose :where(a):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500
}
.prose :where(strong):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(ol):not(:where([class~="not-prose"] *)){
list-style-type: decimal;
padding-left: 1.625em
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)){
list-style-type: upper-alpha
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)){
list-style-type: lower-alpha
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)){
list-style-type: upper-alpha
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)){
list-style-type: lower-alpha
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)){
list-style-type: upper-roman
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)){
list-style-type: lower-roman
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)){
list-style-type: upper-roman
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)){
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)){
list-style-type: decimal
}
.prose :where(ul):not(:where([class~="not-prose"] *)){
list-style-type: disc;
padding-left: 1.625em
}
.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker{
font-weight: 400;
color: var(--tw-prose-counters)
}
.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker{
color: var(--tw-prose-bullets)
}
.prose :where(hr):not(:where([class~="not-prose"] *)){
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em
}
.prose :where(blockquote):not(:where([class~="not-prose"] *)){
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-left-width: 0.25rem;
border-left-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1em
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before{
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after{
content: close-quote
}
.prose :where(h1):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111
}
.prose :where(h1 strong):not(:where([class~="not-prose"] *)){
font-weight: 900
}
.prose :where(h2):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333
}
.prose :where(h2 strong):not(:where([class~="not-prose"] *)){
font-weight: 800
}
.prose :where(h3):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6
}
.prose :where(h3 strong):not(:where([class~="not-prose"] *)){
font-weight: 700
}
.prose :where(h4):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5
}
.prose :where(h4 strong):not(:where([class~="not-prose"] *)){
font-weight: 700
}
.prose :where(figure > *):not(:where([class~="not-prose"] *)){
margin-top: 0;
margin-bottom: 0
}
.prose :where(figcaption):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em
}
.prose :where(code):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em
}
.prose :where(code):not(:where([class~="not-prose"] *))::before{
content: "`"
}
.prose :where(code):not(:where([class~="not-prose"] *))::after{
content: "`"
}
.prose :where(a code):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-links)
}
.prose :where(pre):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-right: 1.1428571em;
padding-bottom: 0.8571429em;
padding-left: 1.1428571em
}
.prose :where(pre code):not(:where([class~="not-prose"] *)){
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit
}
.prose :where(pre code):not(:where([class~="not-prose"] *))::before{
content: none
}
.prose :where(pre code):not(:where([class~="not-prose"] *))::after{
content: none
}
.prose :where(table):not(:where([class~="not-prose"] *)){
width: 100%;
table-layout: auto;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857
}
.prose :where(thead):not(:where([class~="not-prose"] *)){
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders)
}
.prose :where(thead th):not(:where([class~="not-prose"] *)){
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em
}
.prose :where(tbody tr):not(:where([class~="not-prose"] *)){
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders)
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)){
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~="not-prose"] *)){
vertical-align: baseline;
padding-top: 0.5714286em;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em
}
.prose{
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(p):not(:where([class~="not-prose"] *)){
margin-top: 1.25em;
margin-bottom: 1.25em
}
.prose :where(img):not(:where([class~="not-prose"] *)){
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(video):not(:where([class~="not-prose"] *)){
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(figure):not(:where([class~="not-prose"] *)){
margin-top: 2em;
margin-bottom: 2em
}
.prose :where(h2 code):not(:where([class~="not-prose"] *)){
font-size: 0.875em
}
.prose :where(h3 code):not(:where([class~="not-prose"] *)){
font-size: 0.9em
}
.prose :where(li):not(:where([class~="not-prose"] *)){
margin-top: 0.5em;
margin-bottom: 0.5em
}
.prose :where(ol > li):not(:where([class~="not-prose"] *)){
padding-left: 0.375em
}
.prose :where(ul > li):not(:where([class~="not-prose"] *)){
padding-left: 0.375em
}
.prose > :where(ul > li p):not(:where([class~="not-prose"] *)){
margin-top: 0.75em;
margin-bottom: 0.75em
}
.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)){
margin-top: 1.25em
}
.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 1.25em
}
.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)){
margin-top: 1.25em
}
.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 1.25em
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)){
margin-top: 0.75em;
margin-bottom: 0.75em
}
.prose :where(hr + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.prose :where(h2 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.prose :where(h3 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.prose :where(h4 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)){
padding-left: 0
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)){
padding-right: 0
}
.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)){
padding-left: 0
}
.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)){
padding-right: 0
}
.prose > :where(:first-child):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.prose > :where(:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 0
}
.prose-slate{
--tw-prose-body: #334155;
--tw-prose-headings: #0f172a;
--tw-prose-lead: #475569;
--tw-prose-links: #0f172a;
--tw-prose-bold: #0f172a;
--tw-prose-counters: #64748b;
--tw-prose-bullets: #cbd5e1;
--tw-prose-hr: #e2e8f0;
--tw-prose-quotes: #0f172a;
--tw-prose-quote-borders: #e2e8f0;
--tw-prose-captions: #64748b;
--tw-prose-code: #0f172a;
--tw-prose-pre-code: #e2e8f0;
--tw-prose-pre-bg: #1e293b;
--tw-prose-th-borders: #cbd5e1;
--tw-prose-td-borders: #e2e8f0;
--tw-prose-invert-body: #cbd5e1;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #94a3b8;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #94a3b8;
--tw-prose-invert-bullets: #475569;
--tw-prose-invert-hr: #334155;
--tw-prose-invert-quotes: #f1f5f9;
--tw-prose-invert-quote-borders: #334155;
--tw-prose-invert-captions: #94a3b8;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #cbd5e1;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #475569;
--tw-prose-invert-td-borders: #334155
}
@media (min-width: 1024px){
.lg\:prose-lg{
font-size: 1.125rem;
line-height: 1.7777778;
}
.lg\:prose-lg :where(p):not(:where([class~="not-prose"] *)){
margin-top: 1.3333333em;
margin-bottom: 1.3333333em
}
.lg\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)){
font-size: 1.2222222em;
line-height: 1.4545455;
margin-top: 1.0909091em;
margin-bottom: 1.0909091em
}
.lg\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)){
margin-top: 1.6666667em;
margin-bottom: 1.6666667em;
padding-left: 1em
}
.lg\:prose-lg :where(h1):not(:where([class~="not-prose"] *)){
font-size: 2.6666667em;
margin-top: 0;
margin-bottom: 0.8333333em;
line-height: 1
}
.lg\:prose-lg :where(h2):not(:where([class~="not-prose"] *)){
font-size: 1.6666667em;
margin-top: 1.8666667em;
margin-bottom: 1.0666667em;
line-height: 1.3333333
}
.lg\:prose-lg :where(h3):not(:where([class~="not-prose"] *)){
font-size: 1.3333333em;
margin-top: 1.6666667em;
margin-bottom: 0.6666667em;
line-height: 1.5
}
.lg\:prose-lg :where(h4):not(:where([class~="not-prose"] *)){
margin-top: 1.7777778em;
margin-bottom: 0.4444444em;
line-height: 1.5555556
}
.lg\:prose-lg :where(img):not(:where([class~="not-prose"] *)){
margin-top: 1.7777778em;
margin-bottom: 1.7777778em
}
.lg\:prose-lg :where(video):not(:where([class~="not-prose"] *)){
margin-top: 1.7777778em;
margin-bottom: 1.7777778em
}
.lg\:prose-lg :where(figure):not(:where([class~="not-prose"] *)){
margin-top: 1.7777778em;
margin-bottom: 1.7777778em
}
.lg\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)){
margin-top: 0;
margin-bottom: 0
}
.lg\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)){
font-size: 0.8888889em;
line-height: 1.5;
margin-top: 1em
}
.lg\:prose-lg :where(code):not(:where([class~="not-prose"] *)){
font-size: 0.8888889em
}
.lg\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)){
font-size: 0.8666667em
}
.lg\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)){
font-size: 0.875em
}
.lg\:prose-lg :where(pre):not(:where([class~="not-prose"] *)){
font-size: 0.8888889em;
line-height: 1.75;
margin-top: 2em;
margin-bottom: 2em;
border-radius: 0.375rem;
padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 1em;
padding-left: 1.5em
}
.lg\:prose-lg :where(ol):not(:where([class~="not-prose"] *)){
padding-left: 1.5555556em
}
.lg\:prose-lg :where(ul):not(:where([class~="not-prose"] *)){
padding-left: 1.5555556em
}
.lg\:prose-lg :where(li):not(:where([class~="not-prose"] *)){
margin-top: 0.6666667em;
margin-bottom: 0.6666667em
}
.lg\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)){
padding-left: 0.4444444em
}
.lg\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)){
padding-left: 0.4444444em
}
.lg\:prose-lg > :where(ul > li p):not(:where([class~="not-prose"] *)){
margin-top: 0.8888889em;
margin-bottom: 0.8888889em
}
.lg\:prose-lg > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)){
margin-top: 1.3333333em
}
.lg\:prose-lg > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 1.3333333em
}
.lg\:prose-lg > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)){
margin-top: 1.3333333em
}
.lg\:prose-lg > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 1.3333333em
}
.lg\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)){
margin-top: 0.8888889em;
margin-bottom: 0.8888889em
}
.lg\:prose-lg :where(hr):not(:where([class~="not-prose"] *)){
margin-top: 3.1111111em;
margin-bottom: 3.1111111em
}
.lg\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.lg\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.lg\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.lg\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.lg\:prose-lg :where(table):not(:where([class~="not-prose"] *)){
font-size: 0.8888889em;
line-height: 1.5
}
.lg\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)){
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.75em
}
.lg\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)){
padding-left: 0
}
.lg\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)){
padding-right: 0
}
.lg\:prose-lg :where(tbody td):not(:where([class~="not-prose"] *)){
padding-top: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.75em
}
.lg\:prose-lg :where(tbody td:first-child):not(:where([class~="not-prose"] *)){
padding-left: 0
}
.lg\:prose-lg :where(tbody td:last-child):not(:where([class~="not-prose"] *)){
padding-right: 0
}
.lg\:prose-lg > :where(:first-child):not(:where([class~="not-prose"] *)){
margin-top: 0
}
.lg\:prose-lg > :where(:last-child):not(:where([class~="not-prose"] *)){
margin-bottom: 0
}
}

171
index.html
View File

@ -1,27 +1,28 @@
<!DOCTYPE html>
<html lang="zh-cn">
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>ChatGPT-Tailwind</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="shortcut icon" href="https://cdn-img-qiniu.czl.net/2023/08/03/64cb6db97b0bf.png">
<link href="https://unpkg.com/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="https://i-cf.czl.net/r2/qiniu/2023/08/03/64cb6db97b0bf.png">
<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.12.14/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/vs2015.min.css" />
<style>
body {
font-family: system-ui, -apple-system, "Microsoft YaHei", Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif !important;
}
</style>
<link href="./css.css" rel="stylesheet" type="text/css">
<link href="https://i.czl.net/g-f/frame/prose.css" rel="stylesheet" type="text/css">
</head>
<body class="pb-72 pt-20 h-full">
<!-- 头部展示 -->
<div class="w-full fixed top-0 bg-gray-700 text-center py-5 z-50">
<h1 class="text-white text-lg font-bold" >ChatGPT-Tailwind</h1>
<h1 class="text-white text-lg font-bold">ChatGPT-Tailwind</h1>
</div>
<!-- 填写地址和密钥 -->
@ -60,27 +61,8 @@
class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none select-primary"
id="model">
<!-- your options here -->
<option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
<option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
<option value="gpt-3.5-turbo-0613">gpt-3.5-turbo-0613</option>
<option value="gpt-3.5-turbo-16k">gpt-3.5-turbo-16k</option>
<option value="gpt-3.5-turbo-16k-0613">gpt-3.5-turbo-16k-0613</option>
<option value="gpt-4">gpt-4</option>
<option value="gpt-4-0301">gpt-4-0301</option>
<option value="gpt-4-0613">gpt-4-0613</option>
<option value="gpt-4-32k">gpt-4-32k</option>
<option value="gpt-4-32k-0613">gpt-4-32k-0613</option>
<option value="PaLM-2">PaLM-2</option>
<option value="ERINIE-Bot">ERNIE-Bot</option>
<option value="ERNIE-Bot-turbo">ERNIE-Bot-turbo</option>
<option value="BLOOMZ-7B">BLOOMZ-7B</option>
<option value="Embedding-V1">Embedding-V1</option>
<option value="chatglm_std">chatglm_std</option>
<option value="chatglm_lite">chatglm_lite</option>
<option value="chatglm_pro">chatglm_pro</option>
<option value="qwen-v1">qwen-v1</option>
<option value="qwen-plus-v1">qwen-plus-v1</option>
<option value="SparkDesk">SparkDesk</option>
<option value="gpt-3.5-turbo">gpt-4o-mini</option>
<option value="gpt-3.5-turbo-16k">gpt-4o</option>
</select>
</div>
<div class="text-xs italics">*选择模型</div>
@ -112,7 +94,10 @@
</div>
<script src="https://unpkg.com/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script>
const url = new URL(window.location.href);
const chatbox = $("#chatbox");
@ -130,7 +115,7 @@
});
chatbox.append(`<div class="chat chat-end"><div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://cdn-img.czl.net/2023/08/10/64d3b992cf86e.png" />
<img src="https://i-cf.czl.net/r2/2023/08/10/64d3b992cf86e.png" />
</div>
</div>
<div class="chat-header">You</div><div class="chat-bubble chat-bubble-info">${message}</div><div>`);
@ -184,34 +169,119 @@
};
$.ajax(settings).done(function (response) {
console.log(response);
console.log(response)
const message = response.choices[0].message;
const message = response.choices[0].message
messages.push({
"role": message.role,
"content": message.content
});
role: message.role,
content: message.content,
})
const htmlText = window.markdownit().render(message.content);
chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-accent prose prose-slate">${htmlText}</div><div>`);
sendButton.html('<span>询问</span>');
sendButton.removeClass('btn-error').addClass('btn-info');
let htmlText = window.markdownit().render(message.content);
htmlText = htmlText.replace(/<pre>/g, '<pre class="pre-with-button">');
const chatBubbleClass =
message.role === 'user'
? 'chat-bubble-info'
: 'chat-bubble-accent'
const avatarURL =
message.role === 'user'
? 'https://i-cf.czl.net/r2/2023/08/10/64d3b992cf86e.png'
: 'https://i-cf.czl.net/r2/2023/08/10/64d3b8c9819c7.png'
const chatHeader = message.role === 'user' ? 'You' : 'AI'
let myID = 'codeSnippet-' + Date.now()
let preID = 'pre-' + Date.now()
if (htmlText.includes('<code')) {
htmlText = htmlText.replace('<pre', '<pre id="' + preID + '"')
htmlText = htmlText.replace('<code', '<code id="' + myID + '"')
}
console.log('htmlText', htmlText)
const chatHTML = `
<div class="chat chat-start">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="${avatarURL}" />
</div>
</div>
<div class="chat-header">${chatHeader}</div>
<div class="chat-bubble ${chatBubbleClass} prose prose-slate">${htmlText}</div>
</div>`
$('#chatbox').append(chatHTML);
$('.pre-with-button').each(function (index) {
if ($(this).find('code').length > 0) {
let preElement = $(this);
let codeElement = $(this).find('code')[0];
var copyButton = document.createElement('button');
copyButton.classList.add('absolute', 'right-5', 'mt-[-20px]', 'mr-1', 'btn', 'btn-active', 'btn-xs');
copyButton.innerText = 'COPY';
var clipboard = new ClipboardJS(copyButton, {
text: function () {
return codeElement.innerText;
},
});
clipboard.on('success', function (e) {
console.log('Success');
let alertBox = document.createElement('div');
alertBox.classList.add('fixed', 'top-20', 'left-1/2', 'transform', '-translate-x-1/2', 'z-50');
alertBox.innerHTML = `
<div class="alert alert-success">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Success! Your text has been copied.</span>
</div>`;
document.body.appendChild(alertBox);
setTimeout(function () {
document.body.removeChild(alertBox);
}, 500);
});
clipboard.on('error', function (e) {
console.log('Failed');
let alertBox = document.createElement('div');
alertBox.classList.add('fixed', 'top-20', 'left-1/2', 'transform', '-translate-x-1/2', 'z-50');
alertBox.innerHTML = `
<div class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Error! Copy failed.</span>
</div>`;
document.body.appendChild(alertBox);
setTimeout(function () {
document.body.removeChild(alertBox);
}, 500);
})
preElement.append(copyButton);
}
});
hljs.highlightAll();
sendButton.html('<span>询问</span>')
sendButton.removeClass('btn-error').addClass('btn-info')
}).fail(function (jqXHR, textStatus, errorThrown) {
var response = JSON.parse(jqXHR.responseText);
sendButton.html('<span>询问</span>');
sendButton.removeClass('btn-error').addClass('btn-info');
var errorMessage;
if (jqXHR.status === 0) {
errorMessage = "Network error, please check your internet connection.";
} else {
var response = JSON.parse(jqXHR.responseText);
errorMessage = response.error.message;
}
chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${response.error.message}</div><div>`);
<div class="w-10 rounded-full">
<img src="https://i-cf.czl.net/r2/2023/08/10/64d3b8c9819c7.png" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${errorMessage}</div><div>`);
});
} catch (error) {
@ -219,7 +289,7 @@
sendButton.removeClass('btn-error').addClass('btn-info');
chatbox.append(`<div class="chat chat-start"><div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://cdn-img.czl.net/2023/08/10/64d3b8c9819c7.png" />
<img src="https://i-cf.czl.net/r2/2023/08/10/64d3b8c9819c7.png" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${error.message}</div><div>`);
@ -227,6 +297,7 @@
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js" defer></script>
</body>