| <!DOCTYPE html> |
| <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% !important; |
| } |
| 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 !important; |
| } |
| gradio-app::part(root) .gr-button-row { |
| justify-content: center; |
| } |
| gradio-app::part(root) .gr-form.gr-box { |
| max-width: 100% !important; |
| } |
| 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`; |
| |
| |
| 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); |
| }); |
| |
| |
| mobileDropdown.addEventListener('change', (e) => { |
| const selectedRadio = radioGroup.querySelector(`input[value="${e.target.value}"]`); |
| if (selectedRadio) selectedRadio.click(); |
| }); |
| |
| |
| 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`; |
| } |
| |
| |
| appContent.style.display = 'none'; |
| appContent.offsetHeight; |
| 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> |
