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

update

Browse Source
This commit is contained in:
wood 2023-08-10 01:58:07 +08:00
commit b148a8a181
6 changed files with 955 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2023 wood chen
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

33
README.md Normal file
View File

@ -0,0 +1,33 @@
# ChatGPT-Tailwind
基于openai接口，Tailwind CSS + DaisyUI开发的用于chatgpt单页面应用，超轻超快，可以来回问答
可以自定义修改模型参数，不过请求方式都是openai接口
*练手页面，有问题请进群反馈*
Telegram交流群：https://t.me/ai_cn2023
## 例子
![1691602575992.png](https://cdn-img.czl.net/2023/08/10/64d3cea9db3be.png)
![1691602613726.png](https://cdn-img.czl.net/2023/08/10/64d3cecf903b7.png)
## 使用方法
1. 直接访问右侧域名,在页面中填入自己的代理地址、key、选择模型，发送消息即可。
2. 如果无法访问，可自行下载index.html，本地打开即可。
## 优点
1. 左右布局，看起来更美观
2. 单页面应用，访问速度快
3. 现代化UI
# 广告
- [CZLChat](https://chat.czl.net)，稳定商业版AI服务。
- [CZLOapi](https://oapi.czl.net)，AI接口代理服务，无需翻墙。

655
css.css Normal file
View File

@ -0,0 +1,655 @@
.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
}
}

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

232
index.html Normal file
View File

@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="zh-cn">
<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 href="https://unpkg.com/daisyui@3.5.1/dist/full.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>
<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">
</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>
</div>
<!-- 填写地址和密钥 -->
<div class="container mx-auto bg-blue-300 px-4 py-5 shadow-md hover:shadow-blue-500/50 -mt-5">
<div class="flex flex-wrap items-center justify-evenly ">
<div class="w-full sm:w-2/5 mb-4 px-4">
<div class="flex flex-col">
<div class="flex items-center mb-1">
<b>网址：</b>
<input
class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none"
placeholder="api.openai.com" type="text" id="proxyurl" required value="oapi.czl.net" />
</div>
<p class="text-xs italics ">*代理域名，无需"https://"</p>
</div>
</div>
<div class="w-full sm:w-2/5 mb-4 px-4">
<div class="flex flex-col">
<div class="flex items-center mb-1">
<b>Key：</b>
<input
class="border-2 border-gray-300 bg-white h-10 px-2 rounded-lg text-sm flex-grow focus:outline-none"
placeholder="sk-xxxxxxxxxxx" type="text" id="key" required />
</div>
<div class="text-xs italics">*填写你的key，<a href="https://oapi.czl.net" target="_blank"
class="link link-error">获取国内可用key</a></div>
</div>
</div>
<div class="w-full sm:w-1/5 mb-4 px-4">
<div class="flex flex-col">
<div class="flex items-center mb-1">
<b>模型：</b>
<select
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>
</select>
</div>
<div class="text-xs italics">*选择模型</div>
</div>
</div>
<div class="w-full ">
<div class="flex items-center">
</div>
</div>
</div>
<div class="text-center py-2 bg-blue-100">
本项目由<a href="https://woodchen.ink" target="_blank" class="link link-accent">woodchen</a>开源于<a
class="link link-accent" href="https://github.com/woodchen-ink/ChatGPT-Tailwind"
target="_blank">Github</a>, 欢迎给个star
</div>
</div>
<!-- 对话展示 -->
<div class="container mx-auto" id="chatbox">
</div>
<!-- 底部固定 -->
<div class="w-full fixed bottom-0 bg-gray-700 py-4">
<div class="container mx-auto">
<textarea id="userInput" class="w-full textarea textarea-inf" type="text" rows="3"
placeholder="在这里输入问题...换行请按Shift+Enter"></textarea>
<button id="sendButton" class="btn btn-info btn-block">询问</button>
</div>
</div>
<script src="https://unpkg.com/jquery@3.7.0/dist/jquery.min.js"></script>
<script>
const url = new URL(window.location.href);
const chatbox = $("#chatbox");
const userInput = $("#userInput");
const sendButton = $("#sendButton");
$(document).ready(function () {
const messages = [];
sendButton.on("click", () => {
const message = userInput.val();
if (message) {
messages.push({
"role": "user",
"content": message
});
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" />
</div>
</div>
<div class="chat-header">You</div><div class="chat-bubble chat-bubble-info">${message}</div><div>`);
userInput.val("");
sendButton.html('<span class="loading loading-infinity loading-lg"></span>');
sendButton.removeClass('btn-info').addClass('btn-error');
// sendButton.prop("disabled", true);
fetchMessages();
}
});
userInput.on("keydown", (event) => {
if (event.keyCode === 13 && !event.ctrlKey && !event.shiftKey) {
event.preventDefault();
sendButton.click();
} else if (event.keyCode === 13 && (event.ctrlKey || event.shiftKey)) {
event.preventDefault();
const cursorPosition = userInput.prop("selectionStart");
const currentValue = userInput.val();
userInput.val(
currentValue.slice(0, cursorPosition) +
"\n" +
currentValue.slice(cursorPosition)
);
userInput.prop("selectionStart", cursorPosition + 1);
userInput.prop("selectionEnd", cursorPosition + 1);
}
});
function fetchMessages() {
let proxyurl = document.getElementById("proxyurl").value;
let key = document.getElementById("key").value;
let modelElement = document.getElementById("model");
let model = modelElement.options[modelElement.selectedIndex].value;
$("#proxyurl").val();
$("#key").val();
try {
var settings = {
"url": "https://" + proxyurl + "/v1/chat/completions",
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "Bearer " + key,
"Content-Type": "application/json"
},
"data": JSON.stringify({
"model": model,
"messages": messages
}),
};
$.ajax(settings).done(function (response) {
console.log(response);
const message = response.choices[0].message;
messages.push({
"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');
}).fail(function (jqXHR, textStatus, errorThrown) {
var response = JSON.parse(jqXHR.responseText);
sendButton.html('<span>询问</span>');
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" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${response.error.message}</div><div>`);
});
} catch (error) {
sendButton.html('<span>询问</span>');
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" />
</div>
</div>
<div class="chat-header">AI</div><div class="chat-bubble chat-bubble-error prose prose-slate">Error: ${error.message}</div><div>`);
}
}
});
</script>
</body>
</html>

14
tailwind.config.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
//...
theme: {
// ...
},
// add daisyUI plugin
plugins: [
require("daisyui")
],
//...
}