Build a Powerful Story Generator with Azure Open AI

Table of Contents

• Introduction
• Building Applications that Connect to Azure Open AI
• Prerequisites for Building Azure Open AI Apps
• Creating Resources in Azure
• Setting up the Coding Project
• Creating the User Interface (UI)
• Connecting to the Azure Open AI Service
• Generating Story Prompts
• Displaying the Generated Story
• Conclusion

Introduction 🎉

In this article, we will explore how to build applications that connect to Azure Open AI directly. This will be the first part of our Open AI Series, where we will dive into the process of writing code that connects to the service. We will not only be using the Open AI service through a UI, but also learning how to build apps that interact with it. So, let's get started and start coding!

Building Applications that Connect to Azure Open AI 💻

Before we dive into the coding part, let's take a quick look at what we'll be building. In this video, we'll be creating a Story Generator that utilizes Azure Open AI. This app allows users to enter different values for various aspects of a story, such as the title, character, and environment. Once the user submits the form, the app sends these parameters to the Azure Open AI service, which generates an auto-generated story based on the provided criteria. We'll explore more examples and functionalities of this app after we finish building it.

Prerequisites for Building Azure Open AI Apps 📋

To successfully follow along with the coding perspective of this Tutorial, it is recommended to have at least basic experience with the .NET Tech stack. However, if you prefer using a different programming language like Python, Open AI does support other languages, and most of the concepts covered here should be applicable. Additionally, having a basic understanding of Azure and how its services are structured, as well as some general knowledge about connecting to them, will be helpful. Don't worry if you don't know too much about Azure, as we will go through the steps in a step-by-step manner. It's worth mentioning that this tutorial is based on .NET and Azure, and we have also time-stamped the video for quick navigation if you are only interested in the AI portion.

Creating Resources in Azure ⚙️

Let's start by creating the necessary resources in Azure for our app. Please note that we will go through this section quickly as there is a dedicated getting started video available that provides an extensive explanation of the Azure Open AI service in the Azure portal and Azure AI Studio. For now, our focus will be on creating the resources and understanding a few key concepts required for wiring up our app. Firstly, we need to search for "OpenAI" in the search bar at the top or click on the OpenAI resource if available. It is worth noting that at the time of this Recording, accessing Azure Open AI service requires requesting access. Once you have access, create a new resource group and select your preferred region. Choose the pricing tier and complete the process.

Setting up the Coding Project 🚀

With our Azure resources successfully created, let's move on to setting up the coding project we will be working with. In this tutorial, we will be using .NET, but the conceptual ideas and concepts should apply to other programming languages as well. If you prefer using Python or any other language, feel free to do so, as Open AI supports multiple languages. In Visual Studio, let's create a new ASP.NET Core web app project. Make sure to choose the appropriate .NET version and give the project a suitable name. For this tutorial, we will be using .NET 7. Once the project is generated, let's run the app to ensure everything is working correctly. If you encounter any errors along the way, make sure to double-check the details and resolve them accordingly.

Creating the User Interface (UI) 💡

Now that we have our project set up, let's start building the user interface (UI) for our app. We will begin by creating the view model for our form page, which will be responsible for populating the form fields based on user input. Inside the Pages directory, let's create a new folder called "Models" and add a new class named "StoryDetails". This class will consist of properties such as "Title", "Tone", "Name", and "Environment". These properties will be bound to the form fields in our UI. Moving on to the index.cshtml file, we will build out the UI elements to create the form. We will make use of Bootstrap classes to style our elements and create a visually appealing layout. Additionally, we will create a submit button and a section to display the generated story. At this stage, the UI may appear simple, but it will serve as a solid foundation for our Open AI integration.

Connecting to the Azure Open AI Service 🔌

To connect our app to the Azure Open AI service, we need to utilize a service client, which is a C# class that facilitates communication with Azure services. While Azure offers a dedicated Open AI client, we need to add the appropriate NuGet Package to our project. Once added, we can create an instance of the AI client class, passing in the required endpoint and key credentials. These credentials will be used to authenticate our app and establish a secure connection to the Open AI service. To ensure successful integration, it is crucial to handle the formatting and correct placement of these credentials within our code.

Generating Story Prompts 📖

With our app successfully connected to the Open AI service, we can now generate story prompts based on user input. This is achieved by sending a prompt, which consists of a block of text, to the Open AI service. The prompt is processed as a series of tokens, which can be considered as individual words or fragments of words. These tokens are then processed by the pre-trained model within the Open AI service, resulting in a completion or a statistically generated response. In our case, the user input from the UI serves as the foundation for the prompt, making each generated story unique based on the provided parameters.

Displaying the Generated Story 📜

After sending the Prompt to the Open AI service and receiving a completion in response, we need to display the generated story to the user. To accomplish this, we create a property within our app to store the content of the generated story. This property can be bound to a section in the UI, allowing the user to see the generated story in real-time. By assigning the response content to our UI property, we ensure that the generated story is displayed accurately. With this step, we complete the core functionality of our app, allowing users to enter parameters, generate stories, and view the results seamlessly.

Conclusion 🏁

In this article, we explored the process of building applications that connect to Azure Open AI directly. We started by setting up the necessary resources in Azure and then proceeded to create our coding project. We built a user interface (UI) that allows users to enter story parameters and connected our app to the Azure Open AI service. By generating story prompts based on user input and displaying the generated stories, we were able to create a functional story generator app. This tutorial served as an introduction to utilizing the Open AI service and demonstrated the potential for building more complex applications in the future.

Thank you for joining us on this journey of exploring Azure Open AI and building applications that leverage its capabilities. Stay tuned for upcoming articles where we will dive deeper into the possibilities and functionalities of this powerful service.

Highlights ✨

• Connect your applications directly to Azure Open AI
• Build a story generator app with customized parameters
• Utilize Azure resources for seamless integration
• Enhance the user experience with a well-designed UI
• Prompt the Open AI service for story completions
• Display the generated stories in real-time

FAQ

Q: Can I use a different programming language instead of .NET to build applications with Azure Open AI? A: Yes, Azure Open AI supports multiple programming languages, including Python. While this tutorial focuses on .NET, the concepts and functionalities can be applied to other languages as well.

Q: Are there any prerequisites for building Azure Open AI apps? A: Basic knowledge of the .NET Tech Stack and Azure services is recommended. Understanding how services are structured in Azure and having experience with connecting to them will be beneficial. However, this tutorial provides step-by-step guidance for beginners.

Q: How can I ensure the security of my Azure Open AI keys and endpoints? A: It is crucial to never share your keys with anyone. If you have accidentally shared them, reset or revoke the keys immediately to maintain the security of your resources.

Q: Can Azure Open AI generate other types of content besides stories? A: Yes, Azure Open AI has a wide range of capabilities beyond story generation. It can generate text, answer questions, create conversational agents, translate languages, and much more. The possibilities are vast and can be explored based on your specific application requirements.

Resources:

• Azure Open AI
• Visual Studio
• Azure AI Studio
• GitHub Repository