widgets.ipynb

Kernel: Python 3

Widgets

Note: Each widget should have a unique goal value. If you copy the code from here, make sure to update goal name.

Circuit sandbox

Circuit sandbox

q-circuit-sandbox-widget(goal="circuit-sandbox")
    .availableGates H X Z Y T S
    .instructions Text here establishing what this widget is, how the user can use it, and what we intend them to use it for. Lorem ipsum dolor sit amet, consectetur adipiscing elit, lorem ipsum dolor sit amet, consectetur.
    .explanation Text here to explain the difference between the matrix view and the state vector view

Code Exercise

Quantum Hardware

from qiskit import *
from qiskit.visualization import plot_histogram

qc = QuantumCircuit(2, 2)
qc.h(0)
qc.cx(0, 1)

qc.measure_all();
qc.draw();

provider = IBMQ.get_provider('ibm-q')
backend = provider.get_backend('ibmq_lima')

shots = 1024
job = execute(qc, backend, shots=shots, memory=True)

# Get the results from the computation
results = job.result()
answer = results.get_counts()

plot_histogram(answer)

Using markdown cell

p1 = 0.01
p3 = 3 * p1**2 * (1-p1) + p1**3 # probability of 2 or 3 errors

print('Probability of a single reply being garbled: {}'.format(p1))
print('Probability of a the majority of three replies being garbled: {:.4f}'.format(p3))

Using code cell

p2 = 0.01
p4 = 3 * p2**2 * (1-p2) + p2**3 # probability of 2 or 3 errors

print('Probability of a single reply being garbled: {}'.format(p2))
print('Probability of a the majority of three replies being garbled: {:.4f}'.format(p4))

Eigenvector Widget

Understanding Eigenvectors

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

q-eigenvector-widget

Amplitude encoding

q-statevector-amplitude-encoding
  p Amplitude encoding description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis vitae lit fermentum sit. Pellentesque congue risus sed condimentum viverra dolor. Sapien nunc vulputate posuere vel.

Statevector Widget

Binary encoding

q-statevector-binary-encoding
  p Binary encoding description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis vitae lit fermentum sit. Pellentesque congue risus sed condimentum viverra dolor. Sapien nunc vulputate posuere vel.

Amplitude encoding

q-statevector-amplitude-encoding
  p Amplitude encoding description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convallis vitae lit fermentum sit. Pellentesque congue risus sed condimentum viverra dolor. Sapien nunc vulputate posuere vel.

Amplitude Addition Widget

Amplitude Addition Widget

q-amplitude-addition-widget

Amplitude Disk

q-amplitude-disk
q-amplitude-disk(magnitude=1, phase=0, is-interactive)
q-amplitude-disk(magnitude=1.1, phase=270)

Amplitude Disk With Values

q-amplitude-disk-with-values(magnitude=1, phase=0)
q-amplitude-disk-with-values(magnitude=1, phase=0, is-interactive)

Amplitude Addition Disk

q-amplitude-addition-disk(magnitude-a=0.7, phase-a=50, magnitude-b=0.4, phase-b=190)
q-amplitude-addition-disk(magnitude-a=0.7, phase-a=50, magnitude-b=0.7, phase-b=60)

Amplitude Addition Disk With Values

q-amplitude-addition-disk-with-values(magnitude-a=0.7, phase-a=50, magnitude-b=0.4, phase-b=190)
q-amplitude-addition-disk-with-values(magnitude-a=0.7, phase-a=50, magnitude-b=0.7, phase-b=60)

QML Approaches

QML Approaches

Type of algorithm

Type of data

CC

CC refers to processing Classical data using Classical computers, but using algorithms inspired by quantum computing, such as this recommendation system algorithm.

CQ

CQ refers to processing Quantum_ data using _Classical machine learning algorithms. This is an active area of investigation, with classical machine learning algorithms used in many areas in the quantum computing, such as qubit characterization, control and readout.

QC

QC refers to processing Classical_ data using _Quantum machine learning algorithms, and will be what this chapter focuses on.

QQ

QQ refers to processing Quantum_ data using _Quantum machine learning algorithms. This is an interesting topic, but very much still in its infancy.

minicomposer

q-mini-composer(goal="minicomposer")
    .slide
        .circuit
            .autoMeasureGate
            .availableGates H X Z
            .initialCircuit
                .qubit
            .goalCircuit
                .qubit H
            .startProbabilities 0: 1, 1: 0
            .endProbabilities 0: 0.5, 1: 0.5
        .instructions first slide instructions
        .lesson this is the lesson on the first slide
        .info congratulations! 1º slide
    .slide
        .circuit
            .autoMeasureGate
            .availableGates H
            .initialCircuit
                .qubit H
                .qubit H H
            .goalCircuit
                .qubit H H
                .qubit H H
            .startProbabilities 00: 0.5, 01: 0.5, 10: 0, 11: 0
            .endProbabilities 00: 0.25, 01: 0.25, 10: 0.25, 11: 0.25
        .instructions second slide instructions
        .lesson this is the lesson on the second slide
        .info congratulations! 2º slide
    .slide
        .circuit
            .availableGates Measure Measure
            .initialCircuit
                .qubit H
                .qubit H H
            .goalCircuit
                .qubit H Measure
                .qubit H H Measure
            .startProbabilities 00: 0, 01: 0, 10: 0, 11: 0
            .endProbabilities 00: 0.5, 01: 0.5, 10: 0, 11: 0
        .instructions third slide instructions
        .lesson this is the lesson on the third slide
        .info congratulations! 3º slide
    .slide
        .circuit
            .availableGates H H Measure Measure
            .initialCircuit
                .qubit H
                .qubit H H
            .goalCircuit
                .qubit H H
                .qubit H H H Measure
            .startProbabilities 00: 0, 01: 0, 10: 0, 11: 0
            .endProbabilities 00: 0, 01: 0, 10: 0.5, 11: 0.5
        .instructions fourth slide instructions
        .lesson this is the lesson on the fourth slide
        .info congratulations! 4º slide
    .slide
        .circuit
            .availableGates RX(theta) RZ(phi) RX(a) RZ
            .initialCircuit
                .qubit 
                .qubit 
            .goalCircuit
                .qubit RX(theta) RX(a)
                .qubit RZ(phi) RZ
        .instructions Both RXs on the first qubit and RZs on the second
        .lesson this is the lesson on the fifth slide
        .info congratulations! 5º slide

Carousel

q-carousel
    div.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non libero pharetra, feugiat tortor ac, hendrerit est. Suspendisse potenti.
    div.
        Nulla vitae turpis a orci luctus gravida. Fusce scelerisque consectetur augue eget vulputate. Aenean quis velit luctus, feugiat nisl posuere.
    div.
        Maecenas ornare nunc quis viverra mollis. Vestibulum ultricies diam at venenatis sodales. Cras auctor lectus felis, nec accumsan mauris.

 

Layers circuit

q-layers-circuit

 

What is quantum volume

q-what-is-quantum-volume(goal="wiqv")

 

Drag and drop code

q-drag-and-drop-code
    .line def fib(num):
        .line if num <= 1:
            .line return num
        .line else:
            .line return fib(num - 1) + fib(num - 2)
    .result-info.md Fibonacci Sequence

Quiz

q-quiz(goal="quiz1")
    .option(x) This is the correct answer
    .option.md This is an example with math notation: $\frac{\class{qv_nh}{n_h}}{\class{qv_nc}{n_c}\class{qv_ns}{n_s}}\gt{\frac{2}{3}}$
    .option This is a multiline example: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quiz with side text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1. This is the correct answer

2. This is an example with math notation: ParseError: KaTeX parse error: Undefined control sequence: \class at position 7: \frac{\̲c̲l̲a̲s̲s̲{qv_nh}{n_h}}{\…

3. This is a multiline example: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

Binary Demo

Binary Title

q-binary