Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| function openSettingBox() { | |
| chuanhuPopup.classList.add('showBox'); | |
| popupWrapper.classList.add('showBox'); | |
| settingBox.classList.remove('hideBox'); | |
| trainingBox.classList.add('hideBox'); | |
| showMask("box"); | |
| } | |
| function openTrainingBox() { | |
| chuanhuPopup.classList.add('showBox'); | |
| popupWrapper.classList.add('showBox'); | |
| trainingBox.classList.remove('hideBox'); | |
| settingBox.classList.add('hideBox'); | |
| showMask("box"); | |
| } | |
| function openChatMore() { | |
| chatbotArea.classList.add('show-chat-more'); | |
| showMask("chat-more"); | |
| } | |
| function closeChatMore() { | |
| chatbotArea.classList.remove('show-chat-more'); | |
| chatbotArea.querySelector('.chuanhu-mask')?.remove(); | |
| } | |
| function showMask(obj) { | |
| const mask = document.createElement('div'); | |
| mask.classList.add('chuanhu-mask'); | |
| if (obj == "box") { | |
| mask.classList.add('mask-blur'); | |
| document.body.classList.add('popup-open'); | |
| popupWrapper.appendChild(mask); | |
| } else if (obj == "chat-more") { | |
| mask.classList.add('transparent-mask'); | |
| chatbotArea.querySelector('#chatbot-input-more-area').parentNode.appendChild(mask); | |
| } else if (obj == "update-toast") { | |
| mask.classList.add('chuanhu-top-mask'); | |
| if (document.querySelector('.chuanhu-top-mask')) { | |
| for (var i = 0; i < document.querySelectorAll('.chuanhu-top-mask').length; i++) { | |
| document.querySelectorAll('.chuanhu-top-mask')[i].remove(); | |
| } | |
| } | |
| document.body.appendChild(mask); | |
| // mask.classList.add('transparent-mask'); | |
| } | |
| mask.addEventListener('click', () => { | |
| if (obj == "box") { | |
| closeBox(); | |
| } else if (obj == "chat-more") { | |
| closeChatMore(); | |
| } else if (obj == "update-toast") { | |
| closeUpdateToast(); | |
| } | |
| }); | |
| } | |
| function chatMoreBtnClick() { | |
| if (chatbotArea.classList.contains('show-chat-more')) { | |
| closeChatMore(); | |
| } else { | |
| openChatMore(); | |
| } | |
| } | |
| function closeBtnClick(obj) { | |
| if (obj == "box") { | |
| closeBox(); | |
| } else if (obj == "toolbox") { | |
| closeSide(toolbox); | |
| wantOpenToolbox = false; | |
| } | |
| } | |
| function closeBox() { | |
| chuanhuPopup.classList.remove('showBox'); | |
| popupWrapper.classList.remove('showBox'); | |
| trainingBox.classList.add('hideBox'); | |
| settingBox.classList.add('hideBox'); | |
| document.querySelector('.chuanhu-mask')?.remove(); | |
| document.body.classList.remove('popup-open'); | |
| } | |
| function closeSide(sideArea) { | |
| document.body.classList.remove('popup-open'); | |
| sideArea.classList.remove('showSide'); | |
| if (sideArea == toolbox) { | |
| chuanhuHeader.classList.remove('under-box'); | |
| chatbotArea.classList.remove('toolbox-open') | |
| toolboxOpening = false; | |
| } else if (sideArea == menu) { | |
| chatbotArea.classList.remove('menu-open') | |
| menuOpening = false; | |
| } | |
| adjustMask(); | |
| } | |
| function openSide(sideArea) { | |
| sideArea.classList.add('showSide'); | |
| if (sideArea == toolbox) { | |
| chuanhuHeader.classList.add('under-box'); | |
| chatbotArea.classList.add('toolbox-open') | |
| toolboxOpening = true; | |
| } else if (sideArea == menu) { | |
| chatbotArea.classList.add('menu-open') | |
| menuOpening = true; | |
| } | |
| // document.body.classList.add('popup-open'); | |
| } | |
| function menuClick() { | |
| shouldAutoClose = false; | |
| if (menuOpening) { | |
| closeSide(menu); | |
| wantOpenMenu = false; | |
| } else { | |
| if (windowWidth < 1024 && toolboxOpening) { | |
| closeSide(toolbox); | |
| wantOpenToolbox = false; | |
| } | |
| openSide(menu); | |
| wantOpenMenu = true; | |
| } | |
| adjustSide(); | |
| } | |
| function toolboxClick() { | |
| shouldAutoClose = false; | |
| if (toolboxOpening) { | |
| closeSide(toolbox); | |
| wantOpenToolbox = false; | |
| } else { | |
| if (windowWidth < 1024 && menuOpening) { | |
| closeSide(menu); | |
| wantOpenMenu = false; | |
| } | |
| openSide(toolbox); | |
| wantOpenToolbox = true; | |
| } | |
| adjustSide(); | |
| } | |
| var menuOpening = false; | |
| var toolboxOpening = false; | |
| var shouldAutoClose = true; | |
| var wantOpenMenu = windowWidth > 768; | |
| var wantOpenToolbox = windowWidth >= 1024; | |
| function adjustSide() { | |
| if (windowWidth >= 1024) { | |
| shouldAutoClose = true; | |
| if (wantOpenMenu) { | |
| openSide(menu); | |
| if (wantOpenToolbox) openSide(toolbox); | |
| } else if (wantOpenToolbox) { | |
| openSide(toolbox); | |
| } else { | |
| closeSide(menu); | |
| closeSide(toolbox); | |
| } | |
| } else if (windowWidth > 768 && windowWidth < 1024 ) { | |
| shouldAutoClose = true; | |
| if (wantOpenToolbox) { | |
| if (wantOpenMenu) { | |
| closeSide(toolbox); | |
| openSide(menu); | |
| } else { | |
| closeSide(menu); | |
| openSide(toolbox); | |
| } | |
| } else if (wantOpenMenu) { | |
| if (wantOpenToolbox) { | |
| closeSide(menu); | |
| openSide(toolbox); | |
| } else { | |
| closeSide(toolbox); | |
| openSide(menu); | |
| } | |
| } else if (!wantOpenMenu && !wantOpenToolbox){ | |
| closeSide(menu); | |
| closeSide(toolbox); | |
| } | |
| } else { // windowWidth <= 768 | |
| if (shouldAutoClose) { | |
| closeSide(menu); | |
| // closeSide(toolbox); | |
| } | |
| } | |
| checkChatbotWidth(); | |
| adjustMask(); | |
| } | |
| function adjustMask() { | |
| var sideMask = null; | |
| if (!gradioApp().querySelector('.chuanhu-side-mask')) { | |
| sideMask = document.createElement('div'); | |
| sideMask.classList.add('chuanhu-side-mask'); | |
| gradioApp().appendChild(sideMask); | |
| sideMask.addEventListener('click', () => { | |
| closeSide(menu); | |
| closeSide(toolbox); | |
| }); | |
| } | |
| sideMask = gradioApp().querySelector('.chuanhu-side-mask'); | |
| if (windowWidth > 768) { | |
| sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)'; | |
| setTimeout(() => {sideMask.style.display = 'none'; }, 100); | |
| return; | |
| } | |
| // if (windowWidth <= 768) | |
| if (menuOpening || toolboxOpening) { | |
| document.body.classList.add('popup-open'); | |
| sideMask.style.display = 'block'; | |
| setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200); | |
| sideMask.classList.add('mask-blur'); | |
| } else if (!menuOpening && !toolboxOpening) { | |
| sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)'; | |
| setTimeout(() => {sideMask.style.display = 'none'; }, 100); | |
| } | |
| } | |
| function checkChatbotWidth() { | |
| // let chatbotWidth = chatbotArea.clientWidth; | |
| // if (chatbotWidth > 488) { | |
| if (windowWidth > 768) { | |
| chatbotArea.classList.add('chatbot-full-width'); | |
| } else { | |
| chatbotArea.classList.remove('chatbot-full-width'); | |
| } | |
| if (windowWidth > 768) { | |
| chatbotArea.classList.remove('no-toolbox'); | |
| chatbotArea.classList.remove('no-menu'); | |
| if (!chatbotArea.classList.contains('toolbox-open') && chatbotArea.classList.contains('menu-open')) { | |
| chatbotArea.classList.add('no-toolbox'); | |
| } else if (!chatbotArea.classList.contains('menu-open') && chatbotArea.classList.contains('toolbox-open')) { | |
| chatbotArea.classList.add('no-menu'); | |
| } else if (!chatbotArea.classList.contains('menu-open') && !chatbotArea.classList.contains('toolbox-open')) { | |
| chatbotArea.classList.add('no-toolbox'); | |
| chatbotArea.classList.add('no-menu'); | |
| } | |
| } | |
| checkChatMoreMask(); | |
| } | |
| function checkChatMoreMask() { | |
| if (!chatbotArea.classList.contains('chatbot-full-width')) { | |
| chatbotArea.querySelector('.chuanhu-mask')?.remove(); | |
| chatbotArea.classList.remove('show-chat-more'); | |
| } | |
| } | |
| /* | |
| function setHistroyPanel() { | |
| const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input'); | |
| const historyPanel = document.createElement('div'); | |
| historyPanel.classList.add('chuanhu-history-panel'); | |
| historySelector.parentNode.insertBefore(historyPanel, historySelector); | |
| var historyList=null; | |
| historySelectorInput.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| historyList = gradioApp().querySelector('#history-select-dropdown ul.options'); | |
| if (historyList) { | |
| // gradioApp().querySelector('.chuanhu-history-panel')?.remove(); | |
| historyPanel.innerHTML = ''; | |
| let historyListClone = historyList.cloneNode(true); | |
| historyListClone.removeAttribute('style'); | |
| // historyList.classList.add('hidden'); | |
| historyList.classList.add('hideK'); | |
| historyPanel.appendChild(historyListClone); | |
| addHistoryPanelListener(historyPanel); | |
| // historySelector.parentNode.insertBefore(historyPanel, historySelector); | |
| } | |
| }); | |
| } | |
| */ | |
| // function addHistoryPanelListener(historyPanel){ | |
| // historyPanel.querySelectorAll('ul.options > li').forEach((historyItem) => { | |
| // historyItem.addEventListener('click', (e) => { | |
| // const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input'); | |
| // const historySelectBtn = gradioApp().querySelector('#history-select-btn'); | |
| // historySelectorInput.value = historyItem.innerText; | |
| // historySelectBtn.click(); | |
| // }); | |
| // }); | |
| // } | |
| // function testTrain() { | |
| // trainBody.classList.toggle('hide-body'); | |
| // trainingBox.classList.remove('hideBox'); | |
| // var chuanhuBody = document.querySelector('#chuanhu-body'); | |
| // chuanhuBody.classList.toggle('hide-body'); | |
| // } |