function my_func() {{
        var snapshots = "{}";
        var referenceVideoSnapshots = "{}";

        // Split the string by ";"
        var segments = snapshots.split(";");
        var referenceVideoSegments = referenceVideoSnapshots.split(";");

        var index = 0;

        // step 1. the generated demo video list        
        //#component-37 > div.wrap.svelte-w5wajl > video
        //match selector on ModelScope: #component-45 > div.wrap.svelte-w5wajl > video
        //match selector on localhost: #component-47 > div.wrap.svelte-lcpz3o > div:nth-child(1) > video
        var specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > video');

        // If no videos found by modelScope rule, try localhost rule
        if (specificVideos.length === 0) {{
            specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > div:nth-child(1) > video');
        }}

        // Loop through the NodeList of specific video elements
        specificVideos.forEach(function(video) {{
            //var videoSelector = "#component-37 > div.wrap > div:nth-child(" + index + ") > video";
            //var videoElement = document.querySelector(videoSelector);
            var videoElement = video;
                
            if (videoElement) {{
                videoElement.poster = segments[index];
                //videoElement.autoplay = true;
                
                videoElement.id = "myvideo_" + index;
                videoElement.setAttribute("playsinline", "");
                videoElement.setAttribute("muted", "");
            }} else {{
                console.error('Video element not found');
            }}

            index = index + 1;
        }});

        // step 2: reference video list
        // for local rule to match reference videos:
        //#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > div > video
        //#component-24 > div.gallery.svelte-13hsdno > button:nth-child(2) > div > video
        // for modelscope 
        //#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > video
        var referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > video');
        // If no videos found by modelScope rule, try localhost rule
        if (referenceVideos.length === 0) {{
            referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > div > video');
        }}

        index = 0;
        referenceVideos.forEach(function(video) {{
            var videoElement = video;
                
            if (videoElement) {{
                videoElement.poster = referenceVideoSegments[index];
                //videoElement.autoplay = true;
                
                videoElement.id = "refvideo_" + index;
                videoElement.setAttribute("playsinline", "");
                videoElement.setAttribute("muted", "");

                  // Add a click event listener to the video element
                videoElement.addEventListener('click', function() {{
                    
                    setTimeout(() => {{
                        // Select the video element, and create an oberservor for listening to the src update:
                        var selectedVideoElement = document.querySelector('#show_window_video > div.wrap > video');
                        // If no videos found by modelScope rule, try localhost rule
                        if (selectedVideoElement === null) {{
                            selectedVideoElement = document.querySelector('#show_window_video > div.wrap > div > video');
                        }}

                        if (selectedVideoElement) {{
                            selectedVideoElement.poster = videoElement.poster;
                            //selectedVideoElement.autoplay = true;
                            selectedVideoElement.setAttribute("autoplay", "");
                            selectedVideoElement.setAttribute("playsinline", "");
                            selectedVideoElement.setAttribute("muted", "");
                            //selectedVideoElement.width = 210;  
                            //selectedVideoElement.height = 245; 

                            const userAgent = navigator.userAgent;

                            // Check for WeChat Mobile Browser
                            if (/MicroMessenger/i.test(userAgent)) {{
                                selectedVideoElement.load();
                            }}
                            // Check for any Mobile Device
                            else if (/Mobi/i.test(userAgent)) {{
                                selectedVideoElement.load();
                            }}
                            
                            console.error('poster updated');
                        }}else {{
                            console.error('No video element found for selectedVideoElement!!!');
                        }}
                    }}, 500)

                }});
            }} else {{
                console.error('Video element not found');
            }}

            index = index + 1;
        }});


        // step 3. 
        // select the target node
        var result_box = document.querySelector('#show_box2');

        // Get the button element by its ID
        var refresh_button = document.querySelector('#button_param1');

        function updateVideoSnapshot() {{
                const userAgent = navigator.userAgent;

                // Check for WeChat Mobile Browser or any Mobile Device
                if (/MicroMessenger/i.test(userAgent) || /Mobi/i.test(userAgent)) {{
                    // Do something if on WeChat or a mobile device
                    console.error('on mobile');
                }} else{{
                    console.error('on pc');
                    return ;
                }}

                videoDiv1 = document.querySelector('#show_window_result1');

                // Try to find the video element using a less specific selector
                video1 = videoDiv1.querySelector('video');

                if (video1) {{
                    // #output_snapshot_image1 > button > img
                    var snapshoptImage = document.querySelector('#output_snapshot_image1 button img');
                    if(snapshoptImage && video1.poster !== snapshoptImage.src){{
                        video1.poster = snapshoptImage.src;
                        video1.setAttribute("autoplay", "autoplay");
                        video1.setAttribute("playsinline", "playsinline");
                        video1.setAttribute("muted", "muted");
                    }}
                }}

                videoDiv2 = document.querySelector('#show_window_result2');
                //video2 = document.querySelector('#show_window_result2 > div.wrap > video');
                video2 = videoDiv2.querySelector('video');

                if (video2 === null) {{
                    videoDiv2.hidden = true;
                }} else {{
                    videoDiv2.hidden = false;
                    // #output_snapshot_image2 > button > img
                    var snapshoptImage = document.querySelector('#output_snapshot_image2 > button > img');
                    if(snapshoptImage && video2.poster !== snapshoptImage.src){{
                        video2.poster = snapshoptImage.src;
                        video2.setAttribute("autoplay", "autoplay");
                        video2.setAttribute("playsinline", "playsinline");
                        video2.setAttribute("muted", "muted");
                    }}
                }}

                videoDiv3 = document.querySelector('#show_window_result3');
                video3 = videoDiv3.querySelector('video');

                
                if (video3 === null) {{
                    videoDiv3.hidden = true;
                }} else {{
                    videoDiv3.hidden = false;
                    // #output_snapshot_image3 > button > img
                    var snapshoptImage = document.querySelector('#output_snapshot_image3 > button > img');
                    if(snapshoptImage && video3.poster !== snapshoptImage.src){{
                        video3.poster = snapshoptImage.src;
                        video3.setAttribute("autoplay", "autoplay");
                        video3.setAttribute("playsinline", "playsinline");
                        video3.setAttribute("muted", "muted");
                    }}
                }}

                videoDiv4 = document.querySelector('#show_window_result4');
                video4 = videoDiv4.querySelector('video');
                
                if (video4 === null) {{
                    videoDiv4.hidden = true;
                }} else {{
                    videoDiv4.hidden = false;

                    // #output_snapshot_image4 > button > img
                    var snapshoptImage = document.querySelector('#output_snapshot_image4 > button > img');
                    if(snapshoptImage && video4.poster !== snapshoptImage.src){{
                        video4.poster = snapshoptImage.src;
                        video4.setAttribute("autoplay", "autoplay");
                        video4.setAttribute("playsinline", "playsinline");
                        video4.setAttribute("muted", "muted");
                    }}
                }}
        }}

        // Define the action to be taken when the button is clicked
        function handleButtonClick() {{
            setTimeout(() => {{
                console.error('Refresh button clicked');
                updateVideoSnapshot();
            }}, 3600);

            setTimeout(() => {{
                updateVideoSnapshot();
            }}, 5000) 

            setTimeout(() => {{
                updateVideoSnapshot();
            }}, 8000) 
        }}



        // Add click event listener to the button
        refresh_button.addEventListener('click', handleButtonClick);

        
    }}