Hosting Tensorflow.js Models for Browser Inference on Azure Static Web Apps
PythonTo 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:
-
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.
-
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.
-
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:
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.-