Creating a quantum circuit using the Composer

In this section, we will review the Composer layout so that you can understand the functionality and behavior of the Composer when creating or editing your 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 editor.

Launching the Composer editor

To create a quantum circuit, let's first start by opening up the Circuit Composer. To open the Composer view, click on the Circuit Composer icon located on the left panel as shown in the following screenshot:

Figure 2.1 – Launching the Circuit Composer (left panel)

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 Circuit Composer components

In this section, we will get familiar with each of the components that make up the Composer. Each of these has features specific to the various components of the Composer editor. These can provide insights by allowing you to do things such as visually inspecting the results of your experiments by displaying the results 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 Circuit 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 the following screenshot, you can see the landing page of the Circuit Composer editor view:

Figure 2.2 – Circuit Composer view

From the preceding screenshot, you can see at the center of the page is the Circuit Composer view. In the following screenshot, you can see a series of gates and operations:

Figure 2.3 – Gates and Operations

As you can see in the preceding screenshot, each of these components 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, below the collection of gates and operations, we have the Circuit Composer itself:

Figure 2.4 – Circuit Composer

As you can see from the preceding screenshot, the default circuit includes three qubits, each of which is labeled with a q, and the index appended in order from least significant bit (in this case, q2, q1, q0). Each qubit is initialized to an initial state of 0 before running the experiment.

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

Figure 2.5 – Qubits and circuit wires

As you can from the preceding screenshot, this line is where you will be creating a circuit by placing various gates, operations, and barriers on them. The 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 due to the fact that it looks 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 IQX. This will allow you to ensure you can only see what you need to see while creating your quantum program.

Learning how to customize your views

Continuing with our Composer tour, at the top of the Composer view is the circuit view menu option that allows you to save your circuit, clear the circuit, or share your quantum circuit. First, we will cover how to save your circuit. To do this, simply click on the default text at the top left of the circuit 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 My First Circuit and save it by either hitting the Enter key or clicking the checkmark icon to the right of the title.

Across the top of the Composer, you will see a list of drop-down menu options. We can see these in the following screenshot:

Figure 2.6 – Composer menu options

The menu items in the preceding screenshot have the following options:

• File provides options to create, copy, open a new circuit, or view all quantum circuits.
• Edit allows you to manage your circuit, clear all operators, and edit the circuit description.
• Inspect provides the ability to step through your circuit, similar to debug mode.
• View enables the various view options.
• Share allows you to share your quantum circuit with others.
• Help provides various guides, tours, and content related to quantum computing.

Let's now take a 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. Which includes the following:

• Circuit Composer: UI components used to create quantum circuits
• Gates and Operators: A list of available drag and drop gates and operators available to generate a quantum circuit
• Options: A list of options such as the gate glossary, collapse gates, and options for downloading an image representation of your quantum circuit

The following is a screenshot illustrating each of the preceding components:

Figure 2.7 – Graphical Editor view

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

The Statevector view

The Statevector view allows you to preview the state vector results of your quantum circuit. The state vector view presents the computational basis states along the x axis, and the Amplitude 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 state. Where the initial state indicates that all qubits are initialized to the 0 (zero) state and with an amplitude of 1, we see that presented in the following screenshot:

Figure 2.8 – Statevector view

Other options available to us include various ways to download the state vector information, as illustrated in the drop-down menu at the top right of the previous screenshot.

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 Measurement Probabilities view

The next view is the Measurement Probabilities view. This view presents the expected measurement probability result of the quantum circuit. 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.9 – Measurement Probabilities view

The options here also provide various formats to download the measurement probabilities.

The Q Sphere view

Finally, the last of the state visualizations we have to review is the Q Sphere view. The Q sphere is similar to the Bloch sphere; however, the Bloch sphere does have some limitations, particularly when working with more than one qubit. The Bloch sphere is used to represent the vector of the current state of a qubit. The Q sphere can be used to represent the state information of a single qubit or multiple qubits, including the phase information. The following screenshot shows a representation of the three qubits we have in our circuit, all of which are in the initial state:

Figure 2.10 – Q Sphere view

The Q-sphere view has two components, the first is the Q-sphere itself that captures the state vector of the various qubit states 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 details of the state. The states represented by these small spheres are visible when hovered over. The previous screenshot illustrates the 3 qubits in an initial state of 000, 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 that the legend indicates for the phase of 0. If the states were out of phase by a value of π, then the color of the sphere would be red.

There are various options here; to the top right you have various options to download visualizations in different image formats, and at the bottom right you can select whether to enable the state or phase angle information of the Q-sphere.

One last thing to note is at the top left, you can see a dropdown that allows you to switch between all the views we reviewed, such as the measurement probabilities and state vector.

Now that we are familiar with the various state representation views, let's look at the last view that allows us to write code and execute our quantum circuits.

The Code Editor view

The last view we will cover here is the Code Editor view. Here we can write code to build the circuit itself. At the top of the Code Editor view there are three tabs, namely, Code, Docs, and Jobs. Each tab displays details about itself.

The Code tab has the code editor itself, which you can use to code using QASM or Qiskit code, for which you make your selection with the drop-down menu at the top left of the editor. The options available in the Code Editor provide a way to copy, import, and export code. Also included is the QASM reference link, which redirects you to details of the QASM language. The following screenshot illustrates the Code editor view with the options expanded:

Figure 2.11 – Code Editor view

The Docs tab displays the documentation available and the Jobs tab displays your pending and completed job running on the simulators or quantum devices.

In this section, we learned about how to create a quantum circuit using the Composer. We also learned about the views and components of the Circuit Composer views.

Now that you have an understanding of the various views and components that make up the Circuit Composer views, we can start creating our first quantum circuit and leveraging a lot of these views.