Create canvas.py

canvas.py

@@ -0,0 +1,63 @@
+import gradio as gr
+
+load_js = """
+async () => {
+  const url = "https://huggingface.co/datasets/mishig/gradio-components/raw/main/mannequinAll.js"
+  fetch(url)
+    .then(res => res.text())
+    .then(text => {
+      const script = document.createElement('script');
+      script.type = "module"
+      script.src = URL.createObjectURL(new Blob([text], { type: 'application/javascript' }));
+      document.head.appendChild(script);
+    });
+}
+"""
+
+get_js_image = """
+async (canvas, prompt) => {
+  const poseMakerEl = document.querySelector("pose-maker");
+  const imgBase64 = poseMakerEl.captureScreenshotDepthMap();
+  return [imgBase64, prompt]
+}
+"""
+js_change_rotation_axis = """
+async (axis) => {
+  const poseMakerEl = document.querySelector("pose-maker");
+  poseMakerEl.changeRotationAxis(axis);
+}
+"""
+
+js_pose_template = """
+async (pose) => {
+  const poseMakerEl = document.querySelector("pose-maker");
+  poseMakerEl.setPose(pose);
+}
+"""
+
+def placeholder_fn(axis):
+    pass
+
+
+
+gr.Interface(
+    rotation_axis = gr.Radio(["x", "y", "z"], value="x", label="Joint rotation axis")
+    pose_template = gr.Radio(["regular", "ballet", "handstand", "split", "kick", "chilling"], value="regular", label="Pose template")
+    run_button = gr.Button("Generate")
+    
+    
+    rotation_axis.change(fn=placeholder_fn,
+                            inputs=[rotation_axis],
+                            outputs=[],
+                            queue=False,
+                            _js=js_change_rotation_axis)
+    pose_template.change(fn=placeholder_fn,
+                            inputs=[pose_template],
+                            outputs=[],
+                            queue=False,
+                            _js=js_pose_template)
+    run_button.click(fn=generate_images,
+                     inputs=[canvas, prompt],
+                     outputs=[gallery],
+                     _js=get_js_image)
+).load()