Function run

visualize-convnet/index.js:33–129

()

}

async function run() {
  //  Empty the image-and-result section.
  while (imageResultSection.firstChild) {
    imageResultSection.removeChild(imageResultSection.firstChild);
  }
  // Empty the viz section.
  while (vizSection.firstChild) {
    vizSection.removeChild(vizSection.firstChild);
  }

  const activationManifest =
      await (await fetch('activation/activation-manifest.json')).json();
  const filterManifest =
      await (await fetch('filters/filters-manifest.json')).json();

  // Render the input image in the image-result section.
  const inputImage = document.createElement('img');
  inputImage.classList.add('input-image');
  inputImage.src = normalizePath(activationManifest.origImagePath);
  imageResultSection.appendChild(inputImage);

  // Render the top-3 classification results.
  for (let i = 0; i < 3; ++i) {
    const outputClassDiv = document.createElement('div');
    outputClassDiv.textContent = `${activationManifest.classNames[i]} ` +
        `(p=${activationManifest.probScores[i].toFixed(4)})`;
    imageResultSection.appendChild(outputClassDiv);
  }

  const vizType = vizTypeSelect.value;

  if (vizType === 'activation') {
    const layerNames = Object.keys(activationManifest.layerName2FilePaths);
    layerNames.sort();
    for (let i = 0; i < layerNames.length; ++i) {
      const layerName = layerNames[i];
      const filePaths = activationManifest.layerName2FilePaths[layerName];

      const layerDiv = document.createElement('div');
      layerDiv.classList.add('layer-div');
      const layerNameSpan = document.createElement('div');
      const height = activationManifest.layerName2ImageDims[layerName][0];
      const width = activationManifest.layerName2ImageDims[layerName][1];
      layerNameSpan.textContent = `Layer "${layerName}" (${height}x${width})`;
      layerDiv.appendChild(layerNameSpan);

      const layerFiltersDiv = document.createElement('div');
      layerFiltersDiv.classList.add('layer-filters');
      for (let j = 0; j < filePaths.length; ++j) {
        const filterDiv = document.createElement('div');
        filterDiv.classList.add('filter-div');
        const activationImg = document.createElement('img');
        activationImg.classList.add('activation-image');
        activationImg.src = normalizePath(filePaths[j]);
        filterDiv.appendChild(activationImg);
        layerFiltersDiv.appendChild(filterDiv);
      }
      layerDiv.appendChild(layerFiltersDiv);