{"id":26184500,"url":"https://github.com/radames/pose-canvas-gradio","last_synced_at":"2026-04-28T03:37:37.986Z","repository":{"id":265867921,"uuid":"608482027","full_name":"radames/pose-canvas-gradio","owner":"radames","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-30T00:21:52.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-06T08:52:22.583Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-02T05:20:49.000Z","updated_at":"2023-03-30T00:17:40.000Z","dependencies_parsed_at":"2024-12-01T09:39:13.453Z","dependency_job_id":"44f21d54-dd76-4874-bf30-76a24dfb0569","html_url":"https://github.com/radames/pose-canvas-gradio","commit_stats":null,"previous_names":["radames/pose-canvas-gradio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fpose-canvas-gradio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fpose-canvas-gradio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fpose-canvas-gradio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fpose-canvas-gradio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radames","download_url":"https://codeload.github.com/radames/pose-canvas-gradio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125550,"owners_count":20240276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T22:56:49.007Z","updated_at":"2025-12-27T06:30:52.406Z","avatar_url":"https://github.com/radames.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pose Detection Gradio Custom Component\n\nThis is a custom Svelte component for [Gradio](https://gradio.app) that uses [mediapipe pose detection](https://google.github.io/mediapipe/solutions/pose_classification.html) to detect pose landmarks in an image. Given a body position, it creates a conditioning image used alongside the input prompt to generate an image. The base model is the [lllyasviel/sd-controlnet-openpose](https://huggingface.co/lllyasviel/sd-controlnet-openpose).\n\n## How to Test  \n\n```bash\nnpm run dev\n```\n\n## How to Build\n\n```bash\nnpm run build\n```\n\nAfter building your custom component will be in the `dist` folder. The single `index.js` can now be used as a custom component in Gradio read more about how to use on your Gradio app [here](https://github.com/radames/face-canvas-gradio/blob/main/custom_gradio_component.md)\n\n## How to Use in Gradio\n\nNote at the code below, we're using Gradio file server to serve the `index.js` located at the root level of your Gradio app `app.py`. This is done using script source `script.src = \"file=index.js\"` notation. But you can also use a CDN or any other way to serve the `index.js` file as long as it's served as `content-type: application/javascript`.\n\nLive demo here \u003chttps://huggingface.co/spaces/radames/live-pose-maker-gradio\u003e\n\n```python\nimport gradio as gr\nimport requests \nfrom io import BytesIO\nfrom PIL import Image\nimport base64\n\ncanvas_html = \"\u003cpose-canvas id='canvas-root' style='display:flex;max-width: 500px;margin: 0 auto;'\u003e\u003c/pose-canvas\u003e\"\nload_js = \"\"\"\nasync () =\u003e {\n  const script = document.createElement('script');\n  script.type = \"module\"\n  script.src = \"file=index.js\"\n  document.head.appendChild(script);\n}\n\"\"\"\nget_js_image = \"\"\"\nasync (canvasData) =\u003e {\n  const canvasEl = document.getElementById(\"canvas-root\");\n  const data = canvasEl? canvasEl._data : null;\n  return data\n}\n\"\"\"\n\ndef predict(canvas_data):\n  base64_img = canvas_data['image']\n  image_data = base64.b64decode(base64_img.split(',')[1])\n  image = Image.open(BytesIO(image_data))\n  return image\n\nblocks = gr.Blocks()\nwith blocks:\n  canvas_data = gr.JSON(value={}, visible=False)\n  with gr.Row():\n    with gr.Column(visible=True) as box_el:\n        canvas = gr.HTML(canvas_html,elem_id=\"canvas_html\")\n    with gr.Column(visible=True) as box_el:\n        image_out = gr.Image()\n\n  btn = gr.Button(\"Run\")\n  btn.click(fn=predict, inputs=[canvas_data], outputs=[image_out], _js=get_js_image)\n\n  blocks.load(None, None, None, _js=load_js)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fpose-canvas-gradio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradames%2Fpose-canvas-gradio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fpose-canvas-gradio/lists"}