Hosting Tensorflow.js Models for Browser Inference on Azure Static Web Apps

Question

Pulumi · Accepted Answer

To host TensorFlow.js models for browser inference on Azure Static Web Apps, you'll need to serve your TensorFlow.js models along with a web application capable of performing inference in the browser.

Here is how you can set up this infrastructure using Pulumi with Azure:

1. **Static Web App**: This service hosts the static content (HTML/CSS/JS) and serves it through Azure's global content delivery network. It simplifies hosting static web applications on Azure and provides a streamlined workflow for publishing a web app that includes pre-rendering and API support.

2. **Azure Blob Storage**: We will use Azure Blob Storage as the backend storage to host the TensorFlow.js models. Static Web Apps can take advantage of the globally distributed content delivery network (CDN) that Azure provides, ensuring low-latency downloads of the models regardless of where the user is located.

3. **Azure Functions (Optional)**: If you want to perform any server-side processing, like post-processing of models, you can use Azure Functions, which can be integrated with Azure Static Web Apps.

Below is a Pulumi program in Python that sets up an Azure Static Web App to host a web application, with TensorFlow.js models, for browser inference. This assumes you have a web application that uses TensorFlow.js and your models are ready to be served:

```python
import pulumi
import pulumi_azure_native as azure_native

# Configuration for the Static Web App
# Substitute the actual paths for the app and the api
app_location = "app"  # Path to the built web app source code
api_location = "api"  # Path to the API source code (if any, can be set to None)
output_location = "build"  # The folder where the app build is output
models_location = "models"  # The folder where TensorFlow.js models are stored

# Prepare the resource group
resource_group = azure_native.resources.ResourceGroup("resource_group")

# Creating storage account for TensorFlow.js models and other static files
storage_account = azure_native.storage.StorageAccount("tfjsmodels",
    resource_group_name=resource_group.name,
    kind="StorageV2",
    sku=azure_native.storage.SkuArgs(name="Standard_LRS"),
    location=resource_group.location)

# Creating storage container for models
models_container = azure_native.storage.BlobContainer("tfjsmodelscontainer",
    account_name=storage_account.name,
    resource_group_name=resource_group.name)

# You might want to upload your TensorFlow.js models to this Blob container
# This can be done using the Azure Blob Storage SDK or Azure CLI as a separate
# step outside of this Pulumi program

# Setting up Azure Static Web App
static_web_app = azure_native.web.StaticSite("static-web-app",
    resource_group_name=resource_group.name,
    location=resource_group.location,
    source=azure_native.web.SourceInfoArgs(
        branch="main",  # Adjust with the correct branch name
        repo_url="https://github.com/your-repo/your-project",  # Fill in with your repository URL
        is_manual_integration=True,
        source_control="GitHub",
        functions_version="~3"  # Azure Functions version
    ),
    build_properties=azure_native.web.StaticSiteBuildPropertiesArgs(
        app_location=app_location,
        api_location=api_location,
        app_artifact_location=output_location
    ))

# Output the resulting URL of your Static Web App
pulumi.export("static_web_app_url", static_web_app.default_hostname)
```

In this code:

- We first set up a resource group within Azure to house our assets.
- We create an Azure Storage Account, which is where we will store the static files and TensorFlow.js models.
- A Blob Container is created within our Storage Account for organizing and managing the blobs (our TensorFlow.js models).
- We create an Azure Static Web App with the source linked to our code repository, specifying where the application and API are located within the repository.
- The URL of the newly created Static Web App is exported as the output of our Pulumi program.

Please note that you will need to upload your TensorFlow.js models to the created Blob Container either via the Azure Portal, Azure CLI, or using the Azure Storage SDK separately from this Pulumi program. Additionally, you should configure your web application to correctly fetch the models from the Azure Blob Storage.

By deploying this Pulumi program, an Azure Static Web App will be configured, and the site will be available through `static_web_app_url`. Users can navigate to this URL and use your web application to perform browser-based inference with TensorFlow.js models.