Spaces:
Runtime error
Runtime error
Upload script.txt
Browse files- script.txt +224 -0
script.txt
ADDED
@@ -0,0 +1,224 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
function my_func() {{
|
2 |
+
var snapshots = "{}";
|
3 |
+
var referenceVideoSnapshots = "{}";
|
4 |
+
|
5 |
+
// Split the string by ";"
|
6 |
+
var segments = snapshots.split(";");
|
7 |
+
var referenceVideoSegments = referenceVideoSnapshots.split(";");
|
8 |
+
|
9 |
+
var index = 0;
|
10 |
+
|
11 |
+
// step 1. the generated demo video list
|
12 |
+
//#component-37 > div.wrap.svelte-w5wajl > video
|
13 |
+
//match selector on ModelScope: #component-45 > div.wrap.svelte-w5wajl > video
|
14 |
+
//match selector on localhost: #component-47 > div.wrap.svelte-lcpz3o > div:nth-child(1) > video
|
15 |
+
var specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > video');
|
16 |
+
|
17 |
+
// If no videos found by modelScope rule, try localhost rule
|
18 |
+
if (specificVideos.length === 0) {{
|
19 |
+
specificVideos = document.querySelectorAll('[id^="component-"] > div.wrap > div:nth-child(1) > video');
|
20 |
+
}}
|
21 |
+
|
22 |
+
// Loop through the NodeList of specific video elements
|
23 |
+
specificVideos.forEach(function(video) {{
|
24 |
+
//var videoSelector = "#component-37 > div.wrap > div:nth-child(" + index + ") > video";
|
25 |
+
//var videoElement = document.querySelector(videoSelector);
|
26 |
+
var videoElement = video;
|
27 |
+
|
28 |
+
if (videoElement) {{
|
29 |
+
videoElement.poster = segments[index];
|
30 |
+
//videoElement.autoplay = true;
|
31 |
+
|
32 |
+
videoElement.id = "myvideo_" + index;
|
33 |
+
videoElement.setAttribute("playsinline", "");
|
34 |
+
videoElement.setAttribute("muted", "");
|
35 |
+
}} else {{
|
36 |
+
console.error('Video element not found');
|
37 |
+
}}
|
38 |
+
|
39 |
+
index = index + 1;
|
40 |
+
}});
|
41 |
+
|
42 |
+
// step 2: reference video list
|
43 |
+
// for local rule to match reference videos:
|
44 |
+
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > div > video
|
45 |
+
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(2) > div > video
|
46 |
+
// for modelscope
|
47 |
+
//#component-24 > div.gallery.svelte-13hsdno > button:nth-child(1) > video
|
48 |
+
var referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > video');
|
49 |
+
// If no videos found by modelScope rule, try localhost rule
|
50 |
+
if (referenceVideos.length === 0) {{
|
51 |
+
referenceVideos = document.querySelectorAll('[id^="component-"] > div.gallery > button > div > video');
|
52 |
+
}}
|
53 |
+
|
54 |
+
index = 0;
|
55 |
+
referenceVideos.forEach(function(video) {{
|
56 |
+
var videoElement = video;
|
57 |
+
|
58 |
+
if (videoElement) {{
|
59 |
+
videoElement.poster = referenceVideoSegments[index];
|
60 |
+
//videoElement.autoplay = true;
|
61 |
+
|
62 |
+
videoElement.id = "refvideo_" + index;
|
63 |
+
videoElement.setAttribute("playsinline", "");
|
64 |
+
videoElement.setAttribute("muted", "");
|
65 |
+
|
66 |
+
// Add a click event listener to the video element
|
67 |
+
videoElement.addEventListener('click', function() {{
|
68 |
+
|
69 |
+
setTimeout(() => {{
|
70 |
+
// Select the video element, and create an oberservor for listening to the src update:
|
71 |
+
var selectedVideoElement = document.querySelector('#show_window_video > div.wrap > video');
|
72 |
+
// If no videos found by modelScope rule, try localhost rule
|
73 |
+
if (selectedVideoElement === null) {{
|
74 |
+
selectedVideoElement = document.querySelector('#show_window_video > div.wrap > div > video');
|
75 |
+
}}
|
76 |
+
|
77 |
+
if (selectedVideoElement) {{
|
78 |
+
selectedVideoElement.poster = videoElement.poster;
|
79 |
+
//selectedVideoElement.autoplay = true;
|
80 |
+
selectedVideoElement.setAttribute("autoplay", "");
|
81 |
+
selectedVideoElement.setAttribute("playsinline", "");
|
82 |
+
selectedVideoElement.setAttribute("muted", "");
|
83 |
+
//selectedVideoElement.width = 210;
|
84 |
+
//selectedVideoElement.height = 245;
|
85 |
+
|
86 |
+
const userAgent = navigator.userAgent;
|
87 |
+
|
88 |
+
// Check for WeChat Mobile Browser
|
89 |
+
if (/MicroMessenger/i.test(userAgent)) {{
|
90 |
+
selectedVideoElement.load();
|
91 |
+
}}
|
92 |
+
// Check for any Mobile Device
|
93 |
+
else if (/Mobi/i.test(userAgent)) {{
|
94 |
+
selectedVideoElement.load();
|
95 |
+
}}
|
96 |
+
|
97 |
+
console.error('poster updated');
|
98 |
+
}}else {{
|
99 |
+
console.error('No video element found for selectedVideoElement!!!');
|
100 |
+
}}
|
101 |
+
}}, 500)
|
102 |
+
|
103 |
+
}});
|
104 |
+
}} else {{
|
105 |
+
console.error('Video element not found');
|
106 |
+
}}
|
107 |
+
|
108 |
+
index = index + 1;
|
109 |
+
}});
|
110 |
+
|
111 |
+
|
112 |
+
// step 3.
|
113 |
+
// select the target node
|
114 |
+
var result_box = document.querySelector('#show_box2');
|
115 |
+
|
116 |
+
// Get the button element by its ID
|
117 |
+
var refresh_button = document.querySelector('#button_param1');
|
118 |
+
|
119 |
+
function updateVideoSnapshot() {{
|
120 |
+
const userAgent = navigator.userAgent;
|
121 |
+
|
122 |
+
// Check for WeChat Mobile Browser or any Mobile Device
|
123 |
+
if (/MicroMessenger/i.test(userAgent) || /Mobi/i.test(userAgent)) {{
|
124 |
+
// Do something if on WeChat or a mobile device
|
125 |
+
console.error('on mobile');
|
126 |
+
}} else{{
|
127 |
+
console.error('on pc');
|
128 |
+
return ;
|
129 |
+
}}
|
130 |
+
|
131 |
+
videoDiv1 = document.querySelector('#show_window_result1');
|
132 |
+
|
133 |
+
// Try to find the video element using a less specific selector
|
134 |
+
video1 = videoDiv1.querySelector('video');
|
135 |
+
|
136 |
+
if (video1) {{
|
137 |
+
// #output_snapshot_image1 > button > img
|
138 |
+
var snapshoptImage = document.querySelector('#output_snapshot_image1 button img');
|
139 |
+
if(snapshoptImage && video1.poster !== snapshoptImage.src){{
|
140 |
+
video1.poster = snapshoptImage.src;
|
141 |
+
video1.setAttribute("autoplay", "autoplay");
|
142 |
+
video1.setAttribute("playsinline", "playsinline");
|
143 |
+
video1.setAttribute("muted", "muted");
|
144 |
+
}}
|
145 |
+
}}
|
146 |
+
|
147 |
+
videoDiv2 = document.querySelector('#show_window_result2');
|
148 |
+
//video2 = document.querySelector('#show_window_result2 > div.wrap > video');
|
149 |
+
video2 = videoDiv2.querySelector('video');
|
150 |
+
|
151 |
+
if (video2 === null) {{
|
152 |
+
videoDiv2.hidden = true;
|
153 |
+
}} else {{
|
154 |
+
videoDiv2.hidden = false;
|
155 |
+
// #output_snapshot_image2 > button > img
|
156 |
+
var snapshoptImage = document.querySelector('#output_snapshot_image2 > button > img');
|
157 |
+
if(snapshoptImage && video2.poster !== snapshoptImage.src){{
|
158 |
+
video2.poster = snapshoptImage.src;
|
159 |
+
video2.setAttribute("autoplay", "autoplay");
|
160 |
+
video2.setAttribute("playsinline", "playsinline");
|
161 |
+
video2.setAttribute("muted", "muted");
|
162 |
+
}}
|
163 |
+
}}
|
164 |
+
|
165 |
+
videoDiv3 = document.querySelector('#show_window_result3');
|
166 |
+
video3 = videoDiv3.querySelector('video');
|
167 |
+
|
168 |
+
|
169 |
+
if (video3 === null) {{
|
170 |
+
videoDiv3.hidden = true;
|
171 |
+
}} else {{
|
172 |
+
videoDiv3.hidden = false;
|
173 |
+
// #output_snapshot_image3 > button > img
|
174 |
+
var snapshoptImage = document.querySelector('#output_snapshot_image3 > button > img');
|
175 |
+
if(snapshoptImage && video3.poster !== snapshoptImage.src){{
|
176 |
+
video3.poster = snapshoptImage.src;
|
177 |
+
video3.setAttribute("autoplay", "autoplay");
|
178 |
+
video3.setAttribute("playsinline", "playsinline");
|
179 |
+
video3.setAttribute("muted", "muted");
|
180 |
+
}}
|
181 |
+
}}
|
182 |
+
|
183 |
+
videoDiv4 = document.querySelector('#show_window_result4');
|
184 |
+
video4 = videoDiv4.querySelector('video');
|
185 |
+
|
186 |
+
if (video4 === null) {{
|
187 |
+
videoDiv4.hidden = true;
|
188 |
+
}} else {{
|
189 |
+
videoDiv4.hidden = false;
|
190 |
+
|
191 |
+
// #output_snapshot_image4 > button > img
|
192 |
+
var snapshoptImage = document.querySelector('#output_snapshot_image4 > button > img');
|
193 |
+
if(snapshoptImage && video4.poster !== snapshoptImage.src){{
|
194 |
+
video4.poster = snapshoptImage.src;
|
195 |
+
video4.setAttribute("autoplay", "autoplay");
|
196 |
+
video4.setAttribute("playsinline", "playsinline");
|
197 |
+
video4.setAttribute("muted", "muted");
|
198 |
+
}}
|
199 |
+
}}
|
200 |
+
}}
|
201 |
+
|
202 |
+
// Define the action to be taken when the button is clicked
|
203 |
+
function handleButtonClick() {{
|
204 |
+
setTimeout(() => {{
|
205 |
+
console.error('Refresh button clicked');
|
206 |
+
updateVideoSnapshot();
|
207 |
+
}}, 3600);
|
208 |
+
|
209 |
+
setTimeout(() => {{
|
210 |
+
updateVideoSnapshot();
|
211 |
+
}}, 5000)
|
212 |
+
|
213 |
+
setTimeout(() => {{
|
214 |
+
updateVideoSnapshot();
|
215 |
+
}}, 8000)
|
216 |
+
}}
|
217 |
+
|
218 |
+
|
219 |
+
|
220 |
+
// Add click event listener to the button
|
221 |
+
refresh_button.addEventListener('click', handleButtonClick);
|
222 |
+
|
223 |
+
|
224 |
+
}}
|