From 31ab97dd091370530705c4b64f3720d12f10bd4e Mon Sep 17 00:00:00 2001 From: Keldos Date: Mon, 14 Aug 2023 00:14:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=B7=9D?= =?UTF-8?q?=E8=99=8E=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/green.css | 49 ++++++++++++++++++++++++++++++++++-------------- themes/green.py | 2 +- 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/themes/green.css b/themes/green.css index cee3d764..950ac2e1 100644 --- a/themes/green.css +++ b/themes/green.css @@ -103,6 +103,10 @@ mspace { width: 10% !important; } +button.sm { + padding: 6px 8px !important; +} + /* usage_display */ .insert_block { position: relative; @@ -124,15 +128,15 @@ textarea { resize: none; height: 100%; /* 填充父元素的高度 */ } -#main_chatbot { +/* #main_chatbot { height: 75vh !important; max-height: 75vh !important; - /* overflow: auto !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; @@ -201,9 +205,9 @@ textarea.svelte-1pie7s6 { background: #393939 !important; border: var(--input-border-width) solid var(--input-border-color) !important; } -.dark input[type="range"] { +/* .dark input[type="range"] { background: #393939 !important; -} +} */ #user_info .wrap { opacity: 0; } @@ -238,7 +242,7 @@ textarea.svelte-1pie7s6 { #debug_mes { transition: all 0.6s; } -#main_chatbot { +#gpt-chatbot { transition: height 0.3s ease; } @@ -415,7 +419,7 @@ input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb:hover { background: var(--neutral-50); } -input[type=range]::-webkit-slider-runnable-track { +input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; @@ -440,28 +444,37 @@ ol:not(.options), ul:not(.options) { } /* 亮色（默认） */ -#main_chatbot { +#gpt-chatbot { background-color: var(--chatbot-background-color-light) !important; color: var(--chatbot-color-light) !important; + box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.06); } /* 暗色 */ -.dark #main_chatbot { +.dark #gpt-chatbot { background-color: var(--block-background-fill) !important; color: var(--chatbot-color-dark) !important; + box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2); +} + +#gpt-panel > div { + box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.06); +} +.dark #gpt-panel > div { + box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2); } /* 屏幕宽度大于等于500px的设备 */ /* update on 2023.4.8: 高度的细致调整已写入JavaScript */ -@media screen and (min-width: 500px) { +/* @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) { +/* @media screen and (max-width: 499px) { #main_chatbot { height: calc(100vh - 140px); } @@ -474,8 +487,8 @@ ol:not(.options), ul:not(.options) { #app_title h1{ letter-spacing: -1px; font-size: 22px; } -} -#main_chatbot .wrap { +} */ +#gpt-chatbot .wrap { overflow-x: hidden } /* 对话气泡 */ @@ -491,11 +504,19 @@ ol:not(.options), ul:not(.options) { [data-testid = "bot"] { max-width: 85%; border-bottom-left-radius: 0 !important; + background-color: var(--message-bot-background-color-light) !important; } [data-testid = "user"] { max-width: 85%; width: auto !important; border-bottom-right-radius: 0 !important; + background-color: var(--message-user-background-color-light) !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; } .message p { diff --git a/themes/green.py b/themes/green.py index 3ee753ac..bed06519 100644 --- a/themes/green.py +++ b/themes/green.py @@ -63,7 +63,7 @@ def adjust_theme(): 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="*neutral_50", background_fill_primary_dark="#1F1F1F", block_title_text_color="*primary_500", block_title_background_fill_dark="*primary_900", From 0b11260d6fcebcfbd8128a3977f3282388f4edeb Mon Sep 17 00:00:00 2001 From: Keldos Date: Mon, 14 Aug 2023 00:15:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B7=9D=E8=99=8E?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=9A=84slider=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/green.js | 41 +++++++++++++++++++++++++++++++++++++++++ themes/green.py | 4 ++++ 2 files changed, 45 insertions(+) create mode 100644 themes/green.js diff --git a/themes/green.js b/themes/green.js new file mode 100644 index 00000000..65948c03 --- /dev/null +++ b/themes/green.js @@ -0,0 +1,41 @@ + +var academic_chat = null; + +var sliders = null; +var rangeInputs = null; +var numberInputs = null; + +function set_elements() { + academic_chat = document.querySelector('gradio-app'); + async function get_sliders() { + sliders = document.querySelectorAll('input[type="range"]'); + while (sliders.length == 0) { + await new Promise(r => setTimeout(r, 100)); + sliders = document.querySelectorAll('input[type="range"]'); + } + setSlider(); + } + get_sliders(); +} + +function setSlider() { + rangeInputs = document.querySelectorAll('input[type="range"]'); + numberInputs = document.querySelectorAll('input[type="number"]') + 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%'; + }); + } + setSliderRange(); + rangeInputs.forEach(rangeInput => { + rangeInput.addEventListener('input', setSliderRange); + }); + numberInputs.forEach(numberInput => { + numberInput.addEventListener('input', setSliderRange); + }) +} + +window.addEventListener("DOMContentLoaded", () => { + set_elements(); +}); \ No newline at end of file diff --git a/themes/green.py b/themes/green.py index bed06519..e14f4b67 100644 --- a/themes/green.py +++ b/themes/green.py @@ -87,6 +87,10 @@ def adjust_theme(): """ + + with open('themes/green.js', 'r', encoding='utf8') as f: + js += f"" + gradio_original_template_fn = gr.routes.templates.TemplateResponse def gradio_new_template_fn(*args, **kwargs): res = gradio_original_template_fn(*args, **kwargs)