Staring into the soul of a Quantum program

How I made a visualization tool for Q# programs during my Microsoft Quantum internship

This article is part of the Q# Advent Calendar 2020. Stay tuned for new posts on quantum computing each day of this Christmas month!

Photo by ProductionPerig on

The field of quantum computing has generated a lot of excitement in recent years with its promise of providing computational powers beyond that of classical computers. Quantum algorithms, such as Shor’s and Grover’s, have exhibited a computational speed-up over any known classical algorithms. These quantum advantages arise by cleverly utilizing quantum properties, such as entanglement, superposition, and interference, to retrieve the answer with high probability.

Although the potential applications of quantum computing can revolutionize industries (e.g. pharmaceutical, crypto, machine learning), there’s still a long way to go to realize them. One of main roadblocks is the susceptibility of the qubits to noise. The noisy environments that the qubits operate in have a small chance of interacting with the qubits, thus changing its state and causing an error in the program. Quantum hardware aside, quantum software also has room for improvement to match the capabilities of classical software, such as development tools.

Quantum development tools

With the growing interest in quantum algorithms and the influx of budding quantum enthusiasts, there is a need for development tools geared towards quantum programming. One such tool is a quantum program visualizer, which was the focus of the internship project I worked on at Microsoft Quantum over the past summer.

How can we visualize quantum programs?

When thinking about how to represent quantum programs or algorithms visually, you might think of quantum circuits. Quantum circuits are the most common way that quantum algorithms are presented in textbooks and other literature. They function like musical scores; you read from left to right, beginning with an input qubit state, followed by a series of gates or operations that act on the qubits.

Quantum teleportation circuit with 3 qubits (one on each line).

Quantum circuits are suitable for quantum programs that are small enough in size and don’t include too much non-determinism. But what happens if we remove these constraints?

As quantum computing and quantum programming mature, we will see classical programming paradigms, such as loops and conditional logic, appear within our quantum programs that might make the quantum program non-deterministic. For example, Microsoft’s Q# is a high-level quantum programming language that offers such capabilities (e.g. repeat-until-success).

An example of a non-deterministic quantum program is a solution for one of the Q# coding contest questions hosted over the past summer:

You are given N qubits in the all-zero state |0…0⟩. Your task is to prepare an equal superposition of all basis states that have 1 or more “0”s in them. For example, for N=2, the required state would be 1/√3(|00⟩+|01⟩+|10⟩).

Solution for Q# contest question.

As more control branches are created, it quickly becomes infeasible to visualize a quantum program using basic quantum circuits.

Our solution

To overcome the difficulty of representing non-determinism, we can modify the concept of a quantum circuit to visualize a single branch that the quantum program can take. This inherently removes the problem as we are only representing one out of the program’s possible execution paths.

An overview of my internship project

We now have a solution, but how do we implement this visualization?

Microsoft’s Quantum Development Kit (QDK), which Q# is a part of, includes a Jupyter notebook kernel, IQ#, that allows you to write and run Q# code directly from within your browser. Not only does this help you avoid compiling your own Q# executable, it also allows the addition of really interesting features on top of Q# that you can run within the Jupyter notebook (spoiler: my internship project is one of them!).

Using the ability to add custom magic commands into the IQ# kernel, we created the %trace magic command that takes in a Q# operation and outputs an HTML visualization into Jupyter notebook.

Example usage of the `%trace` command.

This visualization tool allows beginners trying to learn quantum computing understand quantum algorithms in a more visual and interactive manner. It also serves as a tool for quantum researchers and developers to debug their quantum algorithms.

More details about the %trace command can be found here.

Implementing the %trace command

Let’s take a look at how I implemented the %trace command. It can be broken down into the following main steps:

  1. IQ# kernel receives the %trace command, together with the name of the Q# operation to be visualized.
  2. The Q# operation is passed through a Quantum Simulator.
  3. We attach an ExecutionPathTracer listener onto the Quantum Simulator which keeps track of all operations picked up by the simulator in the program’s execution.
  4. Once the simulation is complete, we retrieve the list of traced-out operations from the ExecutionPathTracer and send it to the Jupyter notebook client as a JSON object.
  5. The client renders the JSON as an HTML string using the circuit visualizer I created.
  6. Finally, the resulting HTML string is displayed in Jupyter notebook.

Since we are generating an HTML visualization, it would be a waste not to make full use of HTML’s capabilities (especially when paired with the all-powerful JavaScript). So, I enhanced the gates by making them buttons, allowing users to zoom-in and zoom-out of operations and view nested gates in the circuit! This functionality is similar to viewing stack traces in a classical debugging tool.

A quantum circuit with zoomed-in operations.

If you want to try out the %trace command for yourself, head over to this Binder notebook and play around with the samples provided!

My internship experience at Microsoft Quantum

In this bonus section, I’ll spend some time to shed some light on my (virtual) internship at Microsoft Quantum since many students might be interested in applying for this internship.

At first, the internship was planned to be in-person at Microsoft HQ in Redmond, Washington. However, when this no longer became possible due to the pandemic, the team had to figure out a way to move the internship online. Not only did they manage to pull it off, this was one of the best internships I’ve had!

The projects assigned were well-thought-out in advance before the internship started, which set us up for success during the internship. The roadmap for the project also had many deliverables, so it was up to you how fast and how much you wanted to accomplish during your 12-week internship.

There were internship events almost every single week, including paint nights and cocktail mixing lessons, where all equipment were fully paid for and shipped to you in time for the event. We held weekly brownbag sessions where someone would give a presentation on a topic in quantum computing. The group of us quantum interns organized weekly water cooler breaks to replace the serendipitous meetings that would’ve occurred at the water cooler in-person. We also had online board game sessions every Friday to finish off the week. I don’t think I’ve done half as many events in any in-person internship.

My Quantum care package

However, as clichéd as it might sound, the best part of the internship was the people that made up the Quantum team. They went out of their way to make the interns feel at home, such as having virtual coffee chats with us and even sitting down to chat about career advice.

This internship was super fun and rewarding, and I would highly recommend applying to next year’s internships:

⟨ Software Engineer | Quantum Physicist ⟩

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store