[Unitary Hack] - FEATURE - Gates Tutorial and Gates Challenge

[Neo-Cai]

Overview

Challenge mode is meant to help the user build an intuition for gate operations on a single, two-level qubit by allowing them to use buttons to navigate along the Bloch Sphere, a core representational schema for Qubit States in quantum computing.

General Requirements

To collect the bounty, you must implement

• an updatable Bloch sphere plot
• an X-Gate and Y-Gate button
• a gate operation "timeline"
• a menu to navigate to the "tutorial," "gate challenge," "pulse challenge," and "levels"
• a tutorial sequence
• a challenge sequence

Figma

The figma for all of the requirements can be found here

Requirement Specs

Bloch Sphere and Gate Buttons

The Bloch sphere is a representation of all of the possible states on a Qubit. Using X-Gates and Y-Gates, we can flip the Qubit State between two poles of the Bloch sphere, |0〉and |1〉. This is similar to how a transistor flips between 1 and 0 for computational purposes.

The Bloch Sphere is plotted using plotly.graph_objects and takes in x, y, and z values that are outputted from the quantum_simulator package already installed in the Challenge Mode home page.

The X-Gate and Y-Gate buttons are clickable interfaces pictured below:

When pressing the X-Gate or Y-Gate buttons provided, the quantum simulator is fed a specific square pulse using the add_square function that is tuned to the type of gate the user selects. The output of the quantum simulator is then used by the Bloch sphere to plot a path.

For example, when pressing the X-Gate button we get a rotation path about the x-axis that goes from |0〉to |1〉:

When pressing the Y-Gate button we get a transition from |0〉to |1〉but about the y-axis:

Required Change: currently, when the user presses either button, the paths are plotted on a completely new graph. You cannot show a sequence of gates where there is first an X-gate path and then a Y-Gate path. Modify the buttons and bloch sphere such that the plot remembers the previous paths taken and displays them. See this illustration in Figma.

First the user presses the X-Gate Button: Then they press the Y-Gate Button: Notice how the X-gate path remains but is faded.

Required Change: additionally, the simulation only displays where on the Bloch sphere the Qubit has rotated to, it does not store the state information anywhere. Eg. are we at |0〉or |1〉. It is useful to add a way to store the state of the qubit based on the gate applied. This can be done using some simple matrix multiplications: |0〉and |1〉can be represented as [0; 1] and [1; 0] vectors respectively. The X-Gate and Y-Gate can be represented as [0, 1; 1, 0] and [0, i; -i, 0] (2x2 matrices). Performing a gate is doing a matrix multiplication on the vectors. For example, a Y-Gate on |0〉is just [0, i; -i, 0] * [0; 1]. The output is [i; 0] which is just i|1〉.

Gate Operation Timeline

With each button press, the gate operation timeline will help the user keep track of what gates they have used and what state they are in. Every qubit will start in the |0〉state and then record the gate the user selects and the new state as a result of that operation. See the figma link for how these progress with each button press.

Menu

The menu allows the user to navigate between pages. For now, the levels and pulse challenge buttons can link to placeholder pages while the gate challenge and tutorial buttons should link to the pages created in this issue. The page that you are on should be highlighted in a difference shade of blue as pictured above.

Tutorial Sequence

Ideally, this should be an independent page. The tutorial sequence takes the user through the buttons and the bloch sphere and show follow the dialogue in the Figmas. Where there are no "next" buttons, the user must complete the action prompted in the dialogue box. Once they do, the tutorial will automatically progress. Else, they press next to progress. When the user presses "Go to Challenge!" they will be taken to the Challenge page.

Challenge Sequence

Ideally, this also should be an additional independent page. The Challenge sequence takes the user through 5 challenges. They will be asked to:

1. Navigate from |0〉to |1〉
2. Navigate from |1〉to -i|0〉
3. Navigate from -i|0〉to |0〉
4. Navigate from |0〉to -|0〉
5. Navigate from -|0〉to |1〉

Each dialogue box will display the navigation challenge. When the user reaches the navigation objective, they progress to the next challenge. After each challenge is completed, the Challenge ticker will update. Eg. this indicates you are on the 4th Challenge:

Tip

To make a continuous sequence of gates that is "stored" on the plot, you may have to store the previous step pulses (Gates) and replot it with each new button push. You can manually do this in free play mode already by adding 20 ns Square Pulse in the X Channel and then a 20 ns Square Pulse in the Y Channel afterward. Like so:

The Bloch Sphere is then displayed like so:

[mahnoor04]

Hey! Will you please assign this challenge to me?

[Neo-Cai]

Hi! For unitary hack we will not assign issues until after the pull request has been made and we can confirm that the bounty has been completed. Once you have a pull request, link it to this issue and I will assign it! Thanks

[jyotiraj-code]

@Neo-Cai Is this issue and #9 still open to work as a bounty issue? Due to time constraint, I couldn't create a working PR during UnitaryHack.