Spaces:

TrustSafeAI
/

Attention-Tracker

Running

App Files Files Community

johnsonhung906 commited on Oct 25, 2024

Commit

6792367

1 Parent(s): 7bef68d

update style and toggle demos

Browse files

Files changed (3) hide show

demo.html +94 -78
demo_results/normal_5.png +0 -0
index.html +221 -222

demo.html CHANGED Viewed

@@ -3,111 +3,127 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Gallery</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            text-align: center;
-            background-color: #f4f4f4;
-            padding: 20px;
         }
         .image-gallery {
-            display: flex; /* Use flexbox for side-by-side images */
-            justify-content: center;
-            gap: 20px; /* Space between images */
-            margin-top: 20px; /* Add space above the image gallery */
         }
         .image-gallery img {
-            width: 80%; /* Set width to 80% of the window */
-            max-width: 500px; /* Ensure maximum width remains 500px */
-            height: auto; /* Maintain aspect ratio */
-            border-radius: 10px; /* Rounded corners for images */
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow to images */
-            display: none; /* Initially hide all images */
         }
-        .button-container {
-            text-align: center;
-            margin-top: 20px;
         }
-        .button-container .group-title {
-            font-weight: bold;
-            margin: 20px 0 10px;
-            font-size: 1.2em;
-        }
-        .normal-button {
-            background-color: #28a745; /* Green for Normal Data */
-        }
-        .attack-button {
-            background-color: #dc3545; /* Red for Attack Data */
         }
-        .button-container button {
-            padding: 10px 20px;
-            margin: 5px;
-            border: none;
-            color: white;
-            cursor: pointer;
-            border-radius: 5px;
-            font-size: 1em; /* Increased font size */
-            transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
         }
-        .button-container button:hover {
-            transform: scale(1.05); /* Slightly increase size on hover */
         }
-        .normal-button:hover {
-            background-color: #218838; /* Darker green on hover */
         }
-        .attack-button:hover {
-            background-color: #c82333; /* Darker red on hover */
         }
     </style>
 </head>
 <body>
     <script>
-        function showNormalImage(normalImageId) {
-            // Hide all normal images
-            var normalImages = document.querySelectorAll('.image-gallery img[id^="normalImage"]');
-            normalImages.forEach(function(image) {
-                image.style.display = 'none'; // Hide normal images
-            });
-            // Show the selected normal image
-            document.getElementById(normalImageId).style.display = 'block'; // Show the selected normal image
-            // Optionally, you can show the corresponding attack image by default
-            // Uncomment the following line if you want the first attack image to be displayed when a normal image is shown
-            // document.getElementById('attackImage1').style.display = 'block'; // Show the default attack image
-        }
-        function showAttackImage(attackImageId) {
-            // Hide all attack images
-            var attackImages = document.querySelectorAll('.image-gallery img[id^="attackImage"]');
-            attackImages.forEach(function(image) {
-                image.style.display = 'none'; // Hide attack images
-            });
-            // Show the selected attack image
-            document.getElementById(attackImageId).style.display = 'block'; // Show the selected attack image
-            // Optionally, you can show the corresponding normal image by default
-            // Uncomment the following line if you want the first normal image to be displayed when an attack image is shown
-            // document.getElementById('normalImage1').style.display = 'block'; // Show the default normal image
         }
-        // Initial display settings
-        document.getElementById('normalImage1').style.display = 'block'; // Show first normal image
-        document.getElementById('attackImage1').style.display = 'block'; // Show first attack image
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Gallery Navigation</title>
     <style>
+        .image-gallery-container {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px auto;
         }
         .image-gallery {
+            width: 800px; /* Increased width */
+            max-height: 600px; /* Increased height */
+            overflow: hidden;
+            position: relative;
         }
         .image-gallery img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            display: none;
         }
+        .image-gallery img.active {
+            display: block;
         }
+        .arrow {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 2.5em;
+            color: #444; /* Darker color */
+            padding: 5px 15px;
+            transition: color 0.3s;
+            user-select: none;
+            transform: scaleX(0.7);
         }
+        .arrow:hover {
+            color: #007bff; /* Color on hover */
         }
+        .left-arrow {
+            left: 20px; /* Adjusted position */
         }
+        .right-arrow {
+            right: 20px; /* Adjusted position */
         }
+        .group-title {
+            font-weight: bold;
+            margin-top: 30px;
+            font-size: 1.2em;
         }
     </style>
 </head>
 <body>
+    <div class="image-gallery-container normal-gallery">
+        <span class="arrow left-arrow" onclick="navigateImages('normal', -1)">&lt;</span>
+        <div class="image-gallery">
+            <img id="normalImage1" src="./demo_results/normal_1.png" class="active" alt="Normal Image 1">
+            <img id="normalImage2" src="./demo_results/normal_2.png" alt="Normal Image 2">
+            <img id="normalImage3" src="./demo_results/normal_3.png" alt="Normal Image 3">
+            <img id="normalImage4" src="./demo_results/normal_4.png" alt="Normal Image 4">
+        </div>
+        <span class="arrow right-arrow" onclick="navigateImages('normal', 1)">&gt;</span>
+    </div>
+    <div class="image-gallery-container attack-gallery">
+        <span class="arrow left-arrow" onclick="navigateImages('attack', -1)">&lt;</span>
+        <div class="image-gallery">
+            <img id="attackImage1" src="./demo_results/attack_1.png" class="active" alt="Attack Image 1">
+            <img id="attackImage2" src="./demo_results/attack_2.png" alt="Attack Image 2">
+            <img id="attackImage3" src="./demo_results/attack_3.png" alt="Attack Image 3">
+            <img id="attackImage4" src="./demo_results/attack_4.png" alt="Attack Image 4">
+        </div>
+        <span class="arrow right-arrow" onclick="navigateImages('attack', 1)">&gt;</span>
+    </div>
     <script>
+        let normalIndex = 0;
+        let attackIndex = 0;
+        function navigateImages(type, direction) {
+            let images;
+            let currentIndex;
+            // Determine which set of images to target and the current index
+            if (type === 'normal') {
+                images = document.querySelectorAll('.normal-gallery .image-gallery img');
+                currentIndex = normalIndex;
+            } else if (type === 'attack') {
+                images = document.querySelectorAll('.attack-gallery .image-gallery img');
+                currentIndex = attackIndex;
+            }
+            // Check if images were found to avoid accessing undefined elements
+            if (images && images.length > 0) {
+                // Hide current image
+                images[currentIndex].classList.remove('active');
+                // Calculate new index (modulo ensures cycling)
+                currentIndex = (currentIndex + direction + images.length) % images.length;
+                // Show new image
+                images[currentIndex].classList.add('active');
+                // Update index tracker
+                if (type === 'normal') {
+                    normalIndex = currentIndex;
+                } else if (type === 'attack') {
+                    attackIndex = currentIndex;
+                }
+            } else {
+                console.error("No images found for type:", type);
+            }
         }
     </script>
 </body>
 </html>

demo_results/normal_5.png ADDED Viewed

index.html CHANGED Viewed

@@ -3,27 +3,28 @@
   <head>
     <meta charset="UTF-8">
-<!-- Begin Jekyll SEO tag v2.8.0 -->
-<title>Attention Tracker | Attention Tracker: Detecting Prompt Injection Attacks in LLMs </title>
-<meta property="og:title" content="Gradient Cuff" />
-<meta property="og:locale" content="en_US" />
-<meta name="description" content="Detecting Prompt Injection Attacks in LLMs using attention" />
-<meta property="og:description" content="Detecting Prompt Injection Attacks in LLMs using attention" />
-<script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebSite","description":"Detecting Jailbreak Attacks on Large Language Models by Exploring Refusal Loss Landscapes","headline":"Gradient Cuff","name":"Gradient Cuff","url":"https://huggingface.co/spaces/gregH/Gradient Cuff"}</script>
-<!-- End Jekyll SEO tag -->
-    <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#157878">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css?v=90447f115a006bc45b738d9592069468b20e2551">
     <link rel="stylesheet" href="assets/css/style.css?v=90447f115a006bc45b738d9592069468b20e2551">
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
     <link rel="stylesheet" href="assets/css/custom_style.css?v=90447f115a006bc45b738d9592069468b20e2551">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
@@ -31,126 +32,132 @@
     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="/resources/demos/style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
-    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
     <script>
-      function showNormalImage(normalImageId) {
-            // Hide all normal images
-            var normalImages = document.querySelectorAll('.image-gallery img[id^="normalImage"]');
-            normalImages.forEach(function(image) {
-                image.style.display = 'none'; // Hide normal images
-            });
-            // Show the selected normal image
-            document.getElementById(normalImageId).style.display = 'block'; // Show the selected normal image
-            // Optionally, you can show the corresponding attack image by default
-            // Uncomment the following line if you want the first attack image to be displayed when a normal image is shown
-            // document.getElementById('attackImage1').style.display = 'block'; // Show the default attack image
-        }
-        function showAttackImage(attackImageId) {
-            // Hide all attack images
-            var attackImages = document.querySelectorAll('.image-gallery img[id^="attackImage"]');
-            attackImages.forEach(function(image) {
-                image.style.display = 'none'; // Hide attack images
-            });
-            // Show the selected attack image
-            document.getElementById(attackImageId).style.display = 'block'; // Show the selected attack image
-            // Optionally, you can show the corresponding normal image by default
-            // Uncomment the following line if you want the first normal image to be displayed when an attack image is shown
-            // document.getElementById('normalImage1').style.display = 'block'; // Show the default normal image
         }
-        // Initial display settings
-        document.getElementById('normalImage1').style.display = 'block'; // Show first normal image
-        document.getElementById('attackImage1').style.display = 'block'; // Show first attack image
     </script>
-<!-- for mathjax support -->
-    <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-<!-- end custom head snippets -->
     <style>
-      /* body {
-          font-family: Arial, sans-serif;
-          text-align: center;
-          background-color: #f4f4f4;
-          padding: 0px;
-      } */
       .image-gallery {
-          display: flex; /* Use flexbox for side-by-side images */
-          justify-content: center;
-          gap: 20px; /* Space between images */
-          margin-top: 20px; /* Add space above the image gallery */
       }
       .image-gallery img {
-          width: 100%; /* Set width to 80% of the window */
-          max-width: 1200px; /* Ensure maximum width remains 500px */
-          height: auto; /* Maintain aspect ratio */
-          border-radius: 10px; /* Rounded corners for images */
-          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow to images */
-          display: none; /* Initially hide all images */
       }
-      .button-container {
-          text-align: center;
-          margin-top: 20px;
       }
-      .button-container .group-title {
-          font-weight: bold;
-          margin: 20px 0 10px;
-          font-size: 1.2em;
       }
-      .normal-button {
-          background-color: #28a745; /* Green for Normal Data */
       }
-      .attack-button {
-          background-color: #dc3545; /* Red for Attack Data */
       }
-      .button-container button {
-          padding: 10px 20px;
-          margin: 5px;
-          border: none;
-          color: white;
-          cursor: pointer;
-          border-radius: 5px;
-          font-size: 1em; /* Increased font size */
-          transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
       }
-      .button-container button:hover {
-          transform: scale(1.05); /* Slightly increase size on hover */
       }
-      .normal-button:hover {
-          background-color: #218838; /* Darker green on hover */
       }
-      .attack-button:hover {
-          background-color: #c82333; /* Darker red on hover */
       }
     </style>
   </head>
   <body>
-    <a id="skip-to-content" href="#content">Skip to the content.</a>
     <header class="page-header" role="banner">
       <h1 class="project-name">Attention Tracker</h1>
       <h2 class="project-tagline">Attention Tracker: Detecting Prompt Injection Attacks in LLMs</h2>
       <h2 class="project-tagline"><a href="https://arxiv.org/abs/xxx" style="color: white;" target="_blank" rel="noopener noreferrer">https://arxiv.org/abs/xx.xx</a></h2>
-      <!-- <h2 class="project-tagline"><a href="https://huggingface.co/spaces/pinyuchen/attention-tracker-Jailbreak-Detector" style="color: white;" target="_blank" rel="noopener noreferrer">Live Demo</a></h2> -->
       <div style="text-align: center; font-size: large;">
         <div>
           <a href="https://khhung906.github.io/" style="color: white;" target="_blank" rel="noopener noreferrer">
@@ -179,135 +186,127 @@
           <sup>1</sup>National Taiwan University <sup>2</sup>IBM Research
         </div>
     </header>
     <main id="content" class="main-content" role="main">
       <h2 id="abstract">Abstract</h2>
-<p>Large Language Models (LLMs) have revolutionized various domains but remain vulnerable to prompt injection attacks, where malicious inputs manipulate the model into ignoring original instructions and executing designated action. In this paper, we investigate
-  the underlying mechanisms of these attacks by analyzing the attention patterns within LLMs.
-  We introduce the concept of the <strong>distraction effect</strong>, where specific attention heads, termed
-  important heads, shift focus from the original instruction to the injected instruction. Building on this discovery, we propose <strong>Attention
-  Tracker</strong>, a training-free detection method that tracks attention patterns on instruction to detect
-  prompt injection attacks without the need for additional LLM inference. Our method generalizes effectively across diverse models, datasets,
-  and attack types, showing an AUROC improvement of up to 10.0% over existing methods, and performs well even on small LLMs. We
-  demonstrate the robustness of our approach through extensive evaluations and provide insights into safeguarding LLM-integrated systems from prompt injection vulnerabilities.
-</p>
-<h2 id="what-is-jailbreak">What is Prompt Injection Attack?</h2>
-<p>A Prompt Injection Attack is a technique used to manipulate language models (like GPT-3 or similar AI systems) by injecting malicious or deceptive prompts into the input data, causing the model to behave in unexpected or undesired ways. This attack exploits the way language models interpret and respond to instructions, tricking them into providing information or performing actions that were not originally intended.</p>
-<h2 id="refusal-loss">Distraction Effect</h2>
-<p>
-  In this section, we analyze the reasons behind the success of prompt injection attacks on LLMs. Specifically, we aim to understand
-  <strong>what mechanism within LLMs causes them to "ignore" the original instruction and follow the injected instruction instead</strong>.
-  To explore this, we examine the attention patterns of the last token in the input prompts, as it has the most direct influence on the LLMs' output.
-</p>
-<div class="container">
-<div><img id="attn-map-img" src="./figures/attn_map.png" /></div>
-</div>
-<p>
-  In the figure (a), we visualize the attention maps of the last token in the input prompt for normal and attack data. We observe that the attention maps for normal data are much darker than those for attacked data, particularly in the middle and earlier layers of the LLM. This indicates that the last token's attention to the instruction is significantly higher for normal data than for attack data in specific attention heads. When inputting attacked data, the attention shifts away from the original instruction towards the attack data, which we refer to as the <strong>distraction effect</strong>.
-  Additionally, in the figure (b), we find that the attention focus shifts from the original instruction to the injected instruction in the attack data. This suggests that the separator string helps the attacker shift attention to the injected instruction, causing the LLM to perform the injected task instead of the target task.
-</p>
-</div>
-<h2 id="proposed-approach-attention-tracker">Proposed Approach: Attention Tracker</h2>
-<p> With the discover of distraction effect, we propose <strong>Attention Tracker</strong>,
-  a prompt injection detection method based on tracking the attention pattern on instruction. Our detection procedure is shown below:
-</p>
-<div class="container"><img id="attention-tracker-header" src="./figures/main.png" /></div>
-<p></p>
-<p>
-  Attention Tracker can be summarized into two phases:
-</p>
-<p>
-    <strong>(Phase 1) Finding Important Heads:</strong> In the first step, we identify specific attention head that that exhibit the distraction effect, which we termed the important heads. To find the important heads, we use a set of LLM-generated sentences with the ignore attack as the dataset.
-</p>
-<p>
-    <strong>(Phase 2) Prompt Injection Detection with Important Heads:</strong> In the second step, we feed the testing quries into the target LLM and aggregate the attention directed towards the instruction in the important heads. With this aggregated score which we call the <strong>focus score</strong>, we can effectively detect prompt injection attacks.
-</p>
-<p>
-We provide more details about the running flow of Attention Tracker in the paper.
-</p>
-<h2 id="result-attention-tracker">Experiment Result</h2>
-<p>
-  In this section, we evaluate Attention Tracker against various baselines with the AUROC score on two prompt injection detection benchmarks: Open-Prompt-Injection and deepset prompt injection dataset:
-</p>
-<div class="container"><img id="attention-tracker-header" src="./figures/result.png" /></div>
-<p/>
-<p>
-  As shown in the table, Attention Tracker consistently outperforms existing baselines, with an AUROC improvement of up to 3.1% on the Open-Prompt-Injection benchmark and 10.0% on the deepset prompt injection dataset. Among training-free methods, it achieves even greater gains, with an average AUROC improvement of 31.3% and 20.9% across the two datasets, respectively. Unlike LLM-based methods that rely on larger models for stability, Attention Tracker delivers robust and effective performance even with smaller LLMs, underscoring its suitability for real-world applications.
-</p>
-<h2 id="demonstration">Demonstration</h2>
-<p>
-  We evaluated the effectiveness of the Attention Tracker by visualizing the distribution of attention aggregation for key heads across different data types (normal data vs. attack data) in the Open-Prompt-Injection dataset. Additionally, we calculated the focus score for these data samples. A higher focus score indicates a lower likelihood of prompt injection attacks. The tested model is Qwen-2 1.8b.
-</p>
-<div class="button-container">
-  <div class="group-title">Normal Data</div>
-  <button class="normal-button" onclick="showNormalImage('normalImage1')">Normal 1</button>
-  <button class="normal-button" onclick="showNormalImage('normalImage2')">Normal 2</button>
-  <button class="normal-button" onclick="showNormalImage('normalImage3')">Normal 3</button>
-  <button class="normal-button" onclick="showNormalImage('normalImage4')">Normal 4</button>
-</div>
-<div class="image-gallery">
-  <img id="normalImage1" src="./demo_results/normal_1.png" alt="Normal Image 1">
-  <img id="normalImage2" src="./demo_results/normal_2.png" alt="Normal Image 2">
-  <img id="normalImage3" src="./demo_results/normal_3.png" alt="Normal Image 3">
-  <img id="normalImage4" src="./demo_results/normal_4.png" alt="Normal Image 4">
-</div>
-<div class="button-container">
-  <div class="group-title">Attack Data</div>
-  <button class="attack-button" onclick="showAttackImage('attackImage1')">Attack 1</button>
-  <button class="attack-button" onclick="showAttackImage('attackImage2')">Attack 2</button>
-  <button class="attack-button" onclick="showAttackImage('attackImage3')">Attack 3</button>
-  <button class="attack-button" onclick="showAttackImage('attackImage4')">Attack 4</button>
-</div>
-<div class="image-gallery">
-  <img id="attackImage1" src="./demo_results/attack_1.png" alt="Attack Image 1">
-  <img id="attackImage2" src="./demo_results/attack_2.png" alt="Attack Image 2">
-  <img id="attackImage3" src="./demo_results/attack_3.png" alt="Attack Image 3">
-  <img id="attackImage4" src="./demo_results/attack_4.png" alt="Attack Image 4">
-</div>
-<h2 id="inquiries"> Inquiries on Attention Tracker</h2>
-<p> Please contact <a href="Mailto:khhung906@gmail.com">Kuo-Han Hung</a>
-and <a href="Mailto:pin-yu.chen@ibm.com">Pin-Yu Chen</a>
-</p>
-<h2 id="citations">Citations</h2>
-<p>If you find Attention Tracker helpful and useful for your research, please cite our main paper as follows:</p>
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
-  <!-- @misc{hu2024gradient,
-      title={Gradient Cuff: Detecting Jailbreak Attacks on Large Language Models by Exploring Refusal Loss Landscapes},
-      author={Xiaomeng Hu and Pin-Yu Chen and Tsung-Yi Ho},
-      year={2024},
-      eprint={2403.00867},
-      archivePrefix={arXiv},
-      primaryClass={cs.CR} }-->
-</code></pre></div></div>
       <footer class="site-footer">
-          <span class="site-footer-owner">This website is maintained by <a href="https://khhung906.github.io/">Kuo-Han Hung</a></a>.</span>
       </footer>
     </main>

   <head>
     <meta charset="UTF-8">
+    <!-- Begin Jekyll SEO tag v2.8.0 -->
+    <title>Attention Tracker | Attention Tracker: Detecting Prompt Injection Attacks in LLMs </title>
+    <meta property="og:title" content="Gradient Cuff" />
+    <meta property="og:locale" content="en_US" />
+    <meta name="description" content="Detecting Prompt Injection Attacks in LLMs using attention" />
+    <meta property="og:description" content="Detecting Prompt Injection Attacks in LLMs using attention" />
+    <script type="application/ld+json">
+    {"@context":"https://schema.org","@type":"WebSite","description":"Detecting Jailbreak Attacks on Large Language Models by Exploring Refusal Loss Landscapes","headline":"Gradient Cuff","name":"Gradient Cuff","url":"https://huggingface.co/spaces/gregH/Gradient Cuff"}</script>
+    <!-- End Jekyll SEO tag -->
+    <!-- <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#157878">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> -->
     <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css?v=90447f115a006bc45b738d9592069468b20e2551">
     <link rel="stylesheet" href="assets/css/style.css?v=90447f115a006bc45b738d9592069468b20e2551">
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
     <link rel="stylesheet" href="assets/css/custom_style.css?v=90447f115a006bc45b738d9592069468b20e2551">
+    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="/resources/demos/style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> -->
+    <!-- for mathjax support -->
+    <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <!-- end custom head snippets -->
     <script>
+        let normalIndex = 0;
+        let attackIndex = 0;
+        function navigateImages(type, direction) {
+            let images;
+            let currentIndex;
+            // Determine which set of images to target and the current index
+            if (type === 'normal') {
+                images = document.querySelectorAll('.normal-gallery .image-gallery img');
+                currentIndex = normalIndex;
+            } else if (type === 'attack') {
+                images = document.querySelectorAll('.attack-gallery .image-gallery img');
+                currentIndex = attackIndex;
+            }
+            // Check if images were found to avoid accessing undefined elements
+            if (images && images.length > 0) {
+                // Hide current image
+                images[currentIndex].classList.remove('active');
+                // Calculate new index (modulo ensures cycling)
+                currentIndex = (currentIndex + direction + images.length) % images.length;
+                // Show new image
+                images[currentIndex].classList.add('active');
+                // Update index tracker
+                if (type === 'normal') {
+                    normalIndex = currentIndex;
+                } else if (type === 'attack') {
+                    attackIndex = currentIndex;
+                }
+            } else {
+                console.error("No images found for type:", type);
+            }
         }
     </script>
     <style>
+      .image-gallery-container {
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 20px auto;
+      }
       .image-gallery {
+          width: 80%; /* Increased width */
+          max-height: 600px; /* Increased height */
+          overflow: hidden;
+          position: relative;
+          margin-left: 50px;
+          margin-right: 50px;
       }
       .image-gallery img {
+          width: 100%;
+          height: auto;
+          border-radius: 10px;
+          display: none;
       }
+      .image-gallery img.active {
+          display: block;
       }
+      .arrow {
+          cursor: pointer;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          font-size: 2.5em;
+          color: #444; /* Darker color */
+          padding: 5px 15px;
+          transition: color 0.3s;
+          user-select: none;
+          transform: scaleX(0.7);
       }
+      .arrow:hover {
+          color: #007bff; /* Color on hover */
       }
+      .left-arrow {
+          left: 20px; /* Adjusted position */
       }
+      .right-arrow {
+          right: 20px; /* Adjusted position */
       }
+      .group-title {
+          font-size: large;
+          font-weight: bold;
+          margin-top: 30px;
+          font-size: 1.2em;
+          text-align: center; /* Center the text */
+          display: block; /* Ensure it behaves as a block element */
+          margin-bottom: 10px; /* Add some space below the title */
       }
+      .green {
+        color: green; /* Set text color to green */
       }
+      .red {
+        color: red; /* Set text color to green */
       }
     </style>
   </head>
   <body>
     <header class="page-header" role="banner">
       <h1 class="project-name">Attention Tracker</h1>
       <h2 class="project-tagline">Attention Tracker: Detecting Prompt Injection Attacks in LLMs</h2>
       <h2 class="project-tagline"><a href="https://arxiv.org/abs/xxx" style="color: white;" target="_blank" rel="noopener noreferrer">https://arxiv.org/abs/xx.xx</a></h2>
       <div style="text-align: center; font-size: large;">
         <div>
           <a href="https://khhung906.github.io/" style="color: white;" target="_blank" rel="noopener noreferrer">
           <sup>1</sup>National Taiwan University <sup>2</sup>IBM Research
         </div>
     </header>
     <main id="content" class="main-content" role="main">
       <h2 id="abstract">Abstract</h2>
+      <p>Large Language Models (LLMs) have revolutionized various domains but remain vulnerable to prompt injection attacks, where malicious inputs manipulate the model into ignoring original instructions and executing designated action. In this paper, we investigate
+        the underlying mechanisms of these attacks by analyzing the attention patterns within LLMs.
+        We introduce the concept of the <strong>distraction effect</strong>, where specific attention heads, termed
+        important heads, shift focus from the original instruction to the injected instruction. Building on this discovery, we propose <strong>Attention
+        Tracker</strong>, a training-free detection method that tracks attention patterns on instruction to detect
+        prompt injection attacks without the need for additional LLM inference. Our method generalizes effectively across diverse models, datasets,
+        and attack types, showing an AUROC improvement of up to 10.0% over existing methods, and performs well even on small LLMs. We
+        demonstrate the robustness of our approach through extensive evaluations and provide insights into safeguarding LLM-integrated systems from prompt injection vulnerabilities.
+      </p>
+      <h2 id="what-is-jailbreak">What is Prompt Injection Attack?</h2>
+      <p>A Prompt Injection Attack is a technique used to manipulate language models (like GPT-3 or similar AI systems) by injecting malicious or deceptive prompts into the input data, causing the model to behave in unexpected or undesired ways. This attack exploits the way language models interpret and respond to instructions, tricking them into providing information or performing actions that were not originally intended.</p>
+      <h2 id="refusal-loss">Distraction Effect</h2>
+      <p>
+        In this section, we analyze the reasons behind the success of prompt injection attacks on LLMs. Specifically, we aim to understand
+        <strong>what mechanism within LLMs causes them to "ignore" the original instruction and follow the injected instruction instead</strong>.
+        To explore this, we examine the attention patterns of the last token in the input prompts, as it has the most direct influence on the LLMs' output.
+      </p>
+      <div class="container">
+      <div><img id="attn-map-img" src="./figures/attn_map.png" /></div>
+      </div>
+      <p>
+        In the figure (a), we visualize the attention maps of the last token in the input prompt for normal and attack data. We observe that the attention maps for normal data are much darker than those for attacked data, particularly in the middle and earlier layers of the LLM. This indicates that the last token's attention to the instruction is significantly higher for normal data than for attack data in specific attention heads. When inputting attacked data, the attention shifts away from the original instruction towards the attack data, which we refer to as the <strong>distraction effect</strong>.
+        Additionally, in the figure (b), we find that the attention focus shifts from the original instruction to the injected instruction in the attack data. This suggests that the separator string helps the attacker shift attention to the injected instruction, causing the LLM to perform the injected task instead of the target task.
+      </p>
+      </div>
+      <h2 id="proposed-approach-attention-tracker">Proposed Approach: Attention Tracker</h2>
+      <p> With the discover of distraction effect, we propose <strong>Attention Tracker</strong>,
+        a prompt injection detection method based on tracking the attention pattern on instruction. Our detection procedure is shown below:
+      </p>
+      <div class="container"><img id="attention-tracker-header" src="./figures/main.png" /></div>
+      <p></p>
+      <p>
+        Attention Tracker can be summarized into two phases:
+      </p>
+      <p>
+          <strong>(Phase 1) Finding Important Heads:</strong> In the first step, we identify specific attention head that that exhibit the distraction effect, which we termed the important heads. To find the important heads, we use a set of LLM-generated sentences with the ignore attack as the dataset.
+      </p>
+      <p>
+          <strong>(Phase 2) Prompt Injection Detection with Important Heads:</strong> In the second step, we feed the testing quries into the target LLM and aggregate the attention directed towards the instruction in the important heads. With this aggregated score which we call the <strong>focus score</strong>, we can effectively detect prompt injection attacks.
+      </p>
+      <p>
+      We provide more details about the running flow of Attention Tracker in the paper.
+      </p>
+      <h2 id="result-attention-tracker">Experiment Result</h2>
+      <p>
+        In this section, we evaluate Attention Tracker against various baselines with the AUROC score on two prompt injection detection benchmarks: Open-Prompt-Injection and deepset prompt injection dataset:
+      </p>
+      <div class="container"><img id="attention-tracker-header" src="./figures/result.png" /></div>
+      <p/>
+      <p>
+        As shown in the table, Attention Tracker consistently outperforms existing baselines, with an AUROC improvement of up to 3.1% on the Open-Prompt-Injection benchmark and 10.0% on the deepset prompt injection dataset. Among training-free methods, it achieves even greater gains, with an average AUROC improvement of 31.3% and 20.9% across the two datasets, respectively. Unlike LLM-based methods that rely on larger models for stability, Attention Tracker delivers robust and effective performance even with smaller LLMs, underscoring its suitability for real-world applications.
+      </p>
+      <h2 id="demonstration">Demo</h2>
+      <p>
+        We evaluated the effectiveness of the Attention Tracker by visualizing the distribution of attention aggregation for key heads across different data types (normal data vs. attack data) in the Open-Prompt-Injection dataset. Additionally, we calculated the focus score for these data samples. A higher focus score indicates a lower likelihood of prompt injection attacks. The tested model is Qwen-2 1.8b.
+      </p>
+      <div class="group-title green">Normal Data</div>
+      <div class="image-gallery-container normal-gallery">
+          <span class="arrow left-arrow" onclick="navigateImages('normal', -1)">&lt;</span>
+          <div class="image-gallery">
+              <img id="normalImage1" src="./demo_results/normal_1.png" class="active" alt="Normal Image 1">
+              <img id="normalImage2" src="./demo_results/normal_2.png" alt="Normal Image 2">
+              <img id="normalImage3" src="./demo_results/normal_3.png" alt="Normal Image 3">
+              <img id="normalImage4" src="./demo_results/normal_4.png" alt="Normal Image 4">
+              <img id="normalImage4" src="./demo_results/normal_5.png" alt="Normal Image 5">
+          </div>
+          <span class="arrow right-arrow" onclick="navigateImages('normal', 1)">&gt;</span>
+      </div>
+      <div class="group-title red">Attack Data</div>
+      <div class="image-gallery-container attack-gallery">
+          <span class="arrow left-arrow" onclick="navigateImages('attack', -1)">&lt;</span>
+          <div class="image-gallery">
+              <img id="attackImage1" src="./demo_results/attack_1.png" class="active" alt="Attack Image 1">
+              <img id="attackImage2" src="./demo_results/attack_2.png" alt="Attack Image 2">
+              <img id="attackImage3" src="./demo_results/attack_3.png" alt="Attack Image 3">
+              <img id="attackImage4" src="./demo_results/attack_4.png" alt="Attack Image 4">
+          </div>
+          <span class="arrow right-arrow" onclick="navigateImages('attack', 1)">&gt;</span>
+      </div>
+      <h2 id="inquiries"> Inquiries on Attention Tracker</h2>
+      <p> Please contact <a href="Mailto:khhung906@gmail.com">Kuo-Han Hung</a>
+          and <a href="Mailto:pin-yu.chen@ibm.com">Pin-Yu Chen</a>
+      </p>
+      <h2 id="citations">Citations</h2>
+      <p>If you find Attention Tracker helpful and useful for your research, please cite our main paper as follows:</p>
+      <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
+        <!-- @misc{hu2024gradient,
+            title={Gradient Cuff: Detecting Jailbreak Attacks on Large Language Models by Exploring Refusal Loss Landscapes},
+            author={Xiaomeng Hu and Pin-Yu Chen and Tsung-Yi Ho},
+            year={2024},
+            eprint={2403.00867},
+            archivePrefix={arXiv},
+            primaryClass={cs.CR} }-->
+        </code></pre></div>
+      </div>
       <footer class="site-footer">
+      <span class="site-footer-owner">This website is maintained by <a href="https://khhung906.github.io/">Kuo-Han Hung</a></a>.</span>
       </footer>
     </main>