From a96f842b3abfae8fa0ed4f110fc7de2ae5d6954d Mon Sep 17 00:00:00 2001
From: binary-husky <qingxu.fu@outlook.com>
Date: Sat, 30 Dec 2023 02:57:42 +0800
Subject: [PATCH] minor ui change

---
 main.py          |  4 ++--
 themes/common.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/main.py b/main.py
index 56e1903..78e4c43 100644
--- a/main.py
+++ b/main.py
@@ -143,13 +143,13 @@ def main():
                             file_upload = gr.Files(label="任何文件, 推荐上传压缩文件(zip, tar)", file_count="multiple", elem_id="elem_upload")
 
 
-        with gr.Floating(init_x="0%", init_y="0%", visible=True, width=None, drag="forbidden"):
+        with gr.Floating(init_x="0%", init_y="0%", visible=True, width=None, drag="forbidden", elem_id="tooltip"):
             with gr.Row():
                 with gr.Tab("上传文件", elem_id="interact-panel"):
                     gr.Markdown("请上传本地文件/压缩包供“函数插件区”功能调用。请注意: 上传文件后会自动把输入区修改为相应路径。")
                     file_upload_2 = gr.Files(label="任何文件, 推荐上传压缩文件(zip, tar)", file_count="multiple", elem_id="elem_upload_float")
     
-                with gr.Tab("更换模型 & Prompt", elem_id="interact-panel"):
+                with gr.Tab("更换模型", elem_id="interact-panel"):
                     md_dropdown = gr.Dropdown(AVAIL_LLM_MODELS, value=LLM_MODEL, label="更换LLM模型/请求源").style(container=False)
                     top_p = gr.Slider(minimum=-0, maximum=1.0, value=1.0, step=0.01,interactive=True, label="Top-p (nucleus sampling)",)
                     temperature = gr.Slider(minimum=-0, maximum=2.0, value=1.0, step=0.01, interactive=True, label="Temperature",)
diff --git a/themes/common.js b/themes/common.js
index b27fa20..8bcf508 100644
--- a/themes/common.js
+++ b/themes/common.js
@@ -486,6 +486,58 @@ function audio_fn_init() {
 function minor_ui_adjustment() {
     let cbsc_area = document.getElementById('cbsc');
     cbsc_area.style.paddingTop = '15px';
+    var bar_btn_width = [];
+    // 自动隐藏超出范围的toolbar按钮
+    function auto_hide_toolbar() {
+        var qq = document.getElementById('tooltip');
+        var tab_nav = qq.getElementsByClassName('tab-nav');
+        if (tab_nav.length == 0){ return; }
+        var btn_list = tab_nav[0].getElementsByTagName('button')
+        if (btn_list.length == 0){ return; }
+        // 获取页面宽度
+        var page_width = document.documentElement.clientWidth;
+        // 总是保留的按钮数量
+        const always_preserve = 2;
+        // 获取最后一个按钮的右侧位置
+        var cur_right = btn_list[always_preserve-1].getBoundingClientRect().right;
+        if (bar_btn_width.length == 0){
+            // 首次运行，记录每个按钮的宽度
+            for (var i = 0; i < btn_list.length; i++) { 
+                bar_btn_width.push(btn_list[i].getBoundingClientRect().width);
+            }
+        }
+        // 处理每一个按钮
+        for (var i = always_preserve; i < btn_list.length; i++) {
+            var element = btn_list[i];
+            var element_right = element.getBoundingClientRect().right;
+            if (element_right!=0){ cur_right = element_right; }
+            if (element.style.display === 'none') {
+                if ((cur_right + bar_btn_width[i]) < (page_width * 0.37)) {
+                    // 恢复显示当前按钮
+                    element.style.display = 'block';
+                    console.log('show');
+                    return;
+                }else{
+                    return;
+                }
+            } else {
+                if (cur_right > (page_width * 0.38)) {
+                    // 隐藏当前按钮以及右侧所有按钮
+                    for (var j = i; j < btn_list.length; j++) {
+                        if (btn_list[j].style.display !== 'none') {
+                            btn_list[j].style.display = 'none';
+                        }
+                    }
+                    console.log('show');
+                    return;
+                }
+            }
+        }
+    }
+
+    setInterval(function () {
+        auto_hide_toolbar()
+    }, 200); // 每50毫秒执行一次
 }
 
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=