How to host HTML page with CDN in Gradio? – Blancer.com Tutorials and projects

I am building an Gradio that visualises the data using Google charts CDN.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

The HTML I use:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['competitor', 'count'],
            ['appeared', 9],
            ['not appeared', 6]
        ]);

        var options = {
          title: 'Netflix vs Prime'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

And hosted it using the gradio:


import gradio as gr

with gr.Blocks(
    theme=gr.themes.Soft()
    ) as demo:
    template1 = open("templates/sample2.html").read()
    insights = gr.HTML(template1)
    insights.render()

demo.launch()

I could only see:

{
  "detail": "Not Found"
}

Kindly, let me know if you have faced any of these issues and solved earlier?