Messy prototype of confident error viewer

render_images.html

%%html_define_svelte ImageGrid

<div class="figure">
  {{#each data as d, data_idx}} 
    <div class="selected-child" style="background-color: {{d['color']}}" on:click='select(data_idx)'>
      <div class="label">
        <div class='pred'> pred: {{d['pred_digit']}}</div>
        <div class='label'> human: {{d['label']}}</div>

        conf: {{d['conf']}}%
      </div>
      <img width=100 height=100 src="data:image/png;base64,{{d['im']}}">
      {{#if data_idx == selected_idx}} 
        <div> idx: {{d['idx']}}</div>
        <div>
          {{#each d['raw_preds'] as raw_pred, raw_pred_idx}} 
            {{raw_pred_idx}} => {{raw_pred}}<br>
          {{/each}}
        </div>
      {{/if}}
    </div>
  {{/each}}
</div>

<style>
    .figure {
      font-family: monospace;
      padding: 0;
      margin: 0;
      list-style: none;

      display: flex;

      -webkit-flex-flow: row wrap;
      justify-content: space-around;
    }

  .child {
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-top: 10px;
    color: white;    
    text-align: center;
  }
  .selected-child {
    display: flex;
    flex-direction: column;
    padding: 5px;
    margin-top: 10px;
/*     width: 500px; */
    text-align: center;
  }
  .label {
    padding-bottom: 5px;
    
  }
  .label .pred {
    padding-bottom: 5px;
    font-size: 1.5em
    
  }
</style>

<script>
    
  function range(n){
    return Array(n).fill().map((_, i) => i);
  }
  
  export default {
    data () {
      return {
        data: "",
        selected_idx: -1,
      };
    },
    computed: {

    },
    helpers: {range},
    methods: {
      select(name) {
        this.set({'selected_idx': name});        
      }
    }
  };
</script>

render_images.py

def im_to_b64(x, unwhiten_idx):
  buffer = StringIO()
  plt.axis('off')
  
  x = unwhiten(x, unwhiten_idx)
  x = x.astype(np.uint8)  
  plt.imsave(buffer, x)
  return base64.b64encode(buffer.getvalue())

def render_image_grid(idxs, y_preds_i, confidences, whitelist, abstain_cutoff):
  image_data = []
  for idx in idxs:
    label = np.argmax(y_test[idx], axis=0)
    pred = y_preds_i[idx]
    conf = confidences[idx]
    
    if conf < abstain_cutoff:
      color = 'grey'
    elif label == pred:
      color = 'deepskyblue' 
    else: 
      color = 'tomato'
      
      
    image_data.append({
        'im': im_to_b64(x_test[idx], idx),
        'idx': idx,
        'pred': pred,
        'label': label,
        'pred_digit': LABEL_TO_DIGIT[pred],
        'color': color,
        'conf': "%.1f" % (conf*100),
        'raw_preds': y_preds[idx].tolist(),
      })


  lucid_svelte.ImageGrid({
      'data': image_data,
  })
  
# render_image_grid(range(30), 0.)

Results in the following: