Merge pull request #1502 from microsoft/softchris-patch-5

docs: adding room for pivot for AI project

Author: softchris

9-chat-project/README.md

@@ -25,6 +25,8 @@ As we said, select the "Code" tab and your chosen runtime.
   <img src="./assets/playground-choice.png" alt="playground choice" with="600">
 </div>
 
+### Using Python
+
 In this case we select Python, which will mean we pick this code:
 
 ```python
@@ -100,6 +102,8 @@ call_llm("Tell me about you", "You're Albert Einstein, you only know of things i
 
 Great, we have an AI part done, let's see how we can integrate that into a Web API. For the Web API, we're choosing to use Flask, but any web framework should be good. Let's see the code for it:
 
+### Using Python
+
 ```python
 # api.py
 from flask import Flask, request, jsonify
@@ -168,9 +172,13 @@ To integrate *llm.py* here's what we need to do:
 
 Great, now we have done what we need.
 
-### Configure Cors
+## Configure Cors
+
+We should call out that we set up something like CORS, cross-origin resource sharing. This means that because our backend and frontend will ron on different ports, we need to allow the frontend to call into the backend. 
 
-We should call out that we set up something like CORS, cross-origin resource sharing. This means that because our backend and frontend will ron on different ports, we need to allow the frontend to call into the backend. There's a piece of code in *api.py* that sets this up:
+### Using Python
+
+There's a piece of code in *api.py* that sets this up:
 
 ```python
 from flask_cors import CORS
@@ -183,6 +191,10 @@ Right now it's been set up to allow "*" which is all origins and that's a bit un
 
 ## Run your project
 
+To run your project, you need to start up your backend first and then your frontend.
+
+### Using Python
+
 Ok, so we have *llm.py* and *api.py*, how can we make this work with a backend? Well, there's two things we need to do:
 
 - Install dependencies:
@@ -338,8 +350,7 @@ project/
     app.js
     styles.css
   backend/
-    api.py
-    llm.py
+    ...
 ```
 
 Copy the content from what was instructed from above but feel free to customize to your liking
@@ -350,12 +361,18 @@ Copy the content from what was instructed from above but feel free to customize
 
 ## Bonus
 
-Try changing the personality of the AI assistant. When you call `call_llm` in *api.py* you can change the second argument to what you want, for example:
+Try changing the personality of the AI assistant. 
+
+### For Python
+
+When you call `call_llm` in *api.py* you can change the second argument to what you want, for example:
 
 ```python
 call_llm(message, "You are Captain Picard")
 ```
 
+### Frontend
+
 Change also the CSS and text to your liking, so do changes in *index.html* and *styles.css*.
 
 ## Summary

9-chat-project/solution/README.md

@@ -1,41 +1,4 @@
-# Run code
+# Run solution
 
-## Set up
-
-Create virtual environment
-
-```sh
-cd backend
-python -m venv venv
-source ./venv/bin/activate
-```
-
-## Install dependencies
-
-```sh
-pip install openai flask flask-cors 
-```
-
-## Run API
-
-```sh
-python api.py
-```
-
-## Run frontend
-
-Make sure you stand in the frontend folder
-
-Locate *app.js*, change `BASE_URL` to that of your backend URL
-
-Run it
-
-```
-npx http-server -p 8000
-```
-
-Try typing a message in the chat, you should see a response (providing you're running this in a Codespace or have set up a access token).
-
-## Set up access token (if you don't run this in a Codespace)
-
-See [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
+1. Start up the [backend](./backend/README.md)
+1. Now start the [fronten](./frontend/README.md)

9-chat-project/solution/backend/README.md

@@ -0,0 +1,3 @@
+Choose your runtime
+
+- [Python](./python/README.md)

9-chat-project/solution/backend/python/README.md

@@ -0,0 +1,42 @@
+# Run code
+
+
+
+## Set up
+
+Create virtual environment
+
+```sh
+python -m venv venv
+source ./venv/bin/activate
+```
+
+## Install dependencies
+
+```sh
+pip install openai flask flask-cors 
+```
+
+## Run API
+
+```sh
+python api.py
+```
+
+## Run frontend
+
+Make sure you stand in the frontend folder
+
+Locate *app.js*, change `BASE_URL` to that of your backend URL
+
+Run it
+
+```
+npx http-server -p 8000
+```
+
+Try typing a message in the chat, you should see a response (providing you're running this in a Codespace or have set up a access token).
+
+## Set up access token (if you don't run this in a Codespace)
+
+See [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)

9-chat-project/solution/backend/api.py …t-project/solution/backend/python/api.py9-chat-project/solution/backend/api.py renamed to 9-chat-project/solution/backend/python/api.py 9-chat-project/solution/backend/api.py renamed to 9-chat-project/solution/backend/python/api.py

@@ -0,0 +1,7 @@
+# Run the code
+
+```sh
+npx http-server -p 3000
+```
+
+Locate the `BASE_URL` in `app.js` and change it match the URL of the backend.