Update assets/custom.js

assets/custom.js

@@ -16,8 +16,18 @@ var chatbot = null;
 
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
+var metaTags = document.getElementsByTagName('meta');
+var isInHuggingFace = false;
 
-// gradio 页面加载好了么???
+for (var i = 0; i < metaTags.length; i++) {
+    var tag = metaTags[i];
+    if (tag.getAttribute('name') === 'twitter:site' && tag.getAttribute('content') === '@huggingface') {
+        isInHuggingFace = true;
+    }
+    break;
+}
+
+// gradio 页面加载好了么??? 我能动你的元素了么??
 function gradioLoaded(mutations) {
     for (var i = 0; i < mutations.length; i++) {
         if (mutations[i].addedNodes.length) {  
@@ -26,18 +36,18 @@ function gradioLoaded(mutations) {
             userInfoDiv = document.getElementById("user_info");
             chatbot = document.querySelector('#chuanhu_chatbot');
 
-            if (gradioContainer) {  // user_input_tb 加载出来了没?
+            if (gradioContainer) {  // gradioCainter 加载出来了没?
                 adjustDarkMode();
             }
             if (user_input_tb) {  // user_input_tb 加载出来了没?
                 selectHistory();
             }
-            if (userInfoDiv) {  // user_input_tb 加载出来了没?
+            if (userInfoDiv) {  // userInfoDiv 加载出来了没?
                 setTimeout(showOrHideUserInfo(), 2000);
             }
-            // if (chatbot) {  // user_input_tb 加载出来了没?
-                // setChatbotHeight()
-            // }
+            if (chatbot) {  // chatbot 加载出来了没?
+                setChatbotHeight()
+            }
         }
     }
 }
@@ -89,6 +99,7 @@ function selectHistory() {
         });
     }
 }
+
 function toggleUserInfoVisibility(shouldHide) {
     if (userInfoDiv) {
         if (shouldHide) {
@@ -179,51 +190,33 @@ function setChatbotHeight() {
     const screenWidth = window.innerWidth;
     const statusDisplay = document.querySelector('#status_display');
     const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
-    // const chatbot = document.querySelector('#chuanhu_chatbot');
+    const wrap = chatbot.querySelector('.wrap');
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
-    if (screenWidth <= 320) {
-        if (chatbot) {
+    if (isInHuggingFace) {
+        chatbot.style.height = `500px`;
+        wrap.style.maxHeight = `calc(500px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
+    } else {
+        if (screenWidth <= 320) {
             chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
-            const wrap = chatbot.querySelector('.wrap');
-            if (wrap) {
-                wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
-            }
-        } 
-    } else if (screenWidth <= 499) {
-        if (chatbot) {
+            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)`;
-            const wrap = chatbot.querySelector('.wrap');
-            if (wrap) {
-                wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
-            }
-        }
-    } else {
-        if (chatbot) {
+            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)`;
-            const wrap = chatbot.querySelector('.wrap');
-            if (wrap) {
-                wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
-            }
+            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 () {
-    // setChatbotHeight();
-    // setTimeout(function () {
-    //     showOrHideUserInfo();
-    //     setChatbotHeight();
-    // }, 2000);
-    // 本来是为了页面刷出来等两秒重试的，现在这么写不需要了~ 但框架先留着万一需要呢QAQ
-});
-// window.addEventListener('resize', setChatbotHeight);
-// window.addEventListener('scroll', setChatbotHeight);
+// 监视页面变化
+window.addEventListener('resize', setChatbotHeight);
+window.addEventListener('scroll', setChatbotHeight);
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);