Merge branch 'main' into expansive

CITATION.cff

@@ -0,0 +1,20 @@
+cff-version: 1.2.0
+title: ChuanhuChatGPT
+message: >-
+  If you use this software, please cite it using these
+  metadata.
+type: software
+authors:
+  - given-names: Chuanhu
+    orcid: https://orcid.org/0000-0001-8954-8598
+  - given-names: MZhao
+    orcid: https://orcid.org/0000-0003-2298-6213
+  - given-names: Keldos
+    orcid: https://orcid.org/0009-0005-0357-272X
+repository-code: 'https://github.com/GaiZhenbiao/ChuanhuChatGPT'
+url: 'https://github.com/GaiZhenbiao/ChuanhuChatGPT'
+abstract: Provided a light and easy to use interface for ChatGPT API
+license: GPL-3.0
+commit: bd0034c37e5af6a90bd9c2f7dd073f6cd27c61af
+version: '20230405'
+date-released: '2023-04-05'

ChuanhuChatbot.py

@@ -27,10 +27,10 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
     topic = gr.State("未命名对话历史记录")
 
     with gr.Row():
-        with gr.Column():
-            gr.HTML(CHUANHU_TITLE)
-            user_info = gr.Markdown(value="", elem_id="user_info")
+        gr.HTML(CHUANHU_TITLE, elem_id="app_title")
         status_display = gr.Markdown(get_geoip(), elem_id="status_display")
+    with gr.Row(elem_id="float_display"):
+        user_info = gr.Markdown(value="getting user info...", elem_id="user_info")
 
         # https://github.com/gradio-app/gradio/pull/3296
         def create_greeting(request: gr.Request):
@@ -46,14 +46,14 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
             with gr.Row():
                 chatbot = gr.Chatbot(elem_id="chuanhu_chatbot").style(height="100%")
             with gr.Row():
-                with gr.Column(scale=12):
+                with gr.Column(min_width=225, scale=12):
                     user_input = gr.Textbox(
                         elem_id="user_input_tb",
                         show_label=False, placeholder="在这里输入"
                     ).style(container=False)
-                with gr.Column(min_width=70, scale=1):
-                    submitBtn = gr.Button("发送", variant="primary")
-                    cancelBtn = gr.Button("取消", variant="secondary", visible=False)
+                with gr.Column(min_width=42, scale=1):
+                    submitBtn = gr.Button(value="", variant="primary", elem_id="submit_btn")
+                    cancelBtn = gr.Button(value="", variant="secondary", visible=False, elem_id="cancel_btn")
             with gr.Row():
                 emptyBtn = gr.Button(
                     "🧹 新的对话",
@@ -74,9 +74,9 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         label="API-Key",
                     )
                     if multi_api_key:
-                        usageTxt = gr.Markdown("多账号模式已开启，无需输入key，可直接开始对话", elem_id="usage_display")
+                        usageTxt = gr.Markdown("多账号模式已开启，无需输入key，可直接开始对话", elem_id="usage_display", elem_classes="insert_block")
                     else:
-                        usageTxt = gr.Markdown("**发送消息** 或 **提交key** 以显示额度", elem_id="usage_display")
+                        usageTxt = gr.Markdown("**发送消息** 或 **提交key** 以显示额度", elem_id="usage_display", elem_classes="insert_block")
                     model_select_dropdown = gr.Dropdown(
                         label="选择模型", choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True
                     )
@@ -159,7 +159,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
 
                 with gr.Tab(label="高级"):
                     gr.Markdown("# ⚠️ 务必谨慎更改 ⚠️\n\n如果无法使用请恢复默认设置")
-
+                    gr.HTML(APPEARANCE_SWITCHER, elem_classes="insert_block")
                     with gr.Accordion("参数", open=False):
                         temperature_slider = gr.Slider(
                             minimum=-0,

README.md

@@ -17,9 +17,9 @@
         <img alt="GitHub pull requests" src="https://img.shields.io/badge/Telegram-Group-blue.svg?logo=telegram" />
       </a>
       <p>
-      	实时回复 / 无限对话 / 保存对话记录 / 预设Prompt集 / 联网搜索 / 根据文件回答
-      	<br/>
-      	渲染LaTex / 渲染表格 / 渲染代码 / 代码高亮 / 自定义api-URL / “小而美”的体验 / Ready for GPT-4
+        实时回复 / 无限对话 / 保存对话记录 / 预设Prompt集 / 联网搜索 / 根据文件回答 <br />
+        渲染LaTeX / 渲染表格 / 代码高亮 / 自动亮暗色切换 / 自适应输入框位置 / “小而美”的体验 <br />
+        自定义api-Host / 多API Key均衡负载 / 多用户显示 / 适配GPT-4
       </p>
       <a href="https://www.bilibili.com/video/BV1mo4y1r7eE"><strong>视频教程</strong></a>
         ·
@@ -340,6 +340,8 @@ docker run -d --name chatgpt \
 
 - [想要做出贡献？](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/贡献指南)
 - [项目更新情况？](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/更新日志)
+- [二次开发许可？](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用许可)
+- [如何引用项目？](https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用许可#如何引用该项目)
 
 ## Starchart
 

assets/custom.css

@@ -3,14 +3,18 @@
     --chatbot-color-dark: #121111;
 }
 
+#app_title {
+    margin-top: 6px; 
+    white-space: nowrap;
+}
 /* 覆盖gradio的页脚信息QAQ */
 footer {
     display: none !important;
 }
-#footer{
+#footer {
     text-align: center;
 }
-#footer div{
+#footer div {
     display: inline-block;
 }
 #footer .versions{
@@ -18,16 +22,34 @@ footer {
     opacity: 0.85;
 }
 
-/* user_info */
+#float_display {
+    position: absolute;
+    max-height: 30px;
+}
+/* user_info */ 
 #user_info {
     white-space: nowrap;
-    margin-top: -1.3em !important;
-    padding-left: 112px !important;
+    position: absolute; left: 8em; top: .2em;
+    z-index: var(--layer-2);
+    box-shadow: var(--block-shadow);
+    border: none; border-radius: var(--block-label-radius);
+    background: var(--color-accent);
+    padding: var(--block-label-padding);
+    font-size: var(--block-label-text-size); line-height: var(--line-sm);
+    width: auto; min-height: 30px!important;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+}
+#user_info .wrap {
+    opacity: 0;
 }
 #user_info p {
-    font-size: .85em;
-    font-family: monospace;
-    color: var(--body-text-color-subdued);
+    color: white;
+    font-weight: var(--block-label-text-weight);
+}
+#user_info.hideK {
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
 }
 
 /* status_display */
@@ -43,14 +65,18 @@ footer {
     color: var(--body-text-color-subdued);
 }
 
-#chuanhu_chatbot, #status_display {
+#status_display {
     transition: all 0.6s;
 }
+#chuanhu_chatbot {
+    transition: height 0.3s ease;
+}
 
 /* usage_display */
-#usage_display {
+.insert_block {
     position: relative;
     margin: 0;
+    padding: .5em 1em;
     box-shadow: var(--block-shadow);
     border-width: var(--block-border-width);
     border-color: var(--block-border-color);
@@ -62,7 +88,6 @@ footer {
 }
 #usage_display p, #usage_display span {
     margin: 0;
-    padding: .5em 1em;
     font-size: .85em;
     color: var(--body-text-color-subdued);
 }
@@ -74,7 +99,7 @@ footer {
     overflow: hidden;
 }
 .progress {
-    background-color: var(--block-title-background-fill);;
+    background-color: var(--block-title-background-fill);
     height: 100%;
     border-radius: 10px;
     text-align: right;
@@ -88,41 +113,86 @@ footer {
     padding-right: 10px;
     line-height: 20px;
 }
+
+.apSwitch {
+    top: 2px;
+    display: inline-block;
+    height: 24px;
+    position: relative;
+    width: 48px;
+    border-radius: 12px;
+}
+.apSwitch input {
+    display: none !important;    
+}
+.apSlider {
+    background-color: var(--block-label-background-fill);
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+    font-size: 18px;
+    border-radius: 12px;
+}
+.apSlider::before {    
+    bottom: -1.5px;
+    left: 1px;
+    position: absolute;
+    transition: .4s;
+    content: "🌞";
+}
+input:checked + .apSlider {
+    background-color: var(--block-label-background-fill);
+}
+input:checked + .apSlider::before {
+    transform: translateX(23px);
+    content:"🌚";
+}
+
+#submit_btn, #cancel_btn {
+    height: 42px !important;
+}
+#submit_btn::before {
+    content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
+    height: 21px;
+}
+#cancel_btn::before {
+    content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
+    height: 21px;
+}
 /* list */
 ol:not(.options), ul:not(.options) {
     padding-inline-start: 2em !important;
 }
 
-/* 亮色 */
-@media (prefers-color-scheme: light) {
-    #chuanhu_chatbot {
-        background-color: var(--chatbot-color-light) !important;
-        color: #000000 !important;
-    }
-    [data-testid = "bot"] {
-        background-color: #FFFFFF !important;
-    }
-    [data-testid = "user"] {
-        background-color: #95EC69 !important;
-    }
+/* 亮色（默认） */
+#chuanhu_chatbot {
+    background-color: var(--chatbot-color-light) !important;
+    color: #000000 !important;
+}
+[data-testid = "bot"] {
+    background-color: #FFFFFF !important;
+}
+[data-testid = "user"] {
+    background-color: #95EC69 !important;
 }
 /* 暗色 */
-@media (prefers-color-scheme: dark) {
-    #chuanhu_chatbot {
-        background-color: var(--chatbot-color-dark) !important;
-        color: #FFFFFF !important;
-    }
-    [data-testid = "bot"] {
-        background-color: #2C2C2C !important;
-    }
-    [data-testid = "user"] {
-        background-color: #26B561 !important;
-    }
-    body {
-        background-color: var(--neutral-950) !important;
-    }
+.dark #chuanhu_chatbot {
+    background-color: var(--chatbot-color-dark) !important;
+    color: #FFFFFF !important;
+}
+.dark [data-testid = "bot"] {
+    background-color: #2C2C2C !important;
 }
+.dark [data-testid = "user"] {
+    background-color: #26B561 !important;
+}
+
 /* 屏幕宽度大于等于500px的设备 */
+/* update on 2023.4.8: 高度的细致调整已写入JavaScript */
 @media screen and (min-width: 500px) {
     #chuanhu_chatbot {
         height: calc(100vh - 200px);
@@ -139,6 +209,12 @@ ol:not(.options), ul:not(.options) {
     #chuanhu_chatbot .wrap {
         max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     }
+    [data-testid = "bot"] {
+        max-width: 98% !important;
+    }
+    #app_title h1{
+        letter-spacing: -1px; font-size: 22px;
+    }
 }
 /* 对话气泡 */
 [class *= "message"] {

assets/custom.js

@@ -1,70 +1,222 @@
+
 // custom javascript here
+
 const MAX_HISTORY_LENGTH = 32;
 
 var key_down_history = [];
 var currentIndex = -1;
 var user_input_ta;
 
+var gradioContainer = null;
+var user_input_ta = null;
+var user_input_tb = null;
+var userInfoDiv = null;
+var appTitleDiv = null;
+var chatbot = null;
+var apSwitch = null;
+
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
-var observer = new MutationObserver(function(mutations) {
+var isInIframe = (window.self !== window.top);
+
+// gradio 页面加载好了么??? 我能动你的元素了么??
+function gradioLoaded(mutations) {
     for (var i = 0; i < mutations.length; i++) {
-        if (mutations[i].addedNodes.length) {
-          var user_input_tb = document.getElementById('user_input_tb');
-          if (user_input_tb) {
-            // 监听到user_input_tb被添加到DOM树中
-            // 这里可以编写元素加载完成后需要执行的代码
-            user_input_ta = user_input_tb.querySelector("textarea");
-            if (user_input_ta){
-                observer.disconnect(); // 停止监听
-                // 在 textarea 上监听 keydown 事件
-                user_input_ta.addEventListener("keydown", function (event) {     
-                    var value = user_input_ta.value.trim();               
-                    // 判断按下的是否为方向键
-                    if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
-                        // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
-                        if(value && key_down_history.indexOf(value) === -1)
-                            return;
-                        // 对于需要响应的动作，阻止默认行为。
-                        event.preventDefault();
-                        var length = key_down_history.length;
-                        if(length === 0) {
-                            currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
-                            return;
-                        }
-                        if (currentIndex === -1) {
-                            currentIndex = length;
-                        }
-                        if (event.code === 'ArrowUp' && currentIndex > 0) {
-                            currentIndex--;
-                            user_input_ta.value = key_down_history[currentIndex];
-                        } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
-                            currentIndex++;
-                            user_input_ta.value = key_down_history[currentIndex];                            
-                        }
-                        user_input_ta.selectionStart = user_input_ta.value.length;
-                        user_input_ta.selectionEnd = user_input_ta.value.length;
-                        const input_event = new InputEvent("input", {bubbles: true, cancelable: true});
-                        user_input_ta.dispatchEvent(input_event);
-                    }else if(event.code === "Enter") {
-                        if (value) {
-                            currentIndex = -1;
-                            if(key_down_history.indexOf(value) === -1){
-                                key_down_history.push(value);
-                                if (key_down_history.length > MAX_HISTORY_LENGTH) {
-                                    key_down_history.shift();
-                                }
-                            }
+        if (mutations[i].addedNodes.length) {  
+            gradioContainer = document.querySelector(".gradio-container");
+            user_input_tb = document.getElementById('user_input_tb');
+            userInfoDiv = document.getElementById("user_info");
+            appTitleDiv = document.getElementById("app_title");
+            chatbot = document.querySelector('#chuanhu_chatbot');
+            apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
+
+            if (gradioContainer && apSwitch) {  // gradioCainter 加载出来了没?
+                adjustDarkMode();
+            }
+            if (user_input_tb) {  // user_input_tb 加载出来了没?
+                selectHistory();
+            }
+            if (userInfoDiv && appTitleDiv) {  // userInfoDiv 和 appTitleDiv 加载出来了没?
+                setTimeout(showOrHideUserInfo(), 2000);
+            }
+            if (chatbot) {  // chatbot 加载出来了没?
+                setChatbotHeight()
+            }
+        }
+    }
+}
+
+function selectHistory() {
+    user_input_ta = user_input_tb.querySelector("textarea");
+    if (user_input_ta) {
+        observer.disconnect(); // 停止监听
+        // 在 textarea 上监听 keydown 事件
+        user_input_ta.addEventListener("keydown", function (event) {
+            var value = user_input_ta.value.trim();
+            // 判断按下的是否为方向键
+            if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+                // ���果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
+                if (value && key_down_history.indexOf(value) === -1)
+                    return;
+                // 对于需要响应的动作，阻止默认行为。
+                event.preventDefault();
+                var length = key_down_history.length;
+                if (length === 0) {
+                    currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
+                    return;
+                }
+                if (currentIndex === -1) {
+                    currentIndex = length;
+                }
+                if (event.code === 'ArrowUp' && currentIndex > 0) {
+                    currentIndex--;
+                    user_input_ta.value = key_down_history[currentIndex];
+                } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
+                    currentIndex++;
+                    user_input_ta.value = key_down_history[currentIndex];
+                }
+                user_input_ta.selectionStart = user_input_ta.value.length;
+                user_input_ta.selectionEnd = user_input_ta.value.length;
+                const input_event = new InputEvent("input", { bubbles: true, cancelable: true });
+                user_input_ta.dispatchEvent(input_event);
+            } else if (event.code === "Enter") {
+                if (value) {
+                    currentIndex = -1;
+                    if (key_down_history.indexOf(value) === -1) {
+                        key_down_history.push(value);
+                        if (key_down_history.length > MAX_HISTORY_LENGTH) {
+                            key_down_history.shift();
                         }
                     }
-                });
-                break;
+                }
             }
-          }
+        });
+    }
+}
+
+function toggleUserInfoVisibility(shouldHide) {
+    if (userInfoDiv) {
+        if (shouldHide) {
+            userInfoDiv.classList.add("hideK");
+        } else {
+            userInfoDiv.classList.remove("hideK");
         }
-      }
-});
+    }
+}
+function showOrHideUserInfo() {
+    var sendBtn = document.getElementById("submit_btn");
+
+    // Bind mouse/touch events to show/hide user info
+    appTitleDiv.addEventListener("mouseenter", function () {
+        toggleUserInfoVisibility(false);
+    });
+    userInfoDiv.addEventListener("mouseenter", function () {
+        toggleUserInfoVisibility(false);
+    });
+    sendBtn.addEventListener("mouseenter", function () {
+        toggleUserInfoVisibility(false);
+    });
+
+    appTitleDiv.addEventListener("mouseleave", function () {
+        toggleUserInfoVisibility(true);
+    });
+    userInfoDiv.addEventListener("mouseleave", function () {
+        toggleUserInfoVisibility(true);
+    });
+    sendBtn.addEventListener("mouseleave", function () {
+        toggleUserInfoVisibility(true);
+    });
+
+    appTitleDiv.ontouchstart = function () {
+        toggleUserInfoVisibility(false);
+    };
+    userInfoDiv.ontouchstart = function () {
+        toggleUserInfoVisibility(false);
+    };
+    sendBtn.ontouchstart = function () {
+        toggleUserInfoVisibility(false);
+    };
+
+    appTitleDiv.ontouchend = function () {
+        setTimeout(function () {
+            toggleUserInfoVisibility(true);
+        }, 3000); 
+    };
+    userInfoDiv.ontouchend = function () {
+        setTimeout(function () {
+            toggleUserInfoVisibility(true);
+        }, 3000); 
+    };
+    sendBtn.ontouchend = function () {
+        setTimeout(function () {
+            toggleUserInfoVisibility(true);
+        }, 3000); // Delay 1 second to hide user info
+    };
+
+    // Hide user info after 2 second
+    setTimeout(function () {
+        toggleUserInfoVisibility(true);
+    }, 2000);
+}
 
-// 监听目标节点的子节点列表是否发生变化
-observer.observe(targetNode, { childList: true ,  subtree: true });
+function toggleDarkMode(isEnabled) {
+    if (isEnabled) {
+        gradioContainer.classList.add("dark");
+        document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
+    } else {
+        gradioContainer.classList.remove("dark");
+        document.body.style.backgroundColor = "";
+    }
+}
+function adjustDarkMode() {
+    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
+    // 根据当前颜色模式设置初始状态
+    toggleDarkMode(darkModeQuery.matches);
+    // 监听颜色模式变化
+    darkModeQuery.addEventListener("change", (e) => {
+        toggleDarkMode(e.matches);
+    });
+    // apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
+    apSwitch.addEventListener("change", (e) => {
+        toggleDarkMode(e.target.checked);
+    });
+}
+
+function setChatbotHeight() {
+    const screenWidth = window.innerWidth;
+    const statusDisplay = document.querySelector('#status_display');
+    const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
+    const wrap = chatbot.querySelector('.wrap');
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+    if (isInIframe) {
+        chatbot.style.height = `700px`;
+        wrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
+    } else {
+        if (screenWidth <= 320) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
+            wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        } else if (screenWidth <= 499) {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;
+            wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        } else {
+            chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;
+            wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
+        }
+    }
+}
+
+// 监视页面内部 DOM 变动
+var observer = new MutationObserver(function (mutations) {
+    gradioLoaded(mutations);
+});
+observer.observe(targetNode, { childList: true, subtree: true });
+
+// 监视页面变化
+window.addEventListener("DOMContentLoaded", function () {
+    isInIframe = (window.self !== window.top);
+});
+window.addEventListener('resize', setChatbotHeight);
+window.addEventListener('scroll', setChatbotHeight);
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);

config_example.json

@@ -1,14 +1,20 @@
 {
+    // 你的OpenAI API Key，一般必填，
+    // 若缺省填为 "openai_api_key": "" 则必须再在图形界面中填入API Key
     "openai_api_key": "sk-xxxxxxxxxxxxxxxxxxxxxxxxx",
-    "https_proxy": "http://127.0.0.1:1079",
-    "http_proxy": "http://127.0.0.1:1079",
-    "users": [], 
+    // 如果使用代理，请取消注释下面的两行，并替换代理URL
+    // "https_proxy": "http://127.0.0.1:1079",
+    // "http_proxy": "http://127.0.0.1:1079",
+    "users": [],
     "advance_docs": {
         "pdf": {
+            // 是否认为PDF是双栏的
             "two_column": false,
+            // 是否使用OCR识别PDF中的公式
             "formula_ocr": true
         }
     },
+    // 是否多个API Key轮换使用
     "multi_api_key": false,
     "api_key_list": [
         "sk-xxxxxxxxxxxxxxxxxxxxxxxx1",

modules/presets.py

@@ -24,7 +24,7 @@ NO_APIKEY_MSG = "API key为空，请检查是否输入正确。"  # API key 长
 NO_INPUT_MSG = "请输入对话内容。"  # 未输入对话内容
 BILLING_NOT_APPLICABLE_MSG = "模型本地运行中" # 本地运行的模型返回的账单信息
 
-TIMEOUT_STREAMING = 30  # 流式对话时的超时时间
+TIMEOUT_STREAMING = 60  # 流式对话时的超时时间
 TIMEOUT_ALL = 200  # 非流式对话时的超时时间
 ENABLE_STREAMING_OPTION = True  # 是否启用选择选择是否实时显示回答的勾选框
 HIDE_MY_KEY = False  # 如果你想在UI中隐藏你的 API 密钥，将此值设置为 True
@@ -33,7 +33,7 @@ CONCURRENT_COUNT = 100 # 允许同时使用的用户数量
 SIM_K = 5
 INDEX_QUERY_TEMPRATURE = 1.0
 
-CHUANHU_TITLE = """<h1 align="left" style="min-width:200px; margin-top:6px; white-space: nowrap;">川虎ChatGPT 🚀</h1>"""
+CHUANHU_TITLE = """<h1 align="left">川虎ChatGPT 🚀</h1>"""
 CHUANHU_DESCRIPTION = """\
 <div align="center" style="margin:16px 0">
 
@@ -44,8 +44,16 @@ CHUANHU_DESCRIPTION = """\
 </div>
 """
 
-FOOTER = """\
-<div class="versions">{versions}</div>
+FOOTER = """<div class="versions">{versions}</div>"""
+
+APPEARANCE_SWITCHER = """
+<div style="display: flex; justify-content: space-between;">
+<span style="margin-top: 4px !important;">切换亮暗色主题</span>
+<span><label class="apSwitch" for="checkbox">
+    <input type="checkbox" id="checkbox">
+    <div class="apSlider"></div>
+</label></span>
+</div>
 """
 
 SUMMARIZE_PROMPT = "你是谁？我们刚才聊了什么？"  # 总结对话时的 prompt