<commit_before>// JS Module
import * as KerasJS from 'keras-js'
import ndarray from 'ndarray'
import ops from 'ndarray-ops'
import Vue from 'vue'
import Clipboard from 'clipboard'

// JSON
import CharListFile from  '../char_list.json'

// clipboard.js
var clipboard = new Clipboard('.btn');

clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function (e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

// Vue.js
new Vue({
    el: '#app',
    data: {
        modelLoading: true,
        modelRunning: false,
        modelInterrupt: false,
        model: new KerasJS.Model({
            filepaths: {
                model: 'model/model.json',
                weights: 'model/model_weights.buf',
                metadata: 'model/model_metadata.json',
            },
            gpu: true
        }),
        charListFile: CharListFile,
        inputImage: {
            URL: 'sample-data/test_image.png',
            width: 0,
            height: 0
        },
        grayscaleImage: {
            URL: '',
            width: 0,
            height: 0
        },
        previewLineImage: {
            URL: '',
            width: 0,
            height: 0
        },
        previewPatchImage: {
            URL: '',
            width: 0,
            height: 0
        },
        outputAA: {
            maxLineNum: '-',
            currentLineNum: '-',
            totalPercentage: 0,
            linePercentage: 0,
            width: 550,
        },
        resultAA: ''
    },
    methods: {
        onFileChange: function(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            this.createImage(files[0]);
        },
        createImage: function(file) {
            var image = new Image();
            var reader = new FileReader();
            reader.onload = (e) => {
                this.inputImage.URL = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        canvasAddMargin: function(canvas) {
            var img = new Image();
            img.onload = () => {
                var ctx = canvas.getContext("2d");
                canvas.width = (24 + 17) + img.width + (24 + 17);
                canvas.height = 24 + img.height + 24;
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 24 + 17, 24);
                this.grayscaleImage.URL = canvas.toDataURL();
            };
            img.src = canvas.toDataURL();
        },
        canvasResize: function(canvas, scale_ratio) {
            var img = new Image();
            img.onload = () => {
                var ctx = canvas.getContext("2d");
                canvas.width *= scale_ratio;
                canvas.height *= scale_ratio;
                ctx.scale(scale_ratio, scale_ratio);
                ctx.drawImage(img, 0, 0);
                this.canvasAddMargin(canvas);
            };
            img.src = canvas.toDataURL();
        },
        grayscale: function(imageURL) {
            try {
                // get image
                var canvas = document.createElement("canvas");
                var img = new Image();
                img.onload = () => {
                    var ctx = canvas.getContext("2d");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // draw image to canvas
                    ctx.drawImage(img, 0, 0);
                    // get image data
                    var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    // update input image info
                    this.inputImage.width = img.width;
                    this.inputImage.height = img.height;
                    // grayscaling
                    for (var y = 0; y < pixels.height; y++) {
                        for (var x = 0; x < pixels.width; x++) {
                            // sampling pixel(RGBA)
                            var pos = (y * pixels.width + x) * 4;
                            // RGB to grayscale color
                            var grayScalePixelColor = parseInt(
                                0.299 * pixels.data[pos] +
                                0.587 * pixels.data[pos + 1] +
                                0.114 * pixels.data[pos + 2], 10);
                            // update pixel data
                            pixels.data[pos]     = grayScalePixelColor; // R
                            pixels.data[pos + 1] = grayScalePixelColor; // G
                            pixels.data[pos + 2] = grayScalePixelColor; // B
                            pixels.data[pos + 3] = 255;                 // A
                        }
                    }
                    ctx.putImageData(pixels, 0, 0);
                    // update scale
                    let scale_ratio = this.outputAA.width / img.width;
                    this.canvasResize(canvas, scale_ratio);
                };
                img.src = imageURL;
            } catch (err) {
                console.error('grayscale: ', err.message);
                this.resultAA = err.message;
            }
        },
        inputImageLoad: function() {
            this.grayscale(this.inputImage.URL);
        },
        grayscaleImageLoad: async function() {
            try {
                while (this.modelRunning) {
                    this.modelInterrupt = true;
                    console.log('wait until stopped current process')
                    await this.sleep(16);
                }
                this.modelRunning = true;
                this.modelInterrupt = false;
                // reset status
                this.resultAA = '';
                this.outputAA.totalPercentage = 0;
                this.outputAA.linePercentage = 0;

                // get input data
                let dataTensor = undefined;
                let MaxlineNum = undefined;
                {
                    const canvas = document.createElement("canvas");
                    const ctx = canvas.getContext("2d");
                    const img = new Image();
                    img.src = this.grayscaleImage.URL;
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    // update grayscaleImage info
                    this.grayscaleImage.width = img.width;
                    this.grayscaleImage.height = img.height;
                    // convert ndarray (width * height * RGBA)
                    const dataSourceTensor = ndarray(new Float32Array(pixels.data), [pixels.width, pixels.height, 4]);
                    // normalization (0.0 ~ 1.0)
                    dataTensor = ndarray(new Float32Array(pixels.width * pixels.height), [pixels.width, pixels.height, 1]);
                    ops.assign(dataTensor.pick(null, null, 0), dataSourceTensor.pick(null, null, 0))
                    ops.divseq(dataTensor, 255);
                    // calc AA line count
                    MaxlineNum = Math.floor((pixels.height - 48) / 18);
                    this.outputAA.maxLineNum = MaxlineNum;
                }

                // wait until model is ready<commit_msg>コメントの修正<commit_after>// JS Module
import * as KerasJS from 'keras-js'
import ndarray from 'ndarray'
import ops from 'ndarray-ops'
import Vue from 'vue'
import Clipboard from 'clipboard'

// JSON
import CharListFile from  '../char_list.json'

// clipboard.js
var clipboard = new Clipboard('.btn');

clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function (e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

// Vue.js
new Vue({
    el: '#app',
    data: {
        modelLoading: true,
        modelRunning: false,
        modelInterrupt: false,
        model: new KerasJS.Model({
            filepaths: {
                model: 'model/model.json',
                weights: 'model/model_weights.buf',
                metadata: 'model/model_metadata.json',
            },
            gpu: true
        }),
        charListFile: CharListFile,
        inputImage: {
            URL: 'sample-data/test_image.png',
            width: 0,
            height: 0
        },
        grayscaleImage: {
            URL: '',
            width: 0,
            height: 0
        },
        previewLineImage: {
            URL: '',
            width: 0,
            height: 0
        },
        previewPatchImage: {
            URL: '',
            width: 0,
            height: 0
        },
        outputAA: {
            maxLineNum: '-',
            currentLineNum: '-',
            totalPercentage: 0,
            linePercentage: 0,
            width: 550,
        },
        resultAA: ''
    },
    methods: {
        onFileChange: function(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) {
                return;
            }
            this.createImage(files[0]);
        },
        createImage: function(file) {
            var image = new Image();
            var reader = new FileReader();
            reader.onload = (e) => {
                this.inputImage.URL = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        canvasAddMargin: function(canvas) {
            var img = new Image();
            img.onload = () => {
                var ctx = canvas.getContext("2d");
                canvas.width = (24 + 17) + img.width + (24 + 17);
                canvas.height = 24 + img.height + 24;
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 24 + 17, 24);
                this.grayscaleImage.URL = canvas.toDataURL();
            };
            img.src = canvas.toDataURL();
        },
        canvasResize: function(canvas, scale_ratio) {
            var img = new Image();
            img.onload = () => {
                var ctx = canvas.getContext("2d");
                canvas.width *= scale_ratio;
                canvas.height *= scale_ratio;
                ctx.scale(scale_ratio, scale_ratio);
                ctx.drawImage(img, 0, 0);
                this.canvasAddMargin(canvas);
            };
            img.src = canvas.toDataURL();
        },
        grayscale: function(imageURL) {
            try {
                // get image
                var canvas = document.createElement("canvas");
                var img = new Image();
                img.onload = () => {
                    var ctx = canvas.getContext("2d");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    // draw image to canvas
                    ctx.drawImage(img, 0, 0);
                    // get image data
                    var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    // update input image info
                    this.inputImage.width = img.width;
                    this.inputImage.height = img.height;
                    // grayscaling
                    for (var y = 0; y < pixels.height; y++) {
                        for (var x = 0; x < pixels.width; x++) {
                            // sampling pixel(RGBA)
                            var pos = (y * pixels.width + x) * 4;
                            // RGB to grayscale color
                            var grayScalePixelColor = parseInt(
                                0.299 * pixels.data[pos] +
                                0.587 * pixels.data[pos + 1] +
                                0.114 * pixels.data[pos + 2], 10);
                            // update pixel data
                            pixels.data[pos]     = grayScalePixelColor; // R
                            pixels.data[pos + 1] = grayScalePixelColor; // G
                            pixels.data[pos + 2] = grayScalePixelColor; // B
                            pixels.data[pos + 3] = 255;                 // A
                        }
                    }
                    ctx.putImageData(pixels, 0, 0);
                    // update scale
                    let scale_ratio = this.outputAA.width / img.width;
                    this.canvasResize(canvas, scale_ratio);
                };
                img.src = imageURL;
            } catch (err) {
                console.error('grayscale: ', err.message);
                this.resultAA = err.message;
            }
        },
        inputImageLoad: function() {
            this.grayscale(this.inputImage.URL);
        },
        grayscaleImageLoad: async function() {
            try {
                while (this.modelRunning) {
                    this.modelInterrupt = true;
                    console.log('wait until stopped current process')
                    await this.sleep(16);
                }
                this.modelRunning = true;
                this.modelInterrupt = false;
                // reset status
                this.resultAA = '';
                this.outputAA.totalPercentage = 0;
                this.outputAA.linePercentage = 0;

                // get input data
                let dataTensor = undefined;
                let MaxlineNum = undefined;
                {
                    const canvas = document.createElement("canvas");
                    const ctx = canvas.getContext("2d");
                    const img = new Image();
                    img.src = this.grayscaleImage.URL;
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    // update grayscaleImage info
                    this.grayscaleImage.width = img.width;
                    this.grayscaleImage.height = img.height;
                    // convert ndarray (width * height * RGBA)
                    const dataSourceTensor = ndarray(new Float32Array(pixels.data), [pixels.width, pixels.height, 4]);
                    dataTensor = ndarray(new Float32Array(pixels.width * pixels.height), [pixels.width, pixels.height, 1]);
                    // pick grayscale data
                    ops.assign(dataTensor.pick(null, null, 0), dataSourceTensor.pick(null, null, 0))
                    // normalization (0.0 ~ 1.0)
                    ops.divseq(dataTensor, 255);
                    // calc AA line count
                    MaxlineNum = Math.floor((pixels.height - 48) / 18);
                    this.outputAA.maxLineNum = MaxlineNum;
                }

                // wait until model is ready
{'fraction_non_alphanumeric': 0.11075176556002904, 'fraction_numerical': 0.012936439838954525, 'mean_word_length': 1.1710846826192864, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6291701', 'n_tokens_mistral': 4157, 'n_tokens_neox': 3832, 'n_words': 862}