3D Plotly Visualization

[CarloLepelaars]

Hi Isaac, great initiative setting up this gallery!

I have created a plugin to convert Plotly to FastHTML. To highlight its capabilities I've made a small app to educate people about quantum computing gates through a 3D visualization called the Bloch sphere. It would be great to showcase this in the gallery as an example of using Plotly in FastHTML apps.

Please let me know if you have any questions and where I can help out with adding this to the gallery.

Feedback to improve is also always welcome!

Bloch Sphere app: https://github.com/CarloLepelaars/fh-plotly/blob/main/examples/bloch.py

Screenshot of the app:

[Isaac-Flath]

This is very cool, and it'd be great. We don't have any visualization apps yet, and 3D makes it an even nicer example of interactive capabilities.

Can you write a couple of sentences or a paragraph here about what this represents and why it matters to someone who knows nothing about it or any of the technical words? Something to give people who have no clue about this stuff (like me) a teeny-tiny bit of context for why this app is cool & useful. If it's a bit too in the weeds technical to have that, it's fine - not necessary but would be nice.

[Isaac-Flath]

I incorporated the minimal app from your repo into the dev branch. You can see it in the dev deploy here.

I have incorporated the full app into the dev branch as well. Dev deployment of it is here

I did some refactoring on a few items, mostly to make it work better with how FastHTML gallery is set up

• Changed from server-side state to state stored in HTML on the front end
• Added calculate_coordinates and create_scene to remove some code repetition
• Modified htmx routes so it works with the app submounting we do (these changes are stripped out from the displayed code on the website)

I am going to do a bit of checking to make sure it still produces the same visualization and probably deploy to prod tomorrow or the day after. Let me know what you think!

[CarloLepelaars]

Hey Isaac, thank you for picking up the implementation! Much appreciated. Am new to HTMX and FastHTML so learning a lot from the refactors you made.

Explanation on the 3D visualization:

In classical computing a bit can be only 0 or 1. In quantum computing a quantum bit (qubit) is a vector with 2 complex numbers, which can be visualized in 3D. Like in classical computing, gates are used to change the qubit state, but in quantum computing gates act as rotations. This visualization lets you explore quantum gates and learn how to control qubits. This is an essential skill for programming quantum computers.

---

Feedback on the dev deployment:

• Thank you for cleaning it up. Especially create_scenes is a much more elegant way to do it.
• Unfortunately the axis labels are not formatted now. Could you change the axis label in create_scenes to be the variable axis instead of the string "axis" so it shows X, Y, Z in the plot?
• The app responds slower compared to when I run it locally. Are there any unnecessary bottlenecks in the routing? Will it respond faster on the production server?

[Isaac-Flath]

I fixed the create_scenes axis thing. Thanks for catching the bug I introduced!

I am not sure about the routing. To be honest this was a bit of a toy-first project in FastHTML that started taking off unexpectedly hah. Now I am working on going back, refactoring, and making it more robust in many ways. I believe Jeremy is working on some new API to improve routing, and I plan to refactor all that routing stuff and dive more into the details when that's complete.

[CarloLepelaars]

Looks like this is all done! 👍