You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/ai-studio/tutorials/deploy-chat-web-app.md
+30-28Lines changed: 30 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,10 +26,11 @@ Your data source is used to help ground the model with specific data. Grounding
26
26
27
27
The steps in this tutorial are:
28
28
29
-
1. Deploy and test a chat model without your data.
30
-
1. Add your data.
31
-
1. Test the model with your data.
32
-
1. Deploy your web app.
29
+
> [!div class="checklist"]
30
+
> 1. Configure resources.
31
+
> 1. Add your data.
32
+
> 1. Test the model with your data.
33
+
> 1. Deploy your web app.
33
34
34
35
## Prerequisites
35
36
@@ -64,34 +65,34 @@ To start, identify the resources you need to configure from the Azure AI Foundry
64
65
1. Open the [Azure AI Foundry portal](https://ai.azure.com) and select the project you used to deploy the Azure OpenAI chat model.
65
66
1. Select **Management center** from the left pane.
66
67
1. Select **Connected resources** under your project.
67
-
1. Identify the three resources you need to configure: the **Azure AI Search**, the **Azure OpenAI**, and the **Azure Blob storage** that corresponds to your **workspaceblobstore**.
68
+
1. Identify the three resources you need to configure: the **Azure OpenAI**, the **Azure AI Search**, and the **Azure Blob storage** that corresponds to your **workspaceblobstore**.
68
69
69
70
:::image type="content" source="../media/tutorials/deploy-chat-web-app/resources.png" alt-text="Screenshot shows the connected resources that need to be configured.":::
70
71
71
72
> [!TIP]
72
-
> If you have multiple **Azure OpenAI** resources, select the one that contains your deployed chat model.
73
+
> If you have multiple **Azure OpenAI** resources, use the one that contains your deployed chat model.
73
74
74
75
1. For each resource, select the link to open the resource details. From the details page, select the resource name to open the resource in the Azure portal. (For the workspaceblobstore, select **View in Azure Portal**).
75
-
1. After the tab opens, go back to the Azure AI Foundry portal and repeat the process for the next resource.
76
+
1. After the browser tab opens, go back to the Azure AI Foundry portal and repeat the process for the next resource.
76
77
1. When you're done, you should have three new browser tabs open, for **Search service**, **Azure AI services**, and **blobstore Container**. Keep all three new tabs open as you'll go back and forth between them to configure the resources.
77
78
78
79
### Enable managed identity
79
80
80
-
On the tab for the **Search service** resource in the Azure portal, enable the managed identity:
81
+
On the browser tab for the **Search service** resource in the Azure portal, enable the managed identity:
81
82
82
83
1. From the left pane, under **Settings**, select **Identity**.
83
84
1. Switch **Status** to **On**.
84
85
1. Select **Save**.
85
86
86
-
On the tab for the **Azure AI services** resource in the Azure portal, enable the managed identity:
87
+
On the browser tab for the **Azure AI services** resource in the Azure portal, enable the managed identity:
87
88
88
89
1. From the left pane, under **Resource Management**, select **Identity**.
89
90
1. Switch **Status** to **On**.
90
91
1. Select **Save**.
91
92
92
93
### Set access control for search
93
94
94
-
On the tab for the **Search service** resource in the Azure portal, set the API Access policy:
95
+
On the browser tab for the **Search service** resource in the Azure portal, set the API Access policy:
95
96
96
97
1. From the left pane, under **Settings**, select **Keys**.
97
98
1. Under **API Access control**, select **Both**.
@@ -105,23 +106,23 @@ You'll repeat this pattern multiple times in the bulleted items below.
105
106
106
107
Use these steps to assign roles for the resources you're configuring in this tutorial:
107
108
108
-
* Assign the following roles on the tab for **Search service** in the Azure portal:
109
+
* Assign the following roles on the browser tab for **Search service** in the Azure portal:
109
110
***Search Index Data Reader** to the **Azure AI services** managed identity
110
111
***Search Service Contributor** to the **Azure AI services** managed identity
111
112
***Contributor** to yourself (to find **Contributor**, switch to the **Privileged administrator roles** tab at the top. All other roles are in the **Job function roles** tab.)
112
113
113
-
* Assign the following roles on the tab for **Azure AI services** in the Azure portal:
114
+
* Assign the following roles on the browser tab for **Azure AI services** in the Azure portal:
114
115
115
116
***Cognitive Services OpenAI Contributor** to the **Search service** managed identity
116
117
***Contributor** to yourself.
117
118
118
-
* Assign the following roles on the tab for **Azure Blob storage** in the Azure portal:
119
+
* Assign the following roles on the browser tab for **Azure Blob storage** in the Azure portal:
119
120
120
121
***Storage Blob Data Contributor** to the **Azure AI services** managed identity
121
122
***Storage Blob Data Reader** to the **Search service** managed identity
122
123
***Contributor** to yourself
123
124
124
-
You're done configuring resources. You can close the Azure portal tabs now if you wish.
125
+
You're done configuring resources. You can close the Azure portal browser tabs now if you wish.
125
126
126
127
## Add your data and try the chat model again
127
128
@@ -131,21 +132,22 @@ In the [Azure AI Foundry playground quickstart](../quickstarts/get-started-playg
131
132
132
133
## Deploy your web app
133
134
134
-
Once you're satisfied with the experience in Azure AI Foundry portal, you can deploy the model as a standalone web application.
135
+
Once you're satisfied with the experience in the Azure AI Foundry portal, you can deploy the model as a standalone web application.
135
136
136
137
### Find your resource group in the Azure portal
137
138
138
139
In this tutorial, your web app is deployed to the same resource group as your [Azure AI Foundry hub](../how-to/create-secure-ai-hub.md). Later you configure authentication for the web app in the Azure portal.
139
140
140
-
Follow these steps to navigate from Azure AI Foundry to your resource group in the Azure portal:
141
+
Follow these steps to navigate to your resource group in the Azure portal:
141
142
142
143
1. Go to your project in [Azure AI Foundry](https://ai.azure.com). Then select **Management center** from the left pane.
143
144
1. Under the **Project** heading, select **Overview**.
144
145
1. Select the resource group name to open the resource group in the Azure portal. In this example, the resource group is named `rg-contoso`.
145
146
146
147
:::image type="content" source="../media/tutorials/chat/resource-group-manage-page.png" alt-text="Screenshot of the resource group in the Azure AI Foundry portal." lightbox="../media/tutorials/chat/resource-group-manage-page.png":::
147
148
148
-
1. You should now be in the Azure portal, viewing the contents of the resource group where you deployed the hub. Keep this page open in a browser tab. You return to it later.
149
+
1. You should now be in the Azure portal, viewing the contents of the resource group where you deployed the hub. Notice the resource group name and location, you'll use this information in the next section.
150
+
1. Keep this page open in a browser tab. You'll return to it later.
149
151
150
152
### Deploy the web app
151
153
@@ -154,7 +156,7 @@ Publishing creates an Azure App Service in your subscription. It might incur cos
154
156
To deploy the web app:
155
157
156
158
> [!NOTE]
157
-
> You need to have**Microsoft.Web** resource provider registered in the selected subscription, to be able to deploy to a web app.
159
+
> You need to [register**Microsoft.Web**as a resource provider](/azure/azure-resource-manager/management/resource-providers-and-types#register-resource-provider-1) before you can deploy to a web app.
158
160
159
161
1. Complete the steps in the previous section to [add your data](#add-your-data-and-try-the-chat-model-again) to the playground.
160
162
@@ -167,31 +169,31 @@ To deploy the web app:
167
169
168
170
1. On the **Deploy to a web app** page, enter the following details:
169
171
-**Name**: A unique name for your web app.
170
-
-**Subscription**: Your Azure subscription.
171
-
-**Resource group**: Select a resource group in which to deploy the web app. You can use the same resource group as the hub.
172
-
-**Location**: Select a location in which to deploy the web app. You can use the same location as the hub.
172
+
-**Subscription**: Your Azure subscription. If you don't see any available subscriptions, first [register **Microsoft.Web** as a resource provider](/azure/azure-resource-manager/management/resource-providers-and-types#register-resource-provider-1).
173
+
-**Resource group**: Select a resource group in which to deploy the web app. Use the same resource group as the hub.
174
+
-**Location**: Select a location in which to deploy the web app. Use the same location as the hub.
173
175
-**Pricing plan**: Choose a pricing plan for the web app.
174
176
-**Enable chat history in the web app**: For the tutorial, the chat history box isn't selected. If you enable the feature, your users have access to their individual previous queries and responses. For more information, see [chat history remarks](#understand-chat-history).
175
177
176
178
1. Select **Deploy**.
177
179
178
180
1. Wait for the app to be deployed, which might take a few minutes.
179
181
180
-
1. When it's ready, the **Launch** button is enabled on the toolbar. But don't launch the app yet and don't close the chat playground page - you return to it later.
182
+
1. When it's ready, the **Launch** button is enabled on the toolbar. But don't launch the app yet and don't close the chat playground page - you'll return to it later.
181
183
182
184
### Configure web app authentication
183
185
184
186
By default, the web app is only accessible to you. In this tutorial, you add authentication to restrict access to the app to members of your Azure tenant. Users are asked to sign in with their Microsoft Entra account to be able to access your app. You can follow a similar process to add another identity provider if you prefer. The app doesn't use the user's sign in information in any other way other than verifying they're a member of your tenant.
185
187
186
-
1. Return to the browser tab containing the Azure portal (or reopen the [Azure portal](https://portal.azure.com?azure-portal=true) in a new browser tab) and view the contents of the resource group where you deployed the hub and web app (you might need to refresh the view the see the web app).
188
+
1. Return to the browser tab containing the Azure portal (or reopen the [Azure portal](https://portal.azure.com?azure-portal=true) in a new browser tab) and view the contents of the resource group where you deployed the web app (you might need to refresh the view the see the web app).
187
189
188
190
1. Select the **App Service** resource from the list of resources in the resource group.
189
191
190
192
1. From the collapsible left menu under **Settings**, select **Authentication**.
191
193
192
194
:::image type="content" source="../media/tutorials/chat/azure-portal-app-service.png" alt-text="Screenshot of web app authentication menu item under settings in the Azure portal." lightbox="../media/tutorials/chat/azure-portal-app-service.png":::
193
195
194
-
1. If you see **Microsoft** listed an Identity provider on this page, you can skip the next step.
196
+
1. If you see **Microsoft** listed an Identity provider on this page, nothing further is needed. You can skip the next step.
195
197
1. Add an identity provider with the following settings:
196
198
-**Identity provider**: Select Microsoft as the identity provider. The default settings on this page restrict the app to your tenant only, so you don't need to change anything else here.
197
199
-**Tenant type**: Workforce
@@ -205,11 +207,11 @@ By default, the web app is only accessible to you. In this tutorial, you add aut
205
207
206
208
You're almost there. Now you can test the web app.
207
209
208
-
1.Wait 10 minutes or so for the authentication settings to take effect.
209
-
1. Return to the browser tab containing the chat playground page in Azure AI Foundry portal.
210
+
1.If you changed settings, wait 10 minutes or so for the authentication settings to take effect.
211
+
1. Return to the browser tab containing the chat playground page in the Azure AI Foundry portal.
210
212
1. Select **Launch** to launch the deployed web app. If prompted, accept the permissions request.
211
213
212
-
*If the authentication settings haven't yet taken effect, close the browser tab for your web app and return to the chat playground in Azure AI Foundry portal. Then wait a little longer and try again.*
214
+
*If the authentication settings haven't yet taken effect, close the browser tab for your web app and return to the chat playground in the Azure AI Foundry portal. Then wait a little longer and try again.*
213
215
214
216
1. In your web app, you can ask the same question as before ("How much are the TrailWalker hiking shoes"), and this time it uses information from your data to construct the response. You can expand the **reference** button to see the data that was used.
215
217
@@ -233,7 +235,7 @@ If you delete the Cosmos DB resource but keep the chat history option enabled on
233
235
234
236
## Update the web app
235
237
236
-
Use the playground to add more data or test the model with different scenarios. When you're ready to update the web app with the new model, select **Deploy > ...as a web app** again. Select **updat an existing web app** and choose the existing web app from the list. The new model deploys to the existing web app.
238
+
Use the playground to add more data or test the model with different scenarios. When you're ready to update the web app with the new model, select **Deploy > ...as a web app** again. Select **Update an existing web app** and choose the existing web app from the list. The new model deploys to the existing web app.
0 commit comments