合并川虎UI 细节
This commit is contained in:
w_xiaolizu
53
__main__.py
53
__main__.py
@ -75,13 +75,14 @@ class ChatBot(ChatBotFrame):
|
||||
self.chatbot = gr.Chatbot(elem_id='main_chatbot', label=f"当前模型：{LLM_MODEL}")
|
||||
self.chatbot.style()
|
||||
self.history = gr.State([])
|
||||
temp_draw = [gr.HTML() for i in range(4)]
|
||||
temp_draw = [gr.HTML() for i in range(2)]
|
||||
with gr.Row():
|
||||
self.txt = gr.Textbox(show_label=False, placeholder="Input question here.", elem_id='chat_txt').style(container=False)
|
||||
self.input_copy = gr.State('')
|
||||
self.submitBtn = gr.Button("提交", variant="primary", visible=False).style(full_width=False)
|
||||
with gr.Row(elem_id='debug_mes'):
|
||||
self.status = gr.Markdown(f"Tip: 按Enter提交, 按Shift+Enter换行。当前模型: {LLM_MODEL} \n {proxy_info}")
|
||||
self.submitBtn = gr.Button("", variant="primary", elem_classes='submit_btn').style(full_width=False)
|
||||
with gr.Row():
|
||||
self.status = gr.Markdown(f"Tip: 按Enter提交, 按Shift+Enter换行\n {proxy_info}", elem_id='debug_mes')
|
||||
|
||||
|
||||
def draw_examples(self):
|
||||
with gr.Column(elem_id='examples_col') as self.examples_column:
|
||||
@ -119,7 +120,7 @@ class ChatBot(ChatBotFrame):
|
||||
self.area_crazy_fn])
|
||||
|
||||
def __clear_input(self, inputs):
|
||||
return '', inputs
|
||||
return '', inputs, self.examples_column.update(visible=False)
|
||||
|
||||
def draw_prompt(self):
|
||||
with gr.Row():
|
||||
@ -137,7 +138,7 @@ class ChatBot(ChatBotFrame):
|
||||
with gr.Row():
|
||||
with gr.Column(scale=100):
|
||||
self.pro_results = gr.Chatbot(label='Prompt and result', elem_id='prompt_result').style()
|
||||
with gr.Column(scale=11):
|
||||
with gr.Column(scale=16):
|
||||
Tips = "用 BORF 分析法设计chat GPT prompt:\n" \
|
||||
"1、阐述背景 B(Background): 说明背景，为chatGPT提供充足的信息\n" \
|
||||
"2、定义目标 O(Objectives):“我们希望实现什么”\n" \
|
||||
@ -182,16 +183,12 @@ class ChatBot(ChatBotFrame):
|
||||
self.pro_reuse_btn.click(
|
||||
fn=func_box.reuse_chat,
|
||||
inputs=[self.pro_results, self.chatbot, self.history, self.pro_name_txt],
|
||||
outputs=[self.chatbot, self.history, self.txt, self.tabs_chatbot, self.pro_name_txt]
|
||||
outputs=[self.chatbot, self.history, self.txt, self.tabs_chatbot, self.pro_name_txt, self.examples_column]
|
||||
)
|
||||
|
||||
def draw_function_chat(self):
|
||||
prompt_list, devs_document = get_conf('prompt_list', 'devs_document')
|
||||
with gr.Row():
|
||||
# self.cpopyBtn = gr.Button("复制回答", variant="secondary").style(size="sm")
|
||||
self.resetBtn = gr.Button("新建对话", variant="secondary", elem_id='empty_btn').style(size="sm")
|
||||
self.stopBtn = gr.Button("中止对话", variant="stop").style(size="sm")
|
||||
with gr.Tab('Function'):
|
||||
with gr.TabItem('Function', id='func_tab'):
|
||||
with gr.Accordion("基础功能区", open=False) as self.area_basic_fn:
|
||||
with gr.Row():
|
||||
for k in functional:
|
||||
@ -224,7 +221,7 @@ class ChatBot(ChatBotFrame):
|
||||
self.prompt_tab.select(fn=lambda: 1, inputs=None, outputs=self.tabs_code)
|
||||
|
||||
def draw_public_chat(self):
|
||||
with gr.Tab('Plugins'):
|
||||
with gr.TabItem('Plugins', id='plug_tab'):
|
||||
with gr.Accordion("上传本地文件可供高亮函数插件调用", open=False) as self.area_file_up:
|
||||
self.file_upload = gr.Files(label="任何文件, 但推荐上传压缩文件(zip, tar)",
|
||||
file_count="multiple")
|
||||
@ -255,7 +252,7 @@ class ChatBot(ChatBotFrame):
|
||||
|
||||
def draw_setting_chat(self):
|
||||
switch_model = get_conf('switch_model')[0]
|
||||
with gr.Tab('Settings'):
|
||||
with gr.TabItem('Settings', id='sett_tab'):
|
||||
self.top_p = gr.Slider(minimum=-0, maximum=1.0, value=1.0, step=0.01, interactive=True,
|
||||
label="Top-p (nucleus sampling)", ).style(container=False)
|
||||
self.temperature = gr.Slider(minimum=-0, maximum=2.0, value=1.0, step=0.01, interactive=True,
|
||||
@ -305,7 +302,8 @@ class ChatBot(ChatBotFrame):
|
||||
self.system_prompt, self.models_box, self.plugin_advanced_arg]
|
||||
self.output_combo = [self.cookies, self.chatbot, self.history, self.status]
|
||||
self.predict_args = dict(fn=ArgsGeneralWrapper(predict), inputs=self.input_combo, outputs=self.output_combo)
|
||||
self.clear_agrs = dict(fn=self.__clear_input, inputs=[self.txt], outputs=[self.txt, self.input_copy])
|
||||
self.clear_agrs = dict(fn=self.__clear_input, inputs=[self.txt], outputs=[self.txt, self.input_copy,
|
||||
self.examples_column])
|
||||
# 提交按钮、重置按钮
|
||||
self.cancel_handles.append(self.txt.submit(**self.clear_agrs).then(**self.predict_args))
|
||||
self.cancel_handles.append(self.submitBtn.click(**self.clear_agrs).then(**self.predict_args))
|
||||
@ -340,7 +338,7 @@ class ChatBot(ChatBotFrame):
|
||||
def on_dropdown_changed(k):
|
||||
# 按钮颜色随变
|
||||
variant = crazy_fns[k]["Color"] if "Color" in crazy_fns[k] else "secondary"
|
||||
ret = {self.switchy_bt: gr.update(value=k, variant=variant)}
|
||||
ret = {self.switchy_bt: self.switchy_bt.update(value=k, variant=variant)}
|
||||
# 参数取随变
|
||||
fns_value = func_box.txt_converter_json(str(crazy_fns[k].get('Parameters', '')))
|
||||
fns_lable = f"插件[{k}]的高级参数说明：\n" + crazy_fns[k].get("ArgsReminder", f"没有提供高级参数功能说明")
|
||||
@ -375,13 +373,12 @@ class ChatBot(ChatBotFrame):
|
||||
self.md_dropdown.select(on_md_dropdown_changed, [self.md_dropdown], [self.chatbot])
|
||||
|
||||
def signals_auto_input(self):
|
||||
from autogpt.cli import agent_main
|
||||
self.auto_input_combo = [self.ai_name, self.ai_role, self.ai_goal_list, self.ai_budget,
|
||||
self.cookies, self.chatbot, self.history,
|
||||
self.agent_obj]
|
||||
self.auto_output_combo = [self.cookies, self.chatbot, self.history, self.status,
|
||||
self.agent_obj, self.submit_start, self.submit_next, self.text_continue]
|
||||
self.submit_start.click(fn=agent_main, inputs=self.auto_input_combo, outputs=self.auto_output_combo)
|
||||
|
||||
|
||||
# gradio的inbrowser触发不太稳定，回滚代码到原始的浏览器打开函数
|
||||
def auto_opentab_delay(self, is_open=False):
|
||||
@ -408,13 +405,19 @@ class ChatBot(ChatBotFrame):
|
||||
# 绘制一个ROW，row会让底下的元素自动排成一行
|
||||
with gr.Row().style(justify='between'):
|
||||
# 绘制列1
|
||||
with gr.Column(scale=46):
|
||||
with gr.Column(scale=44):
|
||||
with gr.Tabs() as self.tabs_copilot:
|
||||
# 绘制对话模组
|
||||
with gr.TabItem('Chat-Copilot'):
|
||||
self.draw_function_chat()
|
||||
self.draw_public_chat()
|
||||
self.draw_setting_chat()
|
||||
with gr.Row():
|
||||
# self.cpopyBtn = gr.Button("复制回答", variant="secondary").style(size="sm")
|
||||
self.resetBtn = gr.Button("新建对话", variant="secondary", elem_id='empty_btn').style(
|
||||
size="sm")
|
||||
self.stopBtn = gr.Button("中止对话", variant="stop").style(size="sm")
|
||||
with gr.Tabs() as self.tabs_inputs:
|
||||
self.draw_function_chat()
|
||||
self.draw_public_chat()
|
||||
self.draw_setting_chat()
|
||||
|
||||
# 绘制autogpt模组
|
||||
with gr.TabItem('Auto-GPT'):
|
||||
@ -431,6 +434,7 @@ class ChatBot(ChatBotFrame):
|
||||
|
||||
with self.chat_tab: # 使用 gr.State()对组件进行拷贝时，如果之前绘制了Markdown格式，会导致启动崩溃,所以将 markdown相关绘制放在最后
|
||||
self.draw_chatbot()
|
||||
self.draw_examples()
|
||||
with self.prompt_tab:
|
||||
self.draw_temp_edit()
|
||||
# 函数注册，需要在Blocks下进行
|
||||
@ -440,7 +444,10 @@ class ChatBot(ChatBotFrame):
|
||||
self.signals_public()
|
||||
self.signals_prompt_edit()
|
||||
# self.signals_auto_input()
|
||||
self.demo.load(fn=func_box.refresh_load_data, postprocess=False, inputs=[self.chatbot, self.history, self.pro_fp_state], outputs=[self.pro_func_prompt, self.pro_fp_state, self.chatbot, self.history, ])
|
||||
adv_plugins = gr.State([i for i in crazy_fns])
|
||||
self.demo.load(fn=func_box.refresh_load_data, postprocess=False,
|
||||
inputs=[self.chatbot, self.history, self.pro_fp_state, adv_plugins],
|
||||
outputs=[self.pro_func_prompt, self.pro_fp_state, self.chatbot, self.history, self.guidance_plugins, self.guidance_plugins_state])
|
||||
|
||||
# Start
|
||||
self.auto_opentab_delay()
|
||||
|
||||
@ -25,7 +25,6 @@ def get_crazy_functions():
|
||||
from crazy_functions.对话历史存档 import 对话历史存档
|
||||
from crazy_functions.对话历史存档 import 载入对话历史存档
|
||||
from crazy_functions.对话历史存档 import 删除所有本地对话历史记录
|
||||
|
||||
from crazy_functions.批量Markdown翻译 import Markdown英译中
|
||||
function_plugins = {
|
||||
"猜你想问": {
|
||||
@ -36,6 +35,7 @@ def get_crazy_functions():
|
||||
"AsButton": False,
|
||||
"Function": HotReload(解析一个Python项目)
|
||||
},
|
||||
|
||||
"保存当前的对话": {
|
||||
"AsButton": True,
|
||||
"Function": HotReload(对话历史存档)
|
||||
@ -49,6 +49,7 @@ def get_crazy_functions():
|
||||
"AsButton":False,
|
||||
"Function": HotReload(删除所有本地对话历史记录)
|
||||
},
|
||||
|
||||
"[测试功能] 解析Jupyter Notebook文件": {
|
||||
"Color": "stop",
|
||||
"AsButton": False,
|
||||
|
||||
@ -32,12 +32,12 @@ mspace {
|
||||
}
|
||||
|
||||
#examples_col {
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 30% !important;
|
||||
margin-bottom: 20% !important;
|
||||
}
|
||||
#hide_examples {
|
||||
z-index: 0;
|
||||
@ -48,7 +48,6 @@ mspace {
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1; /* 设置更高的 z-index 值 */
|
||||
margin-bottom: -4px !important;
|
||||
}
|
||||
@ -148,10 +147,25 @@ footer {
|
||||
background: var(--color-accent);
|
||||
padding: var(--block-label-padding);
|
||||
font-size: var(--block-label-text-size); line-height: var(--line-sm);
|
||||
width: auto; min-height: 30px!important;
|
||||
width: auto; min-height: 30px !important;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
textarea.svelte-1pie7s6 {
|
||||
background: #e7e6e6 !important;
|
||||
}
|
||||
|
||||
.dark textarea.svelte-1pie7s6 {
|
||||
background: var(--input-background-fill) !important;
|
||||
}
|
||||
|
||||
.dark input[type=number].svelte-1cl284s {
|
||||
background: #393939 !important;
|
||||
border: var(--input-border-width) solid var(--input-border-color) !important;
|
||||
}
|
||||
.dark input[type="range"] {
|
||||
background: #393939 !important;
|
||||
}
|
||||
#user_info .wrap {
|
||||
opacity: 0;
|
||||
}
|
||||
@ -167,31 +181,29 @@ footer {
|
||||
gap: 7px !important;
|
||||
border-radius: var(--radius-xl) !important
|
||||
}
|
||||
/* status_display */
|
||||
#status_display {
|
||||
display: flex;
|
||||
/* debug_mes */
|
||||
#debug_mes {
|
||||
min-height: 2em;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#status_display p {
|
||||
#debug_mes p {
|
||||
font-size: .85em;
|
||||
font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Microsoft Yahei UI", "Microsoft Yahei", monospace;
|
||||
/* Windows下中文的monospace会fallback为新宋体，实在太丑，这里折中使用微软雅黑 */
|
||||
color: var(--body-text-color-subdued);
|
||||
color: #000000;
|
||||
}
|
||||
.dark #debug_mes p {
|
||||
color: #ee65ed;
|
||||
}
|
||||
|
||||
#status_display {
|
||||
#debug_mes {
|
||||
transition: all 0.6s;
|
||||
}
|
||||
#main_chatbot {
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
span.svelte-1gfkn6j {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.wrap.svelte-18telvq.svelte-18telvq {
|
||||
padding: var(--block-padding) !important;
|
||||
height: 100% !important;
|
||||
|
||||
518
docs/assets/custom.js
Normal file
518
docs/assets/custom.js
Normal file
@ -0,0 +1,518 @@
|
||||
|
||||
// custom javascript here
|
||||
|
||||
const MAX_HISTORY_LENGTH = 32;
|
||||
|
||||
var key_down_history = [];
|
||||
var currentIndex = -1;
|
||||
var user_input_ta;
|
||||
|
||||
var gradioContainer = null;
|
||||
var user_input_ta = null;
|
||||
var chat_txt = null;
|
||||
var userInfoDiv = null;
|
||||
var appTitleDiv = null;
|
||||
var chatbot = null;
|
||||
var chatbotWrap = null;
|
||||
var apSwitch = null;
|
||||
var messageBotDivs = null;
|
||||
var loginUserForm = null;
|
||||
var logginUser = null;
|
||||
|
||||
var userLogged = false;
|
||||
var usernameGotten = false;
|
||||
var historyLoaded = false;
|
||||
|
||||
var ga = document.getElementsByTagName("gradio-app");
|
||||
var targetNode = ga[0];
|
||||
var isInIframe = (window.self !== window.top);
|
||||
var language = navigator.language.slice(0,2);
|
||||
|
||||
var forView_i18n = {
|
||||
'zh': "仅供查看",
|
||||
'en': "For viewing only",
|
||||
'ja': "閲覧専用",
|
||||
'fr': "Pour consultation seulement",
|
||||
'es': "Solo para visualización",
|
||||
};
|
||||
|
||||
var deleteConfirm_i18n_pref = {
|
||||
'zh': "你真的要删除 ",
|
||||
'en': "Are you sure you want to delete ",
|
||||
'ja': "本当に ",
|
||||
};
|
||||
var deleteConfirm_i18n_suff = {
|
||||
'zh': " 吗？",
|
||||
'en': " ?",
|
||||
'ja': " を削除してもよろしいですか？",
|
||||
};
|
||||
var deleteConfirm_msg_pref = "Are you sure you want to delete ";
|
||||
var deleteConfirm_msg_suff = " ?";
|
||||
|
||||
// gradio 页面加载好了么??? 我能动你的元素了么??
|
||||
function gradioLoaded(mutations) {
|
||||
for (var i = 0; i < mutations.length; i++) {
|
||||
if (mutations[i].addedNodes.length) {
|
||||
loginUserForm = document.querySelector(".gradio-container > .main > .wrap > .panel > .form")
|
||||
gradioContainer = document.querySelector(".gradio-container");
|
||||
chat_txt = document.getElementById('chat_txt');
|
||||
userInfoDiv = document.getElementById("user_info");
|
||||
appTitleDiv = document.getElementById("app_title");
|
||||
chatbot = document.querySelector('#main_chatbot');
|
||||
chatbotWrap = document.querySelector('#main_chatbot > .wrap');
|
||||
apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
|
||||
|
||||
if (loginUserForm) {
|
||||
localStorage.setItem("userLogged", true);
|
||||
userLogged = true;
|
||||
}
|
||||
|
||||
if (gradioContainer && apSwitch) { // gradioCainter 加载出来了没?
|
||||
adjustDarkMode();
|
||||
}
|
||||
if (chat_txt) { // chat_txt 加载出来了没?
|
||||
selectHistory();
|
||||
}
|
||||
if (userInfoDiv && appTitleDiv) { // userInfoDiv 和 appTitleDiv 加载出来了没?
|
||||
if (!usernameGotten) {
|
||||
getUserInfo();
|
||||
}
|
||||
setTimeout(showOrHideUserInfo(), 2000);
|
||||
}
|
||||
if (chatbot) { // chatbot 加载出来了没?
|
||||
setChatbotHeight();
|
||||
}
|
||||
if (chatbotWrap) {
|
||||
if (!historyLoaded) {
|
||||
loadHistoryHtml();
|
||||
}
|
||||
setChatbotScroll();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function webLocale() {
|
||||
// console.log("webLocale", language);
|
||||
if (forView_i18n.hasOwnProperty(language)) {
|
||||
var forView = forView_i18n[language];
|
||||
var forViewStyle = document.createElement('style');
|
||||
forViewStyle.innerHTML = '.wrap>.history-message>:last-child::after { content: "' + forView + '"!important; }';
|
||||
document.head.appendChild(forViewStyle);
|
||||
}
|
||||
if (deleteConfirm_i18n_pref.hasOwnProperty(language)) {
|
||||
deleteConfirm_msg_pref = deleteConfirm_i18n_pref[language];
|
||||
deleteConfirm_msg_suff = deleteConfirm_i18n_suff[language];
|
||||
}
|
||||
}
|
||||
|
||||
function showConfirmationDialog(a, file, c) {
|
||||
if (file != "") {
|
||||
var result = confirm(deleteConfirm_msg_pref + file + deleteConfirm_msg_suff);
|
||||
if (result) {
|
||||
return [a, file, c];
|
||||
}
|
||||
}
|
||||
return [a, "CANCELED", c];
|
||||
}
|
||||
|
||||
function selectHistory() {
|
||||
user_input_ta = chat_txt.querySelector("textarea");
|
||||
if (user_input_ta) {
|
||||
observer.disconnect(); // 停止监听
|
||||
// 在 textarea 上监听 keydown 事件
|
||||
user_input_ta.addEventListener("keydown", function (event) {
|
||||
var value = user_input_ta.value.trim();
|
||||
// 判断按下的是否为方向键
|
||||
if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
|
||||
// 如果按下的是方向键，且输入框中有内容，且历史记录中没有该内容，则不执行操作
|
||||
if (value && key_down_history.indexOf(value) === -1)
|
||||
return;
|
||||
// 对于需要响应的动作，阻止默认行为。
|
||||
event.preventDefault();
|
||||
var length = key_down_history.length;
|
||||
if (length === 0) {
|
||||
currentIndex = -1; // 如果历史记录为空，直接将当前选中的记录重置
|
||||
return;
|
||||
}
|
||||
if (currentIndex === -1) {
|
||||
currentIndex = length;
|
||||
}
|
||||
if (event.code === 'ArrowUp' && currentIndex > 0) {
|
||||
currentIndex--;
|
||||
user_input_ta.value = key_down_history[currentIndex];
|
||||
} else if (event.code === 'ArrowDown' && currentIndex < length - 1) {
|
||||
currentIndex++;
|
||||
user_input_ta.value = key_down_history[currentIndex];
|
||||
}
|
||||
user_input_ta.selectionStart = user_input_ta.value.length;
|
||||
user_input_ta.selectionEnd = user_input_ta.value.length;
|
||||
const input_event = new InputEvent("input", { bubbles: true, cancelable: true });
|
||||
user_input_ta.dispatchEvent(input_event);
|
||||
} else if (event.code === "Enter") {
|
||||
if (value) {
|
||||
currentIndex = -1;
|
||||
if (key_down_history.indexOf(value) === -1) {
|
||||
key_down_history.push(value);
|
||||
if (key_down_history.length > MAX_HISTORY_LENGTH) {
|
||||
key_down_history.shift();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var username = null;
|
||||
function getUserInfo() {
|
||||
if (usernameGotten) {
|
||||
return;
|
||||
}
|
||||
userLogged = localStorage.getItem('userLogged');
|
||||
if (userLogged) {
|
||||
username = userInfoDiv.innerText;
|
||||
if (username) {
|
||||
if (username.includes("getting user info…")) {
|
||||
setTimeout(getUserInfo, 500);
|
||||
return;
|
||||
} else if (username === " ") {
|
||||
localStorage.removeItem("username");
|
||||
localStorage.removeItem("userLogged")
|
||||
userLogged = false;
|
||||
usernameGotten = true;
|
||||
return;
|
||||
} else {
|
||||
username = username.match(/User:\s*(.*)/)[1] || username;
|
||||
localStorage.setItem("username", username);
|
||||
usernameGotten = true;
|
||||
clearHistoryHtml();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleUserInfoVisibility(shouldHide) {
|
||||
if (userInfoDiv) {
|
||||
if (shouldHide) {
|
||||
userInfoDiv.classList.add("hideK");
|
||||
} else {
|
||||
userInfoDiv.classList.remove("hideK");
|
||||
}
|
||||
}
|
||||
}
|
||||
function showOrHideUserInfo() {
|
||||
var sendBtn = document.getElementById("submit_btn");
|
||||
|
||||
// Bind mouse/touch events to show/hide user info
|
||||
appTitleDiv.addEventListener("mouseenter", function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
});
|
||||
userInfoDiv.addEventListener("mouseenter", function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
});
|
||||
sendBtn.addEventListener("mouseenter", function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
});
|
||||
|
||||
appTitleDiv.addEventListener("mouseleave", function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
});
|
||||
userInfoDiv.addEventListener("mouseleave", function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
});
|
||||
sendBtn.addEventListener("mouseleave", function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
});
|
||||
|
||||
appTitleDiv.ontouchstart = function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
};
|
||||
userInfoDiv.ontouchstart = function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
};
|
||||
sendBtn.ontouchstart = function () {
|
||||
toggleUserInfoVisibility(false);
|
||||
};
|
||||
|
||||
appTitleDiv.ontouchend = function () {
|
||||
setTimeout(function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
}, 3000);
|
||||
};
|
||||
userInfoDiv.ontouchend = function () {
|
||||
setTimeout(function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
}, 3000);
|
||||
};
|
||||
sendBtn.ontouchend = function () {
|
||||
setTimeout(function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
}, 3000); // Delay 1 second to hide user info
|
||||
};
|
||||
|
||||
// Hide user info after 2 second
|
||||
setTimeout(function () {
|
||||
toggleUserInfoVisibility(true);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function toggleDarkMode(isEnabled) {
|
||||
if (isEnabled) {
|
||||
document.body.classList.add("dark");
|
||||
document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
|
||||
} else {
|
||||
document.body.classList.remove("dark");
|
||||
document.body.style.backgroundColor = "";
|
||||
}
|
||||
}
|
||||
function adjustDarkMode() {
|
||||
const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
// 根据当前颜色模式设置初始状态
|
||||
apSwitch.checked = darkModeQuery.matches;
|
||||
toggleDarkMode(darkModeQuery.matches);
|
||||
// 监听颜色模式变化
|
||||
darkModeQuery.addEventListener("change", (e) => {
|
||||
apSwitch.checked = e.matches;
|
||||
toggleDarkMode(e.matches);
|
||||
});
|
||||
// apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
|
||||
apSwitch.addEventListener("change", (e) => {
|
||||
toggleDarkMode(e.target.checked);
|
||||
});
|
||||
}
|
||||
|
||||
function setChatbotHeight() {
|
||||
const screenWidth = window.innerWidth;
|
||||
const statusDisplay = document.querySelector('#status_display');
|
||||
const statusDisplayHeight = statusDisplay ? statusDisplay.offsetHeight : 0;
|
||||
const wrap = chatbot.querySelector('.wrap');
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
if (isInIframe) {
|
||||
chatbot.style.height = `700px`;
|
||||
wrap.style.maxHeight = `calc(700px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`
|
||||
} else {
|
||||
if (screenWidth <= 320) {
|
||||
chatbot.style.height = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 150}px)`;
|
||||
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)`;
|
||||
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)`;
|
||||
wrap.style.maxHeight = `calc(var(--vh, 1vh) * 100 - ${statusDisplayHeight + 160}px - var(--line-sm) * 1rem - 2 * var(--block-label-margin))`;
|
||||
}
|
||||
}
|
||||
}
|
||||
function setChatbotScroll() {
|
||||
var scrollHeight = chatbotWrap.scrollHeight;
|
||||
chatbotWrap.scrollTo(0,scrollHeight)
|
||||
}
|
||||
var rangeInputs = null;
|
||||
var numberInputs = null;
|
||||
function setSlider() {
|
||||
rangeInputs = document.querySelectorAll('input[type="range"]');
|
||||
numberInputs = document.querySelectorAll('input[type="number"]')
|
||||
setSliderRange();
|
||||
rangeInputs.forEach(rangeInput => {
|
||||
rangeInput.addEventListener('input', setSliderRange);
|
||||
});
|
||||
numberInputs.forEach(numberInput => {
|
||||
numberInput.addEventListener('input', setSliderRange);
|
||||
})
|
||||
}
|
||||
function setSliderRange() {
|
||||
var range = document.querySelectorAll('input[type="range"]');
|
||||
range.forEach(range => {
|
||||
range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
|
||||
});
|
||||
}
|
||||
|
||||
function addChuanhuButton(botElement) {
|
||||
var rawMessage = null;
|
||||
var mdMessage = null;
|
||||
rawMessage = botElement.querySelector('.raw-message');
|
||||
mdMessage = botElement.querySelector('.md-message');
|
||||
if (!rawMessage) {
|
||||
var buttons = botElement.querySelectorAll('button.chuanhu-btn');
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].parentNode.removeChild(buttons[i]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
var copyButton = null;
|
||||
var toggleButton = null;
|
||||
copyButton = botElement.querySelector('button.copy-bot-btn');
|
||||
toggleButton = botElement.querySelector('button.toggle-md-btn');
|
||||
if (copyButton) copyButton.remove();
|
||||
if (toggleButton) toggleButton.remove();
|
||||
|
||||
// Copy bot button
|
||||
var copyButton = document.createElement('button');
|
||||
copyButton.classList.add('chuanhu-btn');
|
||||
copyButton.classList.add('copy-bot-btn');
|
||||
copyButton.setAttribute('aria-label', 'Copy');
|
||||
copyButton.innerHTML = copyIcon;
|
||||
copyButton.addEventListener('click', () => {
|
||||
const textToCopy = rawMessage.innerText;
|
||||
navigator.clipboard
|
||||
.writeText(textToCopy)
|
||||
.then(() => {
|
||||
copyButton.innerHTML = copiedIcon;
|
||||
setTimeout(() => {
|
||||
copyButton.innerHTML = copyIcon;
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("copy failed");
|
||||
});
|
||||
});
|
||||
botElement.appendChild(copyButton);
|
||||
|
||||
// Toggle button
|
||||
var toggleButton = document.createElement('button');
|
||||
toggleButton.classList.add('chuanhu-btn');
|
||||
toggleButton.classList.add('toggle-md-btn');
|
||||
toggleButton.setAttribute('aria-label', 'Toggle');
|
||||
var renderMarkdown = mdMessage.classList.contains('hideM');
|
||||
toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
|
||||
toggleButton.addEventListener('click', () => {
|
||||
renderMarkdown = mdMessage.classList.contains('hideM');
|
||||
if (renderMarkdown){
|
||||
renderMarkdownText(botElement);
|
||||
toggleButton.innerHTML=rawIcon;
|
||||
} else {
|
||||
removeMarkdownText(botElement);
|
||||
toggleButton.innerHTML=mdIcon;
|
||||
}
|
||||
});
|
||||
botElement.insertBefore(toggleButton, copyButton);
|
||||
}
|
||||
|
||||
function renderMarkdownText(message) {
|
||||
var mdDiv = message.querySelector('.md-message');
|
||||
if (mdDiv) mdDiv.classList.remove('hideM');
|
||||
var rawDiv = message.querySelector('.raw-message');
|
||||
if (rawDiv) rawDiv.classList.add('hideM');
|
||||
}
|
||||
function removeMarkdownText(message) {
|
||||
var rawDiv = message.querySelector('.raw-message');
|
||||
if (rawDiv) rawDiv.classList.remove('hideM');
|
||||
var mdDiv = message.querySelector('.md-message');
|
||||
if (mdDiv) mdDiv.classList.add('hideM');
|
||||
}
|
||||
|
||||
let timeoutId;
|
||||
let isThrottled = false;
|
||||
var mmutation
|
||||
// 监听所有元素中 bot message 的变化，为 bot 消息添加复制按钮。
|
||||
var mObserver = new MutationObserver(function (mutationsList) {
|
||||
for (mmutation of mutationsList) {
|
||||
if (mmutation.type === 'childList') {
|
||||
for (var node of mmutation.addedNodes) {
|
||||
if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
|
||||
saveHistoryHtml();
|
||||
document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
|
||||
}
|
||||
if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
|
||||
setSlider();
|
||||
}
|
||||
}
|
||||
for (var node of mmutation.removedNodes) {
|
||||
if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
|
||||
saveHistoryHtml();
|
||||
document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
|
||||
}
|
||||
}
|
||||
} else if (mmutation.type === 'attributes') {
|
||||
if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
|
||||
if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
|
||||
isThrottled = true;
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(() => {
|
||||
isThrottled = false;
|
||||
document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
|
||||
saveHistoryHtml();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
mObserver.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
|
||||
|
||||
var loadhistorytime = 0; // for debugging
|
||||
function saveHistoryHtml() {
|
||||
var historyHtml = document.querySelector('#main_chatbot > .wrap');
|
||||
localStorage.setItem('chatHistory', historyHtml.innerHTML);
|
||||
// console.log("History Saved")
|
||||
historyLoaded = false;
|
||||
}
|
||||
function loadHistoryHtml() {
|
||||
var historyHtml = localStorage.getItem('chatHistory');
|
||||
if (!historyHtml) {
|
||||
historyLoaded = true;
|
||||
return; // no history, do nothing
|
||||
}
|
||||
userLogged = localStorage.getItem('userLogged');
|
||||
if (userLogged){
|
||||
historyLoaded = true;
|
||||
return; // logged in, do nothing
|
||||
}
|
||||
if (!historyLoaded) {
|
||||
var tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = historyHtml;
|
||||
var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
|
||||
var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].parentNode.removeChild(buttons[i]);
|
||||
}
|
||||
for (var i = 0; i < gradioCopyButtons.length; i++) {
|
||||
gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
|
||||
}
|
||||
var fakeHistory = document.createElement('div');
|
||||
fakeHistory.classList.add('history-message');
|
||||
fakeHistory.innerHTML = tempDiv.innerHTML;
|
||||
webLocale();
|
||||
chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
|
||||
// var fakeHistory = document.createElement('div');
|
||||
// fakeHistory.classList.add('history-message');
|
||||
// fakeHistory.innerHTML = historyHtml;
|
||||
// chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
|
||||
historyLoaded = true;
|
||||
console.log("History Loaded");
|
||||
loadhistorytime += 1; // for debugging
|
||||
} else {
|
||||
historyLoaded = false;
|
||||
}
|
||||
}
|
||||
function clearHistoryHtml() {
|
||||
localStorage.removeItem("chatHistory");
|
||||
historyMessages = chatbotWrap.querySelector('.history-message');
|
||||
if (historyMessages) {
|
||||
chatbotWrap.removeChild(historyMessages);
|
||||
console.log("History Cleared");
|
||||
}
|
||||
}
|
||||
|
||||
// 监视页面内部 DOM 变动
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
gradioLoaded(mutations);
|
||||
});
|
||||
observer.observe(targetNode, { childList: true, subtree: true });
|
||||
|
||||
// 监视页面变化
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
isInIframe = (window.self !== window.top);
|
||||
historyLoaded = false;
|
||||
});
|
||||
window.addEventListener('resize', setChatbotHeight);
|
||||
window.addEventListener('scroll', setChatbotHeight);
|
||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
|
||||
|
||||
// button svg code
|
||||
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 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 mdIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="1" viewBox="0 0 14 18" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><path d="M1.5,0 L12.5,0 C13.3284271,-1.52179594e-16 14,0.671572875 14,1.5 L14,16.5 C14,17.3284271 13.3284271,18 12.5,18 L1.5,18 C0.671572875,18 1.01453063e-16,17.3284271 0,16.5 L0,1.5 C-1.01453063e-16,0.671572875 0.671572875,1.52179594e-16 1.5,0 Z" stroke-width="1.8"></path><line x1="3.5" y1="3.5" x2="10.5" y2="3.5"></line><line x1="3.5" y1="6.5" x2="8" y2="6.5"></line></g><path d="M4,9 L10,9 C10.5522847,9 11,9.44771525 11,10 L11,13.5 C11,14.0522847 10.5522847,14.5 10,14.5 L4,14.5 C3.44771525,14.5 3,14.0522847 3,13.5 L3,10 C3,9.44771525 3.44771525,9 4,9 Z" stroke="none" fill="currentColor"></path></svg></span>';
|
||||
const rawIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="1.8" viewBox="0 0 18 14" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><g transform-origin="center" transform="scale(0.85)"><polyline points="4 3 0 7 4 11"></polyline><polyline points="14 3 18 7 14 11"></polyline><line x1="12" y1="0" x2="6" y2="14"></line></g></svg></span>';
|
||||
810
docs/assets/custom_2.css
Normal file
810
docs/assets/custom_2.css
Normal file
@ -0,0 +1,810 @@
|
||||
:root {
|
||||
--chatbot-color-light: #000000;
|
||||
--chatbot-color-dark: #FFFFFF;
|
||||
--chatbot-background-color-light: #F3F3F3;
|
||||
--chatbot-background-color-dark: #121111;
|
||||
--message-user-background-color-light: #95EC69;
|
||||
--message-user-background-color-dark: #26B561;
|
||||
--message-bot-background-color-light: #FFFFFF;
|
||||
--message-bot-background-color-dark: #2C2C2C;
|
||||
}
|
||||
mspace {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes highlight {
|
||||
0%, 100% {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
50% {
|
||||
border-color: yellow;
|
||||
}
|
||||
}
|
||||
|
||||
#highlight_update {
|
||||
animation-name: highlight;
|
||||
animation-duration: 0.75s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
.table-wrap.svelte-13hsdno.svelte-13hsdno.svelte-13hsdno {
|
||||
border: 0px solid var(--border-color-primary) !important;
|
||||
}
|
||||
|
||||
#examples_col {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 30% !important;
|
||||
}
|
||||
#hide_examples {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#debug_mes {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1; /* 设置更高的 z-index 值 */
|
||||
margin-bottom: -4px !important;
|
||||
}
|
||||
#chat_txt {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
overflow-y: auto !important;
|
||||
z-index: 3;
|
||||
flex-grow: 1; /* 自动填充剩余空间 */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.submit_btn {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
overflow-y: auto !important;
|
||||
z-index: 3;
|
||||
flex-grow: 1; /* 自动填充剩余空间 */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 20px !important;
|
||||
min-width: min(50px,100%) !important;
|
||||
}
|
||||
|
||||
|
||||
#sm_btn {
|
||||
display: flex;
|
||||
flex-wrap: unset !important;
|
||||
gap: 5px !important;
|
||||
width: var(--size-full);
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
height: 100%; /* 填充父元素的高度 */
|
||||
}
|
||||
#main_chatbot {
|
||||
height: 75vh !important;
|
||||
max-height: 75vh !important;
|
||||
/* overflow: auto !important; */
|
||||
z-index: 2;
|
||||
transform: translateZ(0) !important;
|
||||
backface-visibility: hidden !important;
|
||||
will-change: transform !important;
|
||||
}
|
||||
#prompt_result{
|
||||
height: 60vh !important;
|
||||
max-height: 60vh !important;
|
||||
}
|
||||
|
||||
#app_title {
|
||||
font-weight: var(--prose-header-text-weight);
|
||||
font-size: var(--text-xxl);
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
margin-top: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#description {
|
||||
text-align: center;
|
||||
margin: 32px 0 4px 0;
|
||||
}
|
||||
|
||||
/* gradio的页脚信息 */
|
||||
footer {
|
||||
/* display: none !important; */
|
||||
margin-top: .2em !important;
|
||||
font-size: 85%;
|
||||
}
|
||||
#footer {
|
||||
text-align: center;
|
||||
}
|
||||
#footer div {
|
||||
display: inline-block;
|
||||
}
|
||||
#footer .versions{
|
||||
font-size: 85%;
|
||||
opacity: 0.60;
|
||||
}
|
||||
|
||||
#float_display {
|
||||
position: absolute;
|
||||
max-height: 30px;
|
||||
}
|
||||
/* user_info */
|
||||
#user_info {
|
||||
white-space: nowrap;
|
||||
position: absolute; left: 8em; top: .2em;
|
||||
z-index: var(--layer-2);
|
||||
box-shadow: var(--block-shadow);
|
||||
border: none; border-radius: var(--block-label-radius);
|
||||
background: var(--color-accent);
|
||||
padding: var(--block-label-padding);
|
||||
font-size: var(--block-label-text-size); line-height: var(--line-sm);
|
||||
width: auto; min-height: 30px!important;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
#user_info .wrap {
|
||||
opacity: 0;
|
||||
}
|
||||
#user_info p {
|
||||
color: white;
|
||||
font-weight: var(--block-label-text-weight);
|
||||
}
|
||||
#user_info.hideK {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
[class *= "message"] {
|
||||
gap: 7px !important;
|
||||
border-radius: var(--radius-xl) !important
|
||||
}
|
||||
/* status_display */
|
||||
#status_display {
|
||||
display: flex;
|
||||
min-height: 2em;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#status_display p {
|
||||
font-size: .85em;
|
||||
font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", "Microsoft Yahei UI", "Microsoft Yahei", monospace;
|
||||
/* Windows下中文的monospace会fallback为新宋体，实在太丑，这里折中使用微软雅黑 */
|
||||
color: var(--body-text-color-subdued);
|
||||
}
|
||||
|
||||
#status_display {
|
||||
transition: all 0.6s;
|
||||
}
|
||||
#main_chatbot {
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
span.svelte-1gfkn6j {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.wrap.svelte-18telvq.svelte-18telvq {
|
||||
padding: var(--block-padding) !important;
|
||||
height: 100% !important;
|
||||
max-height: 95% !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.app.svelte-1mya07g.svelte-1mya07g {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
/* margin: auto; */
|
||||
padding: var(--size-4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gradio-container-3-32-2 h1 {
|
||||
font-weight: 700 !important;
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
|
||||
.gradio-container-3-32-2 h2 {
|
||||
font-weight: 600 !important;
|
||||
font-size: 24px !important;
|
||||
}
|
||||
.gradio-container-3-32-2 h3 {
|
||||
font-weight: 500 !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.gradio-container-3-32-2 h4 {
|
||||
font-weight: 400 !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.gradio-container-3-32-2 h5 {
|
||||
font-weight: 300 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.gradio-container-3-32-2 h6 {
|
||||
font-weight: 200 !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* usage_display */
|
||||
.insert_block {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: .5em 1em;
|
||||
box-shadow: var(--block-shadow);
|
||||
border-width: var(--block-border-width);
|
||||
border-color: var(--block-border-color);
|
||||
border-radius: var(--block-radius);
|
||||
background: var(--block-background-fill);
|
||||
width: 100%;
|
||||
line-height: var(--line-sm);
|
||||
min-height: 2em;
|
||||
}
|
||||
#usage_display p, #usage_display span {
|
||||
margin: 0;
|
||||
font-size: .85em;
|
||||
color: var(--body-text-color-subdued);
|
||||
}
|
||||
.progress-bar {
|
||||
background-color: var(--input-background-fill);;
|
||||
margin: .5em 0 !important;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress {
|
||||
background-color: var(--block-title-background-fill);
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
text-align: right;
|
||||
transition: width 0.5s ease-in-out;
|
||||
}
|
||||
.progress-text {
|
||||
/* color: white; */
|
||||
color: var(--color-accent) !important;
|
||||
font-size: 1em !important;
|
||||
font-weight: bold;
|
||||
padding-right: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.apSwitch {
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.apSwitch input {
|
||||
display: none !important;
|
||||
}
|
||||
.apSlider {
|
||||
background-color: var(--neutral-200);
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: .4s;
|
||||
font-size: 18px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.apSlider::before {
|
||||
bottom: -1.5px;
|
||||
left: 1px;
|
||||
position: absolute;
|
||||
transition: .4s;
|
||||
content: "🌞";
|
||||
}
|
||||
input:checked + .apSlider {
|
||||
background-color: var(--primary-600);
|
||||
}
|
||||
input:checked + .apSlider::before {
|
||||
transform: translateX(23px);
|
||||
content:"🌚";
|
||||
}
|
||||
|
||||
/* Override Slider Styles (for webkit browsers like Safari and Chrome)
|
||||
* 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
|
||||
* 进度滑块在各个平台还是太不统一了
|
||||
*/
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: var(--input-background-fill);
|
||||
border-radius: 5px;
|
||||
background-image: linear-gradient(var(--primary-500),var(--primary-500));
|
||||
background-size: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
border: solid 0.5px #ddd;
|
||||
background-color: white;
|
||||
cursor: ew-resize;
|
||||
box-shadow: var(--input-shadow);
|
||||
transition: background-color .1s ease;
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
background: var(--neutral-50);
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
hr.append-display {
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
border-top-width: 0;
|
||||
background-image: linear-gradient(to right, rgba(50,50,50, 0.1), rgba(150, 150, 150, 0.8), rgba(50,50,50, 0.1));
|
||||
}
|
||||
.source-a {
|
||||
font-size: 0.8em;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
/* background-color: #dddddd88; */
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.2em;
|
||||
}
|
||||
.source-a a {
|
||||
display: inline-block;
|
||||
background-color: #aaaaaa50;
|
||||
border-radius: 1rem;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
min-width: 20%;
|
||||
white-space: nowrap;
|
||||
margin: 0.2rem 0.1rem;
|
||||
text-decoration: none !important;
|
||||
flex: 1;
|
||||
transition: flex 0.5s;
|
||||
}
|
||||
.source-a a:hover {
|
||||
background-color: #aaaaaa20;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.submit_btn, #cancel_btn {
|
||||
height: 42px !important;
|
||||
}
|
||||
.submit_btn::before {
|
||||
content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
|
||||
height: 21px;
|
||||
}
|
||||
#cancel_btn::before {
|
||||
content: url("data:image/svg+xml,%3Csvg width='21px' height='21px' viewBox='0 0 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='pg' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpath d='M10.2072007,20.088463 C11.5727865,20.088463 12.8594566,19.8259823 14.067211,19.3010209 C15.2749653,18.7760595 16.3386126,18.0538087 17.2581528,17.1342685 C18.177693,16.2147282 18.8982283,15.1527965 19.4197586,13.9484733 C19.9412889,12.7441501 20.202054,11.4557644 20.202054,10.0833163 C20.202054,8.71773046 19.9395733,7.43106036 19.4146119,6.22330603 C18.8896505,5.01555169 18.1673997,3.95018885 17.2478595,3.0272175 C16.3283192,2.10424615 15.2646719,1.3837109 14.0569176,0.865611739 C12.8491633,0.34751258 11.5624932,0.088463 10.1969073,0.088463 C8.83132146,0.088463 7.54636692,0.34751258 6.34204371,0.865611739 C5.1377205,1.3837109 4.07407321,2.10424615 3.15110186,3.0272175 C2.22813051,3.95018885 1.5058797,5.01555169 0.984349419,6.22330603 C0.46281914,7.43106036 0.202054,8.71773046 0.202054,10.0833163 C0.202054,11.4557644 0.4645347,12.7441501 0.9894961,13.9484733 C1.5144575,15.1527965 2.23670831,16.2147282 3.15624854,17.1342685 C4.07578877,18.0538087 5.1377205,18.7760595 6.34204371,19.3010209 C7.54636692,19.8259823 8.83475258,20.088463 10.2072007,20.088463 Z M10.2072007,18.2562448 C9.07493099,18.2562448 8.01471483,18.0452309 7.0265522,17.6232031 C6.03838956,17.2011753 5.17031614,16.6161693 4.42233192,15.8681851 C3.6743477,15.1202009 3.09105726,14.2521274 2.67246059,13.2639648 C2.25386392,12.2758022 2.04456558,11.215586 2.04456558,10.0833163 C2.04456558,8.95104663 2.25386392,7.89083047 2.67246059,6.90266784 C3.09105726,5.9145052 3.6743477,5.04643178 4.42233192,4.29844756 C5.17031614,3.55046334 6.036674,2.9671729 7.02140552,2.54857623 C8.00613703,2.12997956 9.06463763,1.92068122 10.1969073,1.92068122 C11.329177,1.92068122 12.3911087,2.12997956 13.3827025,2.54857623 C14.3742962,2.9671729 15.2440852,3.55046334 15.9920694,4.29844756 C16.7400537,5.04643178 17.3233441,5.9145052 17.7419408,6.90266784 C18.1605374,7.89083047 18.3698358,8.95104663 18.3698358,10.0833163 C18.3698358,11.215586 18.1605374,12.2758022 17.7419408,13.2639648 C17.3233441,14.2521274 16.7400537,15.1202009 15.9920694,15.8681851 C15.2440852,16.6161693 14.3760118,17.2011753 13.3878492,17.6232031 C12.3996865,18.0452309 11.3394704,18.2562448 10.2072007,18.2562448 Z M7.65444721,13.6242324 L12.7496608,13.6242324 C13.0584616,13.6242324 13.3003556,13.5384544 13.4753427,13.3668984 C13.6503299,13.1953424 13.7378234,12.9585951 13.7378234,12.6566565 L13.7378234,7.49968276 C13.7378234,7.19774418 13.6503299,6.96099688 13.4753427,6.78944087 C13.3003556,6.61788486 13.0584616,6.53210685 12.7496608,6.53210685 L7.65444721,6.53210685 C7.33878414,6.53210685 7.09345904,6.61788486 6.91847191,6.78944087 C6.74348478,6.96099688 6.65599121,7.19774418 6.65599121,7.49968276 L6.65599121,12.6566565 C6.65599121,12.9585951 6.74348478,13.1953424 6.91847191,13.3668984 C7.09345904,13.5384544 7.33878414,13.6242324 7.65444721,13.6242324 Z' id='shape' fill='%23FF3B30' fill-rule='nonzero'%3E%3C/path%3E %3C/g%3E %3C/svg%3E");
|
||||
height: 21px;
|
||||
}
|
||||
/* list */
|
||||
ol:not(.options), ul:not(.options) {
|
||||
padding-inline-start: 2em !important;
|
||||
}
|
||||
|
||||
/* 亮色（默认） */
|
||||
#main_chatbot {
|
||||
background-color: var(--chatbot-background-color-light) !important;
|
||||
color: var(--chatbot-color-light) !important;
|
||||
}
|
||||
[data-testid = "bot"] {
|
||||
background-color: var(--message-bot-background-color-light) !important;
|
||||
}
|
||||
[data-testid = "user"] {
|
||||
background-color: var(--message-user-background-color-light) !important;
|
||||
}
|
||||
/* 暗色 */
|
||||
.dark #main_chatbot {
|
||||
background-color: var(--chatbot-background-color-dark) !important;
|
||||
color: var(--chatbot-color-dark) !important;
|
||||
}
|
||||
.dark [data-testid = "bot"] {
|
||||
background-color: var(--message-bot-background-color-dark) !important;
|
||||
}
|
||||
.dark [data-testid = "user"] {
|
||||
background-color: var(--message-user-background-color-dark) !important;
|
||||
}
|
||||
|
||||
/* 屏幕宽度大于等于500px的设备 */
|
||||
/* update on 2023.4.8: 高度的细致调整已写入JavaScript */
|
||||
@media screen and (min-width: 500px) {
|
||||
#main_chatbot {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
#main_chatbot .wrap {
|
||||
max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
|
||||
}
|
||||
}
|
||||
/* 屏幕宽度小于500px的设备 */
|
||||
@media screen and (max-width: 499px) {
|
||||
#main_chatbot {
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
#main_chatbot .wrap {
|
||||
max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
|
||||
}
|
||||
[data-testid = "bot"] {
|
||||
max-width: 95% !important;
|
||||
}
|
||||
#app_title h1{
|
||||
letter-spacing: -1px; font-size: 22px;
|
||||
}
|
||||
}
|
||||
#main_chatbot .wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* 对话气泡 */
|
||||
.message {
|
||||
border-radius: var(--radius-xl) !important;
|
||||
border: none;
|
||||
padding: var(--spacing-xl) !important;
|
||||
font-size: var(--text-md) !important;
|
||||
line-height: var(--line-md) !important;
|
||||
min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
|
||||
min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
|
||||
}
|
||||
[data-testid = "bot"] {
|
||||
max-width: 85%;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
[data-testid = "user"] {
|
||||
max-width: 85%;
|
||||
width: auto !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.message.user p {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.message .user-message {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message .md-message p {
|
||||
margin-top: 0.6em !important;
|
||||
margin-bottom: 0.6em !important;
|
||||
}
|
||||
.message .md-message p:first-child { margin-top: 0 !important; }
|
||||
.message .md-message p:last-of-type { margin-bottom: 0 !important; }
|
||||
|
||||
.message .md-message {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.message .raw-message p {
|
||||
margin:0 !important;
|
||||
}
|
||||
.message .raw-message {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.raw-message.hideM, .md-message.hideM {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* custom buttons */
|
||||
.chuanhu-btn {
|
||||
border-radius: 5px;
|
||||
/* background-color: #E6E6E6 !important; */
|
||||
color: rgba(120, 120, 120, 0.64) !important;
|
||||
padding: 4px !important;
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
cursor: pointer !important;
|
||||
transition: color .2s ease, background-color .2s ease;
|
||||
}
|
||||
.chuanhu-btn:hover {
|
||||
background-color: rgba(167, 167, 167, 0.25) !important;
|
||||
color: unset !important;
|
||||
}
|
||||
.chuanhu-btn:active {
|
||||
background-color: rgba(167, 167, 167, 0.5) !important;
|
||||
}
|
||||
.chuanhu-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
.copy-bot-btn {
|
||||
/* top: 18px; */
|
||||
bottom: 0;
|
||||
}
|
||||
.toggle-md-btn {
|
||||
/* top: 0; */
|
||||
bottom: 20px;
|
||||
}
|
||||
.copy-code-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-wrap>div img{
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* history message */
|
||||
.wrap>.history-message {
|
||||
padding: 10px !important;
|
||||
}
|
||||
.history-message {
|
||||
/* padding: 0 !important; */
|
||||
opacity: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.history-message>.history-message {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.history-message>.message-wrap {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.history-message>.message {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.wrap>.history-message::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 2px;
|
||||
background-color: var(--body-text-color-subdued);
|
||||
margin-bottom: 10px;
|
||||
margin-top: -10px;
|
||||
clear: both;
|
||||
}
|
||||
.wrap>.history-message>:last-child::after {
|
||||
content: "仅供查看";
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: var(--body-text-color-subdued);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
table {
|
||||
margin: 1em 0;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
}
|
||||
td,th {
|
||||
border: 1.2px solid var(--border-color-primary) !important;
|
||||
padding: 0.2em;
|
||||
}
|
||||
thead {
|
||||
background-color: rgba(175,184,193,0.2);
|
||||
}
|
||||
thead th {
|
||||
padding: .5em .2em;
|
||||
}
|
||||
/* 行内代码 */
|
||||
.message :not(pre) code {
|
||||
display: inline;
|
||||
white-space: break-spaces;
|
||||
font-family: var(--font-mono);
|
||||
border-radius: 6px;
|
||||
margin: 0 2px 0 2px;
|
||||
padding: .2em .4em .1em .4em;
|
||||
background-color: rgba(175,184,193,0.2);
|
||||
}
|
||||
/* 代码块 */
|
||||
.message pre,
|
||||
.message pre[class*=language-] {
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: .8em 1em 1em 0em !important;
|
||||
padding: var(--spacing-xl) 1.2em !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
.message pre code,
|
||||
.message pre code[class*=language-] {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
text-shadow: none;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
/* 覆盖 gradio 丑陋的复制按钮样式 */
|
||||
pre button[title="copy"] {
|
||||
border-radius: 5px;
|
||||
transition: background-color .2s ease;
|
||||
}
|
||||
pre button[title="copy"]:hover {
|
||||
background-color: #333232;
|
||||
}
|
||||
pre button .check {
|
||||
color: #fff !important;
|
||||
background: var(--neutral-950) !important;
|
||||
}
|
||||
|
||||
/* 覆盖prism.css */
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.entity,
|
||||
.token.operator,
|
||||
.token.url {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* 代码高亮样式 */
|
||||
.codehilite .hll { background-color: #6e7681 }
|
||||
.codehilite .c { color: #8b949e; font-style: italic } /* Comment */
|
||||
.codehilite .err { color: #f85149 } /* Error */
|
||||
.codehilite .esc { color: #c9d1d9 } /* Escape */
|
||||
.codehilite .g { color: #c9d1d9 } /* Generic */
|
||||
.codehilite .k { color: #ff7b72 } /* Keyword */
|
||||
.codehilite .l { color: #a5d6ff } /* Literal */
|
||||
.codehilite .n { color: #c9d1d9 } /* Name */
|
||||
.codehilite .o { color: #ff7b72; font-weight: bold } /* Operator */
|
||||
.codehilite .x { color: #c9d1d9 } /* Other */
|
||||
.codehilite .p { color: #c9d1d9 } /* Punctuation */
|
||||
.codehilite .ch { color: #8b949e; font-style: italic } /* Comment.Hashbang */
|
||||
.codehilite .cm { color: #8b949e; font-style: italic } /* Comment.Multiline */
|
||||
.codehilite .cp { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
||||
.codehilite .cpf { color: #8b949e; font-style: italic } /* Comment.PreprocFile */
|
||||
.codehilite .c1 { color: #8b949e; font-style: italic } /* Comment.Single */
|
||||
.codehilite .cs { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Special */
|
||||
.codehilite .gd { color: #ffa198; background-color: #490202 } /* Generic.Deleted */
|
||||
.codehilite .ge { color: #c9d1d9; font-style: italic } /* Generic.Emph */
|
||||
.codehilite .gr { color: #ffa198 } /* Generic.Error */
|
||||
.codehilite .gh { color: #79c0ff; font-weight: bold } /* Generic.Heading */
|
||||
.codehilite .gi { color: #56d364; background-color: #0f5323 } /* Generic.Inserted */
|
||||
.codehilite .go { color: #8b949e } /* Generic.Output */
|
||||
.codehilite .gp { color: #8b949e } /* Generic.Prompt */
|
||||
.codehilite .gs { color: #c9d1d9; font-weight: bold } /* Generic.Strong */
|
||||
.codehilite .gu { color: #79c0ff } /* Generic.Subheading */
|
||||
.codehilite .gt { color: #ff7b72 } /* Generic.Traceback */
|
||||
.codehilite .g-Underline { color: #c9d1d9; text-decoration: underline } /* Generic.Underline */
|
||||
.codehilite .kc { color: #79c0ff } /* Keyword.Constant */
|
||||
.codehilite .kd { color: #ff7b72 } /* Keyword.Declaration */
|
||||
.codehilite .kn { color: #ff7b72 } /* Keyword.Namespace */
|
||||
.codehilite .kp { color: #79c0ff } /* Keyword.Pseudo */
|
||||
.codehilite .kr { color: #ff7b72 } /* Keyword.Reserved */
|
||||
.codehilite .kt { color: #ff7b72 } /* Keyword.Type */
|
||||
.codehilite .ld { color: #79c0ff } /* Literal.Date */
|
||||
.codehilite .m { color: #a5d6ff } /* Literal.Number */
|
||||
.codehilite .s { color: #a5d6ff } /* Literal.String */
|
||||
.codehilite .na { color: #c9d1d9 } /* Name.Attribute */
|
||||
.codehilite .nb { color: #c9d1d9 } /* Name.Builtin */
|
||||
.codehilite .nc { color: #f0883e; font-weight: bold } /* Name.Class */
|
||||
.codehilite .no { color: #79c0ff; font-weight: bold } /* Name.Constant */
|
||||
.codehilite .nd { color: #d2a8ff; font-weight: bold } /* Name.Decorator */
|
||||
.codehilite .ni { color: #ffa657 } /* Name.Entity */
|
||||
.codehilite .ne { color: #f0883e; font-weight: bold } /* Name.Exception */
|
||||
.codehilite .nf { color: #d2a8ff; font-weight: bold } /* Name.Function */
|
||||
.codehilite .nl { color: #79c0ff; font-weight: bold } /* Name.Label */
|
||||
.codehilite .nn { color: #ff7b72 } /* Name.Namespace */
|
||||
.codehilite .nx { color: #c9d1d9 } /* Name.Other */
|
||||
.codehilite .py { color: #79c0ff } /* Name.Property */
|
||||
.codehilite .nt { color: #7ee787 } /* Name.Tag */
|
||||
.codehilite .nv { color: #79c0ff } /* Name.Variable */
|
||||
.codehilite .ow { color: #ff7b72; font-weight: bold } /* Operator.Word */
|
||||
.codehilite .pm { color: #c9d1d9 } /* Punctuation.Marker */
|
||||
.codehilite .w { color: #6e7681 } /* Text.Whitespace */
|
||||
.codehilite .mb { color: #a5d6ff } /* Literal.Number.Bin */
|
||||
.codehilite .mf { color: #a5d6ff } /* Literal.Number.Float */
|
||||
.codehilite .mh { color: #a5d6ff } /* Literal.Number.Hex */
|
||||
.codehilite .mi { color: #a5d6ff } /* Literal.Number.Integer */
|
||||
.codehilite .mo { color: #a5d6ff } /* Literal.Number.Oct */
|
||||
.codehilite .sa { color: #79c0ff } /* Literal.String.Affix */
|
||||
.codehilite .sb { color: #a5d6ff } /* Literal.String.Backtick */
|
||||
.codehilite .sc { color: #a5d6ff } /* Literal.String.Char */
|
||||
.codehilite .dl { color: #79c0ff } /* Literal.String.Delimiter */
|
||||
.codehilite .sd { color: #a5d6ff } /* Literal.String.Doc */
|
||||
.codehilite .s2 { color: #a5d6ff } /* Literal.String.Double */
|
||||
.codehilite .se { color: #79c0ff } /* Literal.String.Escape */
|
||||
.codehilite .sh { color: #79c0ff } /* Literal.String.Heredoc */
|
||||
.codehilite .si { color: #a5d6ff } /* Literal.String.Interpol */
|
||||
.codehilite .sx { color: #a5d6ff } /* Literal.String.Other */
|
||||
.codehilite .sr { color: #79c0ff } /* Literal.String.Regex */
|
||||
.codehilite .s1 { color: #a5d6ff } /* Literal.String.Single */
|
||||
.codehilite .ss { color: #a5d6ff } /* Literal.String.Symbol */
|
||||
.codehilite .bp { color: #c9d1d9 } /* Name.Builtin.Pseudo */
|
||||
.codehilite .fm { color: #d2a8ff; font-weight: bold } /* Name.Function.Magic */
|
||||
.codehilite .vc { color: #79c0ff } /* Name.Variable.Class */
|
||||
.codehilite .vg { color: #79c0ff } /* Name.Variable.Global */
|
||||
.codehilite .vi { color: #79c0ff } /* Name.Variable.Instance */
|
||||
.codehilite .vm { color: #79c0ff } /* Name.Variable.Magic */
|
||||
.codehilite .il { color: #a5d6ff } /* Literal.Number.Integer.Long */
|
||||
|
||||
.dark .codehilite .hll { background-color: #2C3B41 }
|
||||
.dark .codehilite .c { color: #79d618; font-style: italic } /* Comment */
|
||||
.dark .codehilite .err { color: #FF5370 } /* Error */
|
||||
.dark .codehilite .esc { color: #89DDFF } /* Escape */
|
||||
.dark .codehilite .g { color: #EEFFFF } /* Generic */
|
||||
.dark .codehilite .k { color: #BB80B3 } /* Keyword */
|
||||
.dark .codehilite .l { color: #C3E88D } /* Literal */
|
||||
.dark .codehilite .n { color: #EEFFFF } /* Name */
|
||||
.dark .codehilite .o { color: #89DDFF } /* Operator */
|
||||
.dark .codehilite .p { color: #89DDFF } /* Punctuation */
|
||||
.dark .codehilite .ch { color: #79d618; font-style: italic } /* Comment.Hashbang */
|
||||
.dark .codehilite .cm { color: #79d618; font-style: italic } /* Comment.Multiline */
|
||||
.dark .codehilite .cp { color: #79d618; font-style: italic } /* Comment.Preproc */
|
||||
.dark .codehilite .cpf { color: #79d618; font-style: italic } /* Comment.PreprocFile */
|
||||
.dark .codehilite .c1 { color: #79d618; font-style: italic } /* Comment.Single */
|
||||
.dark .codehilite .cs { color: #79d618; font-style: italic } /* Comment.Special */
|
||||
.dark .codehilite .gd { color: #FF5370 } /* Generic.Deleted */
|
||||
.dark .codehilite .ge { color: #89DDFF } /* Generic.Emph */
|
||||
.dark .codehilite .gr { color: #FF5370 } /* Generic.Error */
|
||||
.dark .codehilite .gh { color: #C3E88D } /* Generic.Heading */
|
||||
.dark .codehilite .gi { color: #C3E88D } /* Generic.Inserted */
|
||||
.dark .codehilite .go { color: #79d618 } /* Generic.Output */
|
||||
.dark .codehilite .gp { color: #FFCB6B } /* Generic.Prompt */
|
||||
.dark .codehilite .gs { color: #FF5370 } /* Generic.Strong */
|
||||
.dark .codehilite .gu { color: #89DDFF } /* Generic.Subheading */
|
||||
.dark .codehilite .gt { color: #FF5370 } /* Generic.Traceback */
|
||||
.dark .codehilite .kc { color: #89DDFF } /* Keyword.Constant */
|
||||
.dark .codehilite .kd { color: #BB80B3 } /* Keyword.Declaration */
|
||||
.dark .codehilite .kn { color: #89DDFF; font-style: italic } /* Keyword.Namespace */
|
||||
.dark .codehilite .kp { color: #89DDFF } /* Keyword.Pseudo */
|
||||
.dark .codehilite .kr { color: #BB80B3 } /* Keyword.Reserved */
|
||||
.dark .codehilite .kt { color: #BB80B3 } /* Keyword.Type */
|
||||
.dark .codehilite .ld { color: #C3E88D } /* Literal.Date */
|
||||
.dark .codehilite .m { color: #F78C6C } /* Literal.Number */
|
||||
.dark .codehilite .s { color: #C3E88D } /* Literal.String */
|
||||
.dark .codehilite .na { color: #BB80B3 } /* Name.Attribute */
|
||||
.dark .codehilite .nb { color: #82AAFF } /* Name.Builtin */
|
||||
.dark .codehilite .nc { color: #FFCB6B } /* Name.Class */
|
||||
.dark .codehilite .no { color: #EEFFFF } /* Name.Constant */
|
||||
.dark .codehilite .nd { color: #82AAFF } /* Name.Decorator */
|
||||
.dark .codehilite .ni { color: #89DDFF } /* Name.Entity */
|
||||
.dark .codehilite .ne { color: #FFCB6B } /* Name.Exception */
|
||||
.dark .codehilite .nf { color: #82AAFF } /* Name.Function */
|
||||
.dark .codehilite .nl { color: #82AAFF } /* Name.Label */
|
||||
.dark .codehilite .nn { color: #FFCB6B } /* Name.Namespace */
|
||||
.dark .codehilite .nx { color: #EEFFFF } /* Name.Other */
|
||||
.dark .codehilite .py { color: #FFCB6B } /* Name.Property */
|
||||
.dark .codehilite .nt { color: #FF5370 } /* Name.Tag */
|
||||
.dark .codehilite .nv { color: #89DDFF } /* Name.Variable */
|
||||
.dark .codehilite .ow { color: #89DDFF; font-style: italic } /* Operator.Word */
|
||||
.dark .codehilite .pm { color: #89DDFF } /* Punctuation.Marker */
|
||||
.dark .codehilite .w { color: #EEFFFF } /* Text.Whitespace */
|
||||
.dark .codehilite .mb { color: #F78C6C } /* Literal.Number.Bin */
|
||||
.dark .codehilite .mf { color: #F78C6C } /* Literal.Number.Float */
|
||||
.dark .codehilite .mh { color: #F78C6C } /* Literal.Number.Hex */
|
||||
.dark .codehilite .mi { color: #F78C6C } /* Literal.Number.Integer */
|
||||
.dark .codehilite .mo { color: #F78C6C } /* Literal.Number.Oct */
|
||||
.dark .codehilite .sa { color: #BB80B3 } /* Literal.String.Affix */
|
||||
.dark .codehilite .sb { color: #C3E88D } /* Literal.String.Backtick */
|
||||
.dark .codehilite .sc { color: #C3E88D } /* Literal.String.Char */
|
||||
.dark .codehilite .dl { color: #EEFFFF } /* Literal.String.Delimiter */
|
||||
.dark .codehilite .sd { color: #79d618; font-style: italic } /* Literal.String.Doc */
|
||||
.dark .codehilite .s2 { color: #C3E88D } /* Literal.String.Double */
|
||||
.dark .codehilite .se { color: #EEFFFF } /* Literal.String.Escape */
|
||||
.dark .codehilite .sh { color: #C3E88D } /* Literal.String.Heredoc */
|
||||
.dark .codehilite .si { color: #89DDFF } /* Literal.String.Interpol */
|
||||
.dark .codehilite .sx { color: #C3E88D } /* Literal.String.Other */
|
||||
.dark .codehilite .sr { color: #89DDFF } /* Literal.String.Regex */
|
||||
.dark .codehilite .s1 { color: #C3E88D } /* Literal.String.Single */
|
||||
.dark .codehilite .ss { color: #89DDFF } /* Literal.String.Symbol */
|
||||
.dark .codehilite .bp { color: #89DDFF } /* Name.Builtin.Pseudo */
|
||||
.dark .codehilite .fm { color: #82AAFF } /* Name.Function.Magic */
|
||||
.dark .codehilite .vc { color: #89DDFF } /* Name.Variable.Class */
|
||||
.dark .codehilite .vg { color: #89DDFF } /* Name.Variable.Global */
|
||||
.dark .codehilite .vi { color: #89DDFF } /* Name.Variable.Instance */
|
||||
.dark .codehilite .vm { color: #82AAFF } /* Name.Variable.Magic */
|
||||
.dark .codehilite .il { color: #F78C6C } /* Literal.Number.Integer.Long */
|
||||
2
docs/assets/external-scripts.js
Normal file
2
docs/assets/external-scripts.js
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
// external javascript here
|
||||
BIN
docs/assets/favicon.ico
Normal file
BIN
docs/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
11
docs/assets/html/appearance_switcher.html
Normal file
11
docs/assets/html/appearance_switcher.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span style="margin-top: 4px !important;">
|
||||
{label}
|
||||
</span>
|
||||
<span>
|
||||
<label class="apSwitch" for="checkbox">
|
||||
<input type="checkbox" id="checkbox">
|
||||
<div class="apSlider"></div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
9
docs/assets/html/billing_info.html
Normal file
9
docs/assets/html/billing_info.html
Normal file
@ -0,0 +1,9 @@
|
||||
<b>{label}</b>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: {usage_percent}%;">
|
||||
<span class="progress-text">{usage_percent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<span>${rounded_usage}</span><span>${usage_limit}</span>
|
||||
</div>
|
||||
1
docs/assets/html/footer.html
Normal file
1
docs/assets/html/footer.html
Normal file
@ -0,0 +1 @@
|
||||
<div class="versions">{versions}</div>
|
||||
132
theme.py
132
theme.py
@ -25,42 +25,61 @@ CODE_HIGHLIGHT, ADD_WAIFU = get_conf('CODE_HIGHLIGHT', 'ADD_WAIFU')
|
||||
# gr.themes.utils.colors.pink (粉红色)
|
||||
# gr.themes.utils.colors.rose (玫瑰色)
|
||||
|
||||
small_and_beautiful_theme = gr.themes.Soft(
|
||||
).set(
|
||||
# button_primary_background_fill="*primary_500",
|
||||
button_primary_background_fill_dark="*primary_600",
|
||||
# button_primary_background_fill_hover="*primary_400",
|
||||
# button_primary_border_color="*primary_500",
|
||||
button_primary_border_color_dark="*primary_600",
|
||||
button_primary_text_color="wihte",
|
||||
button_primary_text_color_dark="white",
|
||||
button_secondary_background_fill="*neutral_100",
|
||||
button_secondary_background_fill_hover="*neutral_50",
|
||||
button_secondary_background_fill_dark="*neutral_900",
|
||||
button_secondary_text_color="*neutral_800",
|
||||
button_secondary_text_color_dark="white",
|
||||
# background_fill_primary="#F7F7F7",
|
||||
# background_fill_primary_dark="#1F1F1F",
|
||||
# block_title_text_color="*primary_500",
|
||||
block_title_background_fill_dark="*primary_900",
|
||||
block_label_background_fill_dark="*primary_900",
|
||||
input_background_fill="#F6F6F6",
|
||||
)
|
||||
|
||||
|
||||
def adjust_theme():
|
||||
|
||||
try:
|
||||
color_er = gr.themes.utils.colors.fuchsia
|
||||
set_theme = gr.themes.Default(
|
||||
primary_hue=gr.themes.utils.colors.orange,
|
||||
neutral_hue=gr.themes.utils.colors.gray,
|
||||
font=["sans-serif", "PingFang SC", "ui-sans-serif", "system-ui",
|
||||
"sans-serif", gr.themes.utils.fonts.GoogleFont("Source Sans Pro")],
|
||||
font_mono=["ui-monospace", "Consolas", "monospace", gr.themes.utils.fonts.GoogleFont("IBM Plex Mono")])
|
||||
set_theme.set(
|
||||
# Colors
|
||||
set_theme = gr.themes.Soft(
|
||||
primary_hue=gr.themes.Color(
|
||||
c50="#EBFAF2",
|
||||
c100="#CFF3E1",
|
||||
c200="#A8EAC8",
|
||||
c300="#77DEA9",
|
||||
c400="#3FD086",
|
||||
c500="#02C160",
|
||||
c600="#06AE56",
|
||||
c700="#05974E",
|
||||
c800="#057F45",
|
||||
c900="#04673D",
|
||||
c950="#2E5541",
|
||||
name="small_and_beautiful",
|
||||
),
|
||||
secondary_hue=gr.themes.Color(
|
||||
c50="#576b95",
|
||||
c100="#576b95",
|
||||
c200="#576b95",
|
||||
c300="#576b95",
|
||||
c400="#576b95",
|
||||
c500="#576b95",
|
||||
c600="#576b95",
|
||||
c700="#576b95",
|
||||
c800="#576b95",
|
||||
c900="#576b95",
|
||||
c950="#576b95",
|
||||
),
|
||||
neutral_hue=gr.themes.Color(
|
||||
name="gray",
|
||||
c50="#f6f7f8",
|
||||
# c100="#f3f4f6",
|
||||
c100="#F2F2F2",
|
||||
c200="#e5e7eb",
|
||||
c300="#d1d5db",
|
||||
c400="#B2B2B2",
|
||||
c500="#808080",
|
||||
c600="#636363",
|
||||
c700="#515151",
|
||||
c800="#393939",
|
||||
# c900="#272727",
|
||||
c900="#2B2B2B",
|
||||
c950="#171717",
|
||||
),
|
||||
|
||||
radius_size=gr.themes.sizes.radius_sm,
|
||||
).set(
|
||||
button_primary_background_fill="*primary_500",
|
||||
button_primary_background_fill_dark="*primary_600",
|
||||
button_primary_background_fill_hover="*primary_400",
|
||||
button_primary_border_color="*primary_500",
|
||||
button_primary_border_color_dark="*primary_600",
|
||||
button_primary_text_color="wihte",
|
||||
button_primary_text_color_dark="white",
|
||||
@ -69,51 +88,14 @@ def adjust_theme():
|
||||
button_secondary_background_fill_dark="*neutral_900",
|
||||
button_secondary_text_color="*neutral_800",
|
||||
button_secondary_text_color_dark="white",
|
||||
block_title_background_fill_dark="*neutral_900",
|
||||
block_label_background_fill_dark="*neutral_900",
|
||||
background_fill_primary="#F7F7F7",
|
||||
background_fill_primary_dark="#1F1F1F",
|
||||
block_title_text_color="*primary_500",
|
||||
block_title_background_fill_dark="*primary_900",
|
||||
block_label_background_fill_dark="*primary_900",
|
||||
input_background_fill="#F6F6F6",
|
||||
input_background_fill_dark="*neutral_800",
|
||||
# Transition
|
||||
button_transition="none",
|
||||
# Shadows
|
||||
button_shadow="*shadow_drop",
|
||||
button_shadow_hover="*shadow_drop_lg",
|
||||
button_shadow_active="*shadow_inset",
|
||||
input_shadow="0 0 0 *shadow_spread transparent, *shadow_inset",
|
||||
input_shadow_focus="0 0 0 *shadow_spread *secondary_50, *shadow_inset",
|
||||
input_shadow_focus_dark="0 0 0 *shadow_spread *neutral_700, *shadow_inset",
|
||||
checkbox_label_shadow="*shadow_drop",
|
||||
block_shadow="*shadow_drop",
|
||||
form_gap_width="1px",
|
||||
# Button borders
|
||||
input_border_width="1px",
|
||||
##### input_background_fill="white",
|
||||
# Gradients
|
||||
stat_background_fill="linear-gradient(to right, *primary_400, *primary_200)",
|
||||
stat_background_fill_dark="linear-gradient(to right, *primary_400, *primary_600)",
|
||||
error_background_fill=f"linear-gradient(to right, {color_er.c100}, *background_fill_secondary)",
|
||||
error_background_fill_dark="*background_fill_primary",
|
||||
checkbox_label_background_fill="linear-gradient(to top, *neutral_50, white)",
|
||||
checkbox_label_background_fill_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
|
||||
checkbox_label_background_fill_hover="linear-gradient(to top, *neutral_100, white)",
|
||||
checkbox_label_background_fill_hover_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
|
||||
button_primary_background_fill="linear-gradient(to bottom right, *primary_100, *primary_300)",
|
||||
##### button_primary_background_fill_dark="linear-gradient(to bottom right, *primary_500, *primary_600)",
|
||||
button_primary_background_fill_hover="linear-gradient(to bottom right, *primary_100, *primary_200)",
|
||||
button_primary_background_fill_hover_dark="linear-gradient(to bottom right, *primary_500, *primary_500)",
|
||||
##### button_primary_border_color_dark="*primary_500",
|
||||
##### button_secondary_background_fill="linear-gradient(to bottom right, *neutral_100, *neutral_200)",
|
||||
##### button_secondary_background_fill_dark="linear-gradient(to bottom right, *neutral_600, *neutral_700)",
|
||||
##### button_secondary_background_fill_hover="linear-gradient(to bottom right, *neutral_100, *neutral_100)",
|
||||
button_secondary_background_fill_hover_dark="linear-gradient(to bottom right, *neutral_600, *neutral_600)",
|
||||
button_cancel_background_fill=f"linear-gradient(to bottom right, {color_er.c100}, {color_er.c200})",
|
||||
button_cancel_background_fill_dark=f"linear-gradient(to bottom right, {color_er.c600}, {color_er.c700})",
|
||||
button_cancel_background_fill_hover=f"linear-gradient(to bottom right, {color_er.c100}, {color_er.c100})",
|
||||
button_cancel_background_fill_hover_dark=f"linear-gradient(to bottom right, {color_er.c600}, {color_er.c600})",
|
||||
button_cancel_border_color=color_er.c200,
|
||||
button_cancel_border_color_dark=color_er.c600,
|
||||
button_cancel_text_color=color_er.c600,
|
||||
button_cancel_text_color_dark="white",
|
||||
chatbot_code_background_color="*neutral_950",
|
||||
chatbot_code_background_color_dark="*neutral_950",
|
||||
)
|
||||
# 添加一个萌萌的看板娘
|
||||
if ADD_WAIFU:
|
||||
|
||||
@ -594,11 +594,12 @@ def is_api2d_key(key):
|
||||
return False
|
||||
|
||||
def is_proxy_key(key):
|
||||
if key.startswith('proxy-') and len(key) == 37:
|
||||
if key.startswith('proxy-') and len(key) == 38:
|
||||
return True
|
||||
else:
|
||||
return False
|
||||
|
||||
|
||||
def is_any_api_key(key):
|
||||
if ',' in key:
|
||||
keys = key.split(',')
|
||||
|
||||
Reference in New Issue
Block a user