|
|
|
function createGradioAnimation() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (!params.has('__theme')) {
|
|
params.set('__theme', 'light');
|
|
window.location.search = params.toString();
|
|
}
|
|
|
|
var gradioApp = document.querySelector('gradio-app');
|
|
if (gradioApp) {
|
|
|
|
document.documentElement.style.setProperty('--my-200', '#80eeee');
|
|
document.documentElement.style.setProperty('--my-50', '#ecfdf5');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
var container = document.createElement('div');
|
|
container.id = 'gradio-animation';
|
|
container.style.fontSize = '2em';
|
|
container.style.fontFamily = 'Maiandra GD, ui-monospace, monospace';
|
|
container.style.fontWeight = 'bold';
|
|
container.style.textAlign = 'center';
|
|
container.style.marginBottom = '20px';
|
|
|
|
var text = 'Welcome to Fish-Speech!';
|
|
for (var i = 0; i < text.length; i++) {
|
|
(function(i){
|
|
setTimeout(function(){
|
|
var letter = document.createElement('span');
|
|
letter.style.opacity = '0';
|
|
letter.style.transition = 'opacity 0.5s';
|
|
letter.innerText = text[i];
|
|
|
|
container.appendChild(letter);
|
|
|
|
setTimeout(function() {
|
|
letter.style.opacity = '1';
|
|
}, 50);
|
|
}, i * 200);
|
|
})(i);
|
|
}
|
|
|
|
var gradioContainer = document.querySelector('.gradio-container');
|
|
gradioContainer.insertBefore(container, gradioContainer.firstChild);
|
|
|
|
return 'Animation created';
|
|
}
|
|
|