Adding a plotly plot into an HTML file recreated in python

I want to create html reports with tables and plots using Python.

Doing something like this

import pandas as pd

# 1. Set up multiple variables to store the titles, text within the report
page_title_text='Infern - 19/04/22'
title_text = 'Infern - 19/04/22'
text = 'Hello, welcome to your report!'
prices_text = 'Text 1'
stats_text = 'Summary statistics'

df = pd.read_csv('prueba.csv')

# 2. Combine them together using a long f-string
html = f'''
    <html>
        <head>
            <title>{page_title_text}</title>
        </head>
        <body>
            <h1>{title_text}</h1>
            <p>{text}</p>
            <img src='chart.png' width="700">
            <h2>{prices_text}</h2>
            {df.tail(3).to_html()}
            <h2>{stats_text}</h2>
            {df.head(1).to_html()}
        </body>
    </html>
    '''
# 3. Write the html string as an HTML file
with open('html_report2.html', 'w') as f:
    f.write(html)

Since here, no problem.

But now I want to add some plots using Plotly.

I found an example as this code that works nice,

import plotly

# create a simple plot
bar = plotly.graph_objs.Bar(x=['giraffes', 'orangutans', 'monkeys'], 
                            y=[20, 14, 23])
layout = plotly.graph_objs.Layout()
fig = plotly.graph_objs.Figure([bar], layout)

# convert it to JSON
fig_json = fig.to_json()

# a simple HTML template
template = """<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id='divPlotly'></div>
    <script>
        var plotly_data = {}
        Plotly.react('divPlotly', plotly_data.data, plotly_data.layout);
    </script>
</body>

</html>"""

# write the JSON to the HTML template
with open('new_plot.html', 'w') as f:
    f.write(template.format(fig_json))

But now, if I want to add this into my big f-string I have some problems. Because I need to modify the line var plotly_data = {}. How I have to do it? Now I'm doing var plotly_data = {{}} but if I do this, the plot appears empty.

This is my code right now,

import pandas as pd

import plotly

# 1. Set up multiple variables to store the titles, text within the report
page_title_text='Infern - 19/04/22'
title_text = 'Infern - 19/04/22'
text = 'Hello, welcome to your report!'
prices_text = 'Text 1'
stats_text = 'Summary statistics'

df = pd.read_csv('prueba.csv')

# 2. Combine them together using a long f-string
html = f'''
    <html>
        <head>
            <title>{page_title_text}</title>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        </head>
        <body>
            <h1>{title_text}</h1>
            <p>{text}</p>
            <img src='chart.png' width="700">
            <h2>{prices_text}</h2>
            {df.tail(3).to_html()}
            <h2>{stats_text}</h2>
            {df.head(1).to_html()}
            <h2> Plotly chart </h2>
            <div id='divPlotly'></div>
            <script>
                var plotly_data = {{}}
                Plotly.react('divPlotly', plotly_data.data, plotly_data.layout);
            </script>
        </body>
    </html>
    '''
# 3. Write the html string as an HTML file
with open('html_report2.html', 'w') as f:
    f.write(html)