Plotly annotated heatmap with multi index columns - Python

I am trying to build a heatmap chart with two level column indexing. Here is some dummy data and the result I am getting so far.

import pandas as pd
import plotly.figure_factory as ff

df = pd.DataFrame({'part': ['one', 'one', 'one', 'two',
                           'two', 'two', 'two', 'two', 'one', 'two', 'one', 'one'],
                   'segment': ['Aa', 'Bb', 'Cc', 'Aa', 'Bb', 'Cc',
                           'Aa', 'Bb', 'Bb', 'Dd', 'Dd', 'Dd'],
                   'score': ['Up', 'Low', 'Low', 'Low', 'Up', 'Up',
                           'Up', 'Up', 'Up', 'Low', 'Low', 'Low'],                   
                   'foo': [10, 12, 7, 4, 8, 7, 11, 8, 10, 17, 8, 12]})

df = df.groupby(['part', 'segment', 'score'])['foo'].count()
df = df.unstack(level=-2).T

fig = ff.create_annotated_heatmap(df.values.tolist(),
                                  x=df.columns.tolist(),
                                  y=df.index.tolist())
fig.show()

How properly to set up Column indexing? X-axis. So it would be more like this

And proper Z-axis annotation.

I will appreciate any thoughts and ideas.

Thank you!