What Visualization library to use?
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?Screenshot 2022-03-29 at 15.35.321122×1192 81.9 KB
2022-03-30T06:43:50Z
Howdy! All the inference widgets are homemade, and written inSveltewithTailwind CSSfor styling. They’re available to read through on thehuggingface_hub repo, including theObject Detection widgetthat 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 (@osansevierowould 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 Streamlitto drawbounding 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
2022-05-25T22:35:32Z
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 hereGitHub - huggingface/hub-docs: Frontend components, documentation and information hosted on the Hugging Face website.Thanks
2022-05-26T05:07:56Z
Here it is! TheSvgBoundingBoxes.sveltecontains the actual code for the bounding boxes, andObjectDetectionWidget.svelteshows the bounding boxes being used.github.comhub-docs/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget at...d13a2a5bcf50a6431b74f972e1806c0fffccb5f6/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidgetFrontend components, documentation and information hosted on the Hugging Face website. - hub-docs/js/src/lib/components/InferenceWidget/widgets/ObjectDetectionWidget at d13a2a5bcf50a6431b74f972e180...