Spaces:
Running
Running
File size: 1,796 Bytes
80fd73c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<style>
h1 {
align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 10px;
/* add spacing between items */
}
a {
text-align: center;
display: block;
}
</style>
<body>
<h1 align="center">WebAI Demos (Gallery Mode)</h1>
<script src="demos.js"></script>
<script>
"use strict";
const demosElem = document.createElement('div');
document.body.appendChild(demosElem);
demosElem.style.width = screen.width;
demosElem.style.height = screen.height;
for (const { name, description, demos } of categoryDemos) {
const ul = document.createElement('ul');
const h2 = document.createElement('h2');
h2.textContent = name;
ul.appendChild(h2);
for (const [key, demoInfo] of Object.entries(demos)) {
const li = document.createElement('li');
const video = document.createElement('video');
video.width = 600;
video.height = 600;
if (demoInfo.video) {
video.src = `demos/${key}/${demoInfo.video}`;
} else {
video.src = 'video-na.mp4';
}
video.autoplay = true;
video.muted = true;
video.loop = true;
video.controls = true;
const a = document.createElement('a');
a.href = `demos/${demoInfo.filename}`;
a.textContent = `${demoInfo.name || key}${demoInfo.openInNewTab ? '' : ''}`;
a.style.fontSize = 28;
if (demoInfo.openInNewTab) {
a.target = '_blank';
} else {
a.onclick = (e) => {
setSampleIFrameURL(e, demoInfo);
};
}
li.appendChild(video);
li.appendChild(a);
ul.appendChild(li);
}
demosElem.appendChild(ul);
}
</script>
</body> |