Merge branch 'main' into andressa1

.devcontainer/devcontainer.json

@@ -0,0 +1,16 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "postCreateCommand": "python3 -m pip install -r Application/requirements.txt",
+  "customizations": {
+    "codespaces": {
+      "openFiles": ["README.md"]
+    },
+    "vscode": {
+      "extensions": [
+        "ms-toolsai.jupyter",
+        "ms-python.python",
+        "github.copilot"
+      ]
+    }
+  }
+}

.github/workflows/pages.yml

@@ -8,6 +8,9 @@ on:
   pull_request:
     branches:
       - main
+permissions:
+  packages: write
+  contents: write
 
 jobs:
   build-app:
@@ -38,6 +41,7 @@ jobs:
           VITE_FACE_API_ENDPOINT: ${{secrets.VITE_FACE_API_ENDPOINT}}
           VITE_VISION_API_ENDPOINT: ${{secrets.VITE_VISION_API_ENDPOINT}}
           VITE_VISION_API_KEY: ${{secrets.VITE_VISION_API_KEY}}
+          VITE_CHAT_API_ENDPOINT: ${{secrets.VITE_CHAT_API_ENDPOINT}}
         working-directory: frontend
 
       - name: Upload result of Static Web App build
@@ -84,7 +88,7 @@ jobs:
       - build-documentation
     environment:
       name: pages
-      url: https://${{ github.repository_owner }}.github.io/anyonecancode
+      url: https://${{ github.repository_owner }}.github.io/everyonecancode
 
     if: github.ref == 'refs/heads/main'
 

.gitignore

@@ -1,3 +1,7 @@
+### TO-DO Application###
+todo_list.txt
+todos.db
+
 .envrc
 .DS_Store
 
@@ -30,6 +34,14 @@ share/python-wheels/
 *.egg
 MANIFEST
 
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

.vuepress/config.yml

@@ -1,16 +1,18 @@
 title: Anyone Can Code
-patterns: ["**/*.md", "!**/node_modules", "!templates/**", "!frontend/**"]
-base: /anyonecancode/instructions/
+patterns: ["**/*.md", "!**/node_modules", "!templates/**", "!frontend/**", "!Track_2_ToDo_App/**"]
+base: /everyonecancode/instructions/
 themeConfig:
-  repo: "microsoft/anyonecancode"
+  repo: "microsoft/everyonecancode"
   editLinks: true
   sidebar:
     [
       ["./", "Home"],
       "./instructions/day1/GitHub/",
       "./instructions/day1/ApplicationPart1/",
       "./instructions/day1/ApplicationPart2/",
+      "./instructions/day1/ApplicationPart3/",
       "./instructions/day2/Vision/",
       "./instructions/day2/Speech/",
+      "./instructions/day2/Chat/",
     ]
 plugins: [["vuepress-plugin-code-copy", true]]

CODEOWNERS

@@ -0,0 +1,2 @@
+# Track 2 - To-Do Application
+/Track_2_ToDo_App/ @fcampise

Pipfile

@@ -6,17 +6,17 @@ name = "pypi"
 [packages]
 uvicorn = "*"
 azure-storage-blob = "*"
-uvloop = "*"
 fastapi = "*"
 httptools = "*"
 python-multipart = "*"
 nest-asyncio = "*"
+openai = "*"
 
 [dev-packages]
 black = "*"
 
 [requires]
-python_version = "3.9"
+python_version = "3.12"
 
 [pipenv]
 allow_prereleases = true

README.md

@@ -1,6 +1,12 @@
-# Anyone can Code! – Light Your Fire for Coding
+> [!IMPORTANT]
+> The Python Programming Tack can be found [here](https://github.com/microsoft/everyonecancode-us).
 
-![FemaleTechGenLogo](./img/MSFT_AnyonecanCode_Banner_small.png)
+> [!IMPORTANT]
+> Last minute notes for coaches can be found [here](https://github.com/microsoft/everyonecancode/blob/main/trainer-info.md).
+
+# Everyone can Code! – Light Your Fire for Coding
+
+![FemaleTechGenLogo](./img/BannerEveryoneCanCode.png)
 
   <p>
     <sub>Built with ❤ by everybody who wants to make the Microsoft App Dev Innovation world a little bit more diverse! </sub>
@@ -10,9 +16,19 @@
 
 <hr>
 
-## [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).
 
 <div align="center">
@@ -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.
 

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)
+
+

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/).

frontend/src/components/ImageList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="tile is-ancestor" style="margin-bottom: 100px;">
+    <div class="tile is-ancestor" style="margin-bottom: 100px">
       <div class="tile is-parent is-vertical">
         <div
           class="tile is-child"

frontend/src/components/Navbar.vue

@@ -26,6 +26,11 @@
             <b-icon type="is-white" icon="object-group" pack="fas"></b-icon>
           </router-link>
         </b-button>
+        <b-button v-if="showChatButton" rounded type="is-black">
+          <router-link to="/chat">
+            <b-icon type="is-white" icon="comments" pack="fas"></b-icon>
+          </router-link>
+        </b-button>
       </div>
     </template>
   </b-navbar>
@@ -39,6 +44,7 @@ import {
   faceApiEndpoint,
   speechApiKey,
   visionApiKey,
+  chatApiEndpoint,
 } from "../settings";
 
 @Component
@@ -55,6 +61,9 @@ export default class Navbar extends Vue {
   get showVisionButton(): boolean {
     return visionApiKey !== "";
   }
+  get showChatButton(): boolean {
+    return chatApiEndpoint !== "";
+  }
 }
 </script>
 

frontend/src/components/Profile.vue

@@ -4,7 +4,7 @@
       :src="profile.avatar_url"
       alt="Profile Picture of User"
       ratio="1by1"
-      style="margin-top: 100px;"
+      style="margin-top: 100px"
       rounded
     ></b-image>
     <h1>{{ profile.name }}</h1>