new version
This commit is contained in:
@@ -9,6 +9,11 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#input-plugin-group .secondary-wrap.svelte-aqlk7e.svelte-aqlk7e.svelte-aqlk7e {
|
||||
border: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* hide selector label */
|
||||
#input-plugin-group .svelte-1gfkn6j {
|
||||
visibility: hidden;
|
||||
@@ -19,3 +24,91 @@
|
||||
.wrap.svelte-xwlu1w {
|
||||
min-height: var(--size-32);
|
||||
}
|
||||
|
||||
/* status bar height */
|
||||
.min.svelte-1yrv54 {
|
||||
min-height: var(--size-12);
|
||||
}
|
||||
|
||||
/* copy btn */
|
||||
.message-btn-row {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
left: calc(100% + 3px);
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/* .message-btn-row-leading, .message-btn-row-trailing {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
} */
|
||||
.message-btn-row button {
|
||||
font-size: 18px;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
|
||||
|
||||
/* Scrollbar Width */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
/* Scrollbar Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Scrollbar Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Scrollbar Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* input btns: clear, reset, stop */
|
||||
#input-panel button {
|
||||
min-width: min(80px, 100%);
|
||||
}
|
||||
|
||||
/* input btns: clear, reset, stop */
|
||||
#input-panel2 button {
|
||||
min-width: min(80px, 100%);
|
||||
}
|
||||
|
||||
|
||||
#cbs {
|
||||
background-color: var(--block-background-fill) !important;
|
||||
}
|
||||
|
||||
#interact-panel .form {
|
||||
border: hidden
|
||||
}
|
||||
|
||||
.drag-area {
|
||||
border: solid;
|
||||
border-width: thin;
|
||||
user-select: none;
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
.floating-component #input-panel2 {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border: solid;
|
||||
border-width: thin;
|
||||
border-top-width: 0;
|
||||
}
|
||||
@@ -1,4 +1,81 @@
|
||||
function ChatBotHeight() {
|
||||
function gradioApp() {
|
||||
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
|
||||
const elems = document.getElementsByTagName('gradio-app');
|
||||
const elem = elems.length == 0 ? document : elems[0];
|
||||
if (elem !== document) {
|
||||
elem.getElementById = function(id) {
|
||||
return document.getElementById(id);
|
||||
};
|
||||
}
|
||||
return elem.shadowRoot ? elem.shadowRoot : elem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function addCopyButton(botElement) {
|
||||
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
|
||||
// Copy bot button
|
||||
const copiedIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
|
||||
const copyIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>';
|
||||
|
||||
const messageBtnColumnElement = botElement.querySelector('.message-btn-row');
|
||||
if (messageBtnColumnElement) {
|
||||
// Do something if .message-btn-column exists, for example, remove it
|
||||
// messageBtnColumnElement.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
var copyButton = document.createElement('button');
|
||||
copyButton.classList.add('copy-bot-btn');
|
||||
copyButton.setAttribute('aria-label', 'Copy');
|
||||
copyButton.innerHTML = copyIcon;
|
||||
copyButton.addEventListener('click', async () => {
|
||||
const textToCopy = botElement.innerText;
|
||||
try {
|
||||
if ("clipboard" in navigator) {
|
||||
await navigator.clipboard.writeText(textToCopy);
|
||||
copyButton.innerHTML = copiedIcon;
|
||||
setTimeout(() => {
|
||||
copyButton.innerHTML = copyIcon;
|
||||
}, 1500);
|
||||
} else {
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = textToCopy;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
copyButton.innerHTML = copiedIcon;
|
||||
setTimeout(() => {
|
||||
copyButton.innerHTML = copyIcon;
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error("Copy failed: ", error);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Copy failed: ", error);
|
||||
}
|
||||
});
|
||||
var messageBtnColumn = document.createElement('div');
|
||||
messageBtnColumn.classList.add('message-btn-row');
|
||||
messageBtnColumn.appendChild(copyButton);
|
||||
botElement.appendChild(messageBtnColumn);
|
||||
}
|
||||
|
||||
function chatbotContentChanged(attempt = 1, force = false) {
|
||||
// https://github.com/GaiZhenbiao/ChuanhuChatGPT/tree/main/web_assets/javascript
|
||||
for (var i = 0; i < attempt; i++) {
|
||||
setTimeout(() => {
|
||||
gradioApp().querySelectorAll('#gpt-chatbot .message-wrap .message.bot').forEach(addCopyButton);
|
||||
}, i === 0 ? 0 : 200);
|
||||
}
|
||||
}
|
||||
|
||||
function chatbotAutoHeight(){
|
||||
// 自动调整高度
|
||||
function update_height(){
|
||||
var { panel_height_target, chatbot_height, chatbot } = get_elements(true);
|
||||
if (panel_height_target!=chatbot_height)
|
||||
@@ -28,6 +105,15 @@ function ChatBotHeight() {
|
||||
}, 50); // 每100毫秒执行一次
|
||||
}
|
||||
|
||||
function GptAcademicJavaScriptInit(LAYOUT = "LEFT-RIGHT") {
|
||||
chatbotIndicator = gradioApp().querySelector('#gpt-chatbot > div.wrap');
|
||||
var chatbotObserver = new MutationObserver(() => {
|
||||
chatbotContentChanged(1);
|
||||
});
|
||||
chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
|
||||
if (LAYOUT === "LEFT-RIGHT") {chatbotAutoHeight();}
|
||||
}
|
||||
|
||||
function get_elements(consider_state_panel=false) {
|
||||
var chatbot = document.querySelector('#gpt-chatbot > div.wrap.svelte-18telvq');
|
||||
if (!chatbot) {
|
||||
@@ -36,14 +122,14 @@ function get_elements(consider_state_panel=false) {
|
||||
const panel1 = document.querySelector('#input-panel').getBoundingClientRect();
|
||||
const panel2 = document.querySelector('#basic-panel').getBoundingClientRect()
|
||||
const panel3 = document.querySelector('#plugin-panel').getBoundingClientRect();
|
||||
const panel4 = document.querySelector('#interact-panel').getBoundingClientRect();
|
||||
// const panel4 = document.querySelector('#interact-panel').getBoundingClientRect();
|
||||
const panel5 = document.querySelector('#input-panel2').getBoundingClientRect();
|
||||
const panel_active = document.querySelector('#state-panel').getBoundingClientRect();
|
||||
if (consider_state_panel || panel_active.height < 25){
|
||||
document.state_panel_height = panel_active.height;
|
||||
}
|
||||
// 25 是chatbot的label高度, 16 是右侧的gap
|
||||
var panel_height_target = panel1.height + panel2.height + panel3.height + panel4.height + panel5.height - 25 + 16*3;
|
||||
var panel_height_target = panel1.height + panel2.height + panel3.height + 0 + 0 - 25 + 16*2;
|
||||
// 禁止动态的state-panel高度影响
|
||||
panel_height_target = panel_height_target + (document.state_panel_height-panel_active.height)
|
||||
var panel_height_target = parseInt(panel_height_target);
|
||||
|
||||
@@ -198,7 +198,7 @@
|
||||
}
|
||||
|
||||
/* 小按钮 */
|
||||
.sm.svelte-1ipelgc {
|
||||
.sm {
|
||||
font-family: "Microsoft YaHei UI", "Helvetica", "Microsoft YaHei", "ui-sans-serif", "sans-serif", "system-ui";
|
||||
--button-small-text-weight: 600;
|
||||
--button-small-text-size: 16px;
|
||||
@@ -208,7 +208,7 @@
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
#plugin-panel .sm.svelte-1ipelgc {
|
||||
#plugin-panel .sm {
|
||||
font-family: "Microsoft YaHei UI", "Helvetica", "Microsoft YaHei", "ui-sans-serif", "sans-serif", "system-ui";
|
||||
--button-small-text-weight: 400;
|
||||
--button-small-text-size: 14px;
|
||||
|
||||
@@ -57,12 +57,9 @@ def adjust_theme():
|
||||
button_cancel_text_color_dark="white",
|
||||
)
|
||||
|
||||
if LAYOUT=="TOP-DOWN":
|
||||
js = ""
|
||||
else:
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
# 添加一个萌萌的看板娘
|
||||
if ADD_WAIFU:
|
||||
js += """
|
||||
|
||||
@@ -9,15 +9,15 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#plugin-panel .dropdown-arrow.svelte-p5edak {
|
||||
width: 50px;
|
||||
#plugin-panel .dropdown-arrow {
|
||||
width: 25px;
|
||||
}
|
||||
#plugin-panel input.svelte-aqlk7e.svelte-aqlk7e.svelte-aqlk7e {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* 小按钮 */
|
||||
.sm.svelte-1ipelgc {
|
||||
#basic-panel .sm {
|
||||
font-family: "Microsoft YaHei UI", "Helvetica", "Microsoft YaHei", "ui-sans-serif", "sans-serif", "system-ui";
|
||||
--button-small-text-weight: 600;
|
||||
--button-small-text-size: 16px;
|
||||
@@ -27,7 +27,7 @@
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
||||
#plugin-panel .sm.svelte-1ipelgc {
|
||||
#plugin-panel .sm {
|
||||
font-family: "Microsoft YaHei UI", "Helvetica", "Microsoft YaHei", "ui-sans-serif", "sans-serif", "system-ui";
|
||||
--button-small-text-weight: 400;
|
||||
--button-small-text-size: 14px;
|
||||
|
||||
@@ -57,11 +57,8 @@ def adjust_theme():
|
||||
button_cancel_text_color_dark="white",
|
||||
)
|
||||
|
||||
if LAYOUT=="TOP-DOWN":
|
||||
js = ""
|
||||
else:
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
# 添加一个萌萌的看板娘
|
||||
if ADD_WAIFU:
|
||||
|
||||
@@ -3,23 +3,29 @@ import logging
|
||||
from toolbox import get_conf, ProxyNetworkActivate
|
||||
CODE_HIGHLIGHT, ADD_WAIFU, LAYOUT = get_conf('CODE_HIGHLIGHT', 'ADD_WAIFU', 'LAYOUT')
|
||||
|
||||
def dynamic_set_theme(THEME):
|
||||
set_theme = gr.themes.ThemeClass()
|
||||
with ProxyNetworkActivate('Download_Gradio_Theme'):
|
||||
logging.info('正在下载Gradio主题,请稍等。')
|
||||
if THEME.startswith('Huggingface-'): THEME = THEME.lstrip('Huggingface-')
|
||||
if THEME.startswith('huggingface-'): THEME = THEME.lstrip('huggingface-')
|
||||
set_theme = set_theme.from_hub(THEME.lower())
|
||||
return set_theme
|
||||
|
||||
def adjust_theme():
|
||||
|
||||
try:
|
||||
set_theme = gr.themes.ThemeClass()
|
||||
with ProxyNetworkActivate():
|
||||
with ProxyNetworkActivate('Download_Gradio_Theme'):
|
||||
logging.info('正在下载Gradio主题,请稍等。')
|
||||
THEME, = get_conf('THEME')
|
||||
if THEME.startswith('Huggingface-'): THEME = THEME.lstrip('Huggingface-')
|
||||
if THEME.startswith('huggingface-'): THEME = THEME.lstrip('huggingface-')
|
||||
set_theme = set_theme.from_hub(THEME.lower())
|
||||
|
||||
if LAYOUT=="TOP-DOWN":
|
||||
js = ""
|
||||
else:
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
# 添加一个萌萌的看板娘
|
||||
if ADD_WAIFU:
|
||||
js += """
|
||||
|
||||
@@ -73,12 +73,8 @@ def adjust_theme():
|
||||
chatbot_code_background_color_dark="*neutral_950",
|
||||
)
|
||||
|
||||
js = ''
|
||||
if LAYOUT=="TOP-DOWN":
|
||||
js = ""
|
||||
else:
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
with open('themes/common.js', 'r', encoding='utf8') as f:
|
||||
js = f"<script>{f.read()}</script>"
|
||||
|
||||
# 添加一个萌萌的看板娘
|
||||
if ADD_WAIFU:
|
||||
|
||||
@@ -2,17 +2,22 @@ import gradio as gr
|
||||
from toolbox import get_conf
|
||||
THEME, = get_conf('THEME')
|
||||
|
||||
if THEME == 'Chuanhu-Small-and-Beautiful':
|
||||
from .green import adjust_theme, advanced_css
|
||||
theme_declaration = "<h2 align=\"center\" class=\"small\">[Chuanhu-Small-and-Beautiful主题]</h2>"
|
||||
elif THEME == 'High-Contrast':
|
||||
from .contrast import adjust_theme, advanced_css
|
||||
theme_declaration = ""
|
||||
elif '/' in THEME:
|
||||
from .gradios import adjust_theme, advanced_css
|
||||
theme_declaration = ""
|
||||
else:
|
||||
from .default import adjust_theme, advanced_css
|
||||
theme_declaration = ""
|
||||
|
||||
def load_dynamic_theme(THEME):
|
||||
adjust_dynamic_theme = None
|
||||
if THEME == 'Chuanhu-Small-and-Beautiful':
|
||||
from .green import adjust_theme, advanced_css
|
||||
theme_declaration = "<h2 align=\"center\" class=\"small\">[Chuanhu-Small-and-Beautiful主题]</h2>"
|
||||
elif THEME == 'High-Contrast':
|
||||
from .contrast import adjust_theme, advanced_css
|
||||
theme_declaration = ""
|
||||
elif '/' in THEME:
|
||||
from .gradios import adjust_theme, advanced_css
|
||||
from .gradios import dynamic_set_theme
|
||||
adjust_dynamic_theme = dynamic_set_theme(THEME)
|
||||
theme_declaration = ""
|
||||
else:
|
||||
from .default import adjust_theme, advanced_css
|
||||
theme_declaration = ""
|
||||
return adjust_theme, advanced_css, theme_declaration, adjust_dynamic_theme
|
||||
|
||||
adjust_theme, advanced_css, theme_declaration, _ = load_dynamic_theme(THEME)
|
||||
Reference in New Issue
Block a user