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,153 +839,7 @@ def load_custom_css():
         return css_content
     except FileNotFoundError:
         print("Warning: CSS file not found, using minimal CSS")
-        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;
-    }
-}
-"""
+        return ""
     except Exception as e:
         print(f"Error loading CSS: {e}")
         return ""
@@ -1087,7 +941,7 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
         )
         
         gr.Markdown(
-            '**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+'
+            '**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+'
         )