[Tidy] Improve appearance of README on PyPI

[manuelkonrad]

Description

• In README.md, changed default logo to the light mode logo which hopefully fixes the appearance on PyPI.
• Added logo to Vizro-AI README.
• Since GIFs are also broken on PyPI (although I saw working examples when markdown syntax is used), I placed them in a picture element. Not sure if it helps. If not, you can provide an alternative PNG in the img element (will serve as fallback). Added fallback PNGs.
• Resolves Revise the graphics used in README for vizro-ai and vizro-core so they render better in PyPI #380

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[huong-li-nguyen]

Hey @manuelkonrad - thanks for taking on another issue! 🚀
This looks good to me. I have a few minor comments, but it's ready to merge from my side 👍 I'll leave the final review to @stichbury or @Joseph-Perkins .

[stichbury]

I don't know why, but I'm not seeing the GIF at the top of the page when I view the file with changes:

[huong-li-nguyen]

I don't know why, but I'm not seeing the GIF at the top of the page when I view the file with changes:

Might be just a browser issue. Is this what you see when you click on this link? For me, it looks fine 👍

[stichbury]

Is this what you see when you click on this link? For me, it looks fine 👍

That does look fine. I'm looking at the changed file in the PR though, and that doesn't: https://github.com/mckinsey/vizro/blob/ac400c876856f04bef519d29faf8b1eef857bb6c/README.md

Could be just because it's on a fork I guess.

[manuelkonrad]

As suggested by @huong-li-nguyen, I also changed the image reference in vizro-ai/docs/index.md and removed the redundant gif. Therefore, the docs will have a direct link to the gif hosted on github.

[stichbury]

Thank you for the contribution @manuelkonrad!

[antonymilne]

Ahhh this issue has bugged me for ages! I'm so pleased to see it resolved. Thank you very much for your contribution @manuelkonrad.

[manuelkonrad]

Ahhh this issue has bugged me for ages! I'm so pleased to see it resolved. Thank you very much for your contribution @manuelkonrad.

@antonymilne Let's see after the next release whether the PyPI page actually looks better (or you upload to Test PyPI in the meantime).

BTW, really amazing how fast you iterate on PRs!

[huong-li-nguyen]

@antonymilne Let's see after the next release whether the PyPI page actually looks better (or you upload to Test PyPI in the meantime).

We just released - it looks great! 🚀 https://pypi.org/project/vizro/