Skip to content

Commit 61e9974

Browse files
authored
Update README.md (#81)
* Update README.md Remove redundant spaces. * Update README.md Remove redundant spaces. * Update README.md Remove redundant spaces. * Update README.md Remove redundant spaces. * Update README.md Fix some potential misspellings/errors and remove redundant spaces. * Update README.md Remove redundant spaces. * Update additional-resources.md Fix one potential misspelling or error, and remove any redundant spaces.
1 parent 1a0c51e commit 61e9974

File tree

7 files changed

+114
-114
lines changed

7 files changed

+114
-114
lines changed

README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
5050
1. Select the **Fork** button in the upper right-hand corner of the repository or select this button:
5151
[![Fork](https://img.shields.io/badge/Fork-Repository-blue?style=flat-square)](https://github.com/microsoft/generative-ai-with-javascript/fork)
5252

53-
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**.
5454

5555
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.
5656

@@ -60,7 +60,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
6060
>
6161
> Learn more about [GitHub Codespaces and GitHub Models concepts here](/docs/setup/README.md).
6262
63-
### Lesson description
63+
### Lesson description
6464

6565
📦 Each lesson includes:
6666

@@ -69,7 +69,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
6969
- **Solutions** for each assignment and quiz.
7070
- **Characters** you can interact with using our [companion app](./app), demonstrating Generative AI.
7171

72-
## Lessons
72+
## Lessons
7373

7474
🗃️ Table of contents
7575

@@ -84,7 +84,7 @@ Throughout this course you'll find many code examples and exercises, so we encou
8484

8585
New lessons will be added to the course over time, so stay tuned!
8686

87-
## Keep learning
87+
## Keep learning
8888

8989
🙌 After completing this course, you can continue learning by exploring our additional resources.
9090

docs/additional-resources.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ The following code samples are available to help you get started with building y
4545

4646
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.
4747

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.

lessons/01-intro-to-genai/README.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Your journey begins in 1860s London, where you assume the role of a skilled mech
3838

3939
### Into the maelstrom - London 1860
4040

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.
4242

4343
Your workbench, the heart of your workshop, is an organized mess.
4444

@@ -68,7 +68,7 @@ Charles Babbage, the great mathematician and inventor of the difference engine,
6868

6969
After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open.
7070

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.
7272

7373
**You:** "Hello? Mr. Babbage?"
7474

@@ -82,11 +82,11 @@ As your eyes adjust to the dim light, you notice a figure in the distance, wavin
8282

8383
Just as you step closer, a blinding flash erupts, and he vanishes.
8484

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.
8686

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.
8888

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.
9090

9191
Then, blackness, and a sense of falling.
9292

@@ -96,7 +96,7 @@ Then, blackness, and a sense of falling.
9696

9797
### Alexandria 300 BC
9898

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.
100100

101101
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.
102102

@@ -169,12 +169,12 @@ If you want to interact with Dinocrates, run the [Characters](/app/README.md) ap
169169
<img src="./assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
170170
</div>
171171

172-
**Steps**:
172+
**Steps**:
173173

174174
1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript)
175175
2. Navigate to _/app_ in the repo root.
176176
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.
178178
5. Chat with Dinocrates.
179179

180180
> [!NOTE]
@@ -260,13 +260,13 @@ Dinocrates overhears your conversation and adds:
260260
261261
- **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.
262262
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.
264264
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.
266266
267267
- **Translation** – Translate text between languages with high accuracy.
268268
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.
270270
271271
Here's an example of a "chatbot application" in action:
272272
@@ -294,7 +294,7 @@ Here's an example of a "chatbot application" in action:
294294
295295
### JavaScript ecosystem
296296
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?
298298
299299
**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:
300300
@@ -321,7 +321,7 @@ Here's an example of a "chatbot application" in action:
321321
322322
## Assignment – Helping Dinocrates
323323
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.
325325
326326
**Time Beetle:** Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates.
327327
@@ -333,7 +333,7 @@ To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that
333333
334334
**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.
335335
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.
337337
338338
**Time Beetle:** Yes, I'm waiting...
339339
@@ -349,9 +349,9 @@ Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chat
349349
350350
**Question:** Which of the following statements about Generative AI and JavaScript are true?
351351
352-
A. JavaScript powered Generative AI apps can only generate text.
353-
B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more.
354-
C. Python is the only language used for AI development.
352+
A. JavaScript powered Generative AI apps can only generate text.
353+
B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more.
354+
C. Python is the only language used for AI development.
355355
356356
[Quiz solution](./solution/solution-quiz.md)
357357

lessons/02-first-ai-app/README.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ _This video gives you an introduction to AI models called "large language models
3131
> [!NOTE]
3232
> 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.
3333
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.
3535

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.
3737

3838
### A new adventure
3939

4040
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.
4141

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.
4343

4444
<div>
4545
<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
5757

5858
### Help me, Leonardo
5959

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.
6161

6262
**Time Beetle:** "Of course, I'll translate into 15th century Italian. 'Dove sono?'"
6363

@@ -105,7 +105,7 @@ The Time Beetle translates.
105105

106106
**You:** "Well, I was working on a project, and I ended up here."
107107

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.
109109

110110
Leonardo looks at you with excitement.
111111

@@ -133,7 +133,7 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app.
133133
1. Start a [![GitHub Codespace](https://img.shields.io/badge/GitHub-Codespace-brightgreen)](https://codespaces.new/microsoft/generative-ai-with-javascript)
134134
2. Navigate to _/app/README.md_ in the repo root.
135135
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.
137137
5. Chat with Leonardo.
138138

139139
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
149149

150150
**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.
151151

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.
155155

156156
- **Node.js**. You also need to install Node.js and npm, which are tools that help you run JavaScript code on your computer.
157157

@@ -268,7 +268,7 @@ AI: Rome is known for its ancient ruins, art, and vibrant culture. You can visit
268268
269269
```
270270
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.
272272

273273
**You:** I think I get it, how do I construct a conversation with the AI using this JavaScript language you speak of?
274274

@@ -327,13 +327,13 @@ Now the AI will provide a list of chat messages as context, and the AI will gene
327327

328328
**You:** Ok, so if I 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?
329329
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.
331331
332332
## Improving the chat conversation with a system message
333333
334334
**You:** I see, but is there a way to improve this further?
335335
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.
337337
338338
**You:** Ok, so in the context of the conversation we've been having, what would a system message look like?
339339

@@ -473,11 +473,11 @@ Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from
473473
> 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.
474474
> [Read more](https://en.wikipedia.org/wiki/Leonardo%27s_aerial_screw)
475475
476-
Your assignment is to build an engineering assistant that can help Leonardo with the calculations and design of the aerial screw.
476+
Your assignment is to build an engineering assistant that can help Leonardo with the calculations and design of the aerial screw.
477477
478-
- It should be able to generate text based on user input.
478+
- It should be able to generate text based on user input.
479479
480-
- You should set a system message to introduce the assistant.
480+
- You should set a system message to introduce the assistant.
481481
482482
Check out [Sample app](./sample-app/) to get started.
483483
@@ -491,9 +491,9 @@ Check out [Sample app](./sample-app/) to get started.
491491
492492
**Question:** What is the purpose of the context window in generative AI models? Select all that apply.
493493
494-
A. The context window allows the AI to consider more context and generate more coherent responses.
494+
A. The context window allows the AI to consider more context and generate more coherent responses.
495495
496-
B. The context window is the number of previous messages that the AI uses to generate a response.
496+
B. The context window is the number of previous messages that the AI uses to generate a response.
497497
498498
C. The context window determines how creative the AI's responses are.
499499

0 commit comments

Comments
 (0)