Hosting Interactive AI Model Demos on Azure Static Websites
PythonTo host interactive AI model demos on Azure, we'll need to set up a static website that will serve as the frontend for our demos, while the AI model itself can be hosted as a backend service if it requires server-side computation, or compiled into WebAssembly and run directly in the browser if applicable.
In this setup, we will create the following:
- An Azure Storage Account to store our static website files.
- The Static Website feature on the Storage Account to serve our HTML, CSS, and JavaScript files.
- A CDN (Content Delivery Network) for caching content close to users to reduce latency.
Here is a step-by-step explanation of the Pulumi program to achieve this:
-
Storage Account Creation: We create an Azure Storage Account which will store and serve the static content of the website.
-
Static Website: We enable the static website feature within the Storage Account, specifying the index document (typically
index.html
) which is the entry page of the site and the error document (e.g.,404.html
) which is shown when a page is not found. -
Upload Static Content: We will assume that you have pre-built HTML, CSS, and JavaScript files that will interact with your AI model. These files are uploaded to the
$web
container created when you enable the static website feature. -
Content Delivery Network (CDN): Optionally, for improved global performance, we create a CDN profile and endpoint to cache our static content at edge locations closest to the users.
-
Outputs: At the end of the program, we export the primary endpoint URL of the static website and the CDN endpoint if applicable, so you can access your static site.
Below is the complete Pulumi program written in Python:
import pulumi import pulumi_azure_native as azure_native # Create an Azure Resource Group resource_group = azure_native.resources.ResourceGroup('ai-model-demos-rg') # Create an Azure Storage Account for the static website storage_account = azure_native.storage.StorageAccount('aistaticsite', resource_group_name=resource_group.name, sku=azure_native.storage.SkuArgs(name=azure_native.storage.SkuName.STANDARD_LRS), kind=azure_native.storage.Kind.STORAGE_V2) # Enable the Static Website feature static_website = azure_native.storage.StorageAccountStaticWebsite('staticSite', account_name=storage_account.name, resource_group_name=resource_group.name, index_document='index.html', error404_document='404.html') # Upload the static content to the Azure Storage Account's $web container # This could be achieved using the `pulumi_azure_native.storage` module to create Blob objects. # However, you will need to have your static files accessible to the Pulumi program. # Here, we assume you have already prepared the files and will upload them manually or with a CI/CD pipeline. # Create a CDN profile cdn_profile = azure_native.cdn.Profile('cdnProfile', resource_group_name=resource_group.name, sku=azure_native.cdn.SkuArgs(name=azure_native.cdn.SkuName.STANDARD_MICROSOFT)) # Create a CDN endpoint to cache the content cdn_endpoint = azure_native.cdn.Endpoint('cdnEndpoint', endpoint_name=f'{storage_account.name}endpoint', is_http_allowed=False, # Enforce HTTPS for security is_https_allowed=True, content_types_to_compress=[ 'text/html', 'text/css', 'application/javascript', ], origins=[ azure_native.cdn.DeepCreatedOriginArgs( name='origin-storage-account', host_name=static_website.primary_endpoint.apply(lambda endpoint: endpoint.split('/')[2]), # Host name of the storage account ), ], profile_name=cdn_profile.name, resource_group_name=resource_group.name, query_string_caching_behavior=azure_native.cdn.QueryStringCachingBehavior.NOT_SET) # Output the primary endpoint for the static website and the CDN endpoint pulumi.export('staticSiteUrl', static_website.primary_endpoint) pulumi.export('cdnEndpoint', cdn_endpoint.host_name.apply(lambda host_name: f'https://{host_name}'))
This program provides a concise setup for hosting static websites on Azure with the intention to serve interactive AI model demos. The demos themselves would be part of the static content and could interact with backend services or Browser APIs for AI computations.
Please proceed by creating a Pulumi project, placing the above code into a
__main__.py
file, and runningpulumi up
to provision the infrastructure. Ensure that your Azure credentials are configured correctly before doing so. Once the infrastructure is provisioned, you can access your static website using the URLs output by the program.