Update thumbnails automatically

[MarcSkovMadsen]

DON'T MERGE YET. MORE WORK TO BE DONE!

Depends on #12. Please review that one first.

You can generate the thumbnails via

SCREENSHOT=true hatch run pytest -m ui
cp tests/ui/screenshots/* docs/assets/thumbnails/

I don't think the screenshots are yet meaningful enough. We should refactor the examples to make it very easy to understand what they are about from a screenshot. Alternatively we could agree to use manual screenshots?

What do you think @ahuang11 ?

[ahuang11]

I agree with you that they're not really helpful at this moment.

I think to make them useful, we should somehow detect that it's getting a screenshot and programmatically send a message to trigger a response and then grab a screenshot after waiting 5s.

Also, we should add titles to each of the ChatInterface.

Or ideally, we manually create GIFs of them which is much more intriguing than screenshots.

[MarcSkovMadsen]

Yes. My thoughts are

• We could use playwright to interact with the live application before taking the screenshot.
• In addition to taking a screenshot it could also record a video.
• We could the show the video instead of the image when a user hover over the image ?
• In addition we could autogenerate links in the index.md to quickly share on social media with text and gif.

[MarcSkovMadsen]

One issue currently is that Playwright does not show the emojis when taking screenshots

[MarcSkovMadsen]

I got the automation concept for screenshot and video working. The below is automatically recorded for echo.py.

3499ef8039af2b1a223a0f07c600bee0.webm

As you can see the emojis are shown. It works when I run on my laptop in --headed mode.

[ahuang11]

Thanks; that's quite impressive that this is doable! I'll fix the tests and add the videos in another branch.

[MarcSkovMadsen]

We should coordinate a bit @ahuang11 . I'm implementing the playwright/ video code here #41