{"id":14483527,"url":"https://github.com/huggingface/visual-blocks-custom-components","last_synced_at":"2025-10-14T15:29:49.152Z","repository":{"id":239837177,"uuid":"739395008","full_name":"huggingface/visual-blocks-custom-components","owner":"huggingface","description":"Custom Hugging Face Nodes for Google Visual Blocks for ML","archived":false,"fork":false,"pushed_at":"2024-05-16T06:43:15.000Z","size":483,"stargazers_count":123,"open_issues_count":3,"forks_count":12,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-09-30T18:02:32.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://huggingface.co/hf-vb","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huggingface.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-01-05T13:13:10.000Z","updated_at":"2025-09-07T06:08:13.000Z","dependencies_parsed_at":"2024-05-15T18:14:41.947Z","dependency_job_id":"45f30977-0f6f-4ba5-b908-82b970c5ae74","html_url":"https://github.com/huggingface/visual-blocks-custom-components","commit_stats":null,"previous_names":["huggingface/visual-blocks-custom-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/huggingface/visual-blocks-custom-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huggingface%2Fvisual-blocks-custom-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huggingface%2Fvisual-blocks-custom-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huggingface%2Fvisual-blocks-custom-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huggingface%2Fvisual-blocks-custom-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huggingface","download_url":"https://codeload.github.com/huggingface/visual-blocks-custom-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huggingface%2Fvisual-blocks-custom-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019314,"owners_count":26086711,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-09-03T00:01:50.358Z","updated_at":"2025-10-14T15:29:49.135Z","avatar_url":"https://github.com/huggingface.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Hugging Face + Visual Blocks Custom Components\n\n\u003cp align=\"center\"\u003e\n    \u003cbr/\u003e\n    \u003cpicture\u003e \n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://huggingface.co/spaces/hf-vb/README/raw/main/hf-vb-logo-dark.svg\" width=\"400\" style=\"max-width: 100%;\"\u003e\n        \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://huggingface.co/spaces/hf-vb/README/raw/main/hf-vb-logo.svg\" width=\"400\" style=\"max-width: 100%;\"\u003e\n        \u003cimg alt=\"transformers.js javascript library logo\" src=\"https://huggingface.co/spaces/hf-vb/README/raw/main/hf-vb-logo.svg\" width=\"400\" style=\"max-width: 100%;\"\u003e\n    \u003c/picture\u003e\n    \u003cbr/\u003e\n\u003c/p\u003e\n\nVisual blocks is an amazing tool from our friends at [Google](https://github.com/google/visualblocks)\nthat allows you to easily create and experiment with machine learning pipelines using a visual interface.\nThis repository contains the source code for custom components that allow you to use Hugging Face client and server models in your Visual Blocks pipelines.\nWe've created a few nodes supporting different tasks and models following our [Tasks](https://huggingface.co/tasks) definitions.\n\n\u003e [!NOTE]\n\u003e Visual Blocks seems to be mostly working in Chrome. If you are having trouble with the interface, try using Chrome, and please submit an [issue](https://github.com/google/visualblocks/issues) to the Visual Blocks team.\n\nImportant links:\n\n- https://visualblocks.withgoogle.com/\n- https://www.npmjs.com/package/huggingface-visualblocks-nodes\n- https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest\n\n\u003cdetails\u003e\n\u003csummary\u003e Table of Contents\u003c/summary\u003e\n\n- [How to use the custom components](#how-to-use-the-custom-components)\n- [Nodes and Examples](#nodes-and-examples)\n  - [Client Nodes](#client-nodes)\n    - [Translation](#translation)\n    - [Token Classification](#token-classification)\n    - [Text Classification](#text-classification)\n    - [Object Detection](#object-detection)\n    - [Image Segmentation](#image-segmentation)\n    - [Image Classification](#image-classification)\n    - [Depth Estimation](#depth-estimation)\n    - [Background Removal](#background-removal)\n  - [Server Nodes](#server-nodes)\n    - [Text Generation and Chat Completion](#text-generation-and-chat-completion)\n    - [Fill Mask](#fill-mask)\n    - [Image Classification](#image-classification-1)\n    - [Summarization](#summarization)\n    - [Text Classification](#text-classification-1)\n    - [Text Generation](#text-generation)\n    - [Text to Image](#text-to-image)\n    - [Token Classification](#token-classification-1)\n  - [Extra Examples](#extra-examples)\n- [Local Development](#local-development)\n\n\u003c/details\u003e\n\n## How to use the custom components\n\nTo start playing with our custom components you need to **Add a custom node** to your Visual Blocks project. First you need to start a new project [https://visualblocks.withgoogle.com/#/edit/new](https://visualblocks.withgoogle.com/#/edit/new), then click on the \"+\" button in the bottom left corner to add a new node.\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/left_button.png\" width=\"200\"\u003e\n\nThen input the pre-bundled code from our npm package. You can do this by pasting the following link into the input field and clicking \"Submit\":\n\n```\nhttps://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest\n```\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/custom_node.jpg\" width=\"450\"\u003e\n\nThen you will be able to see three Hugging Face Collections: Client, Server and Common.\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/collections.jpg\" width=\"250\"\u003e\n\n# Nodes and Examples\n\n## Client Nodes\n\nClient nodes are nodes running tranformers pipelines on the client side using [Transformers.js](https://github.com/xenova/transformers.js). All Client nodes have WASM and WebGPU (experimental) backend support, and you can find web-compatible models by visiting https://huggingface.co/models?library=transformers.js.\n\n\u003e [!NOTE]\n\u003e WebGPU support in transformers.js is still experimental and may not work on all devices. Not all models are supported by WebGPU backend yet.\n\n### Translation\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/translation.jpg\" width=\"500\"\u003e\n\n[**Translation Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/translation_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/translation\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.TranslationPipeline\n\n### Token Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/token.jpg\" width=\"500\"\u003e\n\n[**Token Classification Node Exampl**e](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/token_classification_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/token-classification\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.TokenClassificationPipeline\n\n### Text Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/text-classification.jpg\" width=\"500\"\u003e\n\n[**Text Classification Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/text_classification_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/text-classification\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.TextClassificationPipeline\n\n### Object Detection\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/object-detc.jpg\" width=\"500\"\u003e\n\n[**Object Detection Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/object_detection_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/object-detection\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.ObjectDetectionPipeline\n\n### Image Segmentation\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/segment.jpg\" width=\"500\"\u003e\n\n[**Image Segmentation Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/image_segmentation_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/image-segmentation\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.ImageSegmentationPipeline\n\n### Image Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/class.jpg\" width=\"500\"\u003e\n\n[**Image Classification Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/image_classification_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/image-classification\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.ImageClassificationPipeline\n\n### Depth Estimation\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/dept-es.jpg\" width=\"500\"\u003e\n\n[Depth Estimation Node Example](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/depth_estimation_client_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/depth-estimation\n- https://huggingface.co/docs/transformers.js/api/pipelines#module_pipelines.DepthEstimationPipeline\n\n### Background Removal\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/removal.jpg\" width=\"500\"\u003e\n\n[**Background Removal Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/client/background_removal_client_.json)\n\n## Server Nodes\n\nServer nodes are nodes running Transformers pipeline tasks using the [Hugging Face Serverless API](https://huggingface.co/docs/api-inference/en/index). For a few selected LLM models, it's running using our hosted [Text Generation Inference](https://huggingface.co/docs/text-generation-inference/en/index), our fast, optimized inference for LLMs.\n\n\u003e [!NOTE]\n\u003e You can use the Hugging Face Serverless API for free with limited usage, after which you'll be rate limited. If you need more usage, you can create an account at https://huggingface.co/join and get an API token at https://huggingface.co/settings/tokens or log in using the Hugging Face Login node.\n\nFor server nodes you have the option to Login using your Hugging Face account to get more usage and access to private models. Using **Hugging Face Hub Login**\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/button-auth.jpg\" width=\"250\"\u003e\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/auth.jpg\" width=\"400\"\u003e\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/button-logged.jpg\" width=\"250\"\u003e\n\nIf successful, you can obtain your **Apikey** directly from the **Hugging Face Hub Login** node.\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/logged.jpg\" width=\"350\"\u003e\n\n### Text Generation and Chat Completion\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/chat-template.jpg\" width=\"500\"\u003e\n\n[**Chat Template Text Generation Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/chat_template_text_generation_server_.json)\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/chat_completion.jpg\" width=\"500\"\u003e\n\n[**Chat Completion Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/chat_completion_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/text-generation\n\n### Fill Mask\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/fill-mask.jpg\" width=\"500\"\u003e\n\n[**Fill Mask Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/fill_mask_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/fill-mask\n\n### Image Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/image-class.jpg\" width=\"500\"\u003e\n\n[**Image Classification Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/image_classification_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/image-classification\n\n### Summarization\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/summarization.jpg\" width=\"500\"\u003e\n\n[**Summarization Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/summarization_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/summarization\n\n### Text Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/text-class.jpg\" width=\"500\"\u003e\n\n[**Text Classification Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/text_classification_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/text-classification\n\n### Text Generation\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/text-generation.jpg\" width=\"500\"\u003e\n\n[**Text Generation Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/text_generation_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/text-generation\n\n### Text to Image\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/text-to-image.jpg\" width=\"500\"\u003e\n\n[**Text to Image Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/text_to_image_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/text-to-image\n\n### Token Classification\n\n\u003cimg src=\"https://huggingface.co/spaces/hf-vb/README/resolve/main/server/token-class.jpg\" width=\"500\"\u003e\n\n[**Token Classification Node Example**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/server/token_classification_server_.json)\n\nMore info:\n\n- https://huggingface.co/tasks/token-classification\n\n## Extra Examples\n\n[**Background Removal Text to Image**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/extras/background_removal_text_to_image.json)\n\n[**Chat Completion Text to Image Depth**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/extras/chat_completion_txt2img_depth.json)\n\n[**Image Segmentation Webcam Client**](https://visualblocks.withgoogle.com/#/edit/new_hfdemo?project_json=https://cdn.jsdelivr.net/npm/huggingface-visualblocks-nodes@latest/examples/extras/image_segmentation_webcam_client.json)\n\n# Local Development\n\n1. Clone the repository\n\n   ```bash\n   git clone https://github.com/huggingface/visual-blocks-custom-components.git\n   cd visual-blocks-custom-components\n   ```\n\n2. Install the dependencies\n\n   ```bash\n   npm i\n   ```\n\n3. Run the development server\n\n   ```bash\n   npm run dev\n   ```\n\n4. Visit Google's staging server\n\n5. Click the + in the bottom left corner to add the custom nodes.\n\n6. Paste in the link to the script (e.g., http://localhost:8080/index.js) and click \"Submit\".\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuggingface%2Fvisual-blocks-custom-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuggingface%2Fvisual-blocks-custom-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuggingface%2Fvisual-blocks-custom-components/lists"}