assets/js/calibration.js

$(document).ready(function(){
    $('#jailbreak-intro').on('click', 'span', function(e) {
        e.preventDefault();
        if (!$(this).hasClass('selected')) {
            $('#jailbreak-intro-label > span').removeClass('selected');
            $(this).addClass('selected');
            let cur_img = $(this).text();
            var diagram = document.getElementById("jailbreak-intro-img");
            diagram.src = "images/metrics/intro-"+cur_img+".png";
        }
    });
    $('#refusal-loss-formula-list').on('click', 'a', function(e) {
        e.preventDefault();
        if (!$(this).hasClass('selected')) {
            $('.formula').hide(200);
            $('.formula-list > a').removeClass('selected');
            $(this).addClass('selected');
            var target = $(this).attr('href');
            $(target).show(200);
        }
    });

    var diagram = document.getElementById("reliability-diagram"), jailbreak_results;
    $.getJSON("demo_results/jailbreak_defense_results.jsonl", function(data) {jailbreak_results = data;});
    $('input[type=radio][name=models]').change(function() {diagram.src = updateFigurePath();});
    $('input[type=radio][name=defense]').change(function() {
        if(this.value == 'ppl') {
          $("#ppl-slider").slider('enable');
          $("#gradient-norm-slider").slider('disable');
        }else if (this.value== 'gradient_cuff'){
          $("#ppl-slider").slider('disable');
          $("#gradient-norm-slider").slider('enable');
        }else{
          $("#ppl-slider").slider('disable');
          $("#gradient-norm-slider").slider('disable');
        }
        diagram.src = updateFigurePath();
    });
    var bin_handle = $("#gradient-norm-threshold");
    $( "#gradient-norm-slider" ).slider({
        step: 50,
        min: 0,
        max: 950,
        value: 100,
        create: function() {bin_handle.text($(this).slider("value"));},
        slide: function(event, ui) {bin_handle.text(ui.value);diagram.src = updateFigurePath(ui.value);},
    });
    var ts_handle = $("#ppl-threshold");
    $("#ppl-slider").slider({
        step: 5,
        min: 0,
        max: 245,
        value: 5,
        disabled: true,
        create: function() {ts_handle.text($(this).slider("value"));},
        slide: function( event, ui ) {ts_handle.text(ui.value);diagram.src = updateFigurePath($('#gradient-norm-slider').slider("option", "value"),ui.value);},
    });

    function updateFigurePath(gradient_norm_threshold=$('#gradient-norm-slider').slider("option", "value"),ppl_threshold=$('#ppl-slider').slider("option", "value")) {
        var cur_model = $("input[type='radio'][name='models']:checked").val(),
            cur_defense = $("input[type='radio'][name='defense']:checked").val();
        var asr_board = document.getElementById("asr-value");
        var brr_board = document.getElementById("brr-value");
        if (cur_defense === "ppl")
        {
          asr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"][ppl_threshold.toString()]["tpr"]).toFixed(5);
          brr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"][ppl_threshold.toString()]["fpr"]).toFixed(5);
          return "demo_results/ppl_"+cur_model+"_threshold_"+ppl_threshold.toString()+".png"
        }
        else if (cur_defense === "gradient_cuff")
        {
            asr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"][gradient_norm_threshold.toString()]["tpr"]).toFixed(5);
            brr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"][gradient_norm_threshold.toString()]["fpr"]).toFixed(5);
            return "demo_results/gradient_cuff_"+cur_model+"_threshold_"+gradient_norm_threshold.toString()+".png"
        }else{
            asr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"]["tpr"]).toFixed(5);
            brr_board.innerText = parseFloat(jailbreak_results[cur_defense][cur_model]["pair"]["fpr"]).toFixed(5);
            return "demo_results/"+cur_defense+"_"+cur_model+".png"
        }
    }
});