|
|
|
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'; |
|
} |
|
|