Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Boostlet.js: Image processing plugins for the web via JavaScript injection

Edward Gaibor, Shruti Varade, Rohini Deshmukh, Tim Meyer, Mahsa Geshvadi, SangHyuk Kim, Vidhya Sree Narayanappa, Daniel Haehn

TL;DR

Boostlet.js presents a JavaScript-based framework that extends web-based visualization tools with client-side image processing via injectable plugins called Boostlets. The approach uses a bookmarklet (PowerBoost) to inject a unified API across multiple visualization frameworks, enabling operations from classic filters to segmentations and ML-powered analyses on consumer hardware. Key contributions include a framework-agnostic plugin architecture, a user-friendly PowerBoost UI, automated testing pipelines, and open-source availability, with demonstrated applicability to medical imaging contexts. The work enables rapid prototyping and cross-framework interoperability, laying groundwork for WebGL/WebGPU acceleration and broader community-driven plugin development.

Abstract

Can web-based image processing and visualization tools easily integrate into existing websites without significant time and effort? Our Boostlet.js library addresses this challenge by providing an open-source, JavaScript-based web framework to enable additional image processing functionalities. Boostlet examples include kernel filtering, image captioning, data visualization, segmentation, and web-optimized machine-learning models. To achieve this, Boostlet.js uses a browser bookmark to inject a user-friendly plugin selection tool called PowerBoost into any host website. Boostlet also provides on-site access to a standard API independent of any visualization framework for pixel data and scene manipulation. Web-based Boostlets provide a modular architecture and client-side processing capabilities to apply advanced image-processing techniques using consumer-level hardware. The code is open-source and available.

Boostlet.js: Image processing plugins for the web via JavaScript injection

TL;DR

Boostlet.js presents a JavaScript-based framework that extends web-based visualization tools with client-side image processing via injectable plugins called Boostlets. The approach uses a bookmarklet (PowerBoost) to inject a unified API across multiple visualization frameworks, enabling operations from classic filters to segmentations and ML-powered analyses on consumer hardware. Key contributions include a framework-agnostic plugin architecture, a user-friendly PowerBoost UI, automated testing pipelines, and open-source availability, with demonstrated applicability to medical imaging contexts. The work enables rapid prototyping and cross-framework interoperability, laying groundwork for WebGL/WebGPU acceleration and broader community-driven plugin development.

Abstract

Can web-based image processing and visualization tools easily integrate into existing websites without significant time and effort? Our Boostlet.js library addresses this challenge by providing an open-source, JavaScript-based web framework to enable additional image processing functionalities. Boostlet examples include kernel filtering, image captioning, data visualization, segmentation, and web-optimized machine-learning models. To achieve this, Boostlet.js uses a browser bookmark to inject a user-friendly plugin selection tool called PowerBoost into any host website. Boostlet also provides on-site access to a standard API independent of any visualization framework for pixel data and scene manipulation. Web-based Boostlets provide a modular architecture and client-side processing capabilities to apply advanced image-processing techniques using consumer-level hardware. The code is open-source and available.
Paper Structure (12 sections, 4 figures, 2 tables)

This paper contains 12 sections, 4 figures, 2 tables.

Table of Contents

  1. Introduction
  2. Related Work
  3. Boostlet.js Framework Overview and Examples
  4. User Interface and Experience
  5. Development and Integration
  6. Framework Integration
  7. Development of Functionalities
  8. Buildsystem and Automated Testing
  9. Discussion and Future Work
  10. Community Survey
  11. Limitations and Future Work
  12. Conclusion

Figures (4)

  • Figure 1: The Segment Anything boostlet executed in OpenSeaDragon.js allows segmenting a region of interest within a slice of microscopy data showing an axolotl limb.
  • Figure 2: PowerBoost is a versatile plugin that equips any frontend environment with a range of Boostlets and a code editor for API access. Easily activated by dragging and dropping the bookmark from our main website into the bookmarks bar. Upon activation, PowerBoost injects code into the host website, revealing a floating icon. Clicking this icon unveils a user interface that expands into sections for Search, Edit, and Boostlets.
  • Figure 3: Pipeline for automated local and online testing.
  • Figure 4: Results of the Likert scale survey show that all users either stay neutral, agree, or strongly agree with the questions prompted in \ref{['fig:survey_questions']}. *Results for question 8 are not plotted since it is a short-answer feedback question.