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)