Hosting Interactive AI Model Demos on Azure Static Websites

Question

Pulumi · Accepted Answer

To 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:

1. An Azure Storage Account to store our static website files.
2. The Static Website feature on the Storage Account to serve our HTML, CSS, and JavaScript files.
3. 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:

1. **Storage Account Creation**: We create an Azure Storage Account which will store and serve the static content of the website.

2. **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.

3. **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.

4. **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.

5. **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:

```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 running `pulumi 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.