In this chapter, some basic knowledge of computing is assumed, such as understanding the basic gates of a classic computing system.

Here is the full source code used throughout the book: https://github.com/PacktPublishing/Learning-Quantum-Computing-with-Python-and-IBM-Quantum-Second-Edition

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!

Now that we know where everything is in the Composer, we will create our first quantum circuit. This will help you to get a better understanding of how all these components work together, and it will show you how these components provide insights such as the current state and its probabilistic estimation as you build your first quantum experiment.

Building a quantum circuit with classical bit behaviors

We are all familiar with some of the basic classic bit gates such as NOT, AND, OR, and XOR. The behavior that these classic gates perform on a bit can be reproduced on a quantum circuit using quantum gates. Our first experiment will cover these basic building blocks, which will help you to understand the correlation between quantum and classical algorithms.

Our first experiment will be to simulate a classical gate, specifically a NOT gate. The NOT gate is used to change the value of the qubit, in this case from the |0⟩ state to the |1⟩ state, and vice versa. We will cover details on how this gate operates on qubits in Chapter 6, Understanding Quantum Logic Gates.

To simulate a NOT gate on a quantum circuit, follow these steps:

1. From the open Composer editor that you previously created and titled MyFirstCircuit, reduce the number of qubits and classical bits down to just one of each if you have not already. This will simplify the visualization of the results for us. You may have to reopen the other views such as qsphere. to get the updated changes.
2. Next, click and drag the NOT gate, which is visually represented by the symbol, from the list of gates down onto the first qubit, as shown in the following screenshot:

Figure 2.12: Add an X (NOT) gate to the first qubit

3. Next, click and drag the measurement operation onto the first qubit, q₀, just after the NOT gate:

Figure 2.13: Add a measurement operator to the first qubit

4. By taking a measurement of the qubit and having its value sent out to the pertaining classic bit, we are essentially reading the state of the qubit. You can see this by the connecting arrow between the measurement operator and the classical bit. It also includes the index of the classical bit, the result of which the measurement operator will write out, which in this case is the bit in position 0.

A measurement occurs when you want to observe the state of the qubit. What this means is that we will collapse the state of the qubit to either a 0 or a 1. In this example, it is straightforward that when we measure the qubit after the NOT gate, the reading will be 1. This is because since the initial state is set to 0, applying a NOT gate will flip it from 0 to 1.

Before we run this experiment, let’s note a few things. First, note that the classic bits are all on one line. This is mostly to save space. Next is to note that all the views are updated as we add gates and operators. As mentioned earlier, this is the system computing these classically to provide us with an ideal result. We have not yet specified which quantum computer to run this circuit on, hence the results you are seeing are what the classical system is computing and not real-time results from a quantum computer.

1. Select the Setup and run button located at the top right of the Composer view. This will display the run settings, illustrated as follows:

   

   Figure 2.14: The run settings view

2. The run dialog prompts you to take two steps:
   • First, select which quantum system you would like to run the experiment on. Select any of the options you wish to run. In this example, we’ll select ibm_brisbane.
   • The second step first allows you to select the Provider. There are different providers—ibm-q/open/main is for open free quantum devices, and if you are a member of the IBM Quantum Network then you’ll have a provider that assigns you to the available premium quantum devices.

   For now, leave it at the default setting. This step also prompts you to select a number of Shots of the quantum circuit you wish to run. What this means is how many times you wish the quantum circuit to run during your experiment to obtain a reliable overall result. For now, let’s set it to 8000.

3. Now that you have selected your run options, let’s run the circuit. Click Run on ibm_brisbane. If you selected a different device, it will indicate it accordingly.

Once your experiment begins, you should see an entry of this experiment in the Composer jobs view in the left panel on the Composer view, indicating that your experiment is Pending. While the job is Pending, it will display the status of the job, accordingly.

Once completed, you will see the status for the specified job as Completed, illustrated as follows:

Figure 2.15: The Composer jobs view displaying the job status for the selected circuit

1. Upon completion, open your experiment from the list by clicking on the job. This opens the Jobs results view:

Figure 2.16: The Jobs results view

2. Once you have the job opened, you can see some basic information about the job, such as the job ID across the top, followed by the date and time the job was completed, the backend it was run on, and three views that contain details about the job itself, such as the status, details, and results. You will also see a button at the top right that will provide the same information in the views, only in a separate window. Let’s review the views next.

First, we have the Status timeline view, as illustrated in Figure 2.17:

Figure 2.17: The jobs status timeline view

Here you can see the timeline that represents the time it took to complete your circuit. Each step represents the different processes that your circuit completes as it is executed on the quantum system:

Creatinged: The date and time the job instance was added to the queue to run on a specific quantum system.

In queue: The length of time your job was in the queue prior to running on the quantum system.

Running: The time it takes from moving out of the queue and running on a quantum system before returning the results back. Time in system is the actual time that the circuit is running on a quantum system, separate from the time it is on the classical components. For example, transforming the circuit from digital to analog and analog to digital is not included in the time in system value.

Completed: The date and time the job had completed running on the quantum system.

Next is the Details view, as seen in the following figure, which provides you with the details of the job; in this case it was sent from MyFirstCircuit. It also provides information such as the program, the number of shots, the number of circuits, and the instance. The instance is the provision of the quantum system; since we are using open free devices, this is categorized as an open system.

If you are a premium user, you will likely run in a mode specific to your provider, details of which you can obtain from your administrative provider.

Figure 2.18: The Details view

Finally, the Result – histogram view, illustrated in Figure 2.19, shows you the results of your experiment as rendered on a histogram.

Figure 2.19: Job results – histogram view

In this view, the x axis represents the frequency of each state that resulted after each shot of your circuit. The y axis represents each state that had a result.

All these views can be seen on a separate page altogether by clicking the See more details button, located at the top right of the report. This will provide the same details regarding your experiment, plus it will include the transpiled circuit diagram. The transpiled diagram will show you the same circuit, only it will use the basis gates of the specified quantum system. We will cover what basis gates are and how they are transpiled into the circuit in a later chapter. For now, think of it as a circuit using gates that are specific to the quantum system, as illustrated in the following screenshot:

Figure 2.20: The Details view with the original circuit (left) and the transpiled circuit (right)

The diagram of the circuits is just one of the three representations of the circuit. The other two tabs will display the Qasm and Qiskit representations. Keep in mind that depending on the size of the device that you ran this on, you may see all qubits listed (which could range over 100 qubits). In this case I truncated the view so you only see a few qubits to save space.

Now that we have the results from running our first quantum circuit, let’s take a closer look at our results and see what we got back.

Reviewing your results

The histogram result in Figure 2.19 provides information about the outcome of our experiment. Some parts might seem straightforward, but let’s review the details. It may seem trivial now, but later when we work on more elaborate quantum algorithms, understanding the results will prove invaluable.

There are two axes to the results. Along the y axis, we have all the possible states (or measurement outcomes) of our circuit. This is what the measurement operation observed when measuring the qubit. Recall that we measured the first qubit, so from the least significant bit (on the far right), q₀ is in the right-most position within each possible state result. Therefore, as we add more qubits, they are appended to the left of the previous qubit. For example, a three-qubit system would be set in the following order, q₂, q_1S, q₀. We know that our likely result of is correct due to the fact that we placed a NOT gate on the first qubit, which changes its state from 0 to 1. If we were to add two more qubits, then the second and third qubit would simply take a measurement that equates to measuring the initial state, which we know to be 0, creating a likely result of .

The x axis provides the results for each of the possible states. Since we ran the experiment 8000 times, the results show that we a have very high chance of the first qubit resulting in the state of 1. The reason why the result is not 100% is due to noise from the quantum device. We will cover the topic of noise in later chapters, but for now we can be confident of a high probability, based on our results, that the NOT gate worked.

In this section, we simulated a simple NOT gate operation on a qubit and ran the circuit on a quantum device.

In this chapter, you learned about the IBM Quantum Composer and its many components. You created an experiment that simulated a classic NOT gate. You then viewed the results on a histogram, and read the probabilities based on the results.

This has provided you with the skills to experiment with other gates to see what effect each operation has on each qubit and what information might be determined or used based on the results of the operation. This will be helpful when we look at some of the quantum algorithms and how these operations are leveraged to solve certain problems.

In the next set of chapters, we will move away from the click-and-drag work of the UI and instead create experiments using Jupyter Notebook, as well as beginning to program quantum circuits using Python.

1. From the Composer, where would you find the time it took to run your circuit on a quantum computer?
2. How would you remove or add a qubit to your circuit on the Composer?
3. On which view would you specify which quantum system to run your circuit?
4. Which sphere would be ideal to view the quantum state of three qubits in a single sphere?

Join our community’s Discord space for discussions with the author and other readers:

https://packt.link/3FyN1