PAIR-code/facets

Sprite Atlas out of order

jakubLangr opened this issue · 2 comments

The preview in sprite atlas is out of order and therefore the image displayed and the image description do not match. Could not find a similar issue so opening a new one.

Min example to replicate:


bazel-bin/facets_atlasmaker/atlasmaker --sourcelist=/efs/imlist.txt --output_dir=/efs/static --image_width=128 --image_height=128 --default_image_path=https://upload.wikimedia.org/wikipedia/en/d/d1/Image_not_available.png

And then:

import pandas as pd
import os

data_df = pd.read_csv('imlist.txt')

data_json = data_df.to_json(orient='records')

    # st.image(kpd_img, width=900)
HTML_TEMPLATE = """
    <link rel="import" href="static/facets-jupyter.html">
    <facets-dive 
        id="elem" 
        height="750"
        cross-origin="anonymous"
        sprite-image-width="128"
        sprite-image-height="128">
    </facets-dive>
    <script>
        var data = {jsonstr};
        var atlas_url = "{atlas_url}";
        document.querySelector("#elem").data = data;
        document.querySelector("#elem").atlasUrl = atlas_url;
    </script>"""

html = HTML_TEMPLATE.format(jsonstr=data_json, atlas_url='static/spriteatlas.png')

from flask import Flask

app = Flask(__name__, static_folder=os.path.abspath("/efs/static"))

@app.route("/")
def hello():
    return html

if __name__ == "__main__":
    app.run(debug=True, port=5000)

Any ideas on how to fix?

The preview in sprite atlas is out of order

The atlasmaker command should produce a manifest JSON file. Does that look like it matches the generated sprite atlas image?

Thanks, actually after merging my pandas DF with the manifest, this worked!