Package: jupyter-bbox-widget
jupyter_bbox_widgetA Jupyter widget for annotating images with bounding boxes.See alive demo on Binder.fromjupyter_bbox_widgetimportBBoxWidgetwidget=BBoxWidget(image='fruit.jpg',classes=['apple','orange','pear'],)widgetCreate, edit, move, resize and delete bounding box annotations using the mouse.Usewidget.bboxesto get current annotations values:widget.bboxes# [{'x': 377, 'y': 177, 'width': 181, 'height': 201, 'label': 'apple'},#  {'x': 219, 'y': 142, 'width': 169, 'height': 171, 'label': 'orange'},#  {'x': 43,  'y': 174, 'width': 234, 'height': 195, 'label': 'pear'}]You can also assign towidget.bboxesto display any annotations. For example, use the output of an object detection model to do model-assisted labeling.widget.bboxes=[{'x':377,'y':177,'width':181,'height':201,'label':'apple'},{'x':219,'y':142,'width':169,'height':171,'label':'orange'},{'x':43,'y':174,'width':234,'height':195,'label':'pear'}]Fruit photo byUmanoideonUnsplashInstallationYou can install usingpip:pipinstalljupyter_bbox_widgetIf you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
the nbextension:jupyternbextensionenable--py[--sys-prefix|--user|--system]jupyter_bbox_widgetUsageCreate and edit annotations with the mouseclick and drag to create a bboxclick and drag corners or edges to resize a bboxclick and drag inside a bbox to move itin order to change a label select a new label below the image and click on label textKeyboard shortcutsWhen you click inside the widget area it will gain focus and start receiving keyboard events. An outline usually indicates that the element is focused. Normal Jupyter keyboard shortcuts won't work in this state. To unfocus the widget area click outside it or pressEsc.Some shortcuts act on the selected bbox. New bboxes are selected automatically when created. You can also select a bbox by clicking on it. Selected bbox is displayed on top of others and with a thicker border.Digit keys 1-9 and 0 select a class label.Escunfocuses the widgetEnteris the same as pressing Submit buttonSpaceis the same as pressing Skip buttonTab/Shift-Tabselect next/previous bbox.Keys acting on the selected bbox (assuming a QWERTY keyboard, other layouts should use any keys in the same locations):Wmove upAmove leftSmove downDmove rightQshrink widthEgrow widthRgrow heightFshrink heightCassign selected class labelHoldingShiftwhile pressing movement keys will increase step sizeSkip and Submit eventsYou can define functions that will be called automatically when you press Skip or Submit buttons. This is useful for creating a workflow for annotating multiple images.@widget.on_skipdefskip():# move on to the next image@widget.on_submitdefsave():# do stuff to save current annotations and move onThere is an example of a simple annotation workflow inexamples/introduction.ipynbnotebook.View only modeYou can disable editing of annotations by settingwidget.view_only = True. This is useful for viewing annotation outputs without accidentally changing them.Recording additional dataSometimes you need to record more info about an object than just a location and a class label. For example, you might want to specify whether the object is in focus or blurred, record its size or other properties.Let's say we want to apply a rating on a scale from 1 to 5 to every object in the image. We create a slider widget to edit the rating values:w_rating=widgets.IntSlider(value=3,min=1,max=5,description='Rating')And we attach it to the bbox widget.widget.attach(w_rating,name='rating')As a result all bboxes created afterwards will have aratingproperty and thew_ratingwidget can be used to display and manipulate the rating of the currently selected bbox.Any number and any kind ofipywidgetswidgets may be used in this way for creating richer annotations - number inputs, text inputs, checkboxes and so on (seewidget list).The notebook inexamples/introduction.ipynbhas an example and a more detailed explanation of this feature.Changelogv0.5.0enabled use ofwidget.on_skipandwidget.on_submitmethods as decoratorsv0.4.0exposed selected class label to the python side aswidget.labelv0.3.4set max-width: 100% on image so that it respects layoutv0.3.3fixed bboxes not updating after class change by keyboard shortcutv0.3.2addedhide_buttonsoptionfixed bbox delete icon not displayed properlyv0.3.1unselect a bbox on click outside in view only modefixed a bug with overwriting attached properties on unselectv0.3.0addedview_onlymodev0.2.0added Skip and Submit buttonsadded attach widget functionality for recording extra propertiesmultiple fixes and improvementsv0.1.0initial releaseDevelopment InstallationThis project was inspired by a blogpostCreating Reactive Jupyter Widgets With Svelteand was created based onwidget-svelte-cookiecuttertemplate.# First install the python package. This will also build the JS packages.pipinstall-e.When developing your extensions, you need to manually enable your extensions with the
notebook / lab frontend. For lab, this is done by the command:jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build
jupyter labextension install .For classic notebook, you can run:jupyter nbextension install --sys-prefix --symlink --overwrite --py jupyter_bbox_widget
jupyter nbextension enable --sys-prefix --py jupyter_bbox_widgetNote that the--symlinkflag doesn't work on Windows, so you will here have to run
theinstallcommand every time that you rebuild your extension. For certain installations
you might also need another flag instead of--sys-prefix, but we won't cover the meaning
of those flags here.How to see your changesTypescript:To continuously monitor the project for changes and automatically trigger a rebuild, start Jupyter in watch mode:jupyterlab--watchAnd in a separate session, begin watching the source directory for changes:npmrunwatchAfter a change wait for the build to finish and then refresh your browser and the changes should take effect.Python:If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.