Spaces:
Sleeping
Sleeping
Create app.py
Browse files
app.py
ADDED
@@ -0,0 +1,48 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import gradio as gr
|
2 |
+
import requests
|
3 |
+
from io import BytesIO
|
4 |
+
from PIL import Image
|
5 |
+
import base64
|
6 |
+
|
7 |
+
canvas_html = "<face-canvas id='canvas-root' style='display:flex;max-width: 500px;margin: 0 auto;'></face-canvas>"
|
8 |
+
load_js = """
|
9 |
+
async () => {
|
10 |
+
const url = "https://huggingface.co/datasets/radames/gradio-components/raw/main/face-canvas.js"
|
11 |
+
fetch(url)
|
12 |
+
.then(res => res.text())
|
13 |
+
.then(text => {
|
14 |
+
const script = document.createElement('script');
|
15 |
+
script.type = "module"
|
16 |
+
script.src = URL.createObjectURL(new Blob([text], { type: 'application/javascript' }));
|
17 |
+
document.head.appendChild(script);
|
18 |
+
});
|
19 |
+
}
|
20 |
+
"""
|
21 |
+
get_js_image = """
|
22 |
+
async (canvasData) => {
|
23 |
+
const canvasEl = document.getElementById("canvas-root");
|
24 |
+
const data = canvasEl? canvasEl._data : null;
|
25 |
+
return data
|
26 |
+
}
|
27 |
+
"""
|
28 |
+
|
29 |
+
def predict(canvas_data):
|
30 |
+
base64_img = canvas_data['image']
|
31 |
+
image_data = base64.b64decode(base64_img.split(',')[1])
|
32 |
+
image = Image.open(BytesIO(image_data))
|
33 |
+
return image
|
34 |
+
|
35 |
+
blocks = gr.Blocks()
|
36 |
+
with blocks:
|
37 |
+
canvas_data = gr.JSON(value={}, visible=False)
|
38 |
+
with gr.Row():
|
39 |
+
with gr.Column(visible=True) as box_el:
|
40 |
+
canvas = gr.HTML(canvas_html,elem_id="canvas_html")
|
41 |
+
with gr.Column(visible=True) as box_el:
|
42 |
+
image_out = gr.Image()
|
43 |
+
|
44 |
+
btn = gr.Button("Run")
|
45 |
+
btn.click(fn=predict, inputs=[canvas_data], outputs=[image_out], _js=get_js_image)
|
46 |
+
blocks.load(None, None, None, _js=load_js)
|
47 |
+
|
48 |
+
blocks.launch(debug=True, inline=True)
|