Help Needed: Integrating Qiskit for Quantum Circuit Visualization in PyScript

[jonathanlws]

Hello Zeroqode Community,

I’m currently working on a feature that aims to visualize quantum circuits directly in the browser. The idea is straightforward: users create a quantum circuit, and upon executing it by clicking “run circuit,” the circuit diagram is dynamically generated and displayed. The backend of this operation relies on Python code that imports and utilizes Qiskit for both the execution and the visualization of the quantum circuit.

To facilitate running Python in the browser, I’ve installed PyScript, following the setup guide available on Bubble.io’s PyScript Plugin Page. Despite adhering to the provided instructions and ensuring my settings match those recommended, the desired circuit visualization isn’t being rendered. Instead, I encounter the following error:

JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 300, in run coroutine = eval(self.code, globals, locals) File "", line 1, in ModuleNotFoundError: No module named 'qiskit' )

The crux of the issue seems to be the inability to import the qiskit module. I’m seeking guidance on how to successfully integrate Qiskit within this PyScript setup. Is there an additional step or configuration needed to facilitate this, particularly with Pyodide’s package management?

Additionally, I am unsure how to reference specific element IDs within my Python code for PyScript. I’ve reviewed examples such as the TO-DO App Using PyScript but couldn’t pinpoint how element IDs are integrated. Any insights or examples on this would be incredibly helpful.

I appreciate any assistance, insights, or guidance you can provide to help overcome these hurdles. Your support will significantly contribute to advancing this project and enhancing our quantum computing educational tools.

Thank you in advance for your time and help!

Best regards,

Jonathan

[Stephan]

Hello @jonathanlws,

Thank you for reaching out to us.

The challenge you’re facing with integrating Qiskit into PyScript arises because PyScript is optimized for Python code that can be executed within the WebAssembly environment. Unfortunately, Qiskit comes with several dependencies, including compiled native extensions, that WebAssembly does not support. Manually identifying and compiling these unsupported dependencies is far from straightforward. Furthermore, even if achievable, deploying Qiskit directly in the browser may lead to suboptimal user experience due to the inherent resource constraints of web environments.

Given these challenges, a possible workaround could be handling Qiskit code execution on a server and then sending the results to the browser for visualization. However this approach require some additional tools that may not be available for Bubble.

Thanks again for your understanding and cooperation, looking forward to your thoughts and feedback.

If you have any other question or need some further assistance, please let us know.

Best regards,
Stephan

[jonathanlws]

Hi Stephan,

I appreciate the reply.

Jupyter notebooks are one of the common tools that quantum software engineers use to build and test quantum circuits. https://quantumnft.xyz/ They would import quantum frameworks such as qiskit and pennylane. Given that there are limitations with using Python directly and importing custom libraries. After discussion with the team, we would like to embed a Jupyter notebook into the website.

How would I go about doing that? Any tips you can provide would help tremendously. Thanks in advance for your help and insight!

[Stephan]

Hello @jonathanlws,

Thank you for reaching out and sharing your idea with us.

The integration of Jupyter notebooks into the Bubble platform is indeed a more complex project that may require more tools and resources. The Pyscript Python plugin alone, operating within a WebAssembly environment, provides limited functionality in this context and may not fully address your needs.

If you’re exploring the possibility of a customized project tailored to your specific requirements, I encourage you to fill out the submission form on our website. Following your submission, one of our Project Managers will promptly contact you to discuss your project in detail.

Thank you once again for your collaboration, we’re looking forward to your response.

Wishing you a great day ahead!

Best regards,
Stephan