Improve visualize_dataset_html.py

[mishig25]

What this does

This PR improves dataset_visualizer, both technically & aesthetically. List of improvements:

1. Fixes dataset visualizer (see https://github.com/huggingface/lerobot/pull/204)
2. Refactors the code into using html templates (through flask) rather than manually creating html strings in python code
3. Better styles:
   1. one page with a side bar (that you can choose different episodes) rather than two pages
   2. side bar can close/open
   3. hit "Space" to play/pause
   4. dark mode
   5. besides the play button, added new control buttons: pause, forward, backward, rewind
   6. names of video files are shown in a small tile on top the videos
   7. responsive design: no matter how big the number of videos or episodes, the UI should wrap correctly and render as expected

on branch https://github.com/huggingface/lerobot/pull/188

https://github.com/huggingface/lerobot/assets/11827707/e8848485-1396-4708-b956-e4252cb4a4db

this branch/PR

https://github.com/huggingface/lerobot/assets/11827707/81eebfd0-199e-4d76-8dc6-9035c5b76c61

How to checkout & try? (for the reviewer)

Provide a simple way for the reviewer to try out your changes.

Make sure you install the new dep (flask): https://github.com/mishig25/lerobot/blob/ddab25af230d20147e2a126494dc4b3342af91f1/pyproject.toml#L63

Checkout this branch:

gh pr checkout 277

Run an example visualize_dataset:

python lerobot/scripts/visualize_dataset_html.py --repo-id lerobot/aloha_mobile_chair --episodes 0 1 2 --port 9090 

s

---

This change is 

[mishig25]

cc: @Cadene @aliberts

[aliberts]

This looks stunning! Thank you @mishig25

Quick ask before I review: Is there any way we can make the slider wider (like 3-4x wider) for more accurate control?

[mishig25]

Quick ask before I review: Is there any way we can make the slider wider (like 3-4x wider) for more accurate control?

https://github.com/huggingface/lerobot/pull/277/commits/69929669060be999d6e0d2f4b82d870db4ac8e2f make slider bigger

[aliberts]

For some reason I can't visualize other episodes than the first one. I tried debugging but with no success so far. Do you have the same issue?

https://github.com/huggingface/lerobot/assets/75076266/3cf4f4fb-e075-4313-940a-6f78b3ba0b51

[mishig25]

from @Cadene

How to create two columns for the labels? Ideally one for all state*, one for all action*?

commit https://github.com/huggingface/lerobot/pull/277/commits/00dc3e39571db37f1447b7c6218dfd187cee7632

https://github.com/huggingface/lerobot/assets/11827707/dcf3fe04-998f-4344-9d7c-7bb2be43fb15

[mishig25]

regarding https://github.com/huggingface/lerobot/pull/277#issuecomment-2173778173 I'm assuming you run: python lerobot/scripts/visualize_dataset_html.py --repo-id lerobot/aloha_mobile_chair --episodes 0 1 2 --port 9090 @aliberts few follow up questions:

1. When you run python lerobot/scripts/visualize_dataset_html.py ..., do you also have same problem on https://github.com/huggingface/lerobot/pull/188?
2. Have you tried running on different dataset?
3. Have you tried running with --force-override. If so, does it fix the error ?

[aliberts]

I'm assuming you run: python lerobot/scripts/visualize_dataset_html.py --repo-id lerobot/aloha_mobile_chair --episodes 0 1 2 --port 9090

Yes

1. When you run python lerobot/scripts/visualize_dataset_html.py ..., do you also have same problem on Add visualize_dataset_gtml with http.server #188?

No, I can visualize the other episodes on that branch

2. Have you tried running on different dataset?
3. Have you tried running with --force-override. If so, does it fix the error ?

Okay so that's super weird, now I'm able to make it work with the exact same command I ran yesterday. I must have changed something somehow but I don't know what exactly. I've tried with a number of different dataset and they all worked (lerobot/pusht, lerobot/aloha_static_tape, lerobot/aloha_mobile_shrimp)