<commit_before>doctype html
html
  head
    title gist-gemini-fancy performance
    style.
      /* Perform nice resets */
      body {
        height: 100%;
        margin: 0;
        /* https://github.com/corysimmons/typographic/blob/2.9.3/scss/typographic.scss#L34 */
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
      }
  body
    //- Provide info to the user
    h1 gist-gemini-fancy performance
    p
      | This page is a proof of concept to verify we won't have performance issues with a lot of pages

    //- Load an images directly from our report
    table
      - var imgHeight = '250';
      tr
        td Current:
        td Diff:
        td Ref:
      tr
        td
          img(src="gemini-report/images/root/default-large/Chrome~current.png", height=imgHeight)
        td
          img(src="gemini-report/images/root/default-large/Chrome~diff.png", height=imgHeight)
        td
          img(src="gemini-report/images/root/default-large/Chrome~ref.png", height=imgHeight)

    //- Load large set of images in hidden container
    //- DEV: In reality, we would probably have something like Gemini's hidden selection
    div(style="display: none")
      - var i = 0;
      while (i < 100)
        div(data-compare-set=i)
          img(data-compare-type="current", src="gemini-report/images/root/default-large/Chrome~current.png")
          img(data-compare-type="diff", src="gemini-report/images/root/default-large/Chrome~diff.png")
          img(data-compare-type="ref", src="gemini-report/images/root/default-large/Chrome~ref.png")
        - i += 1

    //- Define an output area for images
    p(style="margin-bottom: 0") Results:
    div#results

    script.
      document.addEventListener('DOMContentLoaded', function handleReady () {
        // Find our image
        var imgEl = document.querySelector('img');

        // Run a different performance test based on a flag
        // TODO: Test out bulk overlay of selection
        // TODO: Test out bulk testing images
        var TEST = 'UPDATE_SECTION';

        // If we are running an update test
        if (TEST === 'UPDATE_SECTION') {
          // Specify target area (this would be done via overlay selection)
          // DEV: Target area gathered from `/prototype`
          var targetArea = {left: 159, top: 0, width: 205, height: 63.133331298828125};

          // Find our sets of images to update
          var compareSetEls = document.querySelectorAll('[data-compare-set]');

          // Find our output targets
          var resultsEl = document.querySelector('#results');

          // Iterate over our sets
          Array.prototype.forEach.call(compareSetEls, function forEachCompareSetEl (compareSetEl, i) {
            // Find our source images
            var currentImg = compareSetEl.querySelector('[data-compare-type=current]');
            var refImg = compareSetEl.querySelector('[data-compare-type=ref]');

            // Create a canvas
            // https://github.com/scijs/get-pixels/blob/7c447cd979637b31e47e148f238a1e71611af481/dom-pixels.js#L14-L18
            var canvasEl = document.createElement('canvas');
            canvasEl.width = refImg.width;
            canvasEl.height = refImg.height;
            var context = canvasEl.getContext('2d');

            // Load our reference into the canvas
            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
            context.drawImage(refImg, 0, 0);

            // Update our selected portion on reference and draw image in clipping
            // DEV: This is probably the most efficient way (outside of web workers) because
            //   we would have to draw image twice no matter what
            //   Maybe there's double pixel updates but I don't thinks so
            // DEV: Performance alternatives we thought of but aren't needed
            //   Extract image from 2nd canvas via `ndarray`
            //   Use web workers
            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect
            context.rect(targetArea.left, targetArea.top, targetArea.width, targetArea.height);
            context.clip();
            context.drawImage(currentImg, 0, 0);

            // Duplicate reference image and shrink both canvas/image for output
            var imgHeight = 250;
            canvasEl.style.height = imgHeight + 'px';
            var refImgClone = refImg.cloneNode();
            refImgClone.style.height = imgHeight + 'px';

            //  Generate resultcontent
            var resultGroupEl = document.createElement('div');
            resultGroupEl.style.marginLeft = '20px';
            var titleEl = document.createElement('div');
            titleEl.textContent = 'path/to/image/' + i + '/Chrome';
            resultGroupEl.appendChild(titleEl);

            // <table><tr><td>Original:</td><td>Updated:</td></tr>
            var tableEl = document.createElement('table');
            var titleTrEl = document.createElement('tr');
            var titleOriginalTdEl = document.createElement('td');
            titleOriginalTdEl.textContent = 'Original:';
            titleTrEl.appendChild(titleOriginalTdEl);
            var titleUpdatedTdEl = document.createElement('td');
            titleUpdatedTdEl.textContent = 'Updated:';
            titleTrEl.appendChild(titleUpdatedTdEl);
            tableEl.appendChild(titleTrEl);

            // <table><tr><td><img=ref></td><td><img=updated-ref></td></tr>
            var bodyTrEl = document.createElement('tr');
            var bodyOriginalTdEl = document.createElement('td');
            bodyOriginalTdEl.appendChild(refImgClone);
            bodyTrEl.appendChild(bodyOriginalTdEl);
            var bodyUpdatedTdEl = document.createElement('td');
            bodyUpdatedTdEl.appendChild(canvasEl);
            bodyTrEl.appendChild(bodyUpdatedTdEl);
            tableEl.appendChild(bodyTrEl);

            // Append our result content
            resultGroupEl.appendChild(tableEl);
            resultsEl.appendChild(resultGroupEl);

            // TODO: When bulk update is accepted, send overwrite requests to server with new image as "Ref"
            //   and use `?1` trick to refresh images
            //   then re-run comparisons for all curr
          });
        }
      });<commit_msg>Shrunk HTML construction via domo<commit_after>doctype html
html
  head
    title gist-gemini-fancy performance
    style.
      /* Perform nice resets */
      body {
        height: 100%;
        margin: 0;
        /* https://github.com/corysimmons/typographic/blob/2.9.3/scss/typographic.scss#L34 */
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
      }
  body
    //- Provide info to the user
    h1 gist-gemini-fancy performance
    p
      | This page is a proof of concept to verify we won't have performance issues with a lot of pages

    //- Load an images directly from our report
    table
      - var imgHeight = '250';
      tr
        td Current:
        td Diff:
        td Ref:
      tr
        td
          img(src="gemini-report/images/root/default-large/Chrome~current.png", height=imgHeight)
        td
          img(src="gemini-report/images/root/default-large/Chrome~diff.png", height=imgHeight)
        td
          img(src="gemini-report/images/root/default-large/Chrome~ref.png", height=imgHeight)

    //- Load large set of images in hidden container
    //- DEV: In reality, we would probably have something like Gemini's hidden selection
    div(style="display: none")
      - var i = 0;
      while (i < 100)
        div(data-compare-set=i)
          img(data-compare-type="current", src="gemini-report/images/root/default-large/Chrome~current.png")
          img(data-compare-type="diff", src="gemini-report/images/root/default-large/Chrome~diff.png")
          img(data-compare-type="ref", src="gemini-report/images/root/default-large/Chrome~ref.png")
        - i += 1

    //- Define an output area for images
    p(style="margin-bottom: 0") Results:
    div#results

    script(src="https://cdn.rawgit.com/jed/domo/13c45aba3e94dd2d1bc469ce3339bbc1e3a10314/lib/domo.js")
    script.
      document.addEventListener('DOMContentLoaded', function handleReady () {
        // Simplifiy domo reference
        var D = window.domo;

        // Find our image
        var imgEl = document.querySelector('img');

        // Run a different performance test based on a flag
        // TODO: Test out bulk overlay of selection
        // TODO: Test out bulk testing images
        var TEST = 'UPDATE_SECTION';

        // If we are running an update test
        if (TEST === 'UPDATE_SECTION') {
          // Specify target area (this would be done via overlay selection)
          // DEV: Target area gathered from `/prototype`
          var targetArea = {left: 159, top: 0, width: 205, height: 63.133331298828125};

          // Find our sets of images to update
          var compareSetEls = document.querySelectorAll('[data-compare-set]');

          // Find our output targets
          var resultsEl = document.querySelector('#results');

          // Iterate over our sets
          Array.prototype.forEach.call(compareSetEls, function forEachCompareSetEl (compareSetEl, i) {
            // Find our source images
            var currentImg = compareSetEl.querySelector('[data-compare-type=current]');
            var refImg = compareSetEl.querySelector('[data-compare-type=ref]');

            // Create a canvas
            // https://github.com/scijs/get-pixels/blob/7c447cd979637b31e47e148f238a1e71611af481/dom-pixels.js#L14-L18
            var canvasEl = document.createElement('canvas');
            canvasEl.width = refImg.width;
            canvasEl.height = refImg.height;
            var context = canvasEl.getContext('2d');

            // Load our reference into the canvas
            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
            context.drawImage(refImg, 0, 0);

            // Update our selected portion on reference and draw image in clipping
            // DEV: This is probably the most efficient way (outside of web workers) because
            //   we would have to draw image twice no matter what
            //   Maybe there's double pixel updates but I don't thinks so
            // DEV: Performance alternatives we thought of but aren't needed
            //   Extract image from 2nd canvas via `ndarray`
            //   Use web workers
            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect
            context.rect(targetArea.left, targetArea.top, targetArea.width, targetArea.height);
            context.clip();
            context.drawImage(currentImg, 0, 0);

            // Duplicate reference image and shrink both canvas/image for output
            var imgHeight = 250;
            canvasEl.style.height = imgHeight + 'px';
            var refImgClone = refImg.cloneNode();
            refImgClone.style.height = imgHeight + 'px';

            // Generate and append result content
            var resultGroupEl = D.DIV({
              style: 'margin-left: 20px'
            }, [
              D.DIV('path/to/image/' + i + '/Chrome'),
              D.TABLE([
                D.TR([
                  D.TD('Original:'),
                  D.TD('Updated:')
                ]),
                D.TR([
                  D.TD([refImgClone]),
                  D.TD([canvasEl])
                ])
              ])
            ]);
            resultsEl.appendChild(resultGroupEl);

            // TODO: When bulk update is accepted, send overwrite requests to server with new image as "Ref"
            //   and use `?1` trick to refresh images
            //   then re-run comparisons for all curr
          });
        }
      });
{'fraction_non_alphanumeric': 0.10802833530106257, 'fraction_numerical': 0.017119244391971666, 'mean_word_length': 2.0786604361370715, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 19, 'https://': 9, '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': '3169016', 'n_tokens_mistral': 3406, 'n_tokens_neox': 3217, 'n_words': 849}