Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
NVIDIA
GitHub Repository: NVIDIA/cuda-q-academic
 Path: blob/main/qec101/Images/noisy/trajectory_widget.py
1128 views
1
import ipywidgets as widgets

2
from IPython.display import display

3


4
# NVIDIA green

5
_NV_GREEN = "#76b900"

6


7
TREE_STYLE = f"""

8
<style>

9
.tree-wrapper {{

10
  width: 100%;        /* full page width */

11
  overflow: hidden;    /* no scrollbar */

12
}}

13
.tree {{

14
  transform: scale(0.75);       /* shrink to 75% */

15
  transform-origin: top left;

16
}}

17
.tree ul {{ position: relative; padding-top: 20px; white-space: nowrap; }}

18
.tree li {{

19
  display: inline-block; vertical-align: top; text-align: center;

20
  list-style: none; position: relative; padding: 15px 3px 0;

21
}}

22
.tree li::before, .tree li::after {{

23
  content: ''; position: absolute; top: 0; right:50%;

24
  border-top:1px solid #ccc; width:50%; height:20px;

25
}}

26
.tree li::after {{

27
  left:50%; right:auto; border-left:1px solid #ccc;

28
}}

29
.tree li:only-child::before, .tree li:only-child::after {{ display:none; }}

30
.tree li:first-child::before, .tree li:last-child::after {{ border:none; }}

31
.tree li:last-child::before {{

32
  border-right:1px solid #ccc; border-radius:0 5px 0 0;

33
}}

34
.tree li:first-child::after {{ border-radius:5px 0 0 0; }}

35
.tree ul ul::before {{

36
  content:''; position:absolute; top:0; left:50%;

37
  border-left:1px solid #ccc; height:20px;

38
}}

39
.node {{

40
  border:1px solid #ccc; background:#f5f5f5;

41
  padding:8px 12px; border-radius:5px;

42
  display:inline-block; transition:all 0.3s;

43
  font-size: 14px;       /* main text bigger */

44
}}

45
.node small {{

46
  display:block;         /* force prob onto its own line */

47
  margin-top:4px;

48
  font-size:12px;        /* prob text */

49
  color: #333;

50
}}

51
.active > .node {{

52
  background:{_NV_GREEN};

53
  border-color:{_NV_GREEN};

54
  color:#fff;

55
}}

56
</style>

57
"""

58


59
def show_error_tree_widget():

60
    p_slider = widgets.FloatSlider(

61
        description="P(error):", min=0.0, max=0.20, step=0.01, value=0.1,

62
        continuous_update=False

63
    )

64
    q1 = widgets.ToggleButtons(description="Qubit 1:", options=[("No Error",0),("Error",1)])

65
    q2 = widgets.ToggleButtons(description="Qubit 2:", options=[("No Error",0),("Error",1)])

66
    q3 = widgets.ToggleButtons(description="Qubit 3:", options=[("No Error",0),("Error",1)])

67
    tree_out = widgets.HTML()

68


69
    def _redraw(change=None):

70
        pp = p_slider.value

71
        html = TREE_STYLE

72
        html += "<div class='tree-wrapper'><div class='tree'><ul>"

73
        for b1 in (0,1):

74
            a1 = (b1 == q1.value)

75
            html += f"<li class='{'active' if a1 else ''}'>"

76
            html += f"<div class='node'>Q1={b1}</div><ul>"

77
            for b2 in (0,1):

78
                a2 = a1 and (b2 == q2.value)

79
                html += f"<li class='{'active' if a2 else ''}'>"

80
                html += f"<div class='node'>Q2={b2}</div><ul>"

81
                for b3 in (0,1):

82
                    a3 = a2 and (b3 == q3.value)

83
                    n = b1 + b2 + b3

84
                    k = 3 - n

85
                    prob = (pp**n) * ((1-pp)**k)

86
                    leaf_html = (

87
                        f"{b1}{b2}{b3}"

88
                        f"<small>P(state) = {prob:.3f}</small>"

89
                    )

90
                    html += f"<li class='{'active' if a3 else ''}'>"

91
                    html += f"<div class='node'>{leaf_html}</div></li>"

92
                html += "</ul></li>"

93
            html += "</ul></li>"

94
        html += "</ul></div></div>"

95
        tree_out.value = html

96


97
    for w in (p_slider, q1, q2, q3):

98
        w.observe(_redraw, names="value")

99
    _redraw()

100


101
    return widgets.VBox([p_slider, q1, q2, q3, tree_out])

102


103