<commit_before><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>hardboard</title>
    <script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script>
        (function() {
            var url = 'build-info';
            var time = 500;
            var info = null;

            function buildColor(buildNumber){
                var red =  (buildNumber * 66) % 255;
                var green = (buildNumber * 97) % 255;
                var blue = (buildNumber * 103) % 255;
                return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
            }

            function updateInfo() {
                var container;
                var circleElem;
                var nameElem;
                var buildElem;
                var vertContainerElem;
                var dataElem;
                var oldBuild;
                $.getJSON(url, function (info) {
                    if (info && info.instance) {
                        if (isNaN(info.build)) info.build = Math.floor(Math.random() * 100);

                        circleElem = $("#" + info.instance);

                        if (circleElem.length) {
                            buildElem = circleElem.find('.build');
                            oldBuild = buildElem.val();
                            if (info.build != oldBuild) {
                                buildElem.text('build: ' + info.build);
                                circleElem.css('background-color', buildColor(info.build));
                            }
                        } else {
                            circleElem = $('<div class="circle"></div>').attr('id', info.instance).css('opacity', 0);
                            nameElem = $('<div class="name"></div>').text('instance: ' + info.instance);
                            buildElem = $('<div class="build"></div>').text('build: ' + info.build);
                            dataElem = $('<div class="vert-center"></div>');
                            dataElem.append(nameElem).append(buildElem);
                            vertContainerElem = $('<div class="vert-center-container"></div>');
                            vertContainerElem.append(dataElem);
                            circleElem.append(vertContainerElem);
                            container = $('#instances').append(circleElem);
                            circleElem.css('background-color', buildColor(info.build));
                            setTimeout(function() {
                                circleElem.css('opacity', 1);
                            });
                        }
                    }
                });
            }

            $(document).ready(
                    setInterval(updateInfo, time)
            )
        })();
    </script>
    <style>
        .circle {
            display: table;
            float: left;
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 400px;
            font-family: Fixed, monospace;
            font-weight: bold;
            font-size: 25px;
            border: 5px solid black;
            box-shadow: 10px 10px 5px #888888;
            -webkit-text-stroke: 1px #999999;
            -webkit-border-radius: 200px;
            -moz-border-radius: 200px;
            border-radius: 200px;
            transition: background-color 1s ease, opacity 1s ease-in;
        }
        .circle .vert-center-container {
            position: absolute;
            top: 50%;
            display: table-cell;
            width: 100%;
        }
        .circle .vert-center {
            position: relative;
            transform: translateY(-50%);
            text-align: center;
        }
    </style>
</head>
<body><commit_msg>Added margin to space out circles a bit<commit_after><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>hardboard</title>
    <script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script>
        (function() {
            var url = 'build-info';
            var time = 500;
            var info = null;

            function buildColor(buildNumber){
                var red =  (buildNumber * 66) % 255;
                var green = (buildNumber * 97) % 255;
                var blue = (buildNumber * 103) % 255;
                return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
            }

            function updateInfo() {
                var container;
                var circleElem;
                var nameElem;
                var buildElem;
                var vertContainerElem;
                var dataElem;
                var oldBuild;
                $.getJSON(url, function (info) {
                    if (info && info.instance) {
                        if (isNaN(info.build)) info.build = Math.floor(Math.random() * 100);

                        circleElem = $("#" + info.instance);

                        if (circleElem.length) {
                            buildElem = circleElem.find('.build');
                            oldBuild = buildElem.val();
                            if (info.build != oldBuild) {
                                buildElem.text('build: ' + info.build);
                                circleElem.css('background-color', buildColor(info.build));
                            }
                        } else {
                            circleElem = $('<div class="circle"></div>').attr('id', info.instance).css('opacity', 0);
                            nameElem = $('<div class="name"></div>').text('instance: ' + info.instance);
                            buildElem = $('<div class="build"></div>').text('build: ' + info.build);
                            dataElem = $('<div class="vert-center"></div>');
                            dataElem.append(nameElem).append(buildElem);
                            vertContainerElem = $('<div class="vert-center-container"></div>');
                            vertContainerElem.append(dataElem);
                            circleElem.append(vertContainerElem);
                            container = $('#instances').append(circleElem);
                            circleElem.css('background-color', buildColor(info.build));
                            setTimeout(function() {
                                circleElem.css('opacity', 1);
                            });
                        }
                    }
                });
            }

            $(document).ready(
                    setInterval(updateInfo, time)
            )
        })();
    </script>
    <style>
        .circle {
            display: table;
            float: left;
            position: relative;
            overflow: hidden;
            margin: 10px;
            width: 400px;
            height: 400px;
            font-family: Fixed, monospace;
            font-weight: bold;
            font-size: 25px;
            border: 5px solid black;
            box-shadow: 10px 10px 5px #888888;
            -webkit-text-stroke: 1px #999999;
            -webkit-border-radius: 200px;
            -moz-border-radius: 200px;
            border-radius: 200px;
            transition: background-color 1s ease, opacity 1s ease-in;
        }
        .circle .vert-center-container {
            position: absolute;
            top: 50%;
            display: table-cell;
            width: 100%;
        }
        .circle .vert-center {
            position: relative;
            transform: translateY(-50%);
            text-align: center;
        }
    </style>
</head>
<body>
{'fraction_non_alphanumeric': 0.12417784793475402, 'fraction_numerical': 0.019468560905024992, 'mean_word_length': 1.1574914869466515, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 0, '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': '2644402', 'n_tokens_mistral': 2020, 'n_tokens_neox': 1819, 'n_words': 382}