Update index.html

index.html

@@ -169,11 +169,51 @@ gradient norm and then apply soft removal on them to mitigate the potential jail
 </div>
 </div>
 
-
-<div class="container jailbreak-intro-sec">
-<div><img id="jailbreak-intro-img" src="./loss_landscape.png" /></div>
+<div class="example-selector">
+            <button onclick="selectExample('example1')">Example 1</button>
+            <button onclick="selectExample('example2')">Example 2</button>
+            <button onclick="selectExample('example3')">Example 3</button>
+            <button onclick="selectExample('example4')">Example 4</button>
+        </div>
+        <div class="example-box" id="exampleBox">
+        <p id="exampleText">Select an example to see it highlighted.</p>
 </div>
 
+<script>
+  function selectExample(exampleId) {
+      const examples = {
+          example1: "High-level speaking, successful jailbreaks share a common principle that they are trying to make the LLMs willing to affirm the user request which will be rejected at the beginning.",
+          example2: "Drawing upon this inspiration, our proposed defense aims to find the tokens that are most critical in forcing the LLM to generate such affirmative responses, decrease their importance in the generation, and thereby resolve the potential jailbreak risks brought by these tokens.",
+          example3: "To identify these tokens, we propose a new concept called the Affirmation Loss. We then use the loss's gradient norm with respect to each token in the user input prompt to find the jailbreak-critical tokens.",
+          example4: "We select those tokens with the larger gradient norm and then apply soft removal on them to mitigate the potential jailbreak risks."
+      };
+
+      const exampleText = document.getElementById('exampleText');
+      exampleText.innerHTML = examples[exampleId];
+
+      // Highlight specific parts of the text
+      switch (exampleId) {
+          case 'example1':
+              highlightText(exampleText, 'successful jailbreaks');
+              break;
+          case 'example2':
+              highlightText(exampleText, 'our proposed defense');
+              break;
+          case 'example3':
+              highlightText(exampleText, 'Affirmation Loss');
+              break;
+          case 'example4':
+              highlightText(exampleText, 'soft removal');
+              break;
+      }
+  }
+
+  function highlightText(element, keyword) {
+      const regex = new RegExp(`(${keyword})`, 'gi');
+      element.innerHTML = element.innerHTML.replace(regex, '<span class="highlight">$1</span>');
+  }
+</script>
+
 <h2 id="proposed-approach-gradient-cuff">Performance evaluation against practical Jailbreaks</h2>
 <p> With the exploration of the Refusal Loss landscape, we propose Gradient Cuff, 
   a two-step jailbreak detection method based on checking the refusal loss and its gradient norm. Our detection procedure is shown below: