Skip to content

Latest commit

 

History

History
44 lines (29 loc) · 3.15 KB

postcards-instructions.md

File metadata and controls

44 lines (29 loc) · 3.15 KB

📬 Create and Send Email Postcards 🖼️

In this exercise, you will use GitHub Copilot to create a web app for creating and sending email postcards. Let's spread some holiday cheer with beautiful digital postcards! 🎁✨

Instructions

  1. Create a new GitHub repository for this exercise and clone it to your local machine.

  2. Create a new Angular project using the Angular CLI:

    ng new postcards

  3. Generate a new component for the postcard creation form:

    ng generate component postcard-form

  4. Start a new Copilot "Edits" session in Visual Studio Code. "Edits" is currently in preview. If something goes wrong, you can try the Copilot Chat instead.

  5. These are the prompts you will use for Copilot. After each prompt, you will see the code generated by Copilot. Review the code and make any necessary changes. Then accept the code and move on to the next prompt.

    • The postcard-form component should show a form to create xmas postcards. The users can put their details (name and email) and a description of the postcard. The form will be sent to an existing REST service that generates and sends back a postcard composed of an image and text using AI. The component will show the response and give an option to send the postcard via email calling another existing service. Use friendly wording and styles according to xmas. Make sure it shows in the app.component.html. Don't use FormBuilder.
    • Create model and service files for the communication with the generator and email sender services. Use base64 encoded files for the image.

  6. At this point, you should have a working form that sends the desired postcard details to a REST service. With the response, it will be able to send the postcard via email using a second service. Let's create both services.

  7. Use these prompts to generate the AI service:

    • I want to create a service that generates and sends xmas postcards with one operation for each task. Create the service using Python and FastAPI. First, we will generate the operation that generates postcards using AI. It uses Azure OpenAI with the GPT-4 model to generate a text for the postcard. It also uses Dall-e-3 to generate the postcard image. Set up the system prompt for GPT so it uses warm and friendly language but also follows the user instructions for the generated postcard. For the response use the model already created in the frontend.
    • Update the backend so it uses the 1.x OpenAI client and "client.chat.completions".
    • Update the backend so it uses dotenv to store the API key and the model base URL. Add the necessary variables to a new .env file.
    • Add another operation to send the postcard via email.
    • Change the email so it uses HTML and shows the image first and then the text.
    • Create the requirements.txt according to the dependencies needed for the service.

  8. At this point, you should have a working web app that allows the user to create and send email postcards. If you are stuck, you can check the solution in the 'solution' folder and run it with the following commands (frontend and backend):

    ng serve
uvicorn backend:app --reload