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
Copy file name to clipboardExpand all lines: lessons/01-intro-to-genai/README.md
+27-27
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Lesson 1: Introduction to Generative AI and LLMs for JavaScript Developers
2
2
3
-
In this lesson, you will learn to:
3
+
In this chapter you will learn:
4
4
5
5
- Understand the basics of Generative AI and Large Language Models (LLMs).
6
6
- Identify the potential applications and limitations of LLMs in JavaScript development.
@@ -12,7 +12,7 @@ If you haven't already, set up your development environment. Here's how you can
12
12
13
13
## Related resources
14
14
15
-
[](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1)
15
+
[](https://www.youtube.com/watch?v=vLYtDgs_zx8&list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk&index=1)
16
16
17
17
_This video gives you an introduction to Generative AI with JavaScript_
18
18
@@ -22,7 +22,7 @@ _This video gives you an introduction to Generative AI with JavaScript_
22
22
23
23
By now, you've likely heard of tools like ChatGPT or Generative AI. The concept is simple: you provide a prompt, and a model—often called a Large Language Model (LLM)—generates a paragraph or even an entire page of text. This output can be used for various purposes, including creative writing, answering questions, and coding.
24
24
25
-
Moreover, Generative AI has evolved into multi modal capabilities, allowing you to provide an image or video as input and receive a variety of outputs. This advancement has significantly enhanced many people's workflows—not only by generating text but also by summarizing, translating, and more.
25
+
Moreover, Generative AI has evolved into multimodal capabilities, allowing you to provide an image or video as input and receive a variety of outputs. This advancement has significantly enhanced many people's workflows—not only by generating text but also by summarizing, translating, and more.
26
26
27
27
*Simply put, natural language interfaces are becoming the new standard interface for many apps—and your users expect to use them.*
28
28
@@ -84,7 +84,7 @@ Just as you step closer, a blinding flash erupts, and he vanishes.
84
84
85
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 it's 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
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
@@ -110,7 +110,7 @@ Am I stuck in the past? Do I dare press that button again? Before you can decide
110
110
111
111
### Meeting Dinocrates
112
112
113
-
An elderly gentleman wearing a toga wave at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow.
113
+
An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow.
114
114
115
115
<div>
116
116
<imgsrc="./assets/dinocrates.png"alt="Dinocrates wearing a toga"width="300">
@@ -142,7 +142,7 @@ A thought strikes you. Can the device understand me if I speak to it?
142
142
143
143
**Device:** "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle."
144
144
145
-
**You:** You're right, George is a good name, it was my fathers name in fact.
145
+
**You:** You're right, George is a good name, it was my father's name in fact.
146
146
147
147
<div>
148
148
<imgsrc="./assets/time-beetle.png"alt="Time travel device resembling a metallic beetle"width="300">
@@ -238,9 +238,9 @@ Here's a step-by-step summary of what the function does:
238
238
239
239
As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you.
240
240
241
-
**You:** Tell me more about light houses, you say to your device.
241
+
**You:** Tell me more about lighthouses, you say to your device.
242
242
243
-
**Time beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor.
243
+
**Time Beetle:** A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor.
244
244
245
245
Dinocrates overhears your conversation and adds:
246
246
@@ -250,9 +250,9 @@ Dinocrates overhears your conversation and adds:
250
250
251
251
**You:** Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps?
252
252
253
-
**Time beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples:
253
+
**Time Beetle:**. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples:
254
254
255
-
- **Chat bot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience.
255
+
- **Chatbot**: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience.
256
256
257
257
- **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.
258
258
@@ -272,7 +272,7 @@ Here's an example of a "chatbot application" in action:
272
272
273
273
### Generative AI and the JavaScript ecosystem
274
274
275
-
**Time beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following:
275
+
**Time Beetle:** A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following:
276
276
277
277
| What | Description |
278
278
|---|---|
@@ -282,17 +282,17 @@ Here's an example of a "chatbot application" in action:
282
282
283
283
**You:** Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage?
284
284
285
-
**Time beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age.
285
+
**Time Beetle:** Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age.
286
286
287
287
**You:** Were? What do you mean were? I just got a letter from Charles Babbage.
288
288
289
-
**Time beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can.
289
+
**Time Beetle:** Let's just say that you're in a unique position to interact with historical figures in a way that few others can.
290
290
291
291
### JavaScript ecosystem
292
292
293
293
**You:** So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems?
294
294
295
-
**Time beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here's a few reasons why it's so popular:
295
+
**Time Beetle:** JavaScript is one of the most popular programming languages in the world in the 21st century. Here's a few reasons why it's so popular:
296
296
297
297
| What | Description |
298
298
|-|-|
@@ -304,13 +304,13 @@ Here's an example of a "chatbot application" in action:
304
304
305
305
**You:** That's a lot of reasons, sounds like I should bet on JavaScript for my future projects.
306
306
307
-
**Time beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development.
307
+
**Time Beetle:** Indeed, JavaScript is a versatile language, also Python is a popular language for AI development.
308
308
309
309
**You:** Python, what do snakes have to do with programming?
310
310
311
-
**Time beetle:** Let's save that for another time, shall we?
311
+
**Time Beetle:** Let's save that for another time, shall we?
312
312
313
-
**Time beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript.
313
+
**Time Beetle:** I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript.
314
314
315
315
> **Did you know?**
316
316
> [62.5% of developers say they're using JavaScript](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) with many preferring [TypeScript](https://www.typescriptlang.org) for new projects.
@@ -319,19 +319,19 @@ Here's an example of a "chatbot application" in action:
319
319
320
320
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.
321
321
322
-
**Time beetle:** Let's get started, let's use a LLM to research how you can build a lighthouse to help Dinocrates.
322
+
**Time Beetle:** Let's get started, let's use a LLM to research how you can build a lighthouse to help Dinocrates.
323
323
324
-
**Time beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria.
324
+
**Time Beetle:**: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria.
325
325
326
326
**You:** Ok, tell me more about LLMs?
327
327
328
-
**Time beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant.
328
+
**Time Beetle:** LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant.
329
329
330
-
**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.
330
+
**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.
331
331
332
332
**You:** Got it, add more context to the prompt and then ask you.
333
333
334
-
**Time beetle:** Yes, I'm waiting...
334
+
**Time Beetle:** Yes, I'm waiting...
335
335
336
336
Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chatgpt.com/), or another online chatbot tool to generate a plan for building the lighthouse in Alexandria.
0 commit comments