diff --git a/9-chat-project/README.md b/9-chat-project/README.md index c5bc6c66..ae5140b3 100644 --- a/9-chat-project/README.md +++ b/9-chat-project/README.md @@ -25,6 +25,8 @@ As we said, select the "Code" tab and your chosen runtime. playground choice +### 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 diff --git a/9-chat-project/solution/README.md b/9-chat-project/solution/README.md index 9e21be26..6930e286 100644 --- a/9-chat-project/solution/README.md +++ b/9-chat-project/solution/README.md @@ -1,43 +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) \ No newline at end of file diff --git a/9-chat-project/solution/backend/README.md b/9-chat-project/solution/backend/README.md new file mode 100644 index 00000000..bdfeed2c --- /dev/null +++ b/9-chat-project/solution/backend/README.md @@ -0,0 +1,3 @@ +Choose your runtime + +- [Python](./python/README.md) \ No newline at end of file diff --git a/9-chat-project/solution/backend/python/README.md b/9-chat-project/solution/backend/python/README.md new file mode 100644 index 00000000..2fffe206 --- /dev/null +++ b/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) diff --git a/9-chat-project/solution/backend/api.py b/9-chat-project/solution/backend/python/api.py similarity index 100% rename from 9-chat-project/solution/backend/api.py rename to 9-chat-project/solution/backend/python/api.py diff --git a/9-chat-project/solution/backend/llm.py b/9-chat-project/solution/backend/python/llm.py similarity index 100% rename from 9-chat-project/solution/backend/llm.py rename to 9-chat-project/solution/backend/python/llm.py diff --git a/9-chat-project/solution/frontend/README.md b/9-chat-project/solution/frontend/README.md new file mode 100644 index 00000000..7ddf9335 --- /dev/null +++ b/9-chat-project/solution/frontend/README.md @@ -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.