ادغام اپلیکیشن گریدیو

Created on: November 21, 2024

Answered using OpenAI 01 Preview by OpenAI01

Question

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Gradio App Integration</title>
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.44.0/gradio.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
background-color: #f4f4f9;
font-family: sans-serif;
position: relative;
}

a {
display: none;
}

#loader {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f4f4f9;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
text-align: center;
}

#progress {
width: 80%;
height: 30px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
}

#bar {
width: 0;
height: 100%;
background-color: #76c7c0;
text-align: center;
line-height: 30px;
color: white;
transition: width 0.2s ease;
}

gradio-app {
display: flex;
justify-content: center;
align-items: center;
zoom: 0.8;
min-height: 100vh;
margin-top: 0;
}

.modal, .notification {
display: none;
position: fixed;
z-index: 10002;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
color: #333;
max-width: 400px;
width: 90%;
}

.modal img, .notification img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 8px;
}

.modal button, .notification button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin: 5px;
font-size: 16px;
}

.modal button:hover, .notification button:hover {
background-color: #45a049;
}

.close-button {
background-color: #d9534f;
color: white;
}

.close-button:hover {
background-color: #c9302c;
}

#tutorialTitle {
color: red;
}

#einsteinTip {
margin-top: 10px;
font-style: italic;
color: #555;
}

#downloadButton {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
z-index: 10003;
font-size: 16px;
}

#downloadButton:hover {
background-color: #45a049;
}

.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

.notification.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}

.notification {
animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
</style>
</head>
<body>
<div id="loader">
<div id="progress">
<div id="bar">0%</div>
</div>
<div>لطفاً صبر کنید...</div>
<div id="einsteinTip">اگر این هوش مصنوعی باز نشد فیلتر شکن تونو روشن کنید</div>
</div>

<gradio-app src="https://mukaist-midjourney.hf.space/"></gradio-app>
<button id="downloadButton">دانلود تصویر 📥</button>

<div class="modal" id="imageModal">
<h3>پیش‌نمایش تصویر</h3>
<img id="modalImage" alt="Image Preview" />
<button id="nextImageButton">تصویر بعدی ⏭️</button>
<button id="saveImageButton">ذخیره تصویر 💾</button>
<button class="close-button">لغو ❌</button>
</div>

<div class="notification" id="saveNotification">
<p>در حال ساخت لینک دانلود تصویر..</p>
</div>

<div class="notification" id="uploadLinkNotification">
<p>برای ذخیره تصویر داخل گوشی روی کپی لینک دانلود کلیک کنید و بعدا لینک رو داخل مرورگر گوشی باز کنید تصویر رو که نمایش داد روی تصویر محکم نگهدارید و بارگیری تصویر رو کلیک کنید.<a href="#" id="downloadLink" target="_blank"></a></p>
<button id="copyLinkButton">کپی لینک 📋</button>
<button class="close-button">بستن</button>
</div>

<div class="notification error" id="noImageNotification">
<p>هیچ تصویر ساخته شده‌ای یافت نشد.</p>
<button id="noImageButton">باشه</button>
</div>

<div class="notification success" id="copySuccessNotification">
<p>لینک با موفقیت کپی شد!</p>
<button class="close-button">بستن</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const restrictedWords = ['porn', 'sex', 'sexy', 'سکس', 'برهنه', 'تجاوز', 'خونین'];

function checkForRestrictedWords(inputText) {
for (const word of restrictedWords) {
if (inputText.toLowerCase().includes(word.toLowerCase())) {
alert('متن شما شامل عبارتی غیر اخلاقی است و صفحه بارگذاری مجدد خواهد شد.');
window.location.reload();
return true;
}
}
return false;
}

const observer = new MutationObserver(() => {
const inputElements = document.querySelectorAll('input[type="text"], textarea');
inputElements.forEach(input => {
input.addEventListener('input', function(event) {
checkForRestrictedWords(event.target.value);
});
});
});

observer.observe(document.body, { childList: true, subtree: true });

document.body.addEventListener('input', (event) => {
if (event.target.matches('input[type="text"], textarea')) {
checkForRestrictedWords(event.target.value);
}
});

function modifyText() {
document.querySelectorAll('body *').forEach(element => {
element.childNodes.forEach(node => {
if (node.nodeType === Node.TEXT_NODE) {
if (node.nodeValue.includes('GPU')) {
node.parentElement.style.display = 'none';
}
const replacements = {
'Examples': 'نمونه‌ها',
'Expected Ratio': 'اندازه مورد انتظار',
'Prompt': 'متن',
'Optional': 'انگلیسی وارد کنید و یا خالی بگذارید.',
'Generate': 'شروع ساخت',
'Use as تصویر ورودی': 'این یکی رو دوباره گسترش بده',
'Diffusers Image Outpaint': 'ابزار فوق‌پیشرفته گسترش تصاویر',
'Drop an image you would like to extend, pick your expected ratio and hit شروع ساخت': 'با نرم‌افزار هوش مصنوعی',
'Input Image': 'تصویر ورودی',
'Alignment': 'تراز',
'Advanced settings': 'تنظیمات پیشرفته',
'Middle': 'وسط',
'Left': 'چپ',
'Right': 'راست',
'Top': 'بالا',
'Bottom': 'پایین',
'Width': 'عرض',
'Steps': 'مراحل',
'Height': 'ارتفاع',
'Mask': 'ماسک',
'Overlap': 'همپوشانی',
'Resize input image': 'تغییر اندازه تصویر ورودی',
'Loading': 'در حال بارگذاری'
};
for (const [original, replacement] of Object.entries(replacements)) {
if (node.nodeValue.includes(original)) {
node.nodeValue = node.nodeValue.replace(original, replacement);
}
}
}
});
});
}

function simulateProgress(callback) {
let progress = 0;
const progressElement = document.getElementById('bar');

function updateProgress() {
progress += 1;
if (progress > 100) progress = 100;
progressElement.style.width = progress + '%';
progressElement.textContent = progress + '%';

if (progress < 100) {
setTimeout(updateProgress, 50);
} else {
callback();
modifyText();
}
}
updateProgress();
}

function showContent() {
document.getElementById('loader').style.display = 'none';
const gradioApp = document.querySelector('gradio-app');
gradioApp.scrollIntoView({ behavior: 'smooth', block: 'start' });
document.getElementById('downloadButton').style.display = 'block';
}

window.onload = function() {
simulateProgress(showContent);

const gradioApp = document.querySelector('gradio-app');

function checkIfLoaded() {
if (gradioApp) {
gradioApp.addEventListener('gradio_loaded', showContent);
gradioApp.addEventListener('load', showContent);

setTimeout(showContent, 10000);
} else {
setTimeout(checkIfLoaded, 100);
}
}

checkIfLoaded();
};

const downloadButton = document.getElementById('downloadButton');
if (downloadButton) {
downloadButton.addEventListener('click', function() {
const images = document.querySelectorAll('gradio-app img[src$=".webp"]');
const ignoredUrl = 'https://victorestrada-diffusers-image-outpaint.hf.space/file=/tmp/gradio/58d27ee015923ff8867291e88910c3b1fc5e49698a7a06372037c6d58cd5452e/example_1.webp';
let imageArray = [];

images.forEach(img => {
if (!img.src.includes(ignoredUrl)) {
imageArray.push(img.src);
}
});

if (imageArray.length > 0) {
let currentIndex = 0;
displayImage(imageArray, currentIndex);

document.getElementById('nextImageButton').onclick = function() {
currentIndex = (currentIndex + 1) % imageArray.length;
displayImage(imageArray, currentIndex);
};
} else {
const noImageNotification = document.getElementById('noImageNotification');
noImageNotification.style.display = 'block';
}
});
}

function displayImage(imageList, index) {
const modalImage = document.getElementById('modalImage');
modalImage.src = imageList[index];
const imageModal = document.getElementById('imageModal');
imageModal.style.display = 'block';
}

const saveImageButton = document.getElementById('saveImageButton');
saveImageButton.addEventListener('click', function() {
const modalImage = document.getElementById('modalImage');
uploadImageToServer(modalImage.src);
});

function uploadImageToServer(imageUrl) {
const saveNotification = document.getElementById('saveNotification');
saveNotification.style.display = 'block';

fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
const formData = new FormData();
formData.append('image', blob, 'downloaded_image.webp');

return fetch('upload.php', {
method: 'POST',
body: formData,
});
})
.then(response => response.json())
.then(data => {
saveNotification.style.display = 'none';
if (data.success) {
const uploadLinkNotification = document.getElementById('uploadLinkNotification');
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = data.url;
downloadLink.textContent = data.url;
uploadLinkNotification.style.display = 'block';
} else {
alert('خطا در آپلود تصویر');
}
})
.catch(error => {
console.error('خطا:', error);
saveNotification.style.display = 'none';
});
}

document.querySelectorAll('.close-button').forEach(button => {
button.addEventListener('click', function(event) {
event.stopPropagation();
button.closest('.modal, .notification').style.display = 'none';
});
});

const noImageButton = document.getElementById('noImageButton');
noImageButton.addEventListener('click', function() {
const noImageNotification = document.getElementById('noImageNotification');
noImageNotification.style.display = 'none';
});

document.addEventListener('click', function(event) {
if (!event.target.closest('.modal, .notification') && !event.target.matches('#downloadButton')) {
document.querySelectorAll('.modal, .notification').forEach(modal => {
modal.style.display = 'none';
});
}
});

const copyLinkButton = document.getElementById('copyLinkButton');
if (copyLinkButton) {
copyLinkButton.addEventListener('click', function() {
const downloadLink = document.getElementById('downloadLink').href;
if (downloadLink) {
navigator.clipboard.writeText(downloadLink).then(() => {
const copySuccessNotification = document.getElementById('copySuccessNotification');
copySuccessNotification.style.display = 'block';

setTimeout(() => {
copySuccessNotification.style.display = 'none';
}, 3000);
}).catch(err => {
console.error('کپی لینک ناموفق بود:', err);
});
}
});
}
});
</script>
</body>
</html> این کد ببین در این کد نوار پیشرفت وجود داره و سانسور کلمات غیر اخلاقی . خب الان باید حد پایین منم یک نوار پیشرفت بهش اضافه کنی و سانسور کلمات غیر اخلاقی رو <script
type="module"
src="https://gradio.s3-us-west-2.amazonaws.com/4.44.1/gradio.js"
></script>

<gradio-app src="https://ai4editing-magicquill.hf.space"></gradio-app>
این کد درست کن کامل یکجا درست کن بفرست

Thought

Añadiendo funcionalidades

Estoy revisando un código HTML para una aplicación Gradio con barra de progreso y censura de palabras, y debo añadir una nueva barra de progreso y mejorar la censura de palabras ofensivas.

Enhancing the code

I’m thinking about how to incorporate the progress bar and word filtering functionalities into the minimal code provided, as demonstrated in the larger HTML sample. Progress and functionality are essential aspects here.

Enhancing functionality

I’m integrating a progress bar and word filtering into a Gradio app, ensuring all Farsi text remains intact. Progressing through this enhancement, I’m in the final integration step, aiming for a comprehensive solution.

Replacing and updating

I’m swapping the Gradio app source with the new one and updating the script to the latest version while ensuring progress bar and word filtering functionalities are intact.

Integrating updates

I’m updating an HTML page to incorporate a new Gradio app by modifying the src and script attributes, adjusting text labels, and defining styles and JavaScript.

Updating dependencies

I'm changing Gradio's script source to 4.44.1 and updating the Gradio app src. Adjusting any necessary code to ensure progress bar and word filtering functionalities align with the new app version.

Updating the code

I’m focusing on integrating a progress bar and word filtering. The new Gradio app src will replace the initial src.

Mapping out the HTML

First, I’m setting up the HTML structure for the Gradio integration. This starts with specifying language, charset, and title, and includes the Gradio script and button for image download.

Enhancing JavaScript functionality

I’m examining the JavaScript code, updating restricted words, tweaking text replacements, ensuring the progress bar works, and adapting image downloading to the new Gradio app. This approach fosters functionality and integration.

Integrating functionality

I'm combining the Gradio app's initial code with progress bar and word filtering updates, ready for testing as soon as details are clarified.

Integrating a Gradio app with a well-structured HTML and CSS layout, ensuring loader progress visibility.

Setting up the page

I’m thinking through the layout: a loader for progress, a placeholder text, and a sneak peek at Einstein's tip. Then, I’m laying out a custom app and a download button to wrap it all up.

Tracking user input

I’m pulling together a script that listens for keyword triggers in text inputs, ensuring any appearances of restricted words prompt a page reload and an alert for content moderation.

Integrating progress bar

I’m pulling together the progress bar, ensuring it only appears when the Gradio app is ready. Adjustments will be needed to align with the new app's labels.

Answer

    a {
        display: none;
    }

    #loader {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f9;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        text-align: center;
    }

    #progress {
        width: 80%;
        height: 30px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    #bar {
        width: 0;
        height: 100%;
        background-color: #76c7c0;
        text-align: center;
        line-height: 30px;
        color: white;
        transition: width 0.2s ease;
    }

    gradio-app {
        display: flex;
        justify-content: center;
        align-items: center;
        zoom: 0.8;
        min-height: 100vh;
        margin-top: 0;
    }

    .modal, .notification {
        display: none;
        position: fixed;
        z-index: 10002;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        text-align: center;
        color: #333;
        max-width: 400px;
        width: 90%;
    }

    .modal img, .notification img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .modal button, .notification button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        margin: 5px;
        font-size: 16px;
    }

    .modal button:hover, .notification button:hover {
        background-color: #45a049;
    }

    .close-button {
        background-color: #d9534f;
        color: white;
    }

    .close-button:hover {
        background-color: #c9302c;
    }

    #einsteinTip {
        margin-top: 10px;
        font-style: italic;
        color: #555;
    }

    #downloadButton {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        z-index: 10003;
        font-size: 16px;
    }

    #downloadButton:hover {
        background-color: #45a049;
    }

    .error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .notification.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .notification {
        animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translate(-50%, -60%); }
        to { opacity: 1; transform: translate(-50%, -50%); }
    }
</style>

</head> <body> <div id="loader"> <div id="progress"> <div id="bar">0%</div> </div> <div>لطفاً صبر کنید...</div> <div id="einsteinTip">اگر این هوش مصنوعی باز نشد فیلتر شکن تونو روشن کنید</div> </div>

<gradio-app src="https://ai4editing-magicquill.hf.space"></gradio-app>
<button id="downloadButton">دانلود تصویر 📥</button>

<!-- Modals and Notifications -->
<!-- You can add modal dialogs and notifications here if needed -->
<!-- For example, image preview modal, save notification, etc. -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const restrictedWords = ['porn', 'sex', 'sexy', 'سکس', 'برهنه', 'تجاوز', 'خونین'];

        function checkForRestrictedWords(inputText) {
            for (const word of restrictedWords) {
                if (inputText.toLowerCase().includes(word.toLowerCase())) {
                    alert('متن شما شامل عبارتی غیر اخلاقی است و صفحه بارگذاری مجدد خواهد شد.');
                    window.location.reload();
                    return true;
                }
            }
            return false;
        }

        const observer = new MutationObserver(() => {
            const inputElements = document.querySelectorAll('input[type="text"], textarea');
            inputElements.forEach(input => {
                input.addEventListener('input', function(event) {
                    checkForRestrictedWords(event.target.value);
                });
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });

        document.body.addEventListener('input', (event) => {
            if (event.target.matches('input[type="text"], textarea')) {
                checkForRestrictedWords(event.target.value);
            }
        });

        function modifyText() {
            document.querySelectorAll('body *').forEach(element => {
                element.childNodes.forEach(node => {
                    if (node.nodeType === Node.TEXT_NODE) {
                        if (node.nodeValue.includes('GPU')) {
                            node.parentElement.style.display = 'none';
                        }
                        const replacements = {
                            'Examples': 'نمونه‌ها',
                            'Expected Ratio': 'اندازه مورد انتظار',
                            'Prompt': 'متن',
                            'Optional': 'انگلیسی وارد کنید و یا خالی بگذارید.',
                            'Generate': 'شروع ساخت',
                            'Use as تصویر ورودی': 'این یکی رو دوباره گسترش بده',
                            'Diffusers Image Outpaint': 'ابزار فوق‌پیشرفته گسترش تصاویر',
                            'Drop an image you would like to extend, pick your expected ratio and hit شروع ساخت': 'با نرم‌افزار هوش مصنوعی',
                            'Input Image': 'تصویر ورودی',
                            'Alignment': 'تراز',
                            'Advanced settings': 'تنظیمات پیشرفته',
                            'Middle': 'وسط',
                            'Left': 'چپ',
                            'Right': 'راست',
                            'Top': 'بالا',
                            'Bottom': 'پایین',
                            'Width': 'عرض',
                            'Steps': 'مراحل',
                            'Height': 'ارتفاع',
                            'Mask': 'ماسک',
                            'Overlap': 'همپوشانی',
                            'Resize input image': 'تغییر اندازه تصویر ورودی',
                            'Loading': 'در حال بارگذاری'
                        };
                        for (const [original, replacement] of Object.entries(replacements)) {
                            if (node.nodeValue.includes(original)) {
                                node.nodeValue = node.nodeValue.replace(original, replacement);
                            }
                        }
                    }
                });
            });
        }

        function simulateProgress(callback) {
            let progress = 0;
            const progressElement = document.getElementById('bar');

            function updateProgress() {
                progress += 1;
                if (progress > 100) progress = 100;
                progressElement.style.width = progress + '%';
                progressElement.textContent = progress + '%';

                if (progress < 100) {
                    setTimeout(updateProgress, 50);
                } else {
                    callback();
                    modifyText();
                }
            }
            updateProgress();
        }

        function showContent() {
            document.getElementById('loader').style.display = 'none';
            const gradioApp = document.querySelector('gradio-app');
            gradioApp.scrollIntoView({ behavior: 'smooth', block: 'start' });
            document.getElementById('downloadButton').style.display = 'block';
        }

        window.onload = function() {
            simulateProgress(showContent);

            const gradioApp = document.querySelector('gradio-app');

            function checkIfLoaded() {
                if (gradioApp) {
                    gradioApp.addEventListener('gradio_loaded', showContent);
                    gradioApp.addEventListener('load', showContent);

                    setTimeout(showContent, 10000);
                } else {
                    setTimeout(checkIfLoaded, 100);
                }
            }

            checkIfLoaded();
        };

        // Additional functionality can be added here
        // For example, code to handle image downloads, modals, etc.
    });
</script>

</body> </html>

Question

نفهمیدی فقط کد دوم نوار پیشرفت بهش اضافه کن و سانسور کلمات غیر اخلاقی فقط همین

Thought

Clarifying the request

The user wants a progress bar and obscene word censor added to the second HTML code, not a re-write of all the code.

Crafting code modifications

I’m gathering info on adding a progress bar and an obscene word censor to the second code, ensuring all content stays within OpenAI's policy guidelines.

Integrating features

I'm thinking through how to combine the progress bar and obscene word censor into the provided HTML snippet, ensuring the final code includes these modifications.

Integrating Gradio

I’m wrapping up a web page to embed a Gradio app, ensuring smooth loading with a progress bar and a note in Persian advising patience or using a VPN if necessary.

Crafting progress functionalities

First, updating the progress bar visually shows task progression. Then, loading the main interface, event listeners activate once items are ready. This approach ensures smoother transitions and a better user experience.

Answer

    a {
        display: none;
    }

    #loader {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f4f4f9;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        text-align: center;
    }

    #progress {
        width: 80%;
        height: 30px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    #bar {
        width: 0;
        height: 100%;
        background-color: #76c7c0;
        text-align: center;
        line-height: 30px;
        color: white;
        transition: width 0.2s ease;
    }

    gradio-app {
        display: flex;
        justify-content: center;
        align-items: center;
        zoom: 0.8;
        min-height: 100vh;
        margin-top: 0;
    }

    #einsteinTip {
        margin-top: 10px;
        font-style: italic;
        color: #555;
    }
</style>

<gradio-app src="https://ai4editing-magicquill.hf.space"></gradio-app>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const restrictedWords = ['porn', 'sex', 'sexy', 'سکس', 'برهنه', 'تجاوز', 'خونین'];

        function checkForRestrictedWords(inputText) {
            for (const word of restrictedWords) {
                if (inputText.toLowerCase().includes(word.toLowerCase())) {
                    alert('متن شما شامل عبارتی غیر اخلاقی است و صفحه بارگذاری مجدد خواهد شد.');
                    window.location.reload();
                    return true;
                }
            }
            return false;
        }

        const observer = new MutationObserver(() => {
            const inputElements = document.querySelectorAll('input[type="text"], textarea');
            inputElements.forEach(input => {
                input.addEventListener('input', function(event) {
                    checkForRestrictedWords(event.target.value);
                });
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });

        document.body.addEventListener('input', (event) => {
            if (event.target.matches('input[type="text"], textarea')) {
                checkForRestrictedWords(event.target.value);
            }
        });

        function simulateProgress(callback) {
            let progress = 0;
            const progressElement = document.getElementById('bar');

            function updateProgress() {
                progress += 1;
                if (progress > 100) progress = 100;
                progressElement.style.width = progress + '%';
                progressElement.textContent = progress + '%';

                if (progress < 100) {
                    setTimeout(updateProgress, 50);
                } else {
                    callback();
                }
            }
            updateProgress();
        }

        function showContent() {
            document.getElementById('loader').style.display = 'none';
            const gradioApp = document.querySelector('gradio-app');
            gradioApp.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        window.onload = function() {
            simulateProgress(showContent);

            const gradioApp = document.querySelector('gradio-app');

            function checkIfLoaded() {
                if (gradioApp) {
                    gradioApp.addEventListener('gradio_loaded', showContent);
                    gradioApp.addEventListener('load', showContent);

                    setTimeout(showContent, 10000);
                } else {
                    setTimeout(checkIfLoaded, 100);
                }
            }

            checkIfLoaded();
        };
    });
</script>

</body> </html>

Question

Thought

Answer

Question

Thought

Answer

Share this Q&A