widgets-index.ipynb

Kernel: Python 3

Widgets Demonstration

As well as providing working code that readers can experiment with, the textbook also provides a number of widgets to help explain specific concepts. This page contains a selection of these as an index. Run each cell to interact with the widget.

NOTE: You will need to enable interactivity by pressing 'Try' in the bottom left corner of a code cell, or by viewing this page in the IBM Quantum Experience.

Interactive Code

The most important interactive element of the textbook is the ability to change and experiment with the code. This is possible directly on the textbook webpage, but readers can also view the textbook as Jupyter notebooks where they are able to add more cells and save their changes. Interactive Python code also allows for widgets through ipywidgets, and the rest of this page is dedicated to demonstrating some of the widgets provided by the Qiskit Textbook.

# Click 'try' then 'run' to see the output
print("This code works!")

Gate Demo

This widget shows the effects of a number of gates on a qubit, illustrated through the bloch sphere. It is used a lot in Single Qubit Gates.

from qiskit_textbook.widgets import gate_demo
gate_demo()

VBox(children=(HBox(children=(Button(description='I', layout=Layout(height='3em', width='3em'), style=ButtonSt…

Image(value=b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x01 \x00\x00\x01 \x08\x06\x00\x00\x00\x14\x83\xae\x8…

Binary Demonstration

This simple widget allows the reader to interact with a binary number. It is found in The Atoms of Computation.

from qiskit_textbook.widgets import binary_widget
binary_widget(nbits=5)

VBox(children=(Label(value='Toggle the bits below to change the binary number.'), Label(value='Think of a numb…

HTML(value='<pre>Binary   Decimal\n 00000 = 0</pre>')

Scalable Circuit Widget

When working with circuits such as those in the Quantum Fourier Transform Chapter, it's often useful to see how these scale to different numbers of qubits. If our function takes a circuit (QuantumCircuit) and a number of qubits (int) as positional inputs, we can see how it scales using the widget below. Try changing the code inside these functions and re-run the cell.

from qiskit_textbook.widgets import scalable_circuit
from numpy import pi

def qft_rotations(circuit, n):
    """Performs qft on the first n qubits in circuit (without swaps)"""
    if n == 0:
        return circuit
    n -= 1
    circuit.h(n)
    for qubit in range(n):
        circuit.cp(pi/2**(n-qubit), qubit, n)
    # At the end of our function, we call the same function again on
    # the next qubits (we reduced n by one earlier in the function)
    qft_rotations(circuit, n)

def swap_qubits(circuit, n):
    """Reverse the order of qubits"""
    for qubit in range(n//2):
        circuit.swap(qubit, n-qubit-1)
    return circuit

def qft(circuit, n):
    """QFT on the first n qubits in circuit"""
    qft_rotations(circuit, n)
    swap_qubits(circuit, n)
    return circuit

scalable_circuit(qft)

IntSlider(value=4, max=8, min=1)

Image(value=b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x03H\x00\x00\x01\x08\x08\x06\x00\x00\x00e \xd4\x9e\x…

Bernstein-Vazirani Widget

Through this widget, the reader can follow the mathematics through an instance of the Bernstein-Vazirani algorithm. Press the buttons to apply the different steps of the algorithm. The first argument sets the number of qubits, and the second sets the hidden binary string, then re-run the cell. You can also reveal the contents of the oracle by setting hide_oracle=False and re-running the cell.

from qiskit_textbook.widgets import bv_widget
bv_widget(2, "11", hide_oracle=True)

HBox(children=(Button(description='H⊗ⁿ', style=ButtonStyle()), Button(description='Oracle', style=ButtonStyle(…

HTMLMath(value='$$ |00\\rangle = |00\\rangle $$')

Image(value=b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x01*\x00\x00\x00\xcc\x08\x06\x00\x00\x00\xc4P\xee\x0…

Deutsch-Joza Widget

Similarly to the Bernstein-Vazirani widget, through the Deutsch-Joza widget the reader can follow the mathematics through an instance of the Deutsch-Joza algorithm. Press the buttons to apply the different steps of the algorithm. case can be "balanced" or "constant", and size can be "small" or "large". Re-run the cell for a randomly selected oracle. You can also reveal the contents of the oracle by setting hide_oracle=False and re-running the cell.

from qiskit_textbook.widgets import dj_widget
dj_widget(size="large", case="balanced", hide_oracle=True)

HBox(children=(Button(description='H⊗ⁿ', style=ButtonStyle()), Button(description='Oracle', style=ButtonStyle(…

HTMLMath(value='$$ |0000\\rangle = |0000\\rangle $$')

Image(value=b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x01*\x00\x00\x01E\x08\x06\x00\x00\x00[\x98\xa0\xa0\x…