Tensorboard: [TensorBoard] How to make sprite images for the embedding projector?

[S-aiueo32]

Hi,
I'm about to use the embedding projector for visualizing my own data but I can't.
It's an issue like tensorflow/tensorboard#44 or same.
In this issue, @dsmilkov simply says:

We only support square sprite images and this limitation is imposed by our underlying WebGL texture implementation.Unfortunately, changing that requirement is a significant amount of work. It's much simpler to have the user generate square sprite images.

What "square" means?
Each thumbnails must be squared?
Total size of the sprite image must be square? Or both?

[chihuahua]

Wow, these docs need to be much clearer ...
https://www.tensorflow.org/programmers_guide/embedding#images

I interpret

The sprite should have the same number of rows and columns with thumbnails stored in row-first order: the first data point placed in the top left and the last data point in the bottom right:

to mean that the both individual thumbnails and the entire sprite image must be square. However, that is not clear to me based on the docs.

[dsmilkov]

Sorry for the confusion. Each thumbnail doesn't have to be square. The whole image has to be square, but it doesn't have to be fully filled-in. That is, if you have 8 thumbnails (ceil(sqrt(8)) == 3), then the bottom right corner (marked as *) will be ignored - you can make it all white pixels.

0 | 1 | 2
3 | 4 | 5
6 | 7 | *

Hope this helps!

[S-aiueo32]

Thank you for replying.
I interpreted that each thumbnail doesn't have to be square but the projector show it square automatically.
Is it correct?

I'm sorry but I have an additional question.
If I have 5 thumbnails, does a row of blanks have to be added to the sprite image like below, doesn't it?
0 | 1 | 2
3 | 4 | *
* | * | *

[dsmilkov]

I interpreted that each thumbnail doesn't have to be square but the projector show it square automatically.
Is it correct?

Yes, the projector will show it as square.

If I have 5 thumbnails, does a row of blanks have to be added to the sprite image like below

Yes, you will have to add a whole blank row

[chihuahua]

Got it - thank you @dsmilkov!

[S-aiueo32]

It works well, thank you!

[gabrielazg]

Hi, everyone! Thanks for making this clear. Please add the restriction (that sprite images need to be square) at https://www.tensorflow.org/programmers_guide/embedding#images, so that everyone gets it right from the beginning. Many thanks!