|
|
<html> |
|
|
<style> |
|
|
html, body { |
|
|
height: 100%; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
#wrapper{ |
|
|
background-size: contain; |
|
|
background-position: center; |
|
|
} |
|
|
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]; |
|
|
|
|
|
setTimeout(getImages, 10*60*1000); |
|
|
} catch (error) { |
|
|
|
|
|
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'); |
|
|
</script> |
|
|
</head> |
|
|
<body bgcolor=black> |
|
|
<div class="imgbox"> |
|
|
<img id="display1"> |
|
|
<img id="display2" src="/gradio_api/file/html/logo.png"> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
