Deploying GPT-4o AI Chat web app on Azure via Azure AI services – a step-by-step guide.

Hello everyone, welcome to my latest blog post!

My name is Suzaril Shah and I am a Gold Microsoft Learn Student Ambassador and a Microsoft Certified Trainer from Malaysia.

I am excited to share the guide to deploy a GPT-4o AI Chat Web App on Azure via Azure AI Services.

Introduction to Azure AI services

Azure AI Services is an advanced suite of tools and services on Microsoft Azure designed to help businesses create, deploy, and scale AI solutions. It includes a variety of pre-trained models for tasks such as natural language processing, computer vision, and decision-making. These models, such as GPT-4 for text generation and DALL-E for image generation, offer state-of-the-art capabilities that can be customized and fine-tuned to meet specific business needs. Azure AI Services is built on Microsoft’s reliable and scalable cloud infrastructure, ensuring high performance, security, and seamless integration with existing workflows and applications.

To follow the guide for deploying a GPT-4o AI Chat app on Azure, you need the following requirements:

Requirements:

Microsoft Azure Account and Subscription. If you don’t already have one, you can sign up for an Azure free account. For Students, you can use the free Azure for Students offer which doesn’t require a credit card only your school email.
Filled up the Azure OpenAI registration form
Domain name (optional)

Step 1: Getting Access to the Azure AI Service.

To get access to Azure OpenAI services, you will need to fill up the registration form indicating the use for the Azure OpenAI platform. Once your access to Azure OpenAI is approved you will receive an email similar to the screenshot below:

You can now access the Azure AI Service from Azure portal. Simply search and click the “Azure AI Service” keyword on the Azure portal search bar.

Step 2: Create Azure AI Services on Azure

You can create the Azure AI Services by clicking on the “+ Create” button on the Azure AI Services overview page. Fill up the details required to create the Azure AI Services > Click on “Review + create” >  “Create” button to deploy the Azure AI Services on Azure.

When the deployment is completed, click on “Go to resource” > “Go to Azure AI Studio” > Sign in to your Azure account to access the Azure AI Studio.

Deploying models on Azure AI Service

To create a chat playground (or use any of the Azure AI services), one must create at least one model deployments on Azure AI Studio. Since we are deploying an AI Chat App, we can use the GPT (Generative Pre-training Transformer) models available on Azure AI Studio.

Using deep learning algorithms, these models—which include GPT-3, GPT-3.5, GPT-4 and their latest iteration, GPT-4o – process and produce text that sounds human. Their ability to forecast and produce consecutive text depending on previous input, therefore mimicking a conversational partner like a human, has earned them a nickname: “chat completions“.

The term “chat completions” emphasises how useful the models are for finishing textual exchanges, modelling conversational dynamics, and producing answers that are quite similar to human output. Development of AI-driven chatbots, content creation tools, and programming helpers depends critically on this feature. Azure AI services enable developers and businesses to build advanced, AI-enhanced applications that push the limits of natural language processing and human-computer interaction by using the predictive potential of these models.

There are a lot more AI models in Azure AI studio, which includes:

Dall-E models – Generative AI used to generate Images/Pictures from user text input.
GPT/completion models – Generative AI used for chat completions, predicts and generates text to continue a given prompt, learning from vast datasets to produce relevant and coherent content
Embeddings models – Generative AI used to generate numerical representations (embeddings) of text, capturing its semantic meaning in a way that allows for the comparison and analysis of text data.

The list of models are accessible when you click the Model Catalog sub-tab on the left of the navigation menu on Azure AI studio:

Step 3: Creating Model deployment on Azure AI Services

Click on the “Deployments” sub-tab under the “Shared resources” tab on the navigation menu on the Azure AI Studio > “Create Deployment” and select a GPT model from the model catalogue.

GPT-4 on Azure is the latest advancement in natural language processing from OpenAI, offering significant improvements in accuracy, coherence, and versatility over previous models. This model can handle a wide range of tasks, from generating human-like text and understanding complex queries to summarizing documents and creating creative content.

GPT-4o supports multimodal capabilities, enabling it to handle both text and image inputs. This latest model, currently available in preview, allows users to integrate natural language processing with visual data, creating a richer and more interactive AI experience. This functionality opens up a wide array of use cases, such as analyzing images, generating descriptive text, and even integrating audio capabilities in the future.

Select GPT-4o models and click on the “Confirm” button and fill up the deployment details for the GPT-4o models > “Deploy” to finalize the deployment details.

Note: Selecting the Global Standard deployment type will allow you to leverage Azure’s global infrastructure to dynamically route traffic to the data center with best availability for each request. Global standard will provide the highest default quota for new models and eliminates the need to load balance across multiple resources.

Chat Playground on Azure AI Services.

Users can test and discover the possibilities of sophisticated language models such as GPT-4 through the Chat Playground on Azure AI Services. Developers, researchers, and business users can better grasp how these AI models can be used for a variety of tasks, including automated answers, content production, and customer care, with the aid of this intuitive interface.

With the Chat Playground, users may interact with the model directly by entering text questions and receiving real-time responses. It is simple to evaluate and adjust the model’s behaviour in accordance with particular needs thanks to this interactive arrangement. To access Chat Playground on Azure AI services, select the “Chat” sub-tab under the “Playgrounds” tab on the navigation menu on the left > Select the Model Deployed earlier.

The Chat Playground settings can significantly influence the behavior and performance of your Chat App. Here’s an overview of the key settings you can configure:

System Message: Start by defining your model’s purpose with the system message. This message shapes the model’s behavior and core functionality. To ensure specificity, include source data and examples of ideal responses. This helps the model understand its role and generate more accurate and contextually appropriate outputs.
Add Your Data (Preview): Enhance your model’s understanding and responsiveness by uploading or connecting your own data. Providing additional context and relevant information enables the model to generate more precise and informative responses. This feature is currently in preview, and you can learn more about how to connect your data.
Parameters: Fine-tune your model’s behavior with various parameters. Adjust the temperature to influence the creativity of the responses—the higher the temperature, the more creative and diverse the outputs. You can also set the maximum number of response tokens to control the length of the responses, ensuring they are concise and relevant.

Step 4: Deploy the Chat Playground on Azure via App Service Plan.

To deploy the AI Chat playground, click on the “Deploy to a web app” button on the top of the chat playground section and fill up the deployment details > “Deploy” to finalize the deployment.

Note: Enabling the chat history option will add additional charge (on top of the Azure App service plan) to your Azure subscription since all historical chats will be stored in the Cosmos DB database.

To view the deployment status for the web app, click on the “Deployments”  sub-tab on the left-side of the Navigation menu on Azure AI services > “App Deployments” tab.

You can access the AI Chat web app by clicking on the deployment name once the Deployment status shows “Succeeded”. Sign in to your Azure account, click on the “Consent on behalf of your organisation” checkbox > “Accept”.

You should now be able to access the Chat Playground web app.

Step 5: Assign the AI Chat web app to a custom domain. (Optional)

You can also assign a custom domain for the AI chat web app to make it more accessible, and easy to remember to your end users, as compared to using endpoints like: https://gpt4-shah.azurewebsites.net/ . Go back to the Deployment page on Azure AI Studio and Click on “Azure Portal” under the “Manage” category.

Under the Properties tab, you should be able to see the “Domains” category. Click on the “Add custom domain” hyperlink to assign a domain to the web app > “Add custom domain”

Under the “Add custom domain” configuration page, make sure to select the “All other domain services”, if you have purchased domains from external TLD registrars. Enter your domain/sub-domain into the “Domain” field. In this case, I am going to assign the “gpt4.suzarilshah.uk” domain and verify the domain using the CNAME record type.

Add the DNS records on your DNS host so Azure can verify that you own the domain and can start pointing the web app’s traffic to the domain/subdomain.

After the DNS records are successfully added on the DNS Host, click on the “Validate”> “Add” button on Azure. Validation can take up to 72 hours to allow the DNS records to be completely propagated across the internet.

Step 6: Configure the AI Chat Web App Redirect URL (only required if you configure custom domain)

To enable authentication using Microsoft Entra ID (formerly Azure Active Directory) for a web app with a custom domain in Azure, you need to configure the Redirect URI (or URL) in the Microsoft Entra ID settings to match the custom domain of your web app. This ensures that the authentication process redirects users back to the correct URL after they sign in.

Navigate to the Microsoft Entra ID on the Azure Portal > Enterprise Applications > [YOUR_APP_NAME] > Under the “Manage” tab, click on the “Authentication” sub-tab on the left side of Azure Portal navigation menu. Click on the “Add URI” hyperlink and add a new Redirect URL using the following format:

https://[custom subdomain/domain]/.auth/login/aad/callback

Review the configuration and click on “Save” to save the configurations. Now you should be able to authenticate and access the web app from the custom domain you have configured just now.

Conclusions

Businesses wishing to take use of cutting-edge natural language processing capabilities can achieve a stable and scalable solution by deploying a GPT-4o AI Chat app on Azure using Azure AI Services. You can easily set up and launch a cutting-edge AI chat application that works with your current workflows and infrastructure by following the instructions provided in this article. Azure AI Services offers a range of pre-trained models that can be tailored to fit specific needs, from text production to image creation and beyond, in addition to a dependable and secure platform.

This guide covers every step required to deploy your GPT-4o model, set up the required resources, configure custom domains, and enable authentication using Azure AI Services. You can test and improve your AI model even more with the Chat Playground, making sure it satisfies your business needs and produces excellent, human-like interactions.

Through the use of Azure AI Services and the most recent developments in AI models, such as GPT-4o, enterprises can expand the frontiers of natural language processing and human-computer interaction. Azure offers a comprehensive and scalable platform to realise your vision for AI-driven applications, be it chatbots for customer support, content creation tools, or anything else.

​Microsoft Tech Community – Latest Blogs –Read More