Getting started with the IBM Quantum Composer

In this section, we will review the IBM Quantum Composer (hereafter referred to as simply the Composer) layout so that you can understand its functionality and behavior when creating or editing quantum circuits. Here, you will also create a few circuits, leveraging the visualization features from the Composer to make it easy for you to understand how quantum circuits are created. So, let’s start at the beginning: by launching the Composer.

Launching the Composer

To create a quantum circuit, let’s first start by opening the Composer. To open the Composer view, click on the Composer button located at the top of the IBM Quantum Learning (https://learning.quantum.ibm.com) application as shown in the following screenshot:

Figure 2.1: Launch the Composer

Now that you have the Composer open, let’s take a tour of what each component of the Composer editor provides you with.

Familiarizing yourself with the Composer components

In this section, we will get familiar with each of the components that make up the Composer. These allow you to do things such as visually inspect the results of your experiments in a variety of ways. Visualizing the construction of the quantum circuit will help you conceptualize how each quantum gate affects a qubit.

Understanding the Composer

In this section, we will review the various functionalities available to ensure you have a good understanding of all the different features available to you.

In Figure 2.2, you can see the landing page of the Composer view:

Figure 2.2: The IBM Quantum Composer view

From the preceding screenshot, you can see the Composer view, containing three qubits (q[0], q[1], and q[2]). This might not look the same when you launch the Composer for the first time. If you would like to add or remove qubits, you can simply select a qubit, for example q[1], by clicking on it, and selecting the plus icon or the trash icon, which will appear over the specific qubit.

To reproduce the views used throughout this chapter, simply add or remove the qubits until you only have three qubits left. You can add/remove by clicking on the qubit label. The default is three.

Now that you have your views set up, let’s continue to the Composer view itself. In the following screenshot, you can see a series of gates and operations:

Figure 2.3: Gates and operations

Each of the components shown has a specific function or operation that acts upon the qubit(s), which we will cover in detail in Chapter 6, Understanding Quantum Logic Gates.

As we can see in the following screenshot, we also have the circuit editor itself, which is the part of the Composer where we will create our quantum circuit by placing various gates and operations:

Figure 2.4: Circuit editor

As you can see from the preceding screenshot, the default circuit includes three qubits (though this might change over time) each of which is labeled with a q, and the index appended in order from left to right (in this case, q[2], q[1], and q[0]). This will be significant when we want to map the results from our quantum circuit. Each qubit is initialized to an initial state of 0 before running the experiment.

The last line is the classical bits, which are what we will map each qubit to so that when we complete running our quantum circuit, the results are then passed to the classical bits according to the mapping. By default, the mapping from qubit to bit is done based on the index of the qubit. For example, q₀ measurement results will be mapped to c₀ via the measurement operator, which we will see when we run our quantum circuit. You can add or remove classical bits in the same manner as qubits.

Next to the qubit you will see a line, which looks like a wire running out from each qubit, in the circuit editor:

Figure 2.5: Qubits and circuit wires

These lines are where you will be creating a circuit by placing various gates, operations, and barriers on them. This circuit has three wires, each of which pertains to one of the three qubits on the quantum computer. The reason it is called a Composer is primarily that these lines look very similar to a music staff used by musicians to compose their music. In our case, the notes on the music staff are represented by the gates and operations used to ultimately create a quantum algorithm.

In the next section, we will review the various options you have available to customize the views of the Composer. This will allow you to ensure that you can only see what you want to see while creating your quantum circuit.

Customizing your views

Continuing with our Composer tour, at the top of the Composer view are the circuit menu options that allow you to save your circuit, clear the circuit, or share your quantum circuit:

Figure 2.6: The Composer menu options

First, we will cover how to save your circuit. To do this, simply click on the default text at the top left of the Composer where it currently reads Untitled circuit, and type in any title you wish. Ideally, select a name that is associated with the experiment. In this case, let’s call it MyFirstCircuit and save it by either hitting the Enter key or clicking the checkmark icon to the right of the title, as shown below:

Figure 2.7: Renaming the circuit

Across the top of the Composer, you will see a list of drop-down menu options. The menu items in the preceding screenshot have the following options:

• File provides options to create and open circuits, as well as copy, export, share, or delete the current circuit.
• Edit allows you to manage your circuit and clear gates and operators.
• View enables the various view options, which we look at in the following sections.

Let’s now look at each of the various views in the following sections.

The Graphical Editor view

The Graphical Editor view contains a few components used to create quantum circuits:

Figure 2.8: The Graphical Editor view options

The components include the following:

• Circuit Composer: UI components used to create quantum circuits.
• Operations: A list of available drag-and-drop gates and operators to generate a quantum circuit.
• Options: The ability to set up the alignment and turn on the Inspect feature, which allows you to step through each gate and operation as you would to debug your code on an IDE or browser.
• Disk: A disk that is located at the end of the circuit to serve as a visual representation of each qubit as you add gates and operations.

Now that we know where we can create a quantum circuit, let’s move on to displays, which provide various ways to visualize the results of our quantum circuit.

The Statevector view

The Statevector view allows you to preview the state vector results, which is to say the quantum state result of your quantum circuit. The state vector view presents the computational basis states of the quantum circuit in a few different ways. To simplify the view, I have removed all but one qubit so it is easier to read the values.

You can do the same if you wish, otherwise your x axis may have more than just the two states of 0 and 1, as shown in the following figures:

Figure 2.9: The Statevector view

First, we see the Amplitude bar graph, which represents the amplitude of the computational basis states. In this case, as mentioned earlier, for simplicity we have reduced the number of qubits to just one qubit, for which there are two computational basis states, 0 and 1. These are represented along the x axis. The value of the amplitude of each basis state is represented along the y axis. In this case, since we do not have any gates or operators on our circuit, the state vector representation is that of the initial (ground) state. The initial state indicates that all qubits are set to the 0 (zero) state, indicated by an amplitude value of 1.

At the bottom of the Statevector view we see the Output state representing the complex value of each computational basis state. In this case since we are in the initial state, we see the 0 state at 1 + 0j and the 1 state at 0 + 0j.

To the bottom left is the phase wheel. The phase wheel is a color visual representation of the phase for each basis state, which has a range between 0 and 2π. Since we have not applied any phase gates, we see the default phase of 0 represented by the color blue. As you apply phase shifts to each qubit, the color of the bar will update according to the color representation of the phase.

The state vector information is just one of the visual representations of your quantum circuit. There are a couple of others we want to visit before moving on.

The Probabilities view

The next view is the Probabilities view. This view presents the expected probability result of the quantum circuit (with the addition of a single measurement operator to the qubit). As mentioned in the previous description, and illustrated in the following screenshot, since we do not have any operators on the circuit, the results shown are all in the initial state of 0:

Figure 2.10: The Probabilities view

The probability view is a general representation of the results based on expected values, not the actual results you will get from a quantum system. This view currently represents what the Composer is calculating classically as we have not yet run this circuit on an actual quantum computer. The results you will see as we create this circuit are computed by the classical system and not by a quantum system. The results from a quantum system are received after we send the completed circuit to run.

The Q-sphere view

Finally, the last of the state visualizations we must review is the Q-sphere view. The Q-sphere looks similar to a Bloch sphere, which is used to represent the statevector of the current state of a qubit. However, the Bloch sphere does have some limitations, particularly that it can only represent the state of a single qubit. On the other hand, the Q-sphere can be used to visually represent the state information of a single qubit or multiple qubits at once in one sphere, including the phase information. The following screenshot shows a representation of a circuit with three qubits, all of which are in the initial state:

Figure 2.11: The Q-sphere view

The Q-sphere view has two components; the first is the Q-sphere itself, which represents the state vector of the multi-qubit state, represented by a vector that originates at the center of the sphere. At the end of the vector is a smaller sphere, which represents the probability of the state by the radius of the top that lies on the surface of the Q-sphere. The states represented by these small spheres are visible when hovered over. The previous screenshot illustrates the three qubits in an initial state of , with a probability of 1, and a phase angle of 0.

The second component is located at the bottom left, which is the legend that describes the phase of the states. Since the small sphere represents the phase angle of 0, the color of the sphere is blue, which is the same as what the legend indicates for the phase of 0. If the state had a phase value of π, then the color of the sphere would be red.

There are various options here; on the top right you can see an ellipsis that you can select, providing various options to download visualizations in different image formats, and to move the view to the left or right. At the bottom right you can select whether to enable the state or phase angle information of the Q-sphere.

OK, we went through all of the various views and components that make up the Composer view, so now let’s go to the fun part and start creating our first quantum circuit!