采用Stream流模式，前端采用JS的EventSource。同时将Markdown格式文本进行了排版，对代码进行了着色处理。

leige635539766 · Mar 5, 2023 · 0e018b1 · 0e018b1
1 parent 6a6c760
commit 0e018b1
Show file tree

Hide file tree

Showing 13 changed files with 1,478 additions and 72 deletions.
diff --git a/.htaccess b/.htaccess
diff --git a/css/common.css b/css/common.css
@@ -4,6 +4,7 @@ html {
 }
 body {
     margin:0;
+    height:100%;
 }
 main {
     display:block;
@@ -40,6 +41,7 @@ b, strong {
 code, kbd, samp {
     font-family:monospace, monospace;
     font-size:1em;
+    line-height:1.5em;
 }
 small {
     font-size:80%;
@@ -1361,7 +1363,7 @@ a.unlinks-deco {
 }
 @media (min-width:1200px) {
     .container {
-        width:85%;
+        width:95%;
     }
 }
 @media (max-width:1444px) and (min-width:993px) {

diff --git a/css/hightlight.css b/css/hightlight.css
@@ -0,0 +1,59 @@
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+}
+
+code.hljs {
+    padding: 3px 5px
+}
+
+.hljs {
+    color: #abb2bf;
+    background: #282c34
+}
+
+.hljs-comment,.hljs-quote {
+    color: #5c6370;
+    font-style: italic
+}
+
+.hljs-doctag,.hljs-formula,.hljs-keyword {
+    color: #c678dd
+}
+
+.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst {
+    color: #e06c75
+}
+
+.hljs-literal {
+    color: #56b6c2
+}
+
+.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
+    color: #98c379
+}
+
+.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {
+    color: #d19a66
+}
+
+.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title {
+    color: #61aeee
+}
+
+.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_ {
+    color: #e6c07b
+}
+
+.hljs-emphasis {
+    font-style: italic
+}
+
+.hljs-strong {
+    font-weight: 700
+}
+
+.hljs-link {
+    text-decoration: underline
+}
diff --git a/css/wenda.css b/css/wenda.css
@@ -18,10 +18,19 @@
     min-height:200px;
 }
 #article-wrapper {
-    min-height:calc(100vh - 320px);
+    height:calc(100vh - 280px);
+    overflow-y:auto;
     border:1px solid;
     border-radius:var(--zhuluan-primary-border-radius);
 }
+#article-wrapper::-webkit-scrollbar {
+    width: 10px;
+}
+
+#article-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: lightgrey;
+}
 .article-box {
     min-height:calc(100vh - 50px) !important;
     position:relative;
@@ -124,6 +133,7 @@ li.article-content {
     padding:14px;
     color:#fff;
     font-size:15px;
+    line-height:30px;
 }
 .article .creating-loading {
     display:none;
@@ -195,4 +205,4 @@ input:checked + label::before {
 }
 input:checked + label::after {
     width:100%;
-}
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.php b/index.php
@@ -23,14 +23,17 @@
 //  }
 ?>
 <html lang="zh-CN">
+
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-	<title>ChatGPT<?=$type?>专用版</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<title>ChatGPT<?= $type ?>专用版</title>
 	<link rel="stylesheet" href="css/common.css?v1.1">
 	<link rel="stylesheet" href="css/wenda.css?v1.1">
+	<link rel="stylesheet" href="css/hightlight.css">
 </head>
+
 <body>
 	<div class="layout-wrap">
 		<header class="layout-header">
@@ -39,7 +42,7 @@
 					<h2 class="logo"><a class="links" id="clean" title="清空对话信息"><span class="logo-title">清空对话信息</span></a></h2>
 				</div>
 				<div class="header-logo">
-					<h2 class="logo"><a class="links" id="showlog" title="查看他人对话"><span class="logo-title">查看他人对话</span></a></h2>
+					<h2 class="logo"><a class="links" href="https://github.com/dirk1983/chatgpt"><span class="logo-title">获取源码</span></a></h2>
 				</div>
 			</div>
 		</header>
@@ -48,16 +51,21 @@
 				<article class="article" id="article">
 					<div class="article-box">
 						<div style="text-align: center;color:#9ca2a8">
-							ChatGPT是一个超强的AI，它会创作、写论文、答辩、编程等。请勿查询违法信息，服务器会保留查询记录。<br/>
-							账户总查询次数有限，请不要过于浪费查询机会，仅限内部人员测试使用。<br/>
+							采用最新的gpt-3.5-turbo模型，stream模式，秒回
 						</div>
 						<div class="precast-block" data-flex="main:left">
 							<div class="input-group">
 								<span style="text-align: center;color:#9ca2a8">&nbsp;&nbsp;连续对话：</span>
-								<input type="checkbox" id="keep"  checked style="min-width:220px;">
+								<input type="checkbox" id="keep" checked style="min-width:220px;">
 								<label for="keep"></label>
-								<span style="text-align: center;color:#9ca2a8">&nbsp;&nbsp;&nbsp;&nbsp;默认开启，ChatGPT将以下面的对话信息作为上下文回答您的提问（含上下文问题最多3072个字符，AI回答不超过1024个字符）。</span>
+								<span style="text-align: center;color:#9ca2a8">&nbsp;&nbsp;&nbsp;&nbsp;默认开启</span>
 							</div>
+							<!--
+							<div class="input-group">
+								<span style="text-align: center;color:#9ca2a8">&nbsp;&nbsp;请输入您的API-KEY&nbsp;&nbsp;</span>
+								<input type="password" id="key" style="border:1px solid grey;display:block;max-width:270px;width:calc(100% - 160px);" onload="this.focus();">
+							</div>
+							-->
 						</div>
 						<ul id="article-wrapper">
 						</ul>
@@ -70,7 +78,7 @@
 									<input type="text" name="kw-target" placeholder="请点此提问" id="kw-target" autofocus>
 								</div>
 								<div class="right-btn layout-bar">
-									<p class="btn ai-btn bright-btn" id="ai-btn"  data-flex="main:center cross:center"><i class="iconfont icon-wuguan"></i>发送</p>
+									<p class="btn ai-btn bright-btn" id="ai-btn" data-flex="main:center cross:center"><i class="iconfont icon-wuguan"></i>发送</p>
 								</div>
 							</div>
 						</div>
@@ -80,10 +88,11 @@
 		</div>
 	</div>
 	<script src="js/jquery.min.js"></script>
-  <script src="js/jquery.cookie.min.js"></script>
-  <script src="js/layer.min.js" type="application/javascript"></script>
+	<script src="js/jquery.cookie.min.js"></script>
+	<script src="js/layer.min.js" type="application/javascript"></script>
 	<script src="js/chat.js?v2.8"></script>
+	<script src="js/highlight.min.js"></script>
+	<script src="js/showdown.min.js"></script>
 </body>
 
-</html>
-
+</html>