update

app.py

@@ -38,35 +38,85 @@ HEAD = """
 
 HTML = f"""
 <div id="banner">
-    <h1 style="font-size: 32px; line-height: 1.5em; margin-bottom: 0em;">
-        <img src="/gradio_api/file=assets/rudder_3094973.png" style="display: inline; height: 1.5em;"> LLM Censorship Steering 
-    </h1>
-    <div id="cover" style="height: 130px;">
-        <img style="height: 100%; padding-top: 0.5em;" src="/gradio_api/file=assets/demo-cover.png">
+    <h1><img src="/gradio_api/file=assets/rudder_3094973.png">&nbsp;LLM Censorship Steering</h1>
+
+    <div id="links" class="row" style="margin-bottom: .8em;">
+        <i class="fa-solid fa-file-pdf fa-lg"></i><a href="https://arxiv.org/abs/2504.17130"> Paper</a> &nbsp; 
+        <i class="fa-solid fa-blog fa-lg"></i><a href="https://hannahxchen.github.io/blog/2025/censorship-steering"> Blog Post</a> &nbsp; 
+        <i class="fa-brands fa-github fa-lg"></i><a href="https://github.com/hannahxchen/llm-censorship-steering"> Code</a> &nbsp; 
+    </div>
+
+    <div id="cover">
+        <img src="/gradio_api/file=assets/demo-cover.png">
     </div>
 </div>
 """
 
 CSS = """
+div.gradio-container .app {
+    max-width: 1600px !important;
+}
+
 div#banner {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    h1 {
+        font-size: 32px;
+        line-height: 1.35em; 
+        margin-bottom: 0em;
+        display: flex;
+
+        img {
+            display: inline; 
+            height: 1.35em;
+        }
+    }
+
+    div#cover img {
+        max-height: 130px;
+        padding-top: 0.5em;
+    }
+}
+
+@media (max-width: 500px) {
+  div#banner {
+    h1 {
+        font-size: 22px;
+    }
+
+    div#links {
+        font-size: 14px;
+    }
+  }
+
+  div#model-state p {
+    font-size: 14px;
+  }
+  
 }
-div#component-8 .form {
-    padding-top: 7.5px;
-    background: var(--block-background-fill);
+
+div#main-components {
+    align-items: flex-end;
 }
-div#component-9 {
-    .toggle-label {color: var(--body-text-color);}
+
+div#steering-toggle {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    .toggle-label {
+        color: var(--body-text-color);
+    }
     span p {
         font-size: var(--block-info-text-size);
         line-height: var(--line-sm);
         color: var(--block-label-text-color);
     }
 }
-div#component-10 {
+
+div#coeff-slider {
+    padding-bottom: 5px;
     .slider_input_container span {color: var(--body-text-color);}
     .slider_input_container {
         display: flex;
@@ -74,7 +124,8 @@ div#component-10 {
         input {appearance: auto;}
     }
 }
-div#component-10 .wrap .head {
+
+div#coeff-slider .wrap .head {
     justify-content: unset;
     label {margin-right: var(--size-2);}
     label span {
@@ -259,23 +310,23 @@ with gr.Blocks(title="LLM Censorship Steering", theme=theme, head=HEAD, css=CSS,
 
     gr.HTML(HTML)
 
-    @gr.render(inputs=endpoint_state, triggers=[endpoint_state.change])
-    def render_state(endpoint_state):
-        if endpoint_state == "Ready":
-            color = "green"
-        elif endpoint_state == "Server Error":
-            color = "red"
-        else:
-            color = "orange"
-
-        if endpoint_state != None:
-            gr.Markdown(f'🤖 {model_name} | Inference Endpoint State: <span style="color:{color}; font-weight: bold;">{endpoint_state}</span>')
-
-    with gr.Row():
+    with gr.Row(elem_id="main-components"):
         with gr.Column(scale=1):
+            @gr.render(inputs=endpoint_state, triggers=[endpoint_state.change])
+            def render_state(endpoint_state):
+                if endpoint_state == "Ready":
+                    color = "green"
+                elif endpoint_state == "Server Error":
+                    color = "red"
+                else:
+                    color = "orange"
+
+                if endpoint_state != None:
+                    gr.Markdown(f'🤖 {model_name} | Inference Endpoint State: <span style="color:{color}; font-weight: bold;">{endpoint_state}</span>', elem_id="model-state")
+                    
             with gr.Row():
-                steer_toggle = Toggle(label="Steering", info="Turn off to generate original outputs", value=True, interactive=True, scale=2)
-                coeff = gr.Slider(label="Steering Coefficient:", value=-1.0, minimum=-2, maximum=2, step=0.1, scale=8, show_reset_button=False)
+                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")
 
             @gr.on(inputs=[steer_toggle], outputs=[steer_toggle, coeff], triggers=[steer_toggle.change])
             def update_toggle(toggle_value):