Spaces:
Runtime error
Runtime error
Update app.py
Browse files
app.py
CHANGED
@@ -5,6 +5,53 @@ import random
|
|
5 |
import os
|
6 |
from PIL import Image
|
7 |
from deep_translator import GoogleTranslator
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
html='''<style>
|
9 |
body, html, #app {
|
10 |
margin: 0;
|
|
|
5 |
import os
|
6 |
from PIL import Image
|
7 |
from deep_translator import GoogleTranslator
|
8 |
+
|
9 |
+
|
10 |
+
import gradio as gr
|
11 |
+
|
12 |
+
def welcome(name):
|
13 |
+
return f"Welcome to Gradio, {name}!"
|
14 |
+
|
15 |
+
js = """
|
16 |
+
function createGradioAnimation() {
|
17 |
+
var container = document.createElement('div');
|
18 |
+
container.id = 'gradio-animation';
|
19 |
+
container.style.fontSize = '2em';
|
20 |
+
container.style.fontWeight = 'bold';
|
21 |
+
container.style.textAlign = 'center';
|
22 |
+
container.style.marginBottom = '20px';
|
23 |
+
|
24 |
+
var text = 'Welcome to Gradio!';
|
25 |
+
for (var i = 0; i < text.length; i++) {
|
26 |
+
(function(i){
|
27 |
+
setTimeout(function(){
|
28 |
+
var letter = document.createElement('span');
|
29 |
+
letter.style.opacity = '0';
|
30 |
+
letter.style.transition = 'opacity 0.5s';
|
31 |
+
letter.innerText = text[i];
|
32 |
+
|
33 |
+
container.appendChild(letter);
|
34 |
+
|
35 |
+
setTimeout(function() {
|
36 |
+
letter.style.opacity = '1';
|
37 |
+
}, 50);
|
38 |
+
}, i * 250);
|
39 |
+
})(i);
|
40 |
+
}
|
41 |
+
|
42 |
+
var gradioContainer = document.querySelector('.gradio-container');
|
43 |
+
gradioContainer.insertBefore(container, gradioContainer.firstChild);
|
44 |
+
|
45 |
+
return 'Animation created';
|
46 |
+
}
|
47 |
+
"""
|
48 |
+
with gr.Blocks(js=js) as demo:
|
49 |
+
inp = gr.Textbox(placeholder="What is your name?")
|
50 |
+
out = gr.Textbox()
|
51 |
+
inp.change(welcome, inp, out)
|
52 |
+
|
53 |
+
demo.launch()
|
54 |
+
|
55 |
html='''<style>
|
56 |
body, html, #app {
|
57 |
margin: 0;
|