{"id":17772903,"url":"https://github.com/radames/face-landmarks-gradio","last_synced_at":"2025-05-13T02:29:02.948Z","repository":{"id":150341105,"uuid":"618272440","full_name":"radames/face-landmarks-gradio","owner":"radames","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-03T21:28:33.000Z","size":67,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T23:39:49.647Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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-24T05:34:28.000Z","updated_at":"2023-06-14T01:00:29.000Z","dependencies_parsed_at":"2023-04-12T07:16:44.761Z","dependency_job_id":null,"html_url":"https://github.com/radames/face-landmarks-gradio","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fface-landmarks-gradio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fface-landmarks-gradio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fface-landmarks-gradio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radames%2Fface-landmarks-gradio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radames","download_url":"https://codeload.github.com/radames/face-landmarks-gradio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253859026,"owners_count":21975035,"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":"2024-10-26T21:41:26.564Z","updated_at":"2025-05-13T02:29:02.912Z","avatar_url":"https://github.com/radames.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Face Landmark Detection Gradio Custom Component\n\nThis is a custom Svelte component for [Gradio](https://gradio.app) that uses [mdeiapipe face landmarks detection](https://google.github.io/mediapipe/solutions/face_mesh.html) to detect face landmarks in an image. Given a face position, it creates a conditioning image used alongside the input prompt to generate an image. The base model is the [Uncanny Faces Model](https://huggingface.co/multimodalart/uncannyfaces_25K) developed as a tutorial on how to train your our [ControlNet Model](https://huggingface.co/blog/train-your-controlnet)\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](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 \u003chttps://huggingface.co/spaces/radames/face-landmarks-gradio\u003e\n\n```python\nimport gradio as gr\nimport requests \nfrom io import BytesIO\nfrom PIL import Image\nimport base64\n\ncanvas_html = \"\u003cface-canvas id='canvas-root' style='display:flex;max-width: 500px;margin: 0 auto;'\u003e\u003c/face-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  blocks.load(None, None, None, _js=load_js)\n\nblocks.launch(debug=True, inline=True)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fface-landmarks-gradio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradames%2Fface-landmarks-gradio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradames%2Fface-landmarks-gradio/lists"}