adaptive images

index.html

@@ -518,7 +518,7 @@
 
 <footer class="footer">
   <div class="container">
-    <div class="content has-text-centered">
+    <!-- <div class="content has-text-centered">
       <a class="icon-link" target="_blank"
          href="./static/videos/nerfies_paper.pdf">
         <i class="fas fa-file-pdf"></i>
@@ -526,7 +526,7 @@
       <a class="icon-link" href="https://github.com/keunhong" target="_blank" class="external-link" disabled>
         <i class="fab fa-github"></i>
       </a>
-    </div>
+    </div> -->
     <div class="columns is-centered">
       <div class="column is-8">
         <div class="content">

static/css/custom.css

@@ -5,46 +5,3 @@
 #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, #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; }

static/js/index.js

@@ -1,12 +1,12 @@
 window.HELP_IMPROVE_VIDEOJS = false;
 
-var INTERP_BASE = "./static/interpolation/stacked";
-var NUM_INTERP_FRAMES = 240;
+var INTERP_BASE = "./static/images/adaptive";
+var NUM_INTERP_FRAMES = 7;
 
 var interp_images = [];
 function preloadInterpolationImages() {
   for (var i = 0; i < NUM_INTERP_FRAMES; i++) {
-    var path = INTERP_BASE + '/' + String(i).padStart(6, '0') + '.jpg';
+    var path = INTERP_BASE + '/' + String(i).padStart(2, '0') + '.png';
     interp_images[i] = new Image();
     interp_images[i].src = path;
   }