feat: 页面加载后自动隐藏user_display, 但在点击相关元素时显示

- 改变了上次的组件布局
- 做了一个很丑陋的 user label, 但是能用吧。能用就行。
- 使用了js......大量js, 同时整理了之前的js缩进和DOM监听事件
现在 user label 具体的显示逻辑是:
1. 页面加载后延迟显示4s;
2. 鼠标移动到或手指点击“川虎ChatGPT标题”、“user_info”区域、发送框时显示, 离开或touch结束时隐藏;
3. 手指点击会延迟显示3秒。鼠标移动无延迟;
4. CSS中设定显示动画: 出现0.3s, 消失1s.
- float_display里还可以自由地补充布局任何元素, 都可以采用这种办法
- 同时加大了小屏幕chatbot气泡宽度, resolve #515

ChuanhuChatbot.py

@@ -30,10 +30,10 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
     topic = gr.State("未命名对话历史记录")
 
     with gr.Row():
-        with gr.Column():
-            gr.HTML(title)
-            user_info = gr.Markdown(value="", elem_id="user_info")
+        gr.HTML(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):
@@ -54,8 +54,8 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         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")
+                with gr.Column(min_width=65, scale=1):
+                    submitBtn = gr.Button("发送", variant="primary", elem_id="submit_btn")
                     cancelBtn = gr.Button("取消", variant="secondary", visible=False)
             with gr.Row():
                 emptyBtn = gr.Button(

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 */
@@ -74,7 +96,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;
@@ -139,6 +161,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,4 +1,5 @@
 // custom javascript here
+
 const MAX_HISTORY_LENGTH = 32;
 
 var key_down_history = [];
@@ -7,64 +8,143 @@ var user_input_ta;
 
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
-var observer = new MutationObserver(function(mutations) {
+
+function selectHistory(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();
+            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();
+                                    }
                                 }
                             }
                         }
-                    }
-                });
-                break;
+                    });
+                    break;
+                }
             }
-          }
         }
-      }
-});
+    }
+}
+var userInfoDiv = null;
+function toggleUserInfoVisibility(shouldHide) {
+    if (userInfoDiv) {
+        if (shouldHide) {
+            userInfoDiv.classList.add("hideK");
+        } else {
+            userInfoDiv.classList.remove("hideK");
+        }
+    }
+}
+function showOrHideUserInfo() {
+    userInfoDiv = document.getElementById("user_info");
+    var appTitleDiv = document.getElementById("app_title");
+    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);
+}
+
+
+var observer = new MutationObserver(function (mutations) {
+    selectHistory(mutations);
+    showOrHideUserInfo();
+}
+);
+observer.observe(targetNode, { childList: true, subtree: true });
 
-// 监听目标节点的子节点列表是否发生变化
-observer.observe(targetNode, { childList: true ,  subtree: true });
 
+window.addEventListener("DOMContentLoaded", function () {
+    setTimeout(function () {
+        showOrHideUserInfo();
+    }, 2000);
+});

modules/presets.py

@@ -30,7 +30,7 @@ CONCURRENT_COUNT = 100 # 允许同时使用的用户数量
 SIM_K = 5
 INDEX_QUERY_TEMPRATURE = 1.0
 
-title = """<h1 align="left" style="min-width:200px; margin-top:6px; white-space: nowrap;">川虎ChatGPT 🚀</h1>"""
+title = """<h1 align="left">川虎ChatGPT 🚀</h1>"""
 description = """\
 <div align="center" style="margin:16px 0">
 
@@ -42,9 +42,7 @@ description = """\
 </div>
 """
 
-footer = """\
-<div class="versions">{versions}</div>
-"""
+footer = """<div class="versions">{versions}</div>"""
 
 summarize_prompt = "你是谁？我们刚才聊了什么？"  # 总结对话时的 prompt