fix: 修复川虎主题的slider问题

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();
+});

themes/green.py

@@ -87,6 +87,10 @@ def adjust_theme():
                 <script src="file=docs/waifu_plugin/jquery-ui.min.js"></script>
                 <script src="file=docs/waifu_plugin/autoload.js"></script>
             """
+        
+        with open('themes/green.js', 'r', encoding='utf8') as f:
+            js += f"<script>{f.read()}</script>"
+        
         gradio_original_template_fn = gr.routes.templates.TemplateResponse
         def gradio_new_template_fn(*args, **kwargs):
             res = gradio_original_template_fn(*args, **kwargs)