<commit_before>/**
 * @fileoverview Transformer Visualization D3 javascript code.
 *
 * Based on: https://github.com/tensorflow/tensor2tensor/blob/master/tensor2tensor/visualization/attention.js
 *
 * Change log:
 *
 * 02/01/19  <NAME>   Initial implementation
 */


requirejs(['jquery', 'd3'], function($, d3) {

        var params = window.params;
        var config = {};

        const MIN_X = 0;
        const MIN_Y = 0;

        const DIV_WIDTH = 970;

        const THUMBNAIL_PADDING = 5;

        const DETAIL_WIDTH = 300;
        const DETAIL_ATTENTION_WIDTH = 140;
        const DETAIL_BOX_WIDTH = 80;
        const DETAIL_BOX_HEIGHT = 20;
        const DETAIL_PADDING = 5;
        const DETAIL_HEADING_HEIGHT = 47;
        const DETAIL_HEADING_TEXT_SIZE = 17;
        const TEXT_SIZE = 13;

        const LAYER_COLORS = d3.scaleOrdinal(d3.schemeCategory10);

        function render() {

            // Set global state variables

            var attData = config.attention[config.filter];
            config.leftText = attData.left_text;
            config.rightText = attData.right_text;
            config.attn = attData.attn;
            config.numLayers = config.attn.length;
            config.numHeads = config.attn[0].length;
            config.thumbnailBoxHeight = 7 * (12 / config.numHeads);
            config.thumbnailHeight = Math.max(config.leftText.length, config.rightText.length) * config.thumbnailBoxHeight + 2 * THUMBNAIL_PADDING;
            config.thumbnailWidth = DIV_WIDTH / config.numHeads;
            config.detailHeight = Math.max(config.leftText.length, config.rightText.length) * DETAIL_BOX_HEIGHT + 2 * DETAIL_PADDING + DETAIL_HEADING_HEIGHT;
            config.divHeight = config.numLayers * config.thumbnailHeight;

            $("#vis").empty();
            $("#vis").attr("height", config.divHeight);
            config.svg = d3.select("#vis")
                .append('svg')
                .attr("width", DIV_WIDTH)
                .attr("height", config.divHeight)
              .attr("fill", "black");

            var i;
            var j;
            for (i = 0; i < config.numLayers; i++) {
                for (j = 0; j < config.numHeads; j++) {
                    renderThumbnail(i, j);
                }
            }
        }

        function renderThumbnail(layerIndex, headIndex) {
            var x = headIndex * config.thumbnailWidth;
            var y = layerIndex * config.thumbnailHeight;
            renderThumbnailAttn(x, y, config.attn[layerIndex][headIndex], layerIndex, headIndex);
        }

        function renderDetail(att, layerIndex, headIndex) {
            var xOffset = 64;
            var maxX = DIV_WIDTH;
            var maxY = config.divHeight;
            var leftPos = (headIndex / config.numHeads) * DIV_WIDTH
            var x = leftPos + THUMBNAIL_PADDING + xOffset;
            if (x < MIN_X) {
                x = MIN_X;
            } else if (x + DETAIL_WIDTH > maxX) {
                x = leftPos + THUMBNAIL_PADDING - DETAIL_WIDTH + 8;<commit_msg>Adjust detail window offset in model view.<commit_after>/**
 * @fileoverview Transformer Visualization D3 javascript code.
 *
 * Based on: https://github.com/tensorflow/tensor2tensor/blob/master/tensor2tensor/visualization/attention.js
 *
 * Change log:
 *
 * 02/01/19  <NAME>   Initial implementation
 */


requirejs(['jquery', 'd3'], function($, d3) {

        var params = window.params;
        var config = {};

        const MIN_X = 0;
        const MIN_Y = 0;

        const DIV_WIDTH = 970;

        const THUMBNAIL_PADDING = 5;

        const DETAIL_WIDTH = 300;
        const DETAIL_ATTENTION_WIDTH = 140;
        const DETAIL_BOX_WIDTH = 80;
        const DETAIL_BOX_HEIGHT = 20;
        const DETAIL_PADDING = 5;
        const DETAIL_HEADING_HEIGHT = 47;
        const DETAIL_HEADING_TEXT_SIZE = 17;
        const TEXT_SIZE = 13;

        const LAYER_COLORS = d3.scaleOrdinal(d3.schemeCategory10);

        function render() {

            // Set global state variables

            var attData = config.attention[config.filter];
            config.leftText = attData.left_text;
            config.rightText = attData.right_text;
            config.attn = attData.attn;
            config.numLayers = config.attn.length;
            config.numHeads = config.attn[0].length;
            config.thumbnailBoxHeight = 7 * (12 / config.numHeads);
            config.thumbnailHeight = Math.max(config.leftText.length, config.rightText.length) * config.thumbnailBoxHeight + 2 * THUMBNAIL_PADDING;
            config.thumbnailWidth = DIV_WIDTH / config.numHeads;
            config.detailHeight = Math.max(config.leftText.length, config.rightText.length) * DETAIL_BOX_HEIGHT + 2 * DETAIL_PADDING + DETAIL_HEADING_HEIGHT;
            config.divHeight = config.numLayers * config.thumbnailHeight;

            $("#vis").empty();
            $("#vis").attr("height", config.divHeight);
            config.svg = d3.select("#vis")
                .append('svg')
                .attr("width", DIV_WIDTH)
                .attr("height", config.divHeight)
              .attr("fill", "black");

            var i;
            var j;
            for (i = 0; i < config.numLayers; i++) {
                for (j = 0; j < config.numHeads; j++) {
                    renderThumbnail(i, j);
                }
            }
        }

        function renderThumbnail(layerIndex, headIndex) {
            var x = headIndex * config.thumbnailWidth;
            var y = layerIndex * config.thumbnailHeight;
            renderThumbnailAttn(x, y, config.attn[layerIndex][headIndex], layerIndex, headIndex);
        }

        function renderDetail(att, layerIndex, headIndex) {
            var xOffset = .8 * config.thumbnailWidth;
            var maxX = DIV_WIDTH;
            var maxY = config.divHeight;
            var leftPos = (headIndex / config.numHeads) * DIV_WIDTH
            var x = leftPos + THUMBNAIL_PADDING + xOffset;
            if (x < MIN_X) {
                x = MIN_X;
            } else if (x + DETAIL_WIDTH > maxX) {
                x = leftPos + THUMBNAIL_PADDING - DETAIL_WIDTH + 8;
{'fraction_non_alphanumeric': 0.10565791619109734, 'fraction_numerical': 0.01614218164030654, 'mean_word_length': 1.9575699132111861, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7351837', 'n_tokens_mistral': 1978, 'n_tokens_neox': 1814, 'n_words': 386}