update

app.py

@@ -33,6 +33,7 @@ scheduler = load_scheduler()
 
 
 HEAD = """
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 """
 
@@ -95,7 +96,6 @@ div#banner {
   div#model-state p {
     font-size: 14px;
   }
-  
 }
 
 div#steering-toggle {
@@ -129,6 +129,20 @@ div#coeff-slider .wrap .head {
         margin-bottom: 0;
     }
 }
+
+.tooltip {
+    word-wrap: break-word;
+    width: 12rem;
+}
+.tooltip-inner { 
+  filter: alpha(opacity=100);
+  font-size: var(--block-info-text-size);
+  text-align: center;
+  padding: .4rem .2rem;
+  background-color: var(--neutral-500);
+  border-width: 1px;
+  border-radius: var(--block-radius);
+}
 """
 
 
@@ -149,6 +163,9 @@ slider_ticks = """\
 </datalist>\
 """
 
+coeff_info = """\
+<href='#' id='coeff-info' data-bs-toggle='tooltip' style='padding-left: 3px;' data-bs-html='true' data-bs-trigger='hover focus' data-bs-placement='right' data-bs-html='true' title='Recommended range is -1~1 (Outputs may be unexpected outside this range)'><i class='fa-solid fa-circle-question'></i></span>\
+"""
 
 JS = """
 async() => {
@@ -159,10 +176,19 @@ async() => {
     sliderNode.insertAdjacentHTML('afterend', "%s");
     sliderNode.setAttribute("list", "values");
 
+    const coeffBox = document.querySelector("div#coeff-slider label span");
+    coeffBox.insertAdjacentHTML('afterend', "%s");
+
+
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+
     document.querySelector('span.min_value').remove();
     document.querySelector('span.max_value').remove();
 }
-""" % (slider_info, slider_ticks)
+""" % (slider_info, slider_ticks, coeff_info)
 
 
 def initialize_instance(request: gr.Request):
@@ -325,7 +351,7 @@ with gr.Blocks(title="LLM Censorship Steering", theme=theme, head=HEAD, css=CSS,
         with gr.Column(scale=1):
             with gr.Row():
                 steer_toggle = Toggle(label="Steering", info="Turn off to generate original outputs", value=True, interactive=True, scale=2, elem_id="steering-toggle")
-                coeff = gr.Slider(label="Coefficient:", value=-1.0, minimum=-2, maximum=2, step=0.1, scale=8, show_reset_button=False, elem_id="coeff-slider")
+                coeff = gr.Slider(label="Coefficient", value=-1.0, minimum=-2, maximum=2, step=0.1, scale=8, show_reset_button=False, elem_id="coeff-slider")
 
             @gr.on(inputs=[steer_toggle], outputs=[steer_toggle, coeff], triggers=[steer_toggle.change])
             def update_toggle(toggle_value):