Spaces:
Runtime error
Runtime error
File size: 2,896 Bytes
2de3774 |
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 77 78 79 80 81 82 83 84 85 86 87 |
<html>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper{
background-size: contain; /* scales the image */
background-position: center; /* centers the image */
}
img{
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
-o-object-fit: contain;
object-fit: contain;
zoom: 10;
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
transition: opacity 2s;
position: absolute;
opacity: 0;
}
img.fade{
opacity: 1;
}
.imgbox {
display: grid;
height: 100%;
}
</style>
<head>
<script type="module">
import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
const app = await client(window.location.origin);
const displays = [document.getElementById('display1'),document.getElementById('display2')];
var currentdisplay = 0;
const updateperiod = 10000;
var images = [];
async function getImages() {
try {
var result = await app.predict("/search", {text: "max:100000 all:"});
images = result.data[0];
// Update list after 10 minutes
setTimeout(getImages, 10*60*1000);
} catch (error) {
// Error... Wait a while
setTimeout(getImages, 10*60*1000);
}
}
function loaded() {
displays[currentdisplay].classList.add('fade');
currentdisplay = (currentdisplay + 1)%2;
displays[currentdisplay].classList.remove('fade');
}
displays[0].classList.add('fade');
displays[0].addEventListener("load", loaded);
displays[1].addEventListener("load", loaded);
async function showImage() {
if (images.length >= 1) {
displays[currentdisplay].src = "/gradio_api/file/" + images[Math.floor(Math.random() * images.length)];
}
setTimeout(showImage, updateperiod);
}
setTimeout(getImages, 10);
setTimeout(showImage, 5000);
displays[1].classList.add('fade'); // Initial fade in of logo
</script>
</head>
<body bgcolor=black>
<div class="imgbox">
<img id="display1">
<img id="display2" src="/gradio_api/file/html/logo.png">
</div>
</body>
</html>
|