| <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> |
|
|
