Spaces:
Running
on
Zero
Running
on
Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gradio App Embed</title> | |
| <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.37.2/gradio.js"></script> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .gradio-container { | |
| width: 100%; | |
| min-height: 600px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0 auto; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| gradio-app { | |
| width: 100%; | |
| max-width: 1024px; | |
| height: auto; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 8px; | |
| overflow: visible; | |
| } | |
| gradio-app::part(root) { | |
| max-width: 100% ; | |
| } | |
| gradio-app::part(root) h1, | |
| gradio-app::part(root) h2, | |
| gradio-app::part(root) h3 { | |
| text-align: center; | |
| display: block; | |
| } | |
| gradio-app::part(root) .gr-image { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 512px; | |
| overflow: hidden; | |
| } | |
| gradio-app::part(root) .gr-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: center; | |
| } | |
| gradio-app::part(root) footer { | |
| display: none ; | |
| } | |
| gradio-app::part(root) .gr-button-row { | |
| justify-content: center; | |
| } | |
| gradio-app::part(root) .gr-form.gr-box { | |
| max-width: 100% ; | |
| } | |
| gradio-app::part(root) #style_selection { | |
| width: 100%; | |
| max-width: 300px; | |
| margin: 0 auto; | |
| } | |
| gradio-app::part(root) .gr-form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #mobile-dropdown { | |
| display: none; | |
| width: 100%; | |
| max-width: 300px; | |
| margin: 10px auto; | |
| padding: 10px; | |
| font-size: 16px; | |
| } | |
| @media (max-width: 768px) { | |
| #mobile-dropdown { | |
| display: block; | |
| } | |
| gradio-app::part(root) #style_selection { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="gradio-container"> | |
| <gradio-app src="https://app.skybrowse.co"></gradio-app> | |
| </div> | |
| <select id="mobile-dropdown"></select> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| const gradioApp = document.querySelector('gradio-app'); | |
| const container = document.querySelector('.gradio-container'); | |
| const mobileDropdown = document.getElementById('mobile-dropdown'); | |
| const adjustLayout = () => { | |
| const shadowRoot = gradioApp.shadowRoot; | |
| if (shadowRoot) { | |
| const appContent = shadowRoot.querySelector('#root'); | |
| if (appContent) { | |
| container.style.minHeight = `${window.innerHeight}px`; | |
| appContent.style.minHeight = `${window.innerHeight}px`; | |
| // Create mobile dropdown | |
| const radioGroup = shadowRoot.querySelector('#style_selection'); | |
| if (radioGroup) { | |
| const radioButtons = radioGroup.querySelectorAll('input[type="radio"]'); | |
| mobileDropdown.innerHTML = ''; | |
| radioButtons.forEach(radio => { | |
| const option = document.createElement('option'); | |
| option.value = radio.value; | |
| option.textContent = radio.nextElementSibling.textContent; | |
| mobileDropdown.appendChild(option); | |
| }); | |
| // Sync dropdown with radio buttons | |
| mobileDropdown.addEventListener('change', (e) => { | |
| const selectedRadio = radioGroup.querySelector(`input[value="${e.target.value}"]`); | |
| if (selectedRadio) selectedRadio.click(); | |
| }); | |
| // Position the dropdown | |
| const radioGroupRect = radioGroup.getBoundingClientRect(); | |
| mobileDropdown.style.position = 'absolute'; | |
| mobileDropdown.style.top = `${radioGroupRect.top}px`; | |
| mobileDropdown.style.left = `${radioGroupRect.left}px`; | |
| mobileDropdown.style.width = `${radioGroupRect.width}px`; | |
| } | |
| // Force layout recalculation | |
| appContent.style.display = 'none'; | |
| appContent.offsetHeight; // Trigger reflow | |
| appContent.style.display = ''; | |
| } | |
| } | |
| }; | |
| const observer = new MutationObserver((mutations) => { | |
| adjustLayout(); | |
| }); | |
| gradioApp.addEventListener('load', () => { | |
| observer.observe(gradioApp.shadowRoot, { childList: true, subtree: true }); | |
| adjustLayout(); | |
| }); | |
| window.addEventListener('resize', adjustLayout); | |
| }); | |
| </script> | |
| </body> | |
| </html> |