address: Microsoft Chicago offices 200 E. Randolph Chicago, IL 60601
- Create repo from template: https://github.com/github/codespaces-nextjs
- Grab openai apikey: https://platform.openai.com/overview
- Install dependencies:
npm i express openai dotenv @material-ui/core @material-ui/icons
- install dev dependencies:
npm i --save-dev nodemon
- install gh copilot
- Create Server.js:
Create a server with the following specifications:
1. import express and dotenv node modules
3. create the server with express and name it app
4. use port 8080 as default port
5. enable body parser to accept json data
6. state which port the server is listening to and log it to the console
- update package.json:
devserver: "nodemon pages/api/server.js
- add dotenv to server:
const dotenv = require('dotenv').config();`
- run server to test it's working
- Create Controller.js
Create a controller with the following specifications:
1. import the Configuration class and the OpenAIApi class from the openai npm module
2. create a new configuration object that includes the api key and uses the Configuration class from the openai module
3. create a new instance of the OpenAIApi class and pass in the configuration object
4. create an async function called generateInfo that accepts a request and response object as parameters
5. use try to make a request to the openai completion api and return the response
6. use catch to catch any errors and return the error include a message to the user
7. export the generateInfo function as a module
- import prompt
const { recipePrompt } = require('./prompt.json');
- grab recipe from body:
const { recipe } = request.body;
- update try/catch and export function:
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: `${recipePrompt}${recipe}` }],
max_tokens: 200,
temperature: 0,
n: 1,
const response = completion.data.choices[0].message.content;
return res.status(200).json({
success: true,
data: response,
});
catch (error) {
if (error.response.status === 401) {
return res.status(401).json({
error: "Please provide a valid API key.",
});
}
return res.status(500).json({
error:
"An error occurred while generating recipe information. Please try again later.",
});
}
module.exports = { generateInfo };
- Create router - type and have copilot assist:
const express = require('express');
const router = express.Router();
const { generateInfo } = require('./generateInfo');
router.post('/generateInfo', generateInfo);
module.exports = router;
- Update server.js file:
// add router to the server and name it openai
app.use('/openai', require('./router'));
Test in Postman: run devserver
POST
http://localhost:8080/openai/generateinfo
Jamaican fried dumplin
{
"recipe": "1 cup of all purpose flour, sifted 1 1/2 teaspoon baking powder 1/4 teaspoon salt 2 Tablespoon granulated sugar 1/2 Tablespoon unsalted butter, room temperature Approximately 1/3 cup water"
}
Chocolate chip cookie
{
"recipe": "1 cup butter, softened, 1 cup white sugar, 1 cup packed brown sugar, 2 eggs, 2 teaspoons vanilla extract, 1 teaspoon baking soda, 2 teaspoons hot water, ½ teaspoon salt, 3 cups all-purpose flour, 2 cups semisweet chocolate chips , 1 cup chopped walnuts"
}
- Build a simple text area:
Create a text area with the following specifications:
1. a H1 with the text "Find Nutrition Facts for any recipe"
2. a text area for users to upload recipe
3. a button for users to submit the entered recipe
4. a section at the bottom to display nutrition facts
5. Get the data from this link: http://localhost:8080/openai/generateinfo
6. Name the component RecipeInfo
- Go to localhost to quickly see app:
http://localhost:3000
- Install cors middleware to server.js and add to router:
npm i cors
const cors = require("cors");
// Allow cross-origin requests (CORS)
app.use(cors());
// Add to router.js
router.options("/generateInfo", (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "*");
res.setHeader("Access-Control-Allow-Methods", "*");
res.sendStatus(200);
});
Update any additional errors . . . and celebrate successful response! And the fact that an mvp is complete of this app but will use material UI to make it prettier
- Ask copilot chat to implement material ui in app:
update the component to use material ui with the content centered and the button positioned below the text area. Use Grid, Container, Paper and any other components needed.
- Add header with chat:
I want to add a header with the name on the left and the logo on the right using material ui. How do I do that?
- Make the text area larger and implement material ui
update the component to use material ui with the content centered and the buttoned positioned below the text area. use Grid from material ui and any other components needed.
- Add the paper component from material UI to elevate the look and feel of the app
- Add a second button that clears the text area + facts after a recipe is submitted
add a button to the app to clear the text in the textarea
- Add a loader while waiting for the data to load
add a loader to the highlighted code that checks if the data is loading. If the data is loading, then display the text "Nutrition Facts" and loader, if there is an error, display the error message otherwise, display nothing
- Add a theme with custom primary and secondary colors
how do I create a custom theme with material ui and where do I create the custom theme?
- Prevent the text area from going over the Paper component from Material UI
in the highlihghted code how do I prevent the text area line from going over the paper component?
-Add a new component - footer
Create a footer component with the following specifications:
1. The footer must be fixed at the bottom of the page
2. Use the Paper component from Material UI
3. Use the Typography component from Material UI
3. The text must say "Made with ❤️ by LadyKerr & GitHub Copilot" and "Powered by OpenAI"
4. The text "GitHub Copilot" must be a link to https://copilot.github.com/ that opens in a new tab with alt text " GitHub Copilot"
5. The text "OpenAI" must be a link to https://openai.com/ that opens in a new tab with alt text "openai api"
- Create a component to split facts into new line
Create a component with the following specifications:
1. the component must split the received string data at /n/n or /n and return a Typography component for each string
2. the component must set a unique key for each Typography component
3. the component must return a div with the Typography components
4. the component must return null if the data is not a string
5. Name the component NutritionFacts
6. Use the Paper Component from Material UI
7. Add text above the data that says "Here are the nutrition facts for your recipe:"
- Test app and see if it works
- Move Header code into own file/component App complete! Share repo: https://github.com/LadyKerr/mealmetrics-copilot
1 cup butter, softened, 1 cup white sugar, 1 cup packed brown sugar, 2 eggs, 2 teaspoons vanilla extract, 1 teaspoon baking soda, 2 teaspoons hot water, ½ teaspoon salt, 3 cups all-purpose flour, 2 cups semisweet chocolate chips , 1 cup chopped walnuts