Intoval/privateChatGPT
1
1 2// custom javascript here3 4const MAX_HISTORY_LENGTH = 32;5 6var key_down_history = [];7var currentIndex = -1;8var user_input_ta;9 10var gradioContainer = null;11var user_input_ta = null;12var user_input_tb = null;13var userInfoDiv = null;14var appTitleDiv = null;15var chatbot = null;16var apSwitch = null;17 18var ga = document.getElementsByTagName("gradio-app");19var targetNode = ga[0];20var isInIframe = (window.self !== window.top);21 22// gradio 页面加载好了么??? 我能动你的元素了么??23function gradioLoaded(mutations) {24 for (var i = 0; i < mutations.length; i++) {25 if (mutations[i].addedNodes.length) { 26 gradioContainer = document.querySelector(".gradio-container");27 user_input_tb = document.getElementById('user_input_tb');28 userInfoDiv = document.getElementById("user_info");29 appTitleDiv = document.getElementById("app_title");30 chatbot = document.querySelector('#chuanhu_chatbot');31 apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');32 33 if (gradioContainer && apSwitch) { // gradioCainter 加载出来了没?34 adjustDarkMode();35 }36 if (user_input_tb) { // user_input_tb 加载出来了没?37 selectHistory();38 }39 if (userInfoDiv && appTitleDiv) { // userInfoDiv 和 appTitleDiv 加载出来了没?40 setTimeout(showOrHideUserInfo(), 2000);41 }42 if (chatbot) { // chatbot 加载出来了没?43 setChatbotHeight()44 }45 }46 }47}48 49function selectHistory() {50 user_input_ta = user_input_tb.querySelector("textarea");51 if (user_input_ta) {52 observer.disconnect(); // 停止监听53 // 在 textarea 上监听 keydown 事件54 user_input_ta.addEventListener("keydown", function (event) {55 var value = user_input_ta.value.trim();56 // 判断按下的是否为方向键57 if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {58 // 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作59 if (value && key_down_history.indexOf(value) === -1)60 return;61 // 对于需要响应的动作，阻止默认行为。62 event.preventDefault();63 var length = key_down_history.length;64 if (length === 0) {65 currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置66 return;67 }68 if (currentIndex === -1) {69 currentIndex = length;70 }71 if (event.code === 'ArrowUp' && currentIndex > 0) {72 currentIndex--;73 user_input_ta.value = key_down_history[currentIndex];74 } else if (event.code === 'ArrowDown' && currentIndex < length - 1) {75 currentIndex++;76 user_input_ta.value = key_down_history[currentIndex];77 }78 user_input_ta.selectionStart = user_input_ta.value.length;79 user_input_ta.selectionEnd = user_input_ta.value.length;80 const input_event = new InputEvent("input", { bubbles: true, cancelable: true });81 user_input_ta.dispatchEvent(input_event);82 } else if (event.code === "Enter") {83 if (value) {84 currentIndex = -1;85 if (key_down_history.indexOf(value) === -1) {86 key_down_history.push(value);87 if (key_down_history.length > MAX_HISTORY_LENGTH) {88 key_down_history.shift();89 }90 }91 }92 }93 });94 }95}96 97function toggleUserInfoVisibility(shouldHide) {98 if (userInfoDiv) {99 if (shouldHide) {100 userInfoDiv.classList.add("hideK");101 } else {102 userInfoDiv.classList.remove("hideK");103 }104 }105}106function showOrHideUserInfo() {107 var sendBtn = document.getElementById("submit_btn");108 109 // Bind mouse/touch events to show/hide user info110 appTitleDiv.addEventListener("mouseenter", function () {111 toggleUserInfoVisibility(false);112 });113 userInfoDiv.addEventListener("mouseenter", function () {114 toggleUserInfoVisibility(false);115 });116 sendBtn.addEventListener("mouseenter", function () {117 toggleUserInfoVisibility(false);118 });119 120 appTitleDiv.addEventListener("mouseleave", function () {121 toggleUserInfoVisibility(true);122 });123 userInfoDiv.addEventListener("mouseleave", function () {124 toggleUserInfoVisibility(true);125 });126 sendBtn.addEventListener("mouseleave", function () {127 toggleUserInfoVisibility(true);128 });129 130 appTitleDiv.ontouchstart = function () {131 toggleUserInfoVisibility(false);132 };133 userInfoDiv.ontouchstart = function () {134 toggleUserInfoVisibility(false);135 };136 sendBtn.ontouchstart = function () {137 toggleUserInfoVisibility(false);138 };139 140 appTitleDiv.ontouchend = function () {141 setTimeout(function () {142 toggleUserInfoVisibility(true);143 }, 3000); 144 };145 userInfoDiv.ontouchend = function () {146 setTimeout(function () {147 toggleUserInfoVisibility(true);148 }, 3000); 149 };150 sendBtn.ontouchend = function () {151 setTimeout(function () {152 toggleUserInfoVisibility(true);153 }, 3000); // Delay 1 second to hide user info154 };155 156 // Hide user info after 2 second157 setTimeout(function () {158 toggleUserInfoVisibility(true);159 }, 2000);160}161 162function toggleDarkMode(isEnabled) {163 if (isEnabled) {164 gradioContainer.classList.add("dark");165 document.body.style.setProperty("background-color", "var(--neutral-950)", "important");166 } else {167 gradioContainer.classList.remove("dark");168 document.body.style.backgroundColor = "";169 }170}171function adjustDarkMode() {172 const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");173 174 // 根据当前颜色模式设置初始状态175 apSwitch.checked = darkModeQuery.matches;176 toggleDarkMode(darkModeQuery.matches);177 // 监听颜色模式变化178 darkModeQuery.addEventListener("change", (e) => {179 apSwitch.checked = e.matches;180 toggleDarkMode(e.matches);181 });182 // apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');183 apSwitch.addEventListener("change", (e) => {184 toggleDarkMode(e.target.checked);185 });186}187 188function setChatbotHeight() {189 const screenWidth = window.innerWidth;190 const statusDisplay = document.querySelector('#status_display');191 const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;192 const wrap = chatbot.querySelector('.wrap');193 const vh = window.innerHeight * 0.01;194 document.documentElement.style.setProperty('--vh', `${vh}px`);195 if (isInIframe) {196 chatbot.style.height = `700px`;197 wrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`198 } else {199 if (screenWidth <= 320) {200 chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;201 wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;202 } else if (screenWidth <= 499) {203 chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px)`;204 wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 100}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;205 } else {206 chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px)`;207 wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;208 }209 }210}211 212// 监视页面内部 DOM 变动213var observer = new MutationObserver(function (mutations) {214 gradioLoaded(mutations);215});216observer.observe(targetNode, { childList: true, subtree: true });217 218// 监视页面变化219window.addEventListener("DOMContentLoaded", function () {220 isInIframe = (window.self !== window.top);221});222window.addEventListener('resize', setChatbotHeight);223window.addEventListener('scroll', setChatbotHeight);224window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);