adaptive

index.html

@@ -473,7 +473,7 @@
 
 
     <div class="columns is-centered">
-      <div class="column">
+      <!-- <div class="column">
         <div class="content">
           <h2 class="title is-4">Performance against Adaptive Attacks</h2>
         </div>
@@ -482,7 +482,48 @@
           <h2 class="title is-4">Contribution of Representation Similarity & Label Con-
             sistency against Adaptive Attacks</h2>
         </div>
-      </div>
+      </div> -->
+      <div id="adaptive-demo" class="container">
+        <div class="row align-items-center">
+          <div class="row" style="margin: 10px 0 0">
+              <div class="models-list">
+                <span style="margin-right: 1em;">Models</span>
+                <span class="radio-group"><input type="radio" id="LLaMA2" class="options" name="models" value="llama2_7b_chat" checked="" /><label for="LLaMA2" class="option-label">LLaMA-2-7B-Chat</label></span>
+                <span class="radio-group"><input type="radio" id="Vicuna" class="options" name="models" value="vicuna_7b_v1.5" /><label for="Vicuna" class="option-label">Vicuna-7B-V1.5</label></span>
+              </div>
+          </div>
+        </div>
+        <div class="row align-items-center">
+          <div class="col-4">
+            <div id="defense-methods">
+              <div class="row align-items-center"><input type="radio" id="defense_ppl" class="options" name="defense" value="ppl" /><label for="defense_ppl" class="defense">CIFAR-10</label></div>
+              <div class="row align-items-center"><input type="radio" id="defense_smoothllm" class="options" name="defense" value="smoothllm" /><label for="defense_smoothllm" class="defense">CIFAR-100</label></div>
+              <div class="row align-items-center"><input type="radio" id="defense_erase_check" class="options" name="defense" value="erase_check" /><label for="defense_erase_check" class="defense">ImageNet</label></div>
+            </div>
+            <div class="row align-items-center">
+              <div class="attack-success-rate"><span class="jailbreak-metric">Average Malicious Refusal Rate</span><span class="attack-success-rate-value" id="asr-value">0.959</span></div>
+            </div>
+            <div class="row align-items-center">
+              <div class="benign-refusal-rate"><span class="jailbreak-metric">Benign Refusal Rate</span><span class="benign-refusal-rate-value" id="brr-value">0.050</span></div>
+            </div>
+          </div>
+          <div class="col-8">
+          <figure class="figure">
+            <img id="reliability-diagram" src="demo_results/gradient_cuff_llama2_7b_chat_threshold_100.png" alt="CIFAR-100 Calibrated Reliability Diagram (Full)" />
+            <div class="slider-container">
+              <div class="slider-label"><span>Perplexity Threshold</span></div>
+              <div class="slider-content" id="ppl-slider"><div id="ppl-threshold" class="ui-slider-handle"></div></div>
+            </div>
+            <div class="slider-container">
+              <div class="slider-label"><span>Gradient Threshold</span></div>
+              <div class="slider-content" id="gradient-norm-slider"><div id="gradient-norm-threshold" class="slider-value ui-slider-handle"></div></div>
+            </div>
+            <figcaption class="figure-caption">
+            </figcaption>
+          </figure>
+          </div>
+        </div>
+        </div>
     </div>
   </div>
 

static/css/custom.css

@@ -4,4 +4,47 @@
 
 #adaptive-loss-formula .formula-list a { display: inline-block; width: 250px; margin: 0 20px; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }
 
-#adaptive-loss-formula .formula-list a:hover, #jailbreak-demo #defense-methods .defense:hover { background: #555; color: #FFF; }
+#adaptive-loss-formula .formula-list a:hover, #adaptive-demo #defense-methods .defense:hover { background: #555; color: #FFF; }
+
+
+#adaptive-demo #defense-methods .options:checked ~ .defense { color: #FFF; background: #555; }
+
+#adaptive-demo #defense-methods .defense { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; background: #DDD; cursor: pointer; text-decoration: none; color: #333; border-radius: 10px; user-select: none; transition-duration: 0.3s; }
+
+#adaptive-demo .legend { text-align: center; width: 70%; margin: 0 auto; }
+
+#adaptive-demo .figure-option { text-align: center; width: 70%; margin: 4% auto 0; /* Customize the label (the container) */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }
+#adaptive-demo .figure-option .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
+#adaptive-demo .figure-option .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
+#adaptive-demo .figure-option .checkmark { position: absolute; top: 4px; left: 8px; height: 25px; width: 25px; background-color: #eee; }
+#adaptive-demo .figure-option .container:hover input ~ .checkmark { background-color: #ccc; }
+#adaptive-demo .figure-option .container input:checked ~ .checkmark { background-color: #9b9bff; }
+#adaptive-demo .figure-option .checkmark:after { content: ""; position: absolute; display: none; }
+#adaptive-demo .figure-option .container input:checked ~ .checkmark:after { display: block; }
+#adaptive-demo .figure-option .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
+
+#adaptive-demo .figure { margin: 0 auto; display: block; }
+
+#adaptive-demo .figure #original { display: none; }
+
+#adaptive-demo .figure img { user-drag: none; -webkit-user-drag: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: none; position: relative; left: 35px; }
+
+#adaptive-demo .figure-caption { width: 240px; text-align: center; display: block; margin: 0 auto; padding: 10px 0 0; font-size: .8em; }
+
+#adaptive-demo .figure-caption ul { padding-left: 0; }
+
+#adaptive-demo .figure-caption ul li { list-style: none; }
+
+#adaptive-demo .figure-caption .model-prediction { font-weight: bold; }
+
+#adaptive-demo .figure-caption .correct { color: #009926; }
+
+#adaptive-demo .figure-caption .wrong { color: #e31327; }
+
+#adaptive-demo .attack-success-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
+#adaptive-demo .attack-success-rate .jailbreak-metric { font-size: 0.75em; display: block; }
+#adaptive-demo .attack-success-rate .attack-success-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }
+
+#adaptive-demo .benign-refusal-rate { display: inline-block; width: 60%; margin: 2% auto 8%; padding: 8px 10px; text-align: center; text-decoration: none; background: #DDD; color: #333; border-radius: 10px; user-select: none; }
+#adaptive-demo .benign-refusal-rate .jailbreak-metric { font-size: 0.75em; display: block; }
+#adaptive-demo .benign-refusal-rate .benign-refusal-rate-value { font-size: 1.5em; font-family: "sans-serif"; color: #820000; }