update

app.py

@@ -19,7 +19,7 @@ from examples import run_example_1, run_example_2, run_example_3, run_example_4,
 from functools import partial
 
 # Load original app constants
-APP_TITLE = '<div class="app-title"><span class="brand">AttnTrace: </span><span class="subtitle">Attention-based Context Traceback for Long-Context LLMs</span></div>'
+APP_TITLE = '<div class="app-title"><span class="brand">AttnTrace</span><span class="subtitle">Attention-based Context Traceback for Long-Context LLMs</span></div>'
 APP_DESCRIPTION = """AttnTrace traces a model's generated statements back to specific parts of the context using attention-based traceback. Try it out with Meta-Llama-3.1-8B-Instruct here! See the [[paper](https://arxiv.org/abs/2506.04202)] and [[code](https://github.com/Wang-Yanting/TracLLM-Kit)] for more!
 Maintained by the AttnTrace team."""
 # NEW_TEXT = """Long-context large language models (LLMs), such as Gemini-2.5-Pro and Claude-Sonnet-4, are increasingly used to empower advanced AI systems, including retrieval-augmented generation (RAG) pipelines and autonomous agents. In these systems, an LLM receives an instruction along with a context—often consisting of texts retrieved from a knowledge database or memory—and generates a response that is contextually grounded by following the instruction. Recent studies have designed solutions to trace back to a subset of texts in the context that contributes most to the response generated by the LLM. These solutions have numerous real-world applications, including performing post-attack forensic analysis and improving the interpretability and trustworthiness of LLM outputs. While significant efforts have been made, state-of-the-art solutions such as TracLLM often lead to a high computation cost, e.g., it takes TracLLM hundreds of seconds to perform traceback for a single response-context pair. In this work, we propose {\name}, a new context traceback method based on the attention weights produced by an LLM for a prompt. To effectively utilize attention weights, we introduce two techniques designed to enhance the effectiveness of {\name}, and we provide theoretical insights for our design choice. %Moreover, we perform both theoretical analysis and empirical evaluation to demonstrate their effectiveness. 
@@ -839,7 +839,153 @@ def load_custom_css():
         return css_content
     except FileNotFoundError:
         print("Warning: CSS file not found, using minimal CSS")
-        return ""
+        return """
+/* Add global page margins */
+.gradio-container {
+   padding-left: 12rem !important;
+   padding-right: 12rem !important;
+}
+
+/* App title styling */
+.app-title {
+    text-align: center !important;
+    margin: 2rem 0 !important;
+}
+
+.app-title .brand {
+    color: #333333 !important;
+    font-weight: 700 !important;
+    font-size: 3rem !important;
+    margin-right: 12px !important;
+}
+
+.app-title .subtitle {
+    color: #666666 !important;
+    font-weight: 400 !important;
+    font-size: 1.6rem !important;
+    display: block !important;
+    margin-top: 12px !important;
+}
+
+/* App description styling */
+.app-description p {
+    font-size: 1.25rem !important;
+    color: #555555 !important;
+    line-height: 1.6 !important;
+}
+
+/* Feature highlights */
+.feature-highlights {
+    font-size: 1.1rem !important;
+    color: #444444 !important;
+    line-height: 1.5 !important;
+}
+
+/* Example title */
+.example-title {
+    text-align: center !important;
+    margin: 2rem 0 1rem 0 !important;
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    color: #333333 !important;
+}
+
+/* Example button container */
+.example-button-container {
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    gap: 1rem !important;
+    margin: 1rem 0 !important;
+    flex-wrap: wrap !important;
+}
+
+/* Example buttons */
+.example-button button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 20px !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+    min-width: 200px !important;
+    text-align: center !important;
+}
+
+.example-button button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
+}
+
+/* Color legend classes */
+.color-red {
+    background-color: #FF4444 !important;
+    color: black !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-weight: 600 !important;
+}
+
+.color-orange {
+    background-color: #FF8C42 !important;
+    color: black !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-weight: 600 !important;
+}
+
+.color-golden {
+    background-color: #FFD93D !important;
+    color: black !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-weight: 600 !important;
+}
+
+.color-yellow {
+    background-color: #FFF280 !important;
+    color: black !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-weight: 600 !important;
+}
+
+.color-light {
+    background-color: #FFF9C4 !important;
+    color: black !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-weight: 600 !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+    
+    .app-title .brand {
+        font-size: 2rem !important;
+    }
+    
+    .app-title .subtitle {
+        font-size: 1.2rem !important;
+    }
+    
+    .example-button-container {
+        flex-direction: column !important;
+    }
+    
+    .example-button button {
+        min-width: 100% !important;
+    }
+}
+"""
     except Exception as e:
         print(f"Error loading CSS: {e}")
         return ""
@@ -941,7 +1087,7 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
         )
         
         gr.Markdown(
-            '**Color Legend for Context Traceback (by ranking):** <span style="background-color: #FF4444; color: black; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Red</span> = 1st (most important) | <span style="background-color: #FF8C42; color: black; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Orange</span> = 2nd | <span style="background-color: #FFD93D; color: black; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Golden</span> = 3rd | <span style="background-color: #FFF280; color: black; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Yellow</span> = 4th-5th | <span style="background-color: #FFF9C4; color: black; padding: 2px 6px; border-radius: 4px; font-weight: 600;">Light</span> = 6th+'
+            '**Color Legend for Context Traceback (by ranking):** <span class="color-red">Red</span> = 1st (most important) | <span class="color-orange">Orange</span> = 2nd | <span class="color-golden">Golden</span> = 3rd | <span class="color-yellow">Yellow</span> = 4th-5th | <span class="color-light">Light</span> = 6th+'
         )