Modification of the Logo used in Web App Chatbot generated within Azure OpenAI Playground

Question

I have created a chatbot using Azure OpenAI playground.

A web app has been deployed and I can use it as intended.

However, it is not clear how to change the "Contoso" logo of that default app.

The answers given in the following URLs, do not help (I am not familiar with Github):

• https://learn.microsoft.com/en-us/answers/questions/1368491/how-can-i-modify-the-logo-of-my-azure-openai-chatb
• https://learn.microsoft.com/en-us/answers/questions/1479234/azure-web-app-customization

Furthermore, Microsoft documentation does not provide instructions to personalize the site.

Finally, using a Bash console to this web app did not help me as those files are saved in a temporary storage and are lost after a service restart. Can anyone please provide the steps to achieve that?

Answer 1

In case someone else faces the issue, it was solved making these steps:

• Add the following variables (or whichever suits you):
  • UI_TITLE
  • UI_LOGO
  • UI_CHAT_TITLE
  • UI_CHAT_LOGO
  • UI_CHAT_DESCRIPTION
• Using the Deployment center, sync to the most recent build
• After the sync is done, restart the app.

It seems there was an issue which was solved in the most recent version https://github.com/microsoft/sample-app-aoai-chatGPT/issues/618

Answer 2

VasilisK Greetings!

I understand that you would like to change the logo of the web app.

You can customize your published web app in the Azure portal. The source code for the published web app is available on GitHub, where you can find information on changing the app frontend, as well as instructions for building and deploying the app.

I would suggest you, fork/clone this repository and make your own modifications to the UX. Once forked, you can modify the code as per your updated logo. Below is a sample how you can modify the images.

The answers given in the following URLs, do not help (I am not familiar with Github):

You can also modify the code using VS Code or Visual Studio if you are not able to use GitHub.

Furthermore, Microsoft documentation does not provide instructions to personalize the site.

Please see Common Customization Scenarios (e.g. updating the default chat logo and headers)for more details.

Do let me know if that helps or have any other queries.

If the response helped, please do click Accept Answer and Yes for was this answer helpful.

Answer 3

VasilisK I'm glad that your issue is resolved and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Since the Microsoft Q&A community has a policy that the question author cannot accept their own answer, they can only accept answers by others, I'll repost your solution in case you'd like to Accept the answer.

Error Message:

I'm glad that your issue is resolved and thank you for posting your solution so that others experiencing the same thing can easily reference this!

Since the Microsoft Q&A community has a policy that the question author cannot accept their own answer, they can only accept answers by others, I'll repost your solution in case you'd like to Accept the answer.

Error Message:

Solution:

• Add the following variables (or whichever suits you): UI_TITLE UI_LOGO UI_CHAT_TITLE UI_CHAT_LOGO UI_CHAT_DESCRIPTION
• Using the Deployment center, sync to the most recent build
• After the sync is done, restart the app.

It seems there was an issue which was solved in the most recent version https://github.com/microsoft/sample-app-aoai-chatGPT/issues/618

If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue.

Answer 4

What worked for me - you can go to this link: https://github.com/microsoft/sample-app-aoai-chatGPT/tree/main?tab=readme-ov-file#common-customization-scenarios-eg-updating-the-default-chat-logo-and-headers

This is the default value.

Now:

1. Go to your web-app on Azure Portal
2. Under settings - "Environment Variables"
3. Now - either these "App Settings" would be present (can search them) or they wouldn't be. If they are - rather than editing, just delete older entries and "Add" them again
4. In value - put the text / URL as required: Here I changed the title to "Matlani" and the Chat Title to "NEXT". It would take 5-10 minutes to configure and appear!

Hope it helps!