Plotlyで量子コンピュータのカップリングマップを可視化してみた🖌️
カップリングマップとは
物理的に相互作用できる量子ビットのペアのことをカップリングと呼びます。
多くの量子コンピュータでは、この相互作用を利用してCNOTゲートなどの2量子ゲートを実装します。
量子コンピュータは複数のカップリングから構成されており、それらがどのように結合されているか表すグラフ構造がカップリングマップです。
ノードが量子ビットに対応して、個々のカップリングがエッジに対応します。
本記事の動機
カップリングマップを可視化するための既存のツールでは、Qiskitの提供するplot_coupling_mapがポピュラーです。
以下のように、カップリングのリストと量子ビットの座標を指定することで、簡単にカップリングマップを可視化することができます。
from qiskit.visualization import plot_coupling_map
num_qubits = 3
qubit_coordinates = [[1, 0], [1, 1], [0, 0]]
coupling_map = [[0, 1], [0, 2], [1, 2]]
plot_coupling_map(num_qubits, qubit_coordinates, coupling_map, filename="coupling_map.png")
plot_coupling_mapは大変使いやすいのですが、一方で、トポロジー以外の情報を可視化することにあまり向いていません。
実際の量子コンピュータでは、個々の量子ビット及びカップリングはそれぞれ特性が異なります。例えば、ゲート操作の忠実度や読み出しの忠実度、T1、T2といったコヒーレンス時間などが異なります。
そのため、カップリングマップを可視化する際に、トポロジーだけでなく、物理的な特性も同時に可視化できた方が（個人的には）嬉しいです。
Plotlyでカップリングマップを描く
そこで、インタラクティブでハイクオリティな可視化ができるPythonライブラリ Plotly を利用して、カップリングマップを描画するツールを作成しました。
（作成したと言っても、AIにあーでもないこーでもないと注文を付けてただけですが…）
画像ファイルでは表示できる情報量に限界があるため、今回はインタラクティブな操作のできるHTMLファイルとしてカップリングマップを可視化しました。
今回作成したツールのデモページはこちらです。
特長1: マウスホバーで量子ビット/カップリングの情報を表示
1つ目の特徴はマウスホバーで量子ビットやカップリングのプロパティを確認できる点です。
これにより、スッキリとした見た目をキープしつつも、詳細な情報をインタラクティブに確認することができます。
特長2: 量子ビット/カップリングのパラメータに応じたカラースケール
2つ目の特徴は、量子ビットやカップリングの特性を表すパラメータ（ゲート操作/読み出しの忠実度やT1・T2、量子ビットの固有周波数など）に応じて、カラースケールを変更できる機能です。
これにより、注目したい特性の傾向を視覚的に把握することができます。
使い方
以下が使用例です。
ノードやエッジの情報は引数として与え、描画に関する設定はTOMLファイルに記載する形式になっています。
from plotly_coupling_map import plotly_coupling_map
# 量子ビット定義
qubits = [0, 1, 2, 3]
# ノードの位置
node_positions = {
0: (0, 0),
1: (1, 0),
2: (0, 1),
3: (1, 1),
}
# エッジ（接続）
edges = [(0, 1), (0, 2), (1, 2), (2, 3)]
# ノードのプロパティ
node_props = {
0: {"1q_fidelity": 0.998, "t1": 80, "t2": 70, "readout_error": 0.02},
1: {"1q_fidelity": 0.997, "t1": 70, "t2": 60, "readout_error": 0.021},
2: {"1q_fidelity": 0.996, "t1": 85, "t2": 75, "readout_error": 0.019},
3: {"1q_fidelity": 0.995, "t1": 75, "t2": 65, "readout_error": 0.022},
}
# エッジのプロパティ
edge_props = {
(0, 1): {"2q_fidelity": 0.99, "gate_error": 0.01, "duration_ns": 200},
(0, 2): {"2q_fidelity": 0.995, "gate_error": 0.005, "duration_ns": 220},
(1, 2): {"2q_fidelity": 0.992, "gate_error": 0.008, "duration_ns": 210},
(2, 3): {"2q_fidelity": 0.991, "gate_error": 0.009, "duration_ns": 215},
}
# カップリングマップを生成
plotly_coupling_map(
qubits=qubits,
node_positions=node_positions,
edges=edges,
node_props=node_props,
edge_props=edge_props,
filename="./coupling_map.html",
config_file="./config.toml",
)
[plot]
title = "Coupling Map"
# 表示するパラメータ
node_color_key = "1q_fidelity"
edge_color_key = "2q_fidelity"
edge_label_key = "2q_fidelity"
# ドロップダウンで切り替えるパラメータ
edge_color_keys = ["2q_fidelity", "gate_error", "duration_ns"]
node_color_keys = ["1q_fidelity", "readout_error", "t1", "t2"]
# カラースケール設定
colorscale = "plasma_r"
colorscale_range = [0.5, 1.0]
# 図のサイズ
figure_width = 900
figure_height = 600
# パラメータごとの詳細設定
[plot.node_color_params.1q_fidelity]
colorscale = "plasma_r"
colorscale_range = [0.5, 1.0]
cmin = 0.99
cmax = 1.0
おわりに
富士通が2026年に1024量子ビットの量子コンピュータを作るそう[1]なので、1024量子ビットを可視化してみました。
1024量子ビットのデモページはこちらです。
もはや何がなんだかわかりませんね...😅
Discussion