Custom libraries in head of gr.HTML

[aliabid94]

Add head= support to gr.HTML to support third party libraries.

    head_html = gr.HTML(
        value=[30, 70, 45, 90, 60],
        html_template="""
        <canvas id="head-chart" width="300" height="200"></canvas>
        """,
        js_on_load="""
        const canvas = element.querySelector('#head-chart');
        new Chart(canvas, {
            type: 'bar',
            data: {
                labels: props.value.map((_, i) => 'Item ' + (i + 1)),
                datasets: [{
                    label: 'Values',
                    data: props.value,
                    backgroundColor: 'rgba(99, 132, 255, 0.5)',
                }]
            },
            options: { responsive: false }
        });
        """,
        head='<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>',
        elem_id="head_demo",
    )

[aliabid94]

Passing value to the chart.js example in super_html was causing some conflict with the proxying we do in gr.html to the props object, so now we do this deep copying to fix this bug.

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/8c0a6d239cd70a8dddc85da2a5166c63b59d0ca7/gradio-6.9.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@8c0a6d239cd70a8dddc85da2a5166c63b59d0ca7#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/8c0a6d239cd70a8dddc85da2a5166c63b59d0ca7/gradio-client-2.1.0.tgz

[freddyaboulton]

LGTM but I think we should use $state.snapshot instead of plain_props/plain_value. It is the svelte 5 idiomatic way to turn the proxy object into a plain value and we shouldn't need to re-implement it ourselves.

Ty for updating the skills and the docs!

[pngwn]

Why don't we use <svelte:head > here? It will add / remove the elements correctly when the component is added/ removed, ensuring we don't have any memory leaks and is a bit easier to reason about in code.