<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/lodash.html">

<!--
tf-image-loader loads an individual image from the TensorBoard backend.

Right now it always loads the most recent image. We should add support in the
future for loading older images.
-->
<dom-module id="tf-image-loader">
  <style>
  :host {
    display: block;
  }
  img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    border: 1px solid #555;
  }
  </style>
  <template>
    <template is="dom-if" if="[[imageUrl]]">
      <img src="[[imageUrl]]" on-error="reload">
    </template>
  </template>
  <script>
    Polymer({
      is: "tf-image-loader",
      properties: {
        run: String,
        tag: String,
        imagesGenerator: Function,
        imageUrl: String,
      },
      reload: function() {
        var _this = this;
        this.imageUrl = ""; // force reload
        this.imagesGenerator(this.tag, this.run).then(function(metadatas) {
          var last_metadata = _.last(metadatas);
          _this.imageUrl = last_metadata.url;
        });
      },
      ready: function() {
        // Need to test so that it will not error if it is constructed w/o
        // all properties (so that it's possible to use stub to mock it out)
        if (this.run != null && this.tag != null && this.imagesGenerator != null) {
          this.reload();<commit_msg>Make image dashboard sizing slightly nicer<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-imports/lodash.html">

<!--
tf-image-loader loads an individual image from the TensorBoard backend.

Right now it always loads the most recent image. We should add support in the
future for loading older images.
-->
<dom-module id="tf-image-loader">
  <style>
  :host {
    display: block;
  }
  img {
    image-rendering: pixelated;
    border: 1px solid #555;
  }
  </style>
  <template>
    <img src="[[imageUrl]]"
         width="300"
         height="[[height]]"
         on-error="reload">
  </template>
  <script>
    Polymer({
      is: "tf-image-loader",
      properties: {
        run: String,
        tag: String,
        imagesGenerator: Function,
        imageUrl: String,
        height: {
          type: Number,
          value: 300
        }
      },
      reload: function() {
        var _this = this;
        this.imageUrl = ""; // force reload
        this.imagesGenerator(this.tag, this.run).then(function(metadatas) {
          var last_metadata = _.last(metadatas);
          _this.imageUrl = last_metadata.url;
          _this.height = 300 / last_metadata.width * last_metadata.height;
        });
      },
      ready: function() {
        // Need to test so that it will not error if it is constructed w/o
        // all properties (so that it's possible to use stub to mock it out)
        if (this.run != null && this.tag != null && this.imagesGenerator != null) {
          this.reload();
{'fraction_non_alphanumeric': 0.13474462365591397, 'fraction_numerical': 0.007728494623655914, 'mean_word_length': 2.304106548279689, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '3635483', 'n_tokens_mistral': 917, 'n_tokens_neox': 878, 'n_words': 261}