<commit_before><!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>対称画像ジェネレーター</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="<KEY>"
        crossorigin="anonymous">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-6607941391098256",
            enable_page_level_ads: true
        });
    </script>
    <script>
        var rate = 0.5; // 50%
        var source = null;
        var fileName = 'sample.png';

        function saveCanvas(id) {
            var canvas = document.getElementById(id);
            var dataUrl = canvas.toDataURL('image/png');
            var blob = toBlob(dataUrl);
            saveBlob(blob, fileName);
        }

        function toBlob(dataUrl) {
            var tmp = dataUrl.split(',');
            var data = atob(tmp[1]);
            var mime = tmp[0].split(':')[1].split(';')[0];
            var buf = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                buf[i] = data.charCodeAt(i);
            }
            var blob = new Blob([buf], { type: mime });
            return blob;
        }

        function saveBlob(blob, fileName) {
            var url = (window.URL || window.webkitURL);
            var dataUrl = url.createObjectURL(blob);
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
            a.href = dataUrl;
            a.download = fileName;
            a.dispatchEvent(event);
        }

        function draw(canvasName, source, reverse) {
            var canvas = document.getElementById(canvasName);
            if (!canvas || !canvas.getContext) { return false; }
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = source;
            img.onload = function () {
                var w = img.width;
                var h = img.height;

                var canvas = document.getElementById(canvasName);
                canvas.setAttribute('height', h);
                if (reverse) {
                    canvas.setAttribute('width', w * (1 - rate) * 2);
                    ctx.drawImage(img, w * rate, 0, w * (1 - rate), h, w * (1 - rate), 0, w * (1 - rate), h);
                    ctx.scale(-1, 1);
                    ctx.drawImage(img, w * rate, 0, w * (1 - rate), h, -w * (1 - rate), 0, w * (1 - rate), h);
                } else {
                    canvas.setAttribute('width', w * rate * 2);
                    ctx.drawImage(img, 0, 0, w * rate, h, 0, 0, w * rate, h);
                    ctx.scale(-1, 1);
                    ctx.drawImage(img, 0, 0, w * rate, h, -w * (rate * 2), 0, w * rate, h);
                }
            }
        }

        function updateCanvas() {
            rate = document.getElementById('range').value / 100;
            if (!source) return;
            draw('c1', source);
            draw('c2', source, true);
        }

        function onUploadClick() {
            document.querySelector('input[type="file"]').click();
        }

        function copyToClipboard() {
            document.getElementById('tweet').select();
            var result = document.execCommand('copy');
            if (result) {
                document.getElementById('notification').style.visibility = 'visible';
                setTimeout(function () {
                    document.getElementById('notification').style.visibility = 'hidden';
                }, 600);
            }
            return result;
        }

        function updateImage(src, name) {
            // Update global variables
            source = src;
            fileName = name;

            var img = document.getElementById('original-img');
            img.setAttribute('src', source);
            img.setAttribute('title', name);
            img.onload = function () {
                console.log("Image loaded: name=" + name + ", w=" + img.offsetWidth + ", h=" + img.offsetHeight);
                var slider = document.getElementById('range');
                var width = img.offsetWidth;
                slider.setAttribute('style', 'width:' + width + 'px !important;');
            };

            draw('c1', source);
            draw('c2', source, true);
        }

        function loadImageFile(file) {
            if (!file) return false;

            var reader = new FileReader();
            if (file.type.indexOf("image") < 0) {
                alert('画像以外はサポートしていない');
                return false;
            }
            reader.onload = (function (file) {
                return function (e) { updateImage(e.target.result, file.name) };
            })(file);
            reader.readAsDataURL(file);
            return true;
        }

        function setupUploadArea() {
            var counter = 0;
            var uploadArea = document.getElementById('upload-area');
            uploadArea.addEventListener('dragenter', function (e) {
                counter++;
                uploadArea.style.borderColor = '#007bff';
                uploadArea.style.borderWidth = '3px';
            });
            uploadArea.addEventListener('dragleave', function (e) {
                counter--;
                if (counter == 0) {
                    uploadArea.style.borderColor = '#6c757d';
                    uploadArea.style.borderWidth = '1px';
                }
            });
            uploadArea.addEventListener('dragover', function (e) {
                e.preventDefault();
            });
            uploadArea.addEventListener('drop', function (e) {
                e.preventDefault();
                uploadArea.style.borderColor = '#6c757d';
                uploadArea.style.borderWidth = '1px';

                var files = e.dataTransfer.files; // FileList object.
                loadImageFile(files[0]);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            setupUploadArea();
            document.querySelector('input[type="file"]').addEventListener('change', function (e) {
                loadImageFile(e.target.files[0]);
            });
            var src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAG1BMVEX///8AAABy3Pf759P7p9Kw6Pb51bktq/8AWJOHqRgkAAABAUlEQVR4nO3XSwrDMAwE0CT93v/EjaEDg5BsS3E3ZWbT1Lb0DCYJ2V5B3k72Mzzf/mMu6rMJKAPInoiAGuBNcNEjEQ8TkAeyTXuYgDywqjkjAsZAS+Wmmo2AeWC2ILsRAWMgU3Cc4fUztQJqQFQIAPMC1gDe4Ah4nuFfAQL+EbAPNYwxcKP0EAF5wB7kQfGaC1gL2CYWiYAeImAOwCSaeMV2PFon4DeAl2idRQSMgTaAD0ELjDDv4FsPATXAQzLATmFEwDVgBvFQATmAUwXu36BewHUg8+Lh8AbxAhNQA9C8HVzUyHvQoZY3KaAGzB4yGqOWEVwLyAEe0otXYyNgCHwAGXN+Ycd7s9QAAAAASUVORK5CYII=';
            updateImage(src, fileName);
        });
    </script>
</head>

<body>
    <main class="container">
        <h1 class="mt-5 h3">対称画像ジェネレーター</h1>
        <p class="lead">
            <!-- ここに書く内容がないよ・・・ -->
        </p>
        <form class="invisible">
            <input class="invisible" type="file" name="file" accept="image/*">
        </form>
        <div class="row">
            <div class="col mb-5">
                <div id="upload-area" class="p-5 h-100 d-flex justify-content-center align-items-center text-center" style="border: #6c757d 1px solid;">
                    <div>
                        <p>ここに画像をドラッグ</p>
                        <p>もしくは</p>
                        <button type="button" class="btn btn-outline-secondary" onclick="onUploadClick()">
                            画像を選択
                        </button>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <h2 class="h4">元画像</h2>
                <div id="original" class="p-4 border border-secondary text-center" style="display: inline-block">
                    <img id="original-img" class="mw-100" style="max-height: 300px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAG1BMVEX///8AAABy3Pf759P7p9Kw6Pb51bktq/8AWJOHqRgkAAABAUlEQVR4nO3XSwrDMAwE0CT93v/EjaEDg5BsS3E3ZWbT1Lb0DCYJ2V5B3k72Mzzf/mMu6rMJKAPInoiAGuBNcNEjEQ8TkAeyTXuYgDywqjkjAsZAS+Wmmo2AeWC2ILsRAWMgU3Cc4fUztQJqQFQIAPMC1gDe4Ah4nuFfAQL+EbAPNYwxcKP0EAF5wB7kQfGaC1gL2CYWiYAeImAOwCSaeMV2PFon4DeAl2idRQSMgTaAD0ELjDDv4FsPATXAQzLATmFEwDVgBvFQATmAUwXu36BewHUg8+Lh8AbxAhNQA9C8HVzUyHvQoZY3KaAGzB4yGqOWEVwLyAEe0otXYyNgCHwAGXN+Ycd7s9QAAAAASUVORK5CYII=">
                    <div class="mt-4">
                        <input id="range" type="range" min="0" max="100" oninput="updateCanvas()" onchange="updateCanvas()" />
                    </div>
                </div>
            </div>
        </div>

        <h2 class="h4">反転結果</h2>
        <div class="d-flex">
            <div id="edit1" class="mr-1 p-2 text-center border border-primary">
                <div><commit_msg>Add force break<commit_after><!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>対称画像ジェネレーター</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="<KEY>"
        crossorigin="anonymous">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-6607941391098256",
            enable_page_level_ads: true
        });
    </script>
    <script>
        var rate = 0.5; // 50%
        var source = null;
        var fileName = 'sample.png';

        function saveCanvas(id) {
            var canvas = document.getElementById(id);
            var dataUrl = canvas.toDataURL('image/png');
            var blob = toBlob(dataUrl);
            saveBlob(blob, fileName);
        }

        function toBlob(dataUrl) {
            var tmp = dataUrl.split(',');
            var data = atob(tmp[1]);
            var mime = tmp[0].split(':')[1].split(';')[0];
            var buf = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                buf[i] = data.charCodeAt(i);
            }
            var blob = new Blob([buf], { type: mime });
            return blob;
        }

        function saveBlob(blob, fileName) {
            var url = (window.URL || window.webkitURL);
            var dataUrl = url.createObjectURL(blob);
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
            a.href = dataUrl;
            a.download = fileName;
            a.dispatchEvent(event);
        }

        function draw(canvasName, source, reverse) {
            var canvas = document.getElementById(canvasName);
            if (!canvas || !canvas.getContext) { return false; }
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = source;
            img.onload = function () {
                var w = img.width;
                var h = img.height;

                var canvas = document.getElementById(canvasName);
                canvas.setAttribute('height', h);
                if (reverse) {
                    canvas.setAttribute('width', w * (1 - rate) * 2);
                    ctx.drawImage(img, w * rate, 0, w * (1 - rate), h, w * (1 - rate), 0, w * (1 - rate), h);
                    ctx.scale(-1, 1);
                    ctx.drawImage(img, w * rate, 0, w * (1 - rate), h, -w * (1 - rate), 0, w * (1 - rate), h);
                } else {
                    canvas.setAttribute('width', w * rate * 2);
                    ctx.drawImage(img, 0, 0, w * rate, h, 0, 0, w * rate, h);
                    ctx.scale(-1, 1);
                    ctx.drawImage(img, 0, 0, w * rate, h, -w * (rate * 2), 0, w * rate, h);
                }
            }
        }

        function updateCanvas() {
            rate = document.getElementById('range').value / 100;
            if (!source) return;
            draw('c1', source);
            draw('c2', source, true);
        }

        function onUploadClick() {
            document.querySelector('input[type="file"]').click();
        }

        function copyToClipboard() {
            document.getElementById('tweet').select();
            var result = document.execCommand('copy');
            if (result) {
                document.getElementById('notification').style.visibility = 'visible';
                setTimeout(function () {
                    document.getElementById('notification').style.visibility = 'hidden';
                }, 600);
            }
            return result;
        }

        function updateImage(src, name) {
            // Update global variables
            source = src;
            fileName = name;

            var img = document.getElementById('original-img');
            img.setAttribute('src', source);
            img.setAttribute('title', name);
            img.onload = function () {
                console.log("Image loaded: name=" + name + ", w=" + img.offsetWidth + ", h=" + img.offsetHeight);
                var slider = document.getElementById('range');
                var width = img.offsetWidth;
                slider.setAttribute('style', 'width:' + width + 'px !important;');
            };

            draw('c1', source);
            draw('c2', source, true);
        }

        function loadImageFile(file) {
            if (!file) return false;

            var reader = new FileReader();
            if (file.type.indexOf("image") < 0) {
                alert('画像以外はサポートしていない');
                return false;
            }
            reader.onload = (function (file) {
                return function (e) { updateImage(e.target.result, file.name) };
            })(file);
            reader.readAsDataURL(file);
            return true;
        }

        function setupUploadArea() {
            var counter = 0;
            var uploadArea = document.getElementById('upload-area');
            uploadArea.addEventListener('dragenter', function (e) {
                counter++;
                uploadArea.style.borderColor = '#007bff';
                uploadArea.style.borderWidth = '3px';
            });
            uploadArea.addEventListener('dragleave', function (e) {
                counter--;
                if (counter == 0) {
                    uploadArea.style.borderColor = '#6c757d';
                    uploadArea.style.borderWidth = '1px';
                }
            });
            uploadArea.addEventListener('dragover', function (e) {
                e.preventDefault();
            });
            uploadArea.addEventListener('drop', function (e) {
                e.preventDefault();
                uploadArea.style.borderColor = '#6c757d';
                uploadArea.style.borderWidth = '1px';

                var files = e.dataTransfer.files; // FileList object.
                loadImageFile(files[0]);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            setupUploadArea();
            document.querySelector('input[type="file"]').addEventListener('change', function (e) {
                loadImageFile(e.target.files[0]);
            });
            var src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAG1BMVEX///8AAABy3Pf759P7p9Kw6Pb51bktq/8AWJOHqRgkAAABAUlEQVR4nO3XSwrDMAwE0CT93v/EjaEDg5BsS3E3ZWbT1Lb0DCYJ2V5B3k72Mzzf/mMu6rMJKAPInoiAGuBNcNEjEQ8TkAeyTXuYgDywqjkjAsZAS+Wmmo2AeWC2ILsRAWMgU3Cc4fUztQJqQFQIAPMC1gDe4Ah4nuFfAQL+EbAPNYwxcKP0EAF5wB7kQfGaC1gL2CYWiYAeImAOwCSaeMV2PFon4DeAl2idRQSMgTaAD0ELjDDv4FsPATXAQzLATmFEwDVgBvFQATmAUwXu36BewHUg8+Lh8AbxAhNQA9C8HVzUyHvQoZY3KaAGzB4yGqOWEVwLyAEe0otXYyNgCHwAGXN+Ycd7s9QAAAAASUVORK5CYII=';
            updateImage(src, fileName);
        });
    </script>
</head>

<body>
    <main class="container">
        <h1 class="mt-5 h3">対称画像ジェネレーター</h1>
        <p class="lead">
            <!-- ここに書く内容がないよ・・・ -->
        </p>
        <form class="invisible">
            <input class="invisible" type="file" name="file" accept="image/*">
        </form>
        <div class="row">
            <div class="col mb-5">
                <div id="upload-area" class="p-5 h-100 d-flex justify-content-center align-items-center text-center" style="border: #6c757d 1px solid;">
                    <div>
                        <p>ここに画像をドラッグ</p>
                        <p>もしくは</p>
                        <button type="button" class="btn btn-outline-secondary" onclick="onUploadClick()">
                            画像を選択
                        </button>
                    </div>
                </div>
            </div>
            <!-- Force next columns to break to new line at md or lower breakpoint -->
            <div class="w-100 d-md-none"></div>
            <div class="col mb-5">
                <h2 class="h4">元画像</h2>
                <div id="original" class="p-4 border border-secondary text-center" style="display: inline-block">
                    <img id="original-img" class="mw-100" style="max-height: 300px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAG1BMVEX///8AAABy3Pf759P7p9Kw6Pb51bktq/8AWJOHqRgkAAABAUlEQVR4nO3XSwrDMAwE0CT93v/EjaEDg5BsS3E3ZWbT1Lb0DCYJ2V5B3k72Mzzf/mMu6rMJKAPInoiAGuBNcNEjEQ8TkAeyTXuYgDywqjkjAsZAS+Wmmo2AeWC2ILsRAWMgU3Cc4fUztQJqQFQIAPMC1gDe4Ah4nuFfAQL+EbAPNYwxcKP0EAF5wB7kQfGaC1gL2CYWiYAeImAOwCSaeMV2PFon4DeAl2idRQSMgTaAD0ELjDDv4FsPATXAQzLATmFEwDVgBvFQATmAUwXu36BewHUg8+Lh8AbxAhNQA9C8HVzUyHvQoZY3KaAGzB4yGqOWEVwLyAEe0otXYyNgCHwAGXN+Ycd7s9QAAAAASUVORK5CYII=">
                    <div class="mt-4">
                        <input id="range" type="range" min="0" max="100" oninput="updateCanvas()" onchange="updateCanvas()" />
                    </div>
                </div>
            </div>
        </div>

        <h2 class="h4">反転結果</h2>
        <div class="d-flex">
            <div id="edit1" class="mr-1 p-2 text-center border border-primary">
                <div>
{'fraction_non_alphanumeric': 0.13107295672425934, 'fraction_numerical': 0.027893625088013865, 'mean_word_length': 1.8445539978431675, 'pattern_counts': {'":': 0, '<': 120, '<?xml version=': 0, '>': 116, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4198656', 'n_tokens_mistral': 6279, 'n_tokens_neox': 5858, 'n_words': 981}