Semaphore: Integrating Visualization into a Software Platform for Operational Hosting of Coastal AI Models

Operationalizing AI models manually is a complex and time-intensive task, posing a significant challenge for real-time predictions, such as monitoring water levels near flood-prone areas. To address this challenge, we developed Semaphore, a Python-based application designed to streamline the operationalization of pre-trained AI models. With its agile design, specialized data objects, and expandable data ingestion module, Semaphore offers a powerful semi-automated solution for a wide range of AI Model deployments.

The visualization of models operationalized by Semaphore is crucial for stakeholders and the public, as it aids in understanding predictions, increasing awareness, and eliciting feedback. Coastal weather is often unpredictable, and access to forecasted factors can enhance meteorologists' predictions. Furthermore, providing simple inundation or water level predictions beyond typical weather forecasts can be invaluable for beaches preparing for potential flooding, allowing stakeholders to take more informed actions against extreme weather. The clarity of these visualizations is critical, as they must be easily understood by a broad audience. Striking a balance between practicality and the needs of stakeholders is a key focus for Semaphore’s visualization team.

The process of designing and implementing the frontend portion of Semaphore involved iterating through various code architecture designs to arrive at the final implementation. Central to the visualization is a Semaphore-specific chart specification file that enables researchers to customize the visual representation of their models and manage data handling with ease. Semaphore implements a server-side data preparation model, ensuring that the visualization is handled carefully, and exactly to the researcher’s preferences. To avoid code repetition, we integrated already implemented data ingestion classes to gather data from various API sources. Additionally, we incorporated Vue.js to improve code structure, readability, and maintainability, ensuring that future developers can quickly understand the code and that adding new charts for models is both seamless and efficient.

By emphasizing visualization, Semaphore simplifies the operationalization process, accelerates the feedback loop between researchers and stakeholders, and facilitates more effective refinement and deployment of AI models. This presentation will detail the challenges faced, the solutions implemented, and the resulting design that enhances both the development process and end-user experience.