Built with ❤ by everybody who wants to make the Microsoft App Dev Innovation world a little bit more diverse!
@@ -10,9 +16,19 @@
-## [Click here to take a look at the sample app](https://microsoft.github.io/anyonecancode/)
+# Welcome to our coding journey!
+
+It's great to have you here! 🎉
+
+You have two exciting choices ahead of you:
-## Agenda for the Anyone can Code workshop
+1. **Build your own social media app** - If you're outcome-oriented and want to show off a cool social media application, stay right here in this repository! You'll learn how to deploy and configure your very own app. It's a fantastic way to dive right into the world of software development! **[Click here to take a look at the sample app](https://microsoft.github.io/everyonecancode/)**
+
+3. **Learn to code by building a todo app** - If you're detail-oriented and want to start off your coding journey with a solid foundation, jump over to this repository: [ToDo Application](https://github.com/microsoft/EveryoneCanCode-US/blob/main/Track_1_ToDo_App/README.md). You'll get to learn the basics of coding by building an intuitive, yet powerful, todo app.
+
+No matter which path you choose, we're thrilled to be a part of your coding adventure. Let's get started! 🚀
+
+## Agenda for the Everyone can Code workshop
### Day 1
- Create your own GitHub Account and merge your first pull request
@@ -21,15 +37,17 @@
- Play around with the frontend to customize your App and to understand the basic underlying concept of Azure
- Use Azure Functions to automate your tasks
- Use storages and databases to store images and data
+- Use Github Copilot to make changes to the codesource
All these Azure Services are used behind the scenes and can be consumed by our application aka personal App.
### Day 2
- Make your existing personal app smart with pre-trained machine learning models. For this we will focus on our managed services like Azure Cognitive Services: Computer Vision API and Speech API.
- Connect your application with the services. This shows the entire lifecycle and brings together best of both worlds.
+- Add a chat bot to the application using Azure OpenAI.
- Trainers will suggest a long list of online courses to get started and to get a deeper dive into the technologies.
-Furthermore, all Anyone Can Code graduates are invited to join our [AI Developer College](https://github.com/azuredevcollege/aidevcollege) or
+Furthermore, all Everyone Can Code graduates are invited to join our [AI Developer College](https://github.com/azuredevcollege/aidevcollege) or
[Azure Developer College](https://github.com/azuredevcollege/trainingdays).
@@ -47,10 +65,11 @@ Here's the overview of the training week. Happy hacking!
- [Day 1 - GitHub - Create new dreams](instructions/day1/GitHub/README.md)
- [Day 1 - Make the first changes](instructions/day1/ApplicationPart1/README.md)
- [Day 1 - Application on our Phone ](instructions/day1/ApplicationPart2/README.md)
+- [Day 1 - Make changes with Github Copilot](instructions/day1/ApplicationPart3/README.md)
- [Day 2 - Make our application recognizer objects in images](instructions/day2/Vision/README.md)
- [Day 2 - Make our application understand speech](instructions/day2/Speech/README.md)
-
-## Goal of the Anyone can Code Program for women in the ENTIRE ECOSYSTEM over Generations
+- [Day 2 - Power up our application with a chat bot](instructions/day2/Chat/README.md)
+## Goal of the Everyone can Code Program for women in the ENTIRE ECOSYSTEM over Generations
The goal is to show all women of any generation, that anything is possible also in the area of tech and to light the fire for coding. We aim to connect all generations of women whether they are pupils, university students or professionals already performing in jobs. Furthermore, we aim to connect those generations which haven't gotten in touch with tech yet since we noticed that there is a huge gap between these communities. We believe there aren't enough female tech heroes yet.
diff --git a/app.py b/app.py
index 25a3d99a..e1097d2c 100644
--- a/app.py
+++ b/app.py
@@ -9,19 +9,21 @@
from datetime import datetime
from typing import List
from urllib.parse import quote
-
import uvicorn
from azure.core.exceptions import ResourceNotFoundError
from azure.storage.blob import BlobServiceClient
from fastapi import Depends, FastAPI, File, HTTPException, Request, UploadFile
from fastapi.responses import RedirectResponse, StreamingResponse, JSONResponse
from pydantic import BaseModel
+import openai
+
+
app = FastAPI()
cache_header = {"Cache-Control": "max-age=31556952"}
shared_container_client = None
-
+shared_openai_client = None
async def get_container_client():
"""Get a client to interact with the blob storage container."""
@@ -34,17 +36,54 @@ async def get_container_client():
shared_container_client = service.get_container_client("images")
return shared_container_client
+async def get_openai_client():
+ """Get a client to interact with the Azure OpenAI chat API."""
+ global shared_openai_client
+ if not shared_openai_client:
+ chat_api_key = os.environ["CHAT_API_KEY"]
+ chat_azure_endpoint = os.environ["CHAT_API_ENDPOINT"]
+ chat_azure_deployment = os.environ["AZURE_OPENAI_MODEL_NAME"]
+
+ shared_openai_client = openai.AzureOpenAI(
+ api_key=chat_api_key,
+ api_version="2023-12-01-preview",
+ azure_endpoint=chat_azure_endpoint,
+ azure_deployment=chat_azure_deployment
+ )
+ return shared_openai_client
@app.exception_handler(KeyError)
async def unicorn_exception_handler(request: Request, exc: KeyError):
"""Handle missing environment variables."""
- if exc.args[0] == "CUSTOMCONNSTR_STORAGE":
+ match exc.args[0]:
+ case "CUSTOMCONNSTR_STORAGE":
return JSONResponse(
status_code=500,
content={
"message": f"Oops! You forgot to set the STORAGE connection string for your Azure Storage Account. You can test locally by setting CUSTOMCONNSTR_STORAGE. 🤓"
},
)
+ case "CHAT_API_KEY":
+ return JSONResponse(
+ status_code=500,
+ content={
+ "message": f"Oops! You forgot to set the CHAT_API_KEY environment variable. 🤓"
+ },
+ )
+ case "CHAT_API_ENDPOINT":
+ return JSONResponse(
+ status_code=500,
+ content={
+ "message": f"Oops! You forgot to set the CHAT_API_ENDPOINT environment variable. 🤓"
+ },
+ )
+ case "AZURE_OPENAI_MODEL_NAME":
+ return JSONResponse(
+ status_code=500,
+ content={
+ "message": f"Oops! You forgot to set the AZURE_OPENAI_MODEL_NAME environment variable. 🤓"
+ },
+ )
raise exc
@@ -59,11 +98,13 @@ async def unicorn_exception_handler(request: Request, exc: KeyError):
)
raise exc
-
class Image(BaseModel):
created_at: datetime = None
image_url: str
+class Prompt(BaseModel):
+ message: str
+
@app.get("/")
async def redirect_to_docs():
@@ -126,6 +167,23 @@ async def upload(
return {"filename": file.filename}
+
+
+@app.post("/chat")
+async def chat(prompt: Prompt, azOpenAIClient=Depends(get_openai_client)):
+ messages = [
+ {"role": "system", "content": "You are a helpful assistant."},
+ {"role": "user", "content": prompt.message}
+ ]
+
+ response = azOpenAIClient.chat.completions.create(
+ model="gpt-35-turbo",
+ messages=messages,
+ )
+ return response.choices[0].message.content
+
if __name__ == "__main__":
"""Run the app locally for testing."""
uvicorn.run(app, port=8000)
+
+
diff --git a/frontend/README.md b/frontend/README.md
index 0ea401a9..1f866987 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,24 +1,29 @@
# female-app-innovation-frontend
## Project setup
-```
+
+```bash
npm install
```
### Compiles and hot-reloads for development
-```
-npm run serve
+
+```bash
+npm run dev
```
### Compiles and minifies for production
-```
+
+```bash
npm run build
```
### Lints and fixes files
-```
+
+```bash
npm run lint
```
### Customize configuration
+
See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/frontend/src/components/ImageList.vue b/frontend/src/components/ImageList.vue
index c4530c1e..2dbb1187 100644
--- a/frontend/src/components/ImageList.vue
+++ b/frontend/src/components/ImageList.vue
@@ -1,6 +1,6 @@
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9521dad5..8ba62585 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -14,6 +14,7 @@ import {
faExclamationCircle,
faArrowLeft,
faObjectGroup,
+ faComments
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import router from "./router";
@@ -28,7 +29,8 @@ library.add(
faCheck as any,
faExclamationCircle as any,
faArrowLeft as any,
- faObjectGroup as any
+ faObjectGroup as any,
+ faComments as any
);
Vue.use(VueSimpleAlert);
Vue.use(VueRecord);
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index df1735fa..a1e098e2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -6,6 +6,7 @@ import Camera from "../views/Camera.vue";
import FaceAI from "../views/FaceAI.vue";
import ComputerVision from "../views/ComputerVision.vue";
import EditProfile from "../views/EditProfile.vue";
+import Chat from "../views/Chat.vue"
Vue.use(VueRouter);
@@ -40,6 +41,11 @@ const routes = [
name: "editprofile",
component: EditProfile,
},
+ {
+ path: "/chat",
+ name: "chat",
+ component: Chat,
+ },
];
const router = new VueRouter({
diff --git a/frontend/src/settings.ts b/frontend/src/settings.ts
index 0ad5ba3a..a1c71bbb 100644
--- a/frontend/src/settings.ts
+++ b/frontend/src/settings.ts
@@ -4,6 +4,7 @@ const speechApiKey = import.meta.env.VITE_SPEECH_API_KEY || "";
const faceApiEndpoint = import.meta.env.VITE_FACE_API_ENDPOINT || "";
const visionApiKey = import.meta.env.VITE_VISION_API_KEY || "";
const visionApiEndpoint = import.meta.env.VITE_VISION_API_ENDPOINT || "";
+const chatApiEndpoint = import.meta.env.VITE_CHAT_API_ENDPOINT || "";
export {
imageApiUrl,
@@ -12,4 +13,5 @@ export {
speechApiKey,
visionApiKey,
visionApiEndpoint,
+ chatApiEndpoint,
};
diff --git a/frontend/src/views/Chat.vue b/frontend/src/views/Chat.vue
new file mode 100644
index 00000000..1152be8c
--- /dev/null
+++ b/frontend/src/views/Chat.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/FaceAI.vue b/frontend/src/views/FaceAI.vue
index c0a4e980..7f4e3f5e 100644
--- a/frontend/src/views/FaceAI.vue
+++ b/frontend/src/views/FaceAI.vue
@@ -149,14 +149,18 @@ export default class FaceAI extends Vue {
],
})
.then((response) => {
- if(response.length == 0) {
- this.$confirm("The AI could not recognize your face, make sure the gray box covers most of your face.", "AI Error", "error")
- .then((r: boolean) => {
- this.$router.go(0);
- })
- .catch(() => {
- this.$router.push({ name: 'home' })
- });
+ if (response.length == 0) {
+ this.$confirm(
+ "The AI could not recognize your face, make sure the gray box covers most of your face.",
+ "AI Error",
+ "error"
+ )
+ .then((r: boolean) => {
+ this.$router.go(0);
+ })
+ .catch(() => {
+ this.$router.push({ name: "home" });
+ });
return;
}
this.faces = response.map((face) => {
@@ -199,11 +203,15 @@ export default class FaceAI extends Vue {
glasses,
};
});
- }).catch(err => {
- this.$alert("An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.", "Face AI not available", "warning")
- .then(() => this.$router.go(0));
- console.log("An error occurred:");
- console.error(err);
+ })
+ .catch((err) => {
+ this.$alert(
+ "An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.",
+ "Face AI not available",
+ "warning"
+ ).then(() => this.$router.go(0));
+ console.log("An error occurred:");
+ console.error(err);
});
});
}
diff --git a/img/BannerEveryoneCanCode.png b/img/BannerEveryoneCanCode.png
new file mode 100644
index 00000000..1935ca2b
Binary files /dev/null and b/img/BannerEveryoneCanCode.png differ
diff --git a/instructions/day1/ApplicationPart1/README.md b/instructions/day1/ApplicationPart1/README.md
index e638f6bc..48eaee21 100644
--- a/instructions/day1/ApplicationPart1/README.md
+++ b/instructions/day1/ApplicationPart1/README.md
@@ -15,7 +15,7 @@ Today you will learn how to:
## Table Of Contents
1. [Create a new branch in your project](#create-a-new-branch-in-your-project)
-2. [Change the title and it's color of your App](#change-the-title-and-its-color-of-your-app)
+2. [Change the title and its color of your App](#change-the-title-and-its-color-of-your-app)
3. [Test your changes in your codespace](#test-your-changes-in-your-codespace)
4. [Commit & push your changes](#commit--push-your-changes)
5. [Open a pull request and merge it](#open-a-pull-request-and-merge-it)
@@ -26,8 +26,18 @@ Go to your repository on GitHub. Click on the "main" dropdown and type in the na
+Let's type a few git commands in the terminal to create a new branch.
+
+
+
+What is a terminal?
+
+You are probably used to getting things done on your computer by moving your mouse around and clicking on things. There is actually a different way with which you can use your computer: The terminal!\ Instead of moving your mouse you can type a command in the terminal and the computer will execute it. Say, you want to go to a specific folder on your computer - we have a command for that, namely, `cd ` (cd stands for change directory). There are many other commands that can do many different things. We call the set of all commands and their combinations the Shell Scripting language. You can try them out for yourself, go to the terminal (the little box as shown in the picture) and type `help` - this will list all the built-in commands. Feel free to play around and give them a try to familiarize yourself with the environment. For some handy common commands you can try: `pwd` (outputs the path of your current directory, pwd stands for print working directory) and `ls` (lists all the files in the current repository)
+
+
+
Go back into your codespace and type into the terminal:
-
+
git pull
and afterwards:
@@ -40,27 +50,35 @@ It should look similar to this:
Congrats! You just created a new branch and switched to it successfully. Now you can start making changes to your code!
-## Change the title and it's color of your App
+## Change the title and its color of your App
-Open the file **Home.vue** from the folder **frontend/src/views**. On top you find a so called `` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `` tags.
+Open the file `Home.vue` from the folder `frontend/src/views`. On top you find a so called `` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `` tags.
-To change the color we need to add a new attribute to the `` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. You can find a full list of all possible colors [here](https://htmlcolorcodes.com/color-names/).
+To change the color we need to add a new attribute to the `` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. [You can find a full list of all possible colors here.](https://htmlcolorcodes.com/color-names/)
-## Test your changes in your codespace
+## Test your changes in your codespace
1. Install recommended extensions when prompted.
2. In the terminal, navigate to the frontend folder with `cd frontend`
3. Run `npm install` to install node packages.
-4. Build the app with this command - `npm run build`
-5. Run the app - `npm run serve`
-6. Click *browse to site* when it pops up to see the deployed test site - you should now see your changes!
+4. Build the app with this command - `npm run dev`
+5. Click _browse to site_ when it pops up to see the deployed test site, you should now see your changes
+6. Now, try to change the color of the title to another color of your choice: the color will change automatically in the browser without you having to refresh the page!
+
+
+| :warning: Troubleshooting |
+|:---------------------------|
+| if the `open in browser`pop-up does not show up at the bottom of your window, refresh the page and retry |
+
+
+
## Commit & push your changes
Click on the `+` sign on the upper right of your terminal to create a new one. We do not want to stop our app from running, so we will use a new terminal for the next steps.
@@ -71,20 +89,25 @@ After verifying your changes, it's time to commit and push. At first we want to
-Now run first `git add .` what will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
+Now first run `git add .` this will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
## Open a pull request and merge it
-Now go back into your GitHub repository. You should see a message that you have pushed your branch. Click on the **Compare & pull request** button to open a new pull request.
+Now go back into your GitHub repository. You should see a message that you have pushed your branch. Click on the **Compare & pull request** button to open a new pull request.
+
+> If this message does not appear, click on the **Pull requests** tab and then on the **New pull request** button.
-A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
+A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
Click on the **Create pull request** button on the lower left to create a new pull request.
+> **Note**
+> Please check that you open the pull request against the main branch of your own repository as shown in the screenshot below!
+
Another window opens. Here you can review your changes again. Click on **Files changed**. You can see the changes we have made in the **Home.vue** file.
@@ -93,14 +116,13 @@ Another window opens. Here you can review your changes again. Click on **Files c
Click back on **Conversation** to see the conversation view. Here you can see the commit message and the description we have added.
-Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch.
+Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch.
Today we will do this ourselves. Click on the **Merge pull request** and then **Confirm merge** button to merge your recent made changes.
-If everything went well, you should see a message that your pull request has been merged.
+If everything went well, you should see a message that your pull request has been merged.
-Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.
-
+Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.
[◀ Previous challenge](../GitHub/README.md) | [🔼 Home](../../../README.md) | [Next challenge ▶](../ApplicationPart2/README.md)
diff --git a/instructions/day1/ApplicationPart1/images/terminal.png b/instructions/day1/ApplicationPart1/images/terminal.png
new file mode 100644
index 00000000..30d42d58
Binary files /dev/null and b/instructions/day1/ApplicationPart1/images/terminal.png differ
diff --git a/instructions/day1/ApplicationPart2/README.md b/instructions/day1/ApplicationPart2/README.md
index cc3fe89b..2b941fc2 100644
--- a/instructions/day1/ApplicationPart2/README.md
+++ b/instructions/day1/ApplicationPart2/README.md
@@ -61,7 +61,7 @@ _A [repository](https://docs.github.com/github/creating-cloning-and-archiving-re
-Make sure that the Actions have read/write permissions. Check this via Settings->Actions->General and scroll down to the *Workflow permissions* section. Click the *Read and write permissions* option. Click *Save*.
+Make sure that the Actions have read/write permissions. Check this via Settings->Actions->General and scroll down to the _Workflow permissions_ section. Click the _Read and write permissions_ option. Click _Save_.
### Run GitHub Actions
@@ -84,9 +84,9 @@ it to serve the frontend for Milligram.
- Go to your repository settings-
- Navigate to **Pages**, select the branch _gh-pages_ and hit the save button.
- 
+ 
- The deployment will take 1-2 minutes. After that, the Milligram website is
- accessible through `https://.github.io/anyonecancode/`.
+ accessible through `https://.github.io/everyonecancode/`.
Take a look at the website. Try changing the profile to your GitHub account name
and see that it is stored even if you refresh the browser.
@@ -103,7 +103,10 @@ features are:
- Detect objects within images and create image descriptions (implemented on day 2)
- Transcribe sentences you speak using Azure Speech Service (implemented on day 2)
-To make the first modifications, open your personal Milligram website on your phone and explore it's content. Then edit the profile in the app to show your own GitHub profile picture in the app.
+Your app is available. But there is no storage or database behind it. So it won't be able to store any data. We'll install that in the next step.
+
+Now, to make the first modifications, open your personal Milligram website on your phone and explore it's content. Then edit the profile in the app to show your own GitHub profile picture in the app.
+
### Add The application to your homescreen
@@ -154,8 +157,8 @@ Just like the disk or storage on your computer. A cool fun fact is that you can
- Select your subscription & the resource group with the name that you used to log into the Azure Portal.
- The name of your Azure Storage account needs to be globally unique. It also has to use small letters and no special characters.
- Make sure to select `Standard` for _Performance_ and `Locally-redundant storage (LRS)` for _Redundancy_.
- 
-- Hit _Review & create_ and after that _Create_ to finish creating the storage account.
+ 
+- Hit _Review_ and after that _Create_ to finish creating the storage account.
- Once the storage account is created there should be a button _Go to resource_. Click on it.
- Now you should see your storage account. Select _Containers_ on the left hand side.
- Click the _New Container_ button and create a container named `images`. Leave everything in the preconfigured settings as is.
@@ -173,14 +176,13 @@ Our [Azure Web App](https://learn.microsoft.com/en-us/azure/static-web-apps/) is
- Make sure to adjust the settings according to the image below:
- Name: ``
- Publish: `Code`
- - Runtime stack: `Python 3.8`
+ - Runtime stack: `Python 3.12`
- Operating System: `Linux`
- Region: `West Europe`
- Create a new App Service Plan and ``.
-- Click on _Change size_ and then click the _Dev/Test_ tab and select the **F1** which is free, otherwise you might be charged when creating a larger plan.
- 
+- In the pricing plan dropdown menu, select **Free F1** which is free, otherwise you might be charged when creating a larger plan.
- Click _Review + Create_ at the bottom of the screen.
- Review the displayed information and click _Create_ on the next screen to spin up the backend application.
@@ -192,13 +194,13 @@ Our [Azure Web App](https://learn.microsoft.com/en-us/azure/static-web-apps/) is
Now let's connect our application with our storage so that you can take pictures on your phone and store them. We need to tell the Web application where it can find our storage service. The application can take external configurations to configure the connection to the storage account.
-- For this reason navigate to your _storage account_ again. You should be able to find it via the search bar in the top either by searching its unique name or just storage account.
-- Under _Access keys_ you can find the _Connection string_ from our storage account. Hit the 👀*Show keys* button so are able to copy it's value to e.g. a notepad.
- 
+- For this reason navigate to your _Storage account_ again. You should be able to find it via the search bar in the top either by searching its unique name or just storage account.
+- Under _Access keys_ you can find the _Connection string_ from our storage account. Hit the _👀 Show keys_ button so are able to copy it's value to e.g. a notepad.
+ 
- Navigate back to the web app and open the _Configuration_ tab, click _New connection string_ and create a new connection string with the following settings:
- - Name: `STORAGE`
- - Value: ``
- - Type: `Custom`
+ | Connection string | Type | Value |
+ |-|-|-|
+ | `STORAGE` | Custom | `` |
- Hit `ok` and `Save`.
- Navigate and scroll down to the _CORS_ tab on the left hand side of your app service and enter `https://.github.io` under _Allowed Origins_.
- Hit `Save` again.
@@ -210,7 +212,7 @@ Now your storage account and web app are successfully connected and can communic
There is still a small configuration missing. Our app uses a ready-made module so that users can interact with their content. But this module is not installed yet. In order for it to be installed, we provide the web app with a configuration that is executed when the app is launched, allowing users to interact with our app's data.
- Navigate to **_Configuration_** under _Settings_.
-- Under the tab **_General settings_** you should find the _Stack settings_. For our backend we are working with the programming language Python - more specifically Python 3.8.
+- Under the tab **_General settings_** you should find the _Stack settings_. For our backend we are working with the programming language Python - more specifically Python 3.12.
- Behind **_Startup Command_** enter `gunicorn -k uvicorn.workers.UvicornWorker` and hit _Save_.
@@ -230,13 +232,13 @@ Once you have hit `Save` the service automatically creates a workflow file in yo
Let's pause a second. To make sure that you are on track, test if our app's frontend gets a response from our backend service. Before we bring everything together, we want to make sure the backend service is working as expected.
- Navigate to the _Overview_ tab on the left hand side of the Web App Service.
- 
-- Hit the _URL_ and test the website using the docs to figure out if the features of our Milligram will work.
+ 
+- Hit on Default Domain, add `/docs` to the end, then test the website using the interactive documentation to figure out if the features of our Milligram will work.
- In your browser you will have the following view:
- 
+ 
:::tip
- 📝 If you want to learn more about Swagger have a look at [Wikipedia]().
+ 📝 If you want to learn more about OpenAPI have a look at [Wikipedia]().
:::
- Select the _GET/images_ endpoint, hit `Try it Out` and then hit `Execute`. Once you get the 200 Response code, you have a successful running service. Congratulations!
@@ -245,16 +247,20 @@ Let's pause a second. To make sure that you are on track, test if our app's fron
📝 Look at the HTTP Response Codes at [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). 2xx Codes generally mean success, where as 4xx and 5xx Codes show different kinds of errors. You probably know 404 - Not Found.
:::
+### Clarifications, What have we done so far?
+
+Congratulations, you have just deployed the backend to your web application! Let us summarize what we have done so far.\
+First, we have deployed the frontend (user interface) of our web app using github pages. This is what you see when you go to your github pages link. The frontend needed a server to serve images and run some logic. This is where the azure part came in. First, we created a storage resource, this is responsible for storing our images. Second, we created a web app resource, here we will run our server logic. The server logic is written in Python using a framework called FastAPI. The server logic code is hosted in the everyonecancode github repository. We connected our web app to the github repository and we instructed the server to run a specific command upon starting the web app. This command will start running our server logic, this is why you can see the docs in your browser under `/docs`. Next up, we will try to connect the Frontend to the Backend.
+
### Integrate Azure Web App URL in GitHub Secrets
Now that we are sure that our backend service works as expected, we can bring everything together.
To do this, we will use a GitHub feature called _Secrets_, where you can store your backend URL to make your frontend talk to the backend service.
-- On your Repository page in GitHub select _Settings_ and navigate to _Secrets_ > _Actions_.
+- On your Repository page in GitHub select _Settings_ and navigate to _Secrets and Variables_ > _Actions_.
- Add a _New repository secret_ named `VITE_IMAGE_API_URL` and as value set ``.
- > ⚠️⚠️ Your URL should end on a **/**. It should look like this: `https://xxxx.azurewebsites.net/`
-
+ > ⚠️⚠️ Your URL should end on a **/**. It should look like this: `https://xxxx.azurewebsites.net/` > 
### Run frontend Pipeline again
@@ -276,7 +282,7 @@ Our frontend application should now have a new button with a camera symbol that
So go ahead and take at least 5 pictures and make sure they appear in your app. Make sure to share them with at least 1-2 friends so they can also upload their photos to your News Feed.
-That's a wrap for today. Congrats!
+That's a wrap for today. Congrats! 🎉
Tomorrow, we will make our app smart by adding artificial intelligence to it for detecting objects within your images as well as talking to our app.
diff --git a/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png b/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png
new file mode 100644
index 00000000..32bdee04
Binary files /dev/null and b/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png differ
diff --git a/instructions/day1/ApplicationPart2/images/light/AppServiceStartupCommand.png b/instructions/day1/ApplicationPart2/images/light/AppServiceStartupCommand.png
index 08fb35d9..fe0bc09d 100644
Binary files a/instructions/day1/ApplicationPart2/images/light/AppServiceStartupCommand.png and b/instructions/day1/ApplicationPart2/images/light/AppServiceStartupCommand.png differ
diff --git a/instructions/day1/ApplicationPart2/images/light/BackendApp0.png b/instructions/day1/ApplicationPart2/images/light/BackendApp0.png
index eefff8b1..629eaa6f 100644
Binary files a/instructions/day1/ApplicationPart2/images/light/BackendApp0.png and b/instructions/day1/ApplicationPart2/images/light/BackendApp0.png differ
diff --git a/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png b/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png
new file mode 100644
index 00000000..128c6566
Binary files /dev/null and b/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png differ
diff --git a/instructions/day1/ApplicationPart3/README.md b/instructions/day1/ApplicationPart3/README.md
new file mode 100644
index 00000000..fb68b23e
--- /dev/null
+++ b/instructions/day1/ApplicationPart3/README.md
@@ -0,0 +1,101 @@
+# Challenge 4: Github Copilot
+
+⏲️ _Est. time to complete: 15 min._ ⏲️
+
+## Here is what you will learn 🎯
+
+Today you will learn how to:
+
+- Adding github copilot to your codespace
+- Adding a footer to the application
+- Generate code with Github Copilot
+- Explain code with Github Copilot
+
+
+## Table Of Contents
+
+1. [Getting Started](#getting-started)
+2. [Add a footer](#add-a-footer)
+3. [Generate Code with Github Copilot](#generate-code-with-github-copilot)
+4. [Explain Code with Github Copilot](#explain-code-with-github-copilot)
+
+### Further informative resources
+
+- [What is CSS?](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [GitHub Copilot Documentation](https://docs.github.com/en/copilot)
+
+
+## Getting Started
+
+In this challenge, we'll delve into refining our code by initiating a new pull request while exploring the capabilities of GitHub Copilot, an AI-driven coding assistant. Our aim is to integrate a footer into our application with the aid of this tool. Let's kickstart the process by integrating GitHub Copilot into our Codespace environment.
+
+Here are the steps to follow:
+
+1. Navigate to the extensions marketplace and search for GitHub Copilot.
+2. Click on the "Install" button to add it to our environment.
+
+
+
+3. Verify the installation by testing its functionality: Open any file within the repository and, at any point in the code, press **Ctrl+I**. If a prompt appears for Copilot to generate code, then the installation is successfully completed!
+
+
+
+## Add a footer
+
+A website footer is a section located at the bottom of a web page. It often contains links or copyright notices. Our goal is to incorporate this section into the application. Let's start this process by creating a new branch:
+
+1. Within our Codespace environment, in the terminal type the command `git checkout -b add-footer`. This command will create a new branch named **add-footer** and automatically switch you to this newly created branch.
+2. Navigate to the file located at **frontend > src > App.vue**.
+3. Inside this file, locate the closing tag, you can find it at **line 11**. Beneath it, insert the following code snippet: ````. This addition will integrate a footer section into our application.
+
+Following what we learnt in our previous challenges, it's crucial to test our changes within the Codespace environment to ensure everything functions as expected. To do this:
+
+1. In the terminal, change the directory to the frontend folder by executing ``cd frontend``.
+2. run the command ``npm run dev`` to start the development server.
+3. click on **Run in Browser** to launch the application in your preferred browser. Once loaded, scroll down to the bottom of the application interface and you should now be able to see the newly added footer.
+
+The current footer has some display issues which we will try to fix with github copilot!
+
+
+## Generate code with Github Copilot
+
+You might have noticed that the footer lacks any visual styling and that when you release the scroll bar, the footer quickly disappears back into the main section of the application. **Cascading Style Sheets (CSS)** is a fundamental language in web development used to manipulate the visual presentation of web pages, including elements like layout, colors, and fonts.
+
+Now, let's consider the scenario where you're a developer who has no experience in working with CSS but still wants to enhance the appearance of the footer and wants to fix the scroll bar problem. This is where GitHub Copilot becomes incredibly useful!
+
+1. Remove the line of code we added at line 12 ````
+2. Select all the code using **Ctrl+A** then press on **Ctrl+I**, write in the prompt bar **Please add a footer to this application that has the text "Made with love ❤️" and please add proper styling**
+3. Copilot will generate code suggestions. Click on "Accept".
+
+
+
+
+4. re-run the application with ``npm run dev`` and view the page again, you should now see the footer with styling and the scrollbar problem should disappear.
+
+
+
+
+
+| :warning: Warning |
+|:---------------------------|
+| Github Copilot might generate different results for every participant. Please expect that your user interface might look different than the one shown in the picture. If you have any issues with the generated code, feel free to ask the instructors. |
+
+
+
+## Explain code with Github Copilot
+
+
+GitHub Copilot serves as a great tool not only for coding but also for understanding unfamiliar sections of code. Its capabilities extend beyond simple code generation; it can assist with bug fixing, code documentation generation, and even test creation.
+
+Now, let's delve into how GitHub Copilot explains code. Follow these steps:
+
+1. Identify a section of code that presents a challenge or that you don't fully grasp, such as the ``.footer`` styling segment.
+2. Press **Ctrl+I** and type **/explain**. This action triggers a list of commands, including **/tests**, **/fix**, and **/docs**.
+3. Upon hitting enter, you'll see an explanation in the chat section of GitHub Copilot, located in the sidebar on the left. This chat interface allows you to interact with Copilot conversationally as long as you ask programming-related queries. Thus, it won't provide information on non-programming topics, such as where to purchase a new guitar.
+
+
+
+Before we move on to the next challenge, try engaging more with Copilot. Explore clarification on various sections of the code that may be interesting to you. Don't hesitate to experiment with different commands and leverage Copilot's capabilities to generate new code snippets. Each time you make a modification, make sure to test it to observe its impact on the application.
+
+
+
diff --git a/instructions/day1/ApplicationPart3/images/copilot-ask.png b/instructions/day1/ApplicationPart3/images/copilot-ask.png
new file mode 100644
index 00000000..9f61451a
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/copilot-ask.png differ
diff --git a/instructions/day1/ApplicationPart3/images/footer-in-milligram.png b/instructions/day1/ApplicationPart3/images/footer-in-milligram.png
new file mode 100644
index 00000000..78e04b7d
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/footer-in-milligram.png differ
diff --git a/instructions/day1/ApplicationPart3/images/github-copilot-add-code-1.png b/instructions/day1/ApplicationPart3/images/github-copilot-add-code-1.png
new file mode 100644
index 00000000..56b23657
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/github-copilot-add-code-1.png differ
diff --git a/instructions/day1/ApplicationPart3/images/github-copilot-add-code-2.png b/instructions/day1/ApplicationPart3/images/github-copilot-add-code-2.png
new file mode 100644
index 00000000..e7b760ae
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/github-copilot-add-code-2.png differ
diff --git a/instructions/day1/ApplicationPart3/images/github-copilot-commands.png b/instructions/day1/ApplicationPart3/images/github-copilot-commands.png
new file mode 100644
index 00000000..31e36cf8
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/github-copilot-commands.png differ
diff --git a/instructions/day1/ApplicationPart3/images/github-copilot-installation.png b/instructions/day1/ApplicationPart3/images/github-copilot-installation.png
new file mode 100644
index 00000000..b2d3d818
Binary files /dev/null and b/instructions/day1/ApplicationPart3/images/github-copilot-installation.png differ
diff --git a/instructions/day1/GitHub/README.md b/instructions/day1/GitHub/README.md
index b078c354..90747735 100644
--- a/instructions/day1/GitHub/README.md
+++ b/instructions/day1/GitHub/README.md
@@ -66,7 +66,7 @@ Now, let's go ahead and fork this repository!
## Create your codespace
-GitHub Codespaces is a cloud-based development environment that lets you code directly from your browser. It can also be connected to your local Visual Studio Code.
+GitHub Codespaces is a cloud-based development environment that lets you code directly from your browser. It can also be connected to your local Visual Studio Code.
In your forked repository, click on the green button that says **<> Code**, go to the **Codespaces** tab an click on **Create codespace on main**. Let's do it!
@@ -80,7 +80,7 @@ Another tab in our codespace opens and it installs the extensions for Azure Func
-Now that you have successfully created and customised your GitHub account, and created our codespace we will move onto the next challenge for today.
+Now that you have successfully created and customised your GitHub account, and created our codespace we will move onto the next challenge for today.
You will make your first code changes and merge your first pull request here.
@@ -88,15 +88,13 @@ You will make your first code changes and merge your first pull request here.
Octocat is the official mascot of GitHub and the cutest, friendliest, and most tentacular cat you'll ever meet! With its unique octopus-like shape, Octocat has become a beloved symbol of the GitHub community, popping up in merchandise, events, and social media.
-As an extra challenge for those who finish early, we dare you to unleash your creativity and design your own Octocat using the Octocat builder at https://myoctocat.com/. This tool allows you to customize the color, shape, and accessories of your Octocat, and share it with others.
+As an extra challenge for those who finish early, we dare you to unleash your creativity and design your own Octocat using the Octocat builder at [https://myoctocat.com](https://myoctocat.com/). This tool allows you to customize the color, shape, and accessories of your Octocat, and share it with others.
-Think of your Octocat as your personal avatar, your spirit animal, or your alter ego. Give it a funky hairstyle, a cool outfit, or a quirky accessory. Make it reflect your personality, your interests, or your sense of humor.
-Who knows, your Octocat might become the next internet sensation, the star of a blockbuster movie, or the mascot of a future GitHub feature. Or it might just make you smile :)
+Think of your Octocat as your personal avatar, your spirit animal, or your alter ego. Give it a funky hairstyle, a cool outfit, or a quirky accessory. Make it reflect your personality, your interests, or your sense of humor.
+
+Who knows, your Octocat might become the next internet sensation, the star of a blockbuster movie, or the mascot of a future GitHub feature. Or it might just make you smile :)
So go ahead, have fun, and show us what you've got!
[🔼 Home](../../../README.md) | [Next challenge ▶](../ApplicationPart1/README.md)
-
-
-
diff --git a/instructions/day2/Chat/README.md b/instructions/day2/Chat/README.md
new file mode 100644
index 00000000..2212e546
--- /dev/null
+++ b/instructions/day2/Chat/README.md
@@ -0,0 +1,93 @@
+# Challenge 7: Chat Bot
+
+⏲️ _est. time to complete: 30 min._ ⏲️
+
+## Here is what you will learn 🎯
+
+In this challenge you will learn how to:
+
+- Create an OpenAI service in Azure
+- Deploy an OpenAI model and connect it to your app
+- Pass the API key to your app using GitHub Secrets
+- Start chatting with model powered assistant in the app
+
+## Table Of Contents
+
+1. [Getting Started](#getting-started)
+2. [Create OpenAI Azure service instance](#create-openai-azure-service-instance)
+3. [Deploying openAI Large Language Model](#deploying-openai-large-language-model)
+4. [Azure OpenAI credentials](#azure-openai-credentials)
+5. [Run Frontend Pipeline again](#run-frontend-pipeline-again)
+
+### Further informative resources
+
+- [Azure OpenAI Documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/)
+
+
+## Getting started
+- Navigate to your **Resource Group** we created on Day 1 during the previous challenges again
+- Create a new **Resource** and search for **Azure OpenAI**
+
+ 
+
+## Create OpenAI Azure service instance
+
+- Select **Azure OpenAI** and hit **Create**.
+- Your subscription and resource group should already be set. Select **westeurope** as region and **Standard S0**.
+- Give the resource a unique name.
+- Hit **Next** and in network you should select "All networks, including the internet, can access this resource."
+- Hit **Next** twice and create the resource
+ 
+ 
+
+## Deploying openAI Large Language Model
+- Go to the Azure openAI resource you created and click on **Model deployments**
+- Next, click on **Create new deployment** here we will choose the OpenAI model we want to deploy
+- Select model **gpt-35-turbo** and model version **Auto-update to default**
+- Give a unique name to your deployment name then click on create
+
+ 
+
+Congratulations! You just deployed an instance of the openAI gpt turbo model, we will later add this model to our Milligram app to build a chat bot. For now you can actually test it out inside azure and ask it a few questions. Go to the model you deployed and click on **Open in Playground**, there you can chat with the chat assistant. You can also change the parameters of the model under **Configuration > Parameters**
+
+
+
+## Azure OpenAI credentials
+In order to connect our user interface with the openAI model, we need to integrate the openAI credentials in the process. For this, there are 2 options. We can add our keys in the Azure web app (Option 1) or we can automate it by adding the keys in our github workflow.
+
+### Option 1: Add OpenAI Azure credentials to web app
+Go back to Azure and open the Milligram web app again:
+- Go to **environment variables**
+- Create new variable with name **CHAT_API_KEY** and paste Key 1
+- Create another variable with name **CHAT_API_ENDPOINT** and paste the endpoint url
+- Finally create another variable with name **AZURE_OPENAI_MODEL_NAME** And paste the name you chose when you deployed the gpt turbo model.
+
+
+
+### Option 2: Integrate OpenAI Azure credentials into GitHub Secret
+Similar to what we did in the challenges on Day 1 we now want to add the secret keys to Github
+- Go to the Azure openAI resource dashboard and click on **Keys and Endpoint**
+- On Github Go to your repository, **Settings > Secrets and Variables > Actions** then click on **create new repository secret**
+- Create new secret with name **CHAT_API_KEY** and paste Key 1
+- Create another secret with name **CHAT_API_ENDPOINT** and paste the endpoint url
+- Finally create another secret with name **AZURE_OPENAI_MODEL_NAME** And paste the name you chose when you deployed the gpt turbo model.
+
+Now we also want to add the secrets to our github workflow:
+
+1. Add the following code snippet under `subscription-id` around line 74 in the file located at **.github/workflows/main_milligram.yml**
+```
+ - uses: azure/appservice-settings@v1
+ with:
+ app-name: 'milligram'
+ slot-name: 'Production' # Optional and needed only if the settings have to be configured on the specific deployment slot
+ app-settings-json: '[{ "name": "CHAT_API_KEY", "value": "${{ secrets.CHAT_API_KEY }}", "slotSetting": false }, { "name": "CHAT_API_ENDPOINT", "value": "${{ secrets.CHAT_API_ENDPOINT }}", "slotSetting": false }, { "name": "AZURE_OPENAI_MODEL_NAME", "value": "${{ secrets.AZURE_OPENAI_MODEL_NAME }}", "slotSetting": false }]'
+ id: settings
+```
+
+## Run Frontend Pipeline again
+
+- Navigate to **Actions** > **Pages** and **Run workflow**
+
+Click on the frontend link displayed under the deploy step under your pipeline `https://.github.io/...` or open the app on your phone.
+
+Our frontend application should now have a new button with a chat symbol that allows us to chat with our assistant. The assistant is powered by the model we deployed through the Azure OpenAI service. Have a chat with your bot 🎉
\ No newline at end of file
diff --git a/instructions/day2/Chat/images/gpt-playground.png b/instructions/day2/Chat/images/gpt-playground.png
new file mode 100644
index 00000000..478943c3
Binary files /dev/null and b/instructions/day2/Chat/images/gpt-playground.png differ
diff --git a/instructions/day2/Chat/images/gpt-turbo-deployment.png b/instructions/day2/Chat/images/gpt-turbo-deployment.png
new file mode 100644
index 00000000..b464a41b
Binary files /dev/null and b/instructions/day2/Chat/images/gpt-turbo-deployment.png differ
diff --git a/instructions/day2/Chat/images/milligram-env-vars.png b/instructions/day2/Chat/images/milligram-env-vars.png
new file mode 100644
index 00000000..a885d497
Binary files /dev/null and b/instructions/day2/Chat/images/milligram-env-vars.png differ
diff --git a/instructions/day2/Chat/images/resource-azure-openai-network.png b/instructions/day2/Chat/images/resource-azure-openai-network.png
new file mode 100644
index 00000000..c07ab85c
Binary files /dev/null and b/instructions/day2/Chat/images/resource-azure-openai-network.png differ
diff --git a/instructions/day2/Chat/images/resource-azure-openai-settings.png b/instructions/day2/Chat/images/resource-azure-openai-settings.png
new file mode 100644
index 00000000..73f8da1f
Binary files /dev/null and b/instructions/day2/Chat/images/resource-azure-openai-settings.png differ
diff --git a/instructions/day2/Chat/images/resource-azure-openai.png b/instructions/day2/Chat/images/resource-azure-openai.png
new file mode 100644
index 00000000..5d611816
Binary files /dev/null and b/instructions/day2/Chat/images/resource-azure-openai.png differ
diff --git a/instructions/day2/Speech/README.md b/instructions/day2/Speech/README.md
index 7b47e1f8..5f9e85a0 100644
--- a/instructions/day2/Speech/README.md
+++ b/instructions/day2/Speech/README.md
@@ -1,4 +1,4 @@
-# Challenge 5: Speech Recognition
+# Challenge 6: Speech Recognition
⏲️ _est. time to complete: 30 min._ ⏲️
@@ -13,7 +13,7 @@ In this challenge you will learn how to:
## Table of contents
-### Further informative resources:
+### Further informative resources
- [What is a Resource / Resource Group / Subscription?](https://docs.microsoft.com/azure/cloud-adoption-framework/govern/resource-consistency/resource-access-management)
- [Speech API](https://azure.microsoft.com/services/cognitive-services/speech-services/#overview)
@@ -40,9 +40,8 @@ Now we will make our app understand when we talk to our Milligram social media a
## Run Frontend Pipeline again
- Navigate to **Actions** > **Pages** and **Run workflow**
- 
-
- 
+ 
+ 
Click on the frontend link displayed under the deploy step under your pipeline `https://.github.io/...` or open the app on your phone.
@@ -50,7 +49,7 @@ Our frontend application should now have a new button with a microphone symbol t
Neither what you say nor what is transcribed will be saved and will **not** appear on the timeline or news feed.
-## Talk to me! What do you have to say? Play around!
+## Talk to me! What do you have to say? Play around
So go ahead and say at least 5 sentences and tell us how great your application understands you.
@@ -75,11 +74,11 @@ Look at the prepared application with our pictures for you to play around [Milli
Start your own coding journey now or try out an Azure certification as we did using Udacity, Udemy, Pluralsight, Edx etc., make sure to check out the links posted below:
-_Tipps 📝_
-
-> - [Programming course on Udacity](https://www.udacity.com/course/intro-to-programming-nanodegree--nd000)
-> - [Microsoft Azure AI Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-us/training/paths/get-started-with-artificial-intelligence-on-azure/)
-> - [Microsoft Azure Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-gb/certifications/exams/az-900)
+ :::tip
+ - [Programming course on Udacity](https://www.udacity.com/course/intro-to-programming-nanodegree--nd000)
+ - [Microsoft Azure AI Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-us/training/paths/get-started-with-artificial-intelligence-on-azure/)
+ - [Microsoft Azure Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-gb/certifications/exams/az-900)
+ :::
Be sure to check out our Microsoft Programs:
@@ -87,4 +86,4 @@ Be sure to check out our Microsoft Programs:
- Internships at MS
- [Professional Careers at Microsoft](https://careers.microsoft.com/)
-[◀ Previous challenge](../Vision/README.md) | [🔼 Home](../../../README.md)
\ No newline at end of file
+[◀ Previous challenge](../Vision/README.md) | [🔼 Home](../../../README.md)
diff --git a/instructions/day2/Vision/README.md b/instructions/day2/Vision/README.md
index c0dc1426..3ebfbf51 100644
--- a/instructions/day2/Vision/README.md
+++ b/instructions/day2/Vision/README.md
@@ -1,4 +1,4 @@
-# Challenge 4: Object Recognition
+# Challenge 5: Object Recognition
⏲️ _est. time to complete: 30 min._ ⏲️
@@ -13,7 +13,7 @@ In this challenge you will learn how to:
## Table of contents
-### Further informative resources:
+### Further informative resources
- [What is a Resource / Resource Group / Subscription?](https://docs.microsoft.com/azure/cloud-adoption-framework/govern/resource-consistency/resource-access-management)
- [Vision API](https://azure.microsoft.com/en-us/products/cognitive-services/vision-services/)
@@ -23,12 +23,13 @@ In this challenge you will learn how to:
## Getting started
- Navigate to your **Resource Group** we created on Day 1 during the previous challenges.
-- Create a new **Resource** and search for **Vision**.
- 
+- Create a new **Resource** and search for **Azure AI services**.
+
+ 
## Create Computer Vision Cognitive Service
-- Select **Cognitive Service** and hit **Create**.
+- Select **Cognitive Services** and hit **Create**.
- Your subscription and resource group should already be set. Select **westeurope** as region and **Standard S0**.
⚠️ Attention: westeurope is hardcoded - so make sure to have this resource in westeurope
- Give the resource a unique name.
@@ -59,7 +60,7 @@ You need to share the information of this resource with the web app, so that it
## Run Frontend Pipeline again
- Navigate to **Actions** > **Pages** and **Run workflow**
- 
+ 
Click on the frontend link displayed under the deploy step under your pipeline `https://.github.io/...` or open the app on your phone.
@@ -67,7 +68,7 @@ Our frontend application should now have a new button with an image symbol that
Neither what picture you take nor what is detected will be saved and will **not** appear on the timeline or news feed.
-## Look around! What can your app detect? Play around!
+## Look around! What can your app detect? Play around
So go ahead and detect at least 5 objects and tell us how great your application detects objects on images.
@@ -81,4 +82,4 @@ Ask your coach if you did not succeed. We have you covered with a back up. ⚠
### Use prepared Milligram Backend Service
-Look at the prepared application with our pictures for you to play around [Milligram](https://microsoft.github.io/anyonecancode/).
\ No newline at end of file
+Look at the prepared application with our pictures for you to play around [Milligram](https://microsoft.github.io/everyonecancode/).
diff --git a/instructions/day2/Vision/images/createresource.png b/instructions/day2/Vision/images/createresource.png
index 45ef486f..fbeed3a6 100644
Binary files a/instructions/day2/Vision/images/createresource.png and b/instructions/day2/Vision/images/createresource.png differ
diff --git a/instructions/day2/Vision/images/createresource1.png b/instructions/day2/Vision/images/createresource1.png
new file mode 100644
index 00000000..7b9f4a63
Binary files /dev/null and b/instructions/day2/Vision/images/createresource1.png differ
diff --git a/requirements.txt b/requirements.txt
index f94bf8c4..6750e030 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,29 +1,49 @@
-anyio==3.6.2
-asgiref==3.4.1
-azure-core==1.26.1
-azure-storage-blob==12.14.1
-certifi==2022.12.7
-cffi==1.15.1
-charset-normalizer==2.1.1
-click==8.1.3
-cryptography==38.0.4
-fastapi==0.88.0
+annotated-types==0.6.0
+anyio==4.3.0
+azure-core==1.30.1
+azure-storage-blob==12.20.0b1
+certifi==2024.2.2
+cffi==1.16.0
+charset-normalizer==3.3.2
+click==8.1.7
+cryptography==42.0.5
+distro==1.9.0
+dnspython==2.6.1
+email_validator==2.1.1
+fastapi==0.111.0
+fastapi-cli==0.0.2
h11==0.14.0
-httptools==0.5.0
-idna==3.4
+httpcore==1.0.5
+httptools==0.6.1
+httpx==0.27.0
+idna==3.7
isodate==0.6.1
-msrest==0.7.1
-nest-asyncio==1.5.6
-oauthlib==3.2.2
-pycparser==2.21
-pydantic==1.10.2
-python-multipart==0.0.5
-requests==2.28.1
-requests-oauthlib==1.3.1
+Jinja2==3.1.3
+markdown-it-py==3.0.0
+MarkupSafe==2.1.5
+mdurl==0.1.2
+nest-asyncio==1.6.0
+openai==1.25.1
+orjson==3.10.2
+pycparser==2.22
+pydantic==2.7.1
+pydantic_core==2.18.2
+Pygments==2.17.2
+python-dotenv==1.0.1
+python-multipart==0.0.9
+PyYAML==6.0.1
+requests==2.31.0
+rich==13.7.1
+shellingham==1.5.4
six==1.16.0
-sniffio==1.3.0
-starlette==0.22.0
-typing_extensions==4.4.0
-urllib3==1.26.13
-uvicorn==0.20.0
-uvloop==0.17.0
+sniffio==1.3.1
+starlette==0.37.2
+tqdm==4.66.4
+typer==0.12.3
+typing_extensions==4.11.0
+ujson==5.9.0
+urllib3==2.2.1
+uvicorn==0.29.0
+uvloop==0.19.0
+watchfiles==0.21.0
+websockets==12.0
diff --git a/trainer-info.md b/trainer-info.md
new file mode 100644
index 00000000..358456cd
--- /dev/null
+++ b/trainer-info.md
@@ -0,0 +1,15 @@
+# Last Minute Notes for Trainer
+> [!NOTE]
+> We have now backup accounts that should be suffient to provide everyone to have access to shared AppService Plans for WebApps in the "asharedplan" resource group. If more plans are needed coaches can provision additional plans in this group.
+
+> [!CAUTION]
+> We ran into a technical issue while pre-provisioning the AppServicePlans for the workshop. There is a very high likelyhood that this is **not resolved by the time of the event**.
+> To continue working on the hands on track despite AppServicePlans (and therefore WebApps) not being available you have following options:
+>
+> 1.) Priorize the [Python Programming Track](https://github.com/microsoft/everyonecancode-us), it only uses Azure WebApps in the very last step.
+>
+> 2.) Ask Participants to Sign Up for a Free Account. All resource can be created on the free tier. This **requires a credit card and comes with the risk of creating payed resources by accident**!
+>
+> 3.) Ask Participants to use our pre-deployed backend at: [https://everyonecancode-backend-a151.azurewebsites.net/](https://everyonecancode-backend-a151.azurewebsites.net/) and ignore the backend configuration steps.
+>
+> 4.) We have created fallback accounts for regions relying on translated versions of the original EveryoneCanCode Milligram track (Japan and France). We also have a the possiblity to hand out accounts on two shared fallback regions with limited capacity. Please reach out to our orga team for these.