Spaces:
Runtime error
Runtime error
| <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> | |