You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
2. Click the **Code** button in your forked repository, go to the **Codespaces** tab, and then choose **Create codespace**.
53
+
2. Click the **Code** button in your forked repository, go to the **Codespaces** tab, and then choose **Create codespace**.
54
54
55
55
This will create a preconfigured online environment for you. You'll then be able to use [GitHub Models](https://github.com/marketplace/models) to run the code examples and interact with AI models for free, without any additional setup.
56
56
@@ -60,7 +60,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
60
60
>
61
61
> Learn more about [GitHub Codespaces and GitHub Models concepts here](/docs/setup/README.md).
62
62
63
-
### Lesson description
63
+
### Lesson description
64
64
65
65
📦 Each lesson includes:
66
66
@@ -69,7 +69,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
69
69
-**Solutions** for each assignment and quiz.
70
70
-**Characters** you can interact with using our [companion app](./app), demonstrating Generative AI.
71
71
72
-
## Lessons
72
+
## Lessons
73
73
74
74
🗃️ Table of contents
75
75
@@ -84,7 +84,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
84
84
85
85
New lessons will be added to the course over time, so stay tuned!
86
86
87
-
## Keep learning
87
+
## Keep learning
88
88
89
89
🙌 After completing this course, you can continue learning by exploring our additional resources.
Copy file name to clipboardexpand all lines: docs/additional-resources.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -45,4 +45,4 @@ The following code samples are available to help you get started with building y
45
45
46
46
If you're looking to connect with others, we have a community of AI enthusiasts, developers, and experts who are passionate about AI and are always willing to help.
47
47
48
-
There's even a dedicated [#JavaScript channel](https://discordapp.com/channels/1113626258182504448/1237357005555892225) where you can ask questions, share your projects, and discuss your about your favorite topics.
48
+
There's even a dedicated [#JavaScript channel](https://discordapp.com/channels/1113626258182504448/1237357005555892225) where you can ask questions, share your projects, and discuss about your favorite topics.
Copy file name to clipboardexpand all lines: lessons/01-intro-to-genai/README.md
+17-17
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ Your journey begins in 1860s London, where you assume the role of a skilled mech
38
38
39
39
### Into the maelstrom - London 1860
40
40
41
-
In the heart of 1860s London, you are recognized as one of the most skilled mechanics of your time. Your workshop is tucked away in a narrow alley. The walls are lined with shelves overflowing with mechanical parts, blueprints, and half-finished projects.
41
+
In the heart of 1860s London, you are recognized as one of the most skilled mechanics of your time. Your workshop is tucked away in a narrow alley. The walls are lined with shelves overflowing with mechanical parts, blueprints, and half-finished projects.
42
42
43
43
Your workbench, the heart of your workshop, is an organized mess.
44
44
@@ -68,7 +68,7 @@ Charles Babbage, the great mathematician and inventor of the difference engine,
68
68
69
69
After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open.
70
70
71
-
It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls.
71
+
It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls.
72
72
73
73
**You:** "Hello? Mr. Babbage?"
74
74
@@ -82,11 +82,11 @@ As your eyes adjust to the dim light, you notice a figure in the distance, wavin
82
82
83
83
Just as you step closer, a blinding flash erupts, and he vanishes.
84
84
85
-
Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it.
85
+
Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it.
86
86
87
-
It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy.
87
+
It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy.
88
88
89
-
Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you.
89
+
Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you.
90
90
91
91
Then, blackness, and a sense of falling.
92
92
@@ -96,7 +96,7 @@ Then, blackness, and a sense of falling.
96
96
97
97
### Alexandria 300 BC
98
98
99
-
You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive.
99
+
You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive.
100
100
101
101
People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares.
102
102
@@ -169,12 +169,12 @@ If you want to interact with Dinocrates, run the [Characters](/app/README.md) ap
169
169
<imgsrc="./assets/dinocrates.png"alt="Dinocrates wearing a toga"width="300">
170
170
</div>
171
171
172
-
**Steps**:
172
+
**Steps**:
173
173
174
174
1. Start a [](https://codespaces.new/microsoft/generative-ai-with-javascript)
175
175
2. Navigate to _/app_ in the repo root.
176
176
3. Locate the console and run `npm install` followed by `npm start`.
177
-
4. Once it appears, select the "Open in Browser" button.
177
+
4. Once it appears, select the "Open in Browser" button.
178
178
5. Chat with Dinocrates.
179
179
180
180
> [!NOTE]
@@ -260,13 +260,13 @@ Dinocrates overhears your conversation and adds:
260
260
261
261
- **Assistants and Agents** Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously.
262
262
263
-
- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale.
263
+
- **A content creation tool**:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale.
264
264
265
-
- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks.
265
+
- **Code completion**: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks.
266
266
267
267
- **Translation** – Translate text between languages with high accuracy.
268
268
269
-
As you can see, these improvements can both help the front office and the back office of your app and company.
269
+
As you can see, these improvements can both help the front office and the back office of your app and company.
270
270
271
271
Here's an example of a "chatbot application" in action:
272
272
@@ -294,7 +294,7 @@ Here's an example of a "chatbot application" in action:
294
294
295
295
### JavaScript ecosystem
296
296
297
-
**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems?
297
+
**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems?
298
298
299
299
**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular:
300
300
@@ -321,7 +321,7 @@ Here's an example of a "chatbot application" in action:
321
321
322
322
## Assignment – Helping Dinocrates
323
323
324
-
To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented.
324
+
To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented.
325
325
326
326
**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates.
327
327
@@ -333,7 +333,7 @@ To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that
333
333
334
334
**Time Beetle:** You probably want to ask me in a better way, so I can give you a better answer, about you know *cough* *cough* Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc.
335
335
336
-
**You:** Got it, add more context to the prompt and then ask you.
336
+
**You:** Got it, add more context to the prompt and then ask you.
Copy file name to clipboardexpand all lines: lessons/02-first-ai-app/README.md
+17-17
Original file line number
Diff line number
Diff line change
@@ -31,15 +31,15 @@ _This video gives you an introduction to AI models called "large language models
31
31
> [!NOTE]
32
32
> While we recommend going through the story (it's fun!), [click here](#interact-with-leonardo) if you'd prefer to jump straight to the technical content.
33
33
34
-
Together with Dinocrates, you put the finishing touches on the lighthouse at Alexandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea.
34
+
Together with Dinocrates, you put the finishing touches on the lighthouse at Alexandria. The towering structure gleams in the sunlight, its polished stone reflecting the Mediterranean Sea.
35
35
36
-
You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors.
36
+
You look down at the Time Beetle in your hand, its metallic surface cool against your palm. Clenching your fist around it, you whisper, "Take me home." The beetle begins to glow, emitting a soft, warm light and the world around you dissolves into a whirlwind of colors.
37
37
38
38
### A new adventure
39
39
40
40
When you open your eyes, the world has shifted. As you manage to get up, you realize you're in a boat on a river. You look around, in the distance, you see buildings, their outlines blurred by the morning mist.
41
41
42
-
Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting.
42
+
Looking around the boat, you find a long oar resting against the side. Grasping it, you begin to row towards the distant buildings. As you get closer, the buildings come into sharper focus, they are old, their architecture reminiscent of a Renaissance painting.
43
43
44
44
<div>
45
45
<img src="./assets/boat.png" alt="Boat on the rive, man standing with a paddle" width=300" >
@@ -57,7 +57,7 @@ As you walk, you notice a man with a long beard and a hat, digging through a cra
57
57
58
58
### Help me, Leonardo
59
59
60
-
**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate.
60
+
**You:** "Excuse me, sir, where am I?" He looks up at you, confusion evident in his eyes. Realizing you've been speaking in English, you quickly use the device in your hand and ask it to translate.
61
61
62
62
**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'"
63
63
@@ -105,7 +105,7 @@ The Time Beetle translates.
105
105
106
106
**You:** "Well, I was working on a project, and I ended up here."
107
107
108
-
You show him the Time Beetle, and his eyes light up with fascination. He examines it closely as you explain how it works and how you ended up in Florence.
108
+
You show him the Time Beetle, and his eyes light up with fascination. He examines it closely as you explain how it works and how you ended up in Florence.
109
109
110
110
Leonardo looks at you with excitement.
111
111
@@ -133,7 +133,7 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app.
133
133
1. Start a [](https://codespaces.new/microsoft/generative-ai-with-javascript)
134
134
2. Navigate to _/app/README.md_ in the repo root.
135
135
3. Locate the console and run `npm install` followed by `npm start`.
136
-
4. Once it appears, select the "Open in Browser" button.
136
+
4. Once it appears, select the "Open in Browser" button.
137
137
5. Chat with Leonardo.
138
138
139
139
For a more detailed explanation of the app, see [Detailed app explanation](../01-intro-to-genai/README.md#interact-with-dinocrates).
@@ -149,9 +149,9 @@ Before you can assist Leonardo with his project, you should first think about th
149
149
150
150
**Time Beetle:** I'm compatible with most machines running in the 21st century, see the following list for a set of essential tools and libraries.
151
151
152
-
-**Text editor**, for example Visual Studio Code.
153
-
-**Terminal**, for running commands.
154
-
-**Browser for testing your app**. It's also a good idea to have a tool like curl or some other HTTP client to test your app's API endpoints.
152
+
-**Text editor**, for example Visual Studio Code.
153
+
-**Terminal**, for running commands.
154
+
-**Browser for testing your app**. It's also a good idea to have a tool like curl or some other HTTP client to test your app's API endpoints.
155
155
156
156
-**Node.js**. You also need to install Node.js and npm, which are tools that help you run JavaScript code on your computer.
157
157
@@ -268,7 +268,7 @@ AI: Rome is known for its ancient ruins, art, and vibrant culture. You can visit
268
268
269
269
```
270
270
271
-
**Time Beetle:** Imagine if a sentence like "Tell me more about it" were taken out of context, the AI wouldn't know what "it" refers to. This is where context is important, and this context is something we can provide to the AI model through the prompt.
271
+
**Time Beetle:** Imagine if a sentence like "Tell me more about it" were taken out of context, the AI wouldn't know what "it" refers to. This is where context is important, and this context is something we can provide to the AI model through the prompt.
272
272
273
273
**You:**I think I get it, how doI construct a conversation with the AI using this JavaScript language you speak of?
274
274
@@ -327,13 +327,13 @@ Now the AI will provide a list of chat messages as context, and the AI will gene
327
327
328
328
**You:** Ok, so ifI understand the conversation correctly, the AI will now have the following context:_I'm going to Rome next month_, so based on that it should filter out irrelevant information and provide a more relevant response?
329
329
330
-
**Time Beetle:** Exactly, the AI will use the context to generate a response that is more relevant to the conversation.
330
+
**Time Beetle:** Exactly, the AI will use the context to generate a response that is more relevant to the conversation.
331
331
332
332
## Improving the chat conversation with a system message
333
333
334
334
**You:** I see, but is there a way to improve this further?
335
335
336
-
**Time Beetle:** Yes, you can add a system message to the conversation. A system message creates a "personality" for the AI and can be used to provide additional context.
336
+
**Time Beetle:** Yes, you can add a system message to the conversation. A system message creates a "personality" for the AI and can be used to provide additional context.
337
337
338
338
**You:** Ok, so in the context of the conversation we've been having, what would a system message look like?
339
339
@@ -473,11 +473,11 @@ Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from
473
473
> Despite its impracticality, the aerial screw remains a testament to Leonardo's genius and his relentless pursuit of innovation. It laid the groundwork for future developments in aviation and continues to inspire engineers and inventors to this day.
0 commit comments