Hi community!
I’d like to build a similar visualization for my webapp as the one on huggingface while using your inference API. What libraries were you using?
1 Like
Howdy! All the inference widgets are homemade, and written in Svelte with Tailwind CSS for styling. They’re available to read through on the huggingface_hub repo, including the Object Detection widget that you have in the screenshot. It uses a combination of SVGs, JavaScript, and Tailwind CSS to make the cool hover effects and animations.
At the moment I don’t think the widget is available to be used outside of the model page (@osanseviero would likely know more about this!), but for your web app you could use the Svelte code above to help you build your own visualization in the stack you’re using. If you’re looking to easily make an object detection demo you could instead use Streamlit or Gradio to whip it up without having to worry too much about front-end code, and host it on Hugging Face Spaces. For example, this object detection demo uses Streamlit to draw bounding boxes, and you could do the same thing with Gradio.
If that’s interesting to you, we’ve got documentation on Spaces, with info about Gradio and Streamlit here (Documentation for Spaces)!
Edit to add:
- The widgets were moved to a new repo: GitHub - huggingface/hub-docs: Frontend components, documentation and information hosted on the Hugging Face website. (So the huggingface_hub ones that I linked will be deleted soon)
- Gradio Spaces are actually embeddable in other websites, so you could use one in your web app! See: Using Hugging Face Integrations
2 Likes
Hi NimaBoscarino,
I cannot find the frontend code for the bounding boxes - Am I looking in the wrong place when looking into the tasks folder here GitHub - huggingface/hub-docs: Frontend components, documentation and information hosted on the Hugging Face website.
Thanks
Here it is! The SvgBoundingBoxes.svelte contains the actual code for the bounding boxes, and ObjectDetectionWidget.svelte shows the bounding boxes being used.