重新编译Gradio优化使用体验
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;
|
||||
@@ -82,4 +87,28 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -74,13 +74,8 @@ function chatbotContentChanged(attempt = 1, force = false) {
|
||||
}
|
||||
}
|
||||
|
||||
function GptAcademicJavaScriptInit() {
|
||||
chatbotIndicator = gradioApp().querySelector('#gpt-chatbot > div.wrap');
|
||||
var chatbotObserver = new MutationObserver(() => {
|
||||
chatbotContentChanged(1);
|
||||
});
|
||||
chatbotObserver.observe(chatbotIndicator, { attributes: true, childList: true, subtree: true });
|
||||
|
||||
function chatbotAutoHeight(){
|
||||
// 自动调整高度
|
||||
function update_height(){
|
||||
var { panel_height_target, chatbot_height, chatbot } = get_elements(true);
|
||||
if (panel_height_target!=chatbot_height)
|
||||
@@ -110,6 +105,15 @@ function GptAcademicJavaScriptInit() {
|
||||
}, 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) {
|
||||
@@ -118,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);
|
||||
|
||||
@@ -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,8 +9,8 @@
|
||||
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;
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -23,12 +23,9 @@ def adjust_theme():
|
||||
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:
|
||||
|
||||
Reference in New Issue
Block a user