Skip to content

Commit e3e4db1

Browse files
authored
docs: GH page (#134)
* Update README.md * adding docsify as gh pages provider, removing relative links
1 parent fe4d9cb commit e3e4db1

File tree

11 files changed

+121
-66
lines changed

11 files changed

+121
-66
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div align="center">
1+
<div align="center">
22

33
<img src="./docs/images/logo.png" alt="" align="center" height="128" />
44

_sidebar.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
- Lessons
2+
- [01 - Intro to Gen AI](/lessons/01-intro-to-genai/README.md)
3+
- [02 - First AI App](/lessons/02-first-ai-app/README.md)
4+
- [03 - Prompt Engineering](/lessons/03-prompt-engineering/README.md)
5+
- [04 - Structured Output](/lessons/04-structured-output/README.md)
6+
- [05 - Retrieval Augmented Generation](/lessons/05-rag/README.md)
7+
- [06 - Tool Calling](/lessons/06-tool-calling/README.md)
8+
- [07 - MCP](/lessons/07-mcp/README.md)
9+
- [08 - MCP, improving Client with LLM](/lessons/08-mcp-advanced/README.md)
10+

index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Web Dev for Beginners</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="description" content="Description">
8+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9+
<link rel="icon" type="image/png" href="images/favicon.png">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
11+
<link rel="stylesheet" href="index.css">
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script type="text/javascript">
16+
17+
(function(c,l,a,r,i,t,y){
18+
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
19+
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
20+
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
21+
})(window, document, "clarity", "script", "rr8mykpwiy");
22+
23+
window.$docsify = {
24+
loadSidebar: true,
25+
name: 'Generative AI For Beginners with JavaScript',
26+
repo: 'https://github.com/microsoft/generative-ai-with-javascript',
27+
relativePath: true,
28+
auto2top: false,
29+
notFoundPage: true,
30+
alias: {
31+
'/(README.(.*))': '/translations/$1',
32+
'#/((?!README).*)/README.(.*)': '$1/translations/README.$2',
33+
'/((?!README).*)/((?!README).*)/README.(.*)': '$1/$2/translations/README.$3',
34+
35+
// handle English, since English files isn't in translation folders
36+
'/(README$)': '/$1',
37+
'#/((?!README).*)/(README$)': '$1/$2',
38+
'/((?!README).*)/((?!README).*)/(README$)': '$1/$2/$3'
39+
}
40+
}
41+
</script>
42+
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
43+
44+
</body>
45+
</html>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ If you haven't already, set up your development environment. Here's how you can
1616

1717
_This video gives you an introduction to Generative AI with JavaScript_
1818

19-
💼 Slides: [Introduction to Generative AI](../../videos/slides/00-intro.pptx)
19+
💼 Slides: [Introduction to Generative AI](/videos/slides/00-intro.pptx)
2020

2121
## Generative AI
2222

@@ -43,7 +43,7 @@ In the heart of 1860s London, you are recognized as one of the most skilled mech
4343
Your workbench, the heart of your workshop, is an organized mess.
4444

4545
<div>
46-
<img src="./assets/london.png" alt="London Workshop"width=300 >
46+
<img src="/lessons/01-intro-to-genai/assets/london.png" alt="London Workshop"width=300 >
4747
</div>
4848

4949
_At the center of the bench lies the torso of a robot—an engineering marvel that has consumed months of effort. Its wooden frame is intricately carved, each joint meticulously designed for smooth movement._
@@ -75,7 +75,7 @@ It's dark and gloomy inside, the only light filtering through the grimy windows,
7575
As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage.
7676

7777
<div>
78-
<img src="./assets/library.png" alt="Dusty Library" width="300">
78+
<img src="/lessons/01-intro-to-genai/assets/library.png" alt="Dusty Library" width="300">
7979
</div>
8080

8181
### What's This Device?
@@ -91,7 +91,7 @@ Compelled by curiosity, your fingers drift toward the red button. The moment you
9191
Then, blackness, and a sense of falling.
9292

9393
<div>
94-
<img src="./assets/vortex.png" alt="Time Vortex" width="300">
94+
<img src="/lessons/01-intro-to-genai/assets/vortex.png" alt="Time Vortex" width="300">
9595
</div>
9696

9797
### Alexandria 300 BC
@@ -101,7 +101,7 @@ You awaken, disoriented. As your vision clears, an ancient city unfolds before y
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

103103
<div>
104-
<img src="./assets/alexandria.png" alt="Alexandria 300 BC" width="300">
104+
<img src="/lessons/01-intro-to-genai/assets/alexandria.png" alt="Alexandria 300 BC" width="300">
105105
</div>
106106

107107
**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged.
@@ -113,7 +113,7 @@ Am I stuck in the past? Do I dare press that button again? Before you can decide
113113
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.
114114

115115
<div>
116-
<img src="./assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
116+
<img src="/lessons/01-intro-to-genai/assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
117117
</div>
118118

119119
**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold."
@@ -145,7 +145,7 @@ A thought strikes you. Can the device understand me if I speak to it?
145145
**You:** You're right, George is a good name, it was my father's name in fact.
146146

147147
<div>
148-
<img src="./assets/time-beetle.png" alt="Time travel device resembling a metallic beetle" width="300">
148+
<img src="/lessons/01-intro-to-genai/assets/time-beetle.png" alt="Time travel device resembling a metallic beetle" width="300">
149149
</div>
150150

151151
_Time device, “George” the metallic beetle_
@@ -166,7 +166,7 @@ If you want to interact with Dinocrates, run the [Characters](/app/README.md) ap
166166
> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer)
167167
168168
<div>
169-
<img src="./assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
169+
<img src="/lessons/01-intro-to-genai/assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
170170
</div>
171171

172172
**Steps**:
@@ -178,7 +178,7 @@ If you want to interact with Dinocrates, run the [Characters](/app/README.md) ap
178178
5. Chat with Dinocrates.
179179

180180
> [!NOTE]
181-
> If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code.
181+
> If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code.
182182
183183
### Code Sneak Peek
184184

@@ -344,7 +344,7 @@ Visit [Microsoft Copilot](https://copilot.microsoft.com), [ChatGPT](https://chat
344344
345345
## Solution
346346
347-
[Solution](./solution/solution.md)
347+
[Solution](/lessons/01-intro-to-genai/solution/solution.md)
348348
349349
### Knowledge Check
350350
@@ -354,7 +354,7 @@ A. JavaScript powered Generative AI apps can only generate text.
354354
B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more.
355355
C. Python is the only language used for AI development.
356356
357-
[Quiz solution](./solution/solution-quiz.md)
357+
[Quiz solution](/lessons/01-intro-to-genai/solution/solution-quiz.md)
358358
359359
## Self-Study Resources
360360

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ _This video gives you an introduction to AI models called "large language models
1818

1919
*🎥 Click on the image above to watch a short video about large language models*
2020

21-
💼 Slides: [Introduction to large language models, LLMs](../../videos/slides/01-llms.pptx)
21+
💼 Slides: [Introduction to large language models, LLMs](/videos/slides/01-llms.pptx)
2222

2323
## Narrative: Picture yourself in a boat on a river
2424

2525

2626
> [!NOTE]
2727
> _Our story so far: You are a maker of things, a craftsman from 1860s London who has traveled through time using a mysterious device called the Time Beetle. You've journeyed through the annals of history, witnessing the creation of the lighthouse at Alexandria, a marvel of ancient engineering you helped create with a little help from Dinocrates and the Time Beetle._
2828
>
29-
> See [Lesson 1](../01-intro-to-genai/README.md) if you want to catch up with the story from the beginning and get started with Generative AI.
29+
> See [Lesson 1](/lessons/01-intro-to-genai/README.md) if you want to catch up with the story from the beginning and get started with Generative AI.
3030
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.
@@ -42,7 +42,7 @@ When you open your eyes, the world has shifted. As you manage to get up, you rea
4242
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>
45-
<img src="./assets/boat.png" alt="Boat on the rive, man standing with a paddle" width=300" >
45+
<img src="/lessons/02-first-ai-app/assets/boat.png" alt="Boat on the rive, man standing with a paddle" width=300" >
4646
</div>
4747

4848
The question now is, where and when are you this time?
@@ -52,7 +52,7 @@ You manage to secure the boat at the dock and start walking along the wooden pla
5252
As you walk, you notice a man with a long beard and a hat, digging through a crate of what looks like mechanical parts. His hands move deftly, sorting through gears and springs with practiced ease.
5353

5454
<div >
55-
<img src="./assets/leonardo.png" alt="Leonardo Da Vinci standing next to a crate in the harbour" width="300" >
55+
<img src="/lessons/02-first-ai-app/assets/leonardo.png" alt="Leonardo Da Vinci standing next to a crate in the harbour" width="300" >
5656
</div>
5757

5858
### Help me, Leonardo
@@ -82,7 +82,7 @@ As you walk, you notice a man with a long beard and a hat, digging through a cra
8282
### At the workshop
8383

8484
<div>
85-
<img src="./assets/leonardo-workshop.png" alt="Lenoardos workshop" width="300" >
85+
<img src="/lessons/02-first-ai-app/assets/leonardo-workshop.png" alt="Lenoardos workshop" width="300" >
8686
</div>
8787

8888
The old man leads you to a large wooden door and you are greeted by the sight of a workshop filled with all sorts of mechanical contraptions.
@@ -122,10 +122,10 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app.
122122

123123
> [!IMPORTANT]
124124
> This is entirely fictional; the responses are generated by AI.
125-
> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer)
125+
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)
126126
127127
<div>
128-
<img src="./assets/leonardo-talk.jpeg" width=300>
128+
<img src="/lessons/02-first-ai-app/assets/leonardo-talk.jpeg" width=300>
129129
</div>
130130

131131
**Steps**:
@@ -139,7 +139,7 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app.
139139
For a more detailed explanation of the app, see [Detailed app explanation](/lessons/01-intro-to-genai/README.md#interact-with-dinocrates).
140140

141141
> [!NOTE]
142-
> If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](../../docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code.
142+
> If you're running the project locally on your machine, please review the QuickStart guide to get a [GitHub personal access](/docs/setup/README.md#creating-a-personal-access-token-pat-for-github-model-access) token setup and replace the key in the code.
143143
144144
## Development environment setup
145145

@@ -409,7 +409,7 @@ This means the majority of tokens can be spent on the input tokens, i.e 128k - 1
409409
I want you to generate recipes for me.
410410
```
411411

412-
![Demo of tokenizer](./assets/tokenizer.png)
412+
![Demo of tokenizer](/lessons/02-first-ai-app/assets/tokenizer.png)
413413

414414
Running `tokenizer` on the sentence above gives us 9 tokens.
415415

@@ -462,7 +462,7 @@ Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from
462462
**Time Beetle:** Nothing
463463

464464
<div>
465-
<img style="margin-top: 52px; margin-left: 15px; margin-right: 10px" align=right src="./assets/helicopter.jpg" alt="Aerial screw, Leonardo Da Vinci" width="300" >
465+
<img style="margin-top: 52px; margin-left: 15px; margin-right: 10px" align=right src="/lessons/02-first-ai-app/assets/helicopter.jpg" alt="Aerial screw, Leonardo Da Vinci" width="300" >
466466
</div>
467467

468468
> [!NOTE]
@@ -488,7 +488,7 @@ Check out [Sample app](/app/README.md) to get started.
488488
489489
## Solution
490490
491-
[Solution](./solution/solution.md)
491+
[Solution](/lessons/02-first-ai-app/solution/solution.md)
492492
493493
## Knowledge Check
494494
@@ -500,7 +500,7 @@ B. The context window is the number of previous messages that the AI uses to gen
500500
501501
C. The context window determines how creative the AI's responses are.
502502

503-
[Quiz solution](./solution/solution-quiz.md)
503+
[Quiz solution](/lessons/02-first-ai-app/solution/solution-quiz.md)
504504

505505
## Self-Study Resources
506506

lessons/03-prompt-engineering/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ _This video offers an introduction to improving your "prompting" skills, teachin
2525
> [!NOTE]
2626
> So far, you've been on a journey through time with Leonardo da Vinci, exploring the wonders of the Renaissance. You've encountered the Time Beetle, a mysterious device that allows you to travel through time and space.
2727
>
28-
> See [Lesson 1](../01-intro-to-genai/README.md) if you want to catch up with the story from the beginning.
28+
> See [Lesson 1](/lessons/01-intro-to-genai/README.md) if you want to catch up with the story from the beginning.
2929
3030
> [!NOTE]
3131
> While we recommend going through the story (it's fun!), [click here](#interact-with-sforza) if you'd prefer to jump straight to the technical content.
@@ -35,7 +35,7 @@ _This video offers an introduction to improving your "prompting" skills, teachin
3535
Before you manage to press the button, the workshop doors slam open with a thunderous bang. A man stands in the doorway, broad-shouldered and dressed in expensive clothes, he waves a piece of paper in the air, yelling:
3636

3737
<div>
38-
<img src="./assets/ludovico.png" alt="An angry Ludovico Sforza busting in through the door" width="300">
38+
<img src="/lessons/03-prompt-engineering/assets/ludovico.png" alt="An angry Ludovico Sforza busting in through the door" width="300">
3939
</div>
4040

4141
*Ludovico Sforza*
@@ -65,7 +65,7 @@ A swirl of colors envelops the carriage, the world around you dissolving into a
6565
The swirl of colors fades, and you find yourself in the carriage, now racing down the Via Appia in Rome and to your astonishment, you're in the middle of a horse race. Chariots thunder past, their wheels kicking up clouds of dust.
6666

6767
<div>
68-
<img src="./assets/escape.png" alt="Escape from Rome" width="300">
68+
<img src="/lessons/03-prompt-engineering/assets/escape.png" alt="Escape from Rome" width="300">
6969
</div>
7070

7171
**You:** Leonardo, where are we?
@@ -105,7 +105,7 @@ With a final push, the aerial screw begins to spin. The blades catch the air, an
105105
You look out over the city; the ancient buildings stretch out below you.
106106

107107
<div>
108-
<img src="./assets/airborne.png" alt="Airborne, looks down at the city with feet dangling" width="300">
108+
<img src="/lessons/03-prompt-engineering/assets/airborne.png" alt="Airborne, looks down at the city with feet dangling" width="300">
109109
</div>
110110

111111
## Interact with Sforza
@@ -117,7 +117,7 @@ If you want to interact with Sforza, run the [Characters](/app/README.md) app.
117117
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)
118118
119119
<div >
120-
<img src="./assets/ludovico.png" alt="Ludovico Sforza" width="300" >
120+
<img src="/lessons/03-prompt-engineering/assets/ludovico.png" alt="Ludovico Sforza" width="300" >
121121
</div>
122122

123123
**Steps**:
@@ -320,7 +320,7 @@ Build an app in JavaScript that asks for the following inputs:
320320

321321
Then use the LLM to incorporate these inputs and leverage the chain of thought prompting technique to guide the model to the right answer.
322322

323-
[Solution](./solution/solution.md)
323+
[Solution](/lessons/03-prompt-engineering/solution/solution.md)
324324

325325
## Knowledge Check
326326

@@ -332,7 +332,7 @@ B. Prompt engineering is about crafting the right prompts to get the desired out
332332

333333
C. Prompt engineering is about training a model to recognize patterns in data.
334334

335-
[Quiz solution](./solution/solution-quiz.md)
335+
[Quiz solution](/lessons/03-prompt-engineering/solution/solution-quiz.md)
336336

337337
## Self-Study Resources
338338

lessons/04-structured-output/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ _This video offers an introduction to improving your "prompting" skills, teachin
2020

2121
*🎥 Click on the image above to watch a short video about prompt engineering*
2222

23-
💼 Slides: [Prompt engineering](../../videos/slides/02-prompt-engineering.pptx)
23+
💼 Slides: [Prompt engineering](/videos/slides/02-prompt-engineering.pptx)
2424

2525
## Narrative - Out of the frying pan and into the fire
2626

2727
> [!NOTE]
2828
> _Our story so far: You, a mechanically trained engineer from 1860 and have been on a journey through time with Leonardo da Vinci. You've escaped Roman soldiers — or rather, you're in the process of escaping them— and you're desperately searching for a way to land the aeriel screw safely_.
2929
>
30-
> See [Lesson 1](../01-intro-to-genai/README.md) if you want to catch up with the story from the beginning.
30+
> See [Lesson 1](/lessons/01-intro-to-genai/README.md) if you want to catch up with the story from the beginning.
3131
3232
> [!NOTE]
3333
> While we recommend going through the story (it's fun!), [click here](#interact-with-montezuma) if you'd prefer to jump straight to the technical content.
@@ -47,7 +47,7 @@ The bright light from the Time Beetle fades, and you find yourself standing at t
4747
The aerial screw, rests awkwardly on a large, intricately carved stone, with markings that look like a calendar
4848

4949
<div>
50-
<img alt="Aztec calendar, Wikipedia" src="./assets/aztec.png" width="300" />
50+
<img alt="Aztec calendar, Wikipedia" src="/lessons/04-structured-output/assets/aztec.png" width="300" />
5151
</div>
5252

5353
_Aztec calendar, Wikipedia_
@@ -59,7 +59,7 @@ Leonardo da Vinci steps forward, his eyes wide with wonder.
5959
Before you can react, a group of Aztec soldiers approaches.
6060

6161
<div>
62-
<img src="./assets/meeting.png" alt="Meeting with Aztecs" width="300" />
62+
<img src="/lessons/04-structured-output/assets/meeting.png" alt="Meeting with Aztecs" width="300" />
6363
</div>
6464

6565
**Soldier leader:** "Who are you, and what have you done?" he demands in Nahuatl.
@@ -83,7 +83,7 @@ Upon reaching the top of the pyramid, you are led into a grand chamber where Mon
8383
**Montezuma:** "Very well. I propose a game of [Patolli](#patolli). If I win the best of three games, you will give me your device and tell me how it works. If you win, you are free to go."
8484

8585
<div>
86-
<img src="./assets/game.png" alt="Playing a game of Patolli" width="300" />
86+
<img src="/lessons/04-structured-output/assets/game.png" alt="Playing a game of Patolli" width="300" />
8787
</div>
8888

8989
The game begins, and the room falls silent, save for the sound of beans being rolled and pieces moving across the board.
@@ -115,7 +115,7 @@ With a final, decisive move, Leonardo wins the game. The room erupts in cheers a
115115
> **Aztec Involvement**: Widely played by nobles and commoners, it was a favorite at Montezuma’s court. Beyond fun, it involved high-stakes gambling with bets like blankets, precious stones, or even freedom.
116116
117117
<div>
118-
<img width="300" src="./assets/patolli.png" alt="Patolli board" />
118+
<img width="300" src="/lessons/04-structured-output/assets/patolli.png" alt="Patolli board" />
119119
</div>
120120

121121
_Patolli - Wikipedia_
@@ -536,7 +536,7 @@ See the [sample app](/app/README.md) for code to get started with. It contains a
536536
537537
## Solution
538538

539-
[Solution](./solution/solution.md)
539+
[Solution](/lessons/04-structured-output/solution/solution.md)
540540

541541
## Challenge
542542

@@ -564,7 +564,7 @@ B. Extracting data from prompts.
564564

565565
C. Generating unstructured text.
566566

567-
[Quiz solution](./solution/solution-quiz.md)
567+
[Quiz solution](/lessons/04-structured-output/solution/solution-quiz.md)
568568

569569
## Self-Study Resources
570570

0 commit comments

Comments
 (0)