Skip to content

docs: Update image links to make it work with GH pages #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 30, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 7 additions & 21 deletions lessons/01-intro-to-genai/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,7 @@ In the heart of 1860s London, you are recognized as one of the most skilled mech

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

<div>
<img src="/lessons/01-intro-to-genai/assets/london.png" alt="London Workshop"width=300 >
</div>
![London Workshop](/lessons/01-intro-to-genai/assets/london.png)

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

Expand Down Expand Up @@ -74,9 +72,7 @@ It's dark and gloomy inside, the only light filtering through the grimy windows,

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.

<div>
<img src="/lessons/01-intro-to-genai/assets/library.png" alt="Dusty Library" width="300">
</div>
![Dusty Library](/lessons/01-intro-to-genai/assets/library.png)

### What's This Device?

Expand All @@ -90,19 +86,15 @@ Compelled by curiosity, your fingers drift toward the red button. The moment you

Then, blackness, and a sense of falling.

<div>
<img src="/lessons/01-intro-to-genai/assets/vortex.png" alt="Time Vortex" width="300">
</div>
![Time Vortex](/lessons/01-intro-to-genai/assets/vortex.png)

### Alexandria 300 BC

You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive.

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.

<div>
<img src="/lessons/01-intro-to-genai/assets/alexandria.png" alt="Alexandria 300 BC" width="300">
</div>
![Alexandria 300 BC](/lessons/01-intro-to-genai/assets/alexandria.png)

**You:** Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged.

Expand All @@ -112,9 +104,7 @@ Am I stuck in the past? Do I dare press that button again? Before you can decide

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.

<div>
<img src="/lessons/01-intro-to-genai/assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
</div>
![Dinocrates wearing a toga](/lessons/01-intro-to-genai/assets/dinocrates.png)

**Dinocrates:** "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold."

Expand Down Expand Up @@ -144,9 +134,7 @@ A thought strikes you. Can the device understand me if I speak to it?

**You:** You're right, George is a good name, it was my father's name in fact.

<div>
<img src="/lessons/01-intro-to-genai/assets/time-beetle.png" alt="Time travel device resembling a metallic beetle" width="300">
</div>
![Time Beetle](/lessons/01-intro-to-genai/assets/time-beetle.png)

_Time device, “George” the metallic beetle_

Expand All @@ -165,9 +153,7 @@ If you want to interact with Dinocrates, run the [Characters](/app/README.md) ap
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](../../README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/01-intro-to-genai/assets/dinocrates.png" alt="Dinocrates wearing a toga" width="300">
</div>
![Dinocrates wearing a toga](/lessons/01-intro-to-genai/assets/dinocrates.png)

**Steps**:

Expand Down
22 changes: 7 additions & 15 deletions lessons/02-first-ai-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,17 @@ When you open your eyes, the world has shifted. As you manage to get up, you rea

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.

<div>
<img src="/lessons/02-first-ai-app/assets/boat.png" alt="Boat on the rive, man standing with a paddle" width=300" >
</div>

!["Boat on the river, man standing with a paddle](/lessons/02-first-ai-app/assets/boat.png)

The question now is, where and when are you this time?

You manage to secure the boat at the dock and start walking along the wooden planks, the sound of your footsteps echoing softly.

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.

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

![Leonardo Da Vinci standing next to a crate in the harbour](/lessons/02-first-ai-app/assets/leonardo.png)

### Help me, Leonardo

Expand Down Expand Up @@ -81,9 +79,7 @@ As you walk, you notice a man with a long beard and a hat, digging through a cra

### At the workshop

<div>
<img src="/lessons/02-first-ai-app/assets/leonardo-workshop.png" alt="Lenoardos workshop" width="300" >
</div>
![Leonardos workshop](/lessons/02-first-ai-app/assets/leonardo-workshop.png)

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.

Expand Down Expand Up @@ -124,9 +120,7 @@ If you want to interact with Leonardo, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/02-first-ai-app/assets/leonardo-talk.jpeg" width=300>
</div>
![Leonardo talks](/lessons/02-first-ai-app/assets/leonardo-talk.jpeg)

**Steps**:

Expand Down Expand Up @@ -461,9 +455,7 @@ Leonardo suddenly asked to inspect the Time Beetle closer, he looked at it from

**Time Beetle:** Nothing

<div>
<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" >
</div>
![Aerial screw, Leonardo Da Vinci](/lessons/02-first-ai-app/assets/helicopter.jpg)

> [!NOTE]
> The aerial screw, also known as the helical air screw, was intended to lift off the ground by compressing air. Leonardo's design featured a large, spiral-shaped rotor made of linen, stiffened with starch, and mounted on a wooden platform. The idea was that a crew of men would run around the platform, turning cranks to rotate the screw rapidly enough to achieve lift
Expand Down
16 changes: 4 additions & 12 deletions lessons/03-prompt-engineering/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ _This video offers an introduction to improving your "prompting" skills, teachin

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:

<div>
<img src="/lessons/03-prompt-engineering/assets/ludovico.png" alt="An angry Ludovico Sforza busting in through the door" width="300">
</div>
!["An angry Ludovico Sforza busting in through the door](/lessons/03-prompt-engineering/assets/ludovico.png)

*Ludovico Sforza*

Expand Down Expand Up @@ -64,9 +62,7 @@ A swirl of colors envelops the carriage, the world around you dissolving into a

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.

<div>
<img src="/lessons/03-prompt-engineering/assets/escape.png" alt="Escape from Rome" width="300">
</div>
![Escape from Rome](/lessons/03-prompt-engineering/assets/escape.png)

**You:** Leonardo, where are we?

Expand Down Expand Up @@ -104,9 +100,7 @@ With a final push, the aerial screw begins to spin. The blades catch the air, an

You look out over the city; the ancient buildings stretch out below you.

<div>
<img src="/lessons/03-prompt-engineering/assets/airborne.png" alt="Airborne, looks down at the city with feet dangling" width="300">
</div>
![Airborne, looks down at the city with feet dangling](/lessons/03-prompt-engineering/assets/airborne.png)

## Interact with Sforza

Expand All @@ -116,9 +110,7 @@ If you want to interact with Sforza, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div >
<img src="/lessons/03-prompt-engineering/assets/ludovico.png" alt="Ludovico Sforza" width="300" >
</div>
![Ludovico Sforza](/lessons/03-prompt-engineering/assets/ludovico.png)

**Steps**:

Expand Down
20 changes: 5 additions & 15 deletions lessons/04-structured-output/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ The bright light from the Time Beetle fades, and you find yourself standing at t

The aerial screw, rests awkwardly on a large, intricately carved stone, with markings that look like a calendar

<div>
<img alt="Aztec calendar, Wikipedia" src="/lessons/04-structured-output/assets/aztec.png" width="300" />
</div>
![Aztec calendar, Wikipedia](/lessons/04-structured-output/assets/aztec.png)

_Aztec calendar, Wikipedia_

Expand All @@ -58,9 +56,7 @@ Leonardo da Vinci steps forward, his eyes wide with wonder.

Before you can react, a group of Aztec soldiers approaches.

<div>
<img src="/lessons/04-structured-output/assets/meeting.png" alt="Meeting with Aztecs" width="300" />
</div>
![Meeting with Aztecs](/lessons/04-structured-output/assets/meeting.png)

**Soldier leader:** "Who are you, and what have you done?" he demands in Nahuatl.

Expand All @@ -82,9 +78,7 @@ Upon reaching the top of the pyramid, you are led into a grand chamber where Mon

**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."

<div>
<img src="/lessons/04-structured-output/assets/game.png" alt="Playing a game of Patolli" width="300" />
</div>
![Playing a game of Patolli](/lessons/04-structured-output/assets/game.png)

The game begins, and the room falls silent, save for the sound of beans being rolled and pieces moving across the board.

Expand Down Expand Up @@ -114,9 +108,7 @@ With a final, decisive move, Leonardo wins the game. The room erupts in cheers a
>
> **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.

<div>
<img width="300" src="/lessons/04-structured-output/assets/patolli.png" alt="Patolli board" />
</div>
![Patolli board](/lessons/04-structured-output/assets/patolli.png)

_Patolli - Wikipedia_

Expand All @@ -128,9 +120,7 @@ If you want to interact with Montezuma, run the [Characters](/app/README.md) app
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="./assets/montezuma.jpeg" alt="Montezuma" width="300" />
</div>
![Montezuma](/lessons/04-structured-output/assets/montezuma.jpeg)

**Steps**:

Expand Down
17 changes: 5 additions & 12 deletions lessons/05-rag/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,14 @@ _This video explains Retrieval Augmented Generation (RAG), a method that helps t

You land in the garden, it's late at night with a thick fog and eerie lights are flickering in the distance. The mansion looms before you. Leonardo looks around, his eyes wide with wonder.

<div>
<img src="/lessons/05-rag/assets/mansion.jpeg" alt="Old mansion shown in a deep fog" width="300">
</div>
![Old mansion shown in a deep fog](/lessons/05-rag/assets/mansion.jpeg)


### Running from the Dogs

You hear barking and the sound of dogs running towards you. You turn to Leonardo, "We need to get inside, now!"

<div>
<img src="/lessons/05-rag/assets/dogs.jpeg" alt="Running from the dogs" width="300">
</div>
![Running from the dogs](/lessons/05-rag/assets/dogs.jpeg)

As you reach the mansion's door it swings open and a pair of attendants hurry out. After sizing you up, they motion for you to follow them.

Expand All @@ -62,9 +59,7 @@ You come face to face with Ada Lovelace, her eyes gleaming with curiosity.

**You:** But..

<div>
<img src="/lessons/05-rag/assets/ada.jpeg" alt="Ada Lovelace and Charles Babbage working on a device" width="300">
</div>
![Ada Lovelace and Charles Babbage working on a device](/lessons/05-rag/assets/ada.jpeg)

Charles Babbage steps forward, examining the Time Beetle in your hand. "This device is remarkable, but it's a bit faulty, isn't it? You've noticed, I'm sure."

Expand All @@ -84,9 +79,7 @@ If you want to interact with Ada, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/05-rag/assets/ada-2.jpeg" alt="Ada Lovelace" width="300">
</div>
![Ada Lovelace](/lessons/05-rag/assets/ada-2.jpeg)

**Steps**:

Expand Down
12 changes: 3 additions & 9 deletions lessons/06-tool-calling/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@ You: "Who are we talking about and where can I find her?"

The world around you starts to blur, and everything fades to black. You come to and find yourself in the cockpit of a plane. You're airborne, and you can see the ocean below you. There's someone sitting in front; you can only see the back of their neck.

<div>
<img src="/lessons/06-tool-calling/assets/amelia.jpeg" alt="Amelia piloting a plane" width="300">
</div>
![Amelia piloting a plane](/lessons/06-tool-calling/assets/amelia.jpeg)

**You**: "Amelia, is that you?"

Expand Down Expand Up @@ -71,9 +69,7 @@ If you want to interact with Ada, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/06-tool-calling/assets/amelia-front.jpeg" alt="Ada Lovelace" width="300">
</div>
![Ada Lovelace](/lessons/06-tool-calling/assets/amelia-front.jpeg)

**Steps**:

Expand All @@ -96,9 +92,7 @@ For a more detailed explanation of the app, see [Detailed app explanation](/less

**Time Beetle**: "Here's an image to illustrate the process of tool calling:"

<div>
<img src="/lessons/06-tool-calling/assets/tool_call_langchain.png" alt="Tool calling process illustration" width="600">
</div>
![Tool calling process illustration](/lessons/06-tool-calling/assets/tool_call_langchain.png)

_Image credit Langchain <https://python.langchain.com/docs/concepts/tool_calling/>_

Expand Down
8 changes: 2 additions & 6 deletions lessons/07-mcp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ _Our heroes, having just learned about tools and "tool-calling" during their mee

The swirling of light envelops you again and you find yourself in a large room with a large table in the middle. The walls are adorned with maps and military strategies. Scipio Africanus is standing at the table, deep in thought. He looks up as you enter. "Ada te misit/Ada sent you?"

<div>
<img width="600" src="/lessons/07-mcp/assets/scipio.png" alt="Scipio Africanus">
</div>
![Scipio Africanus](/lessons/07-mcp/assets/scipio.png)

> Scipio Africanus, also known as Publius Cornelius Scipio Africanus, was a prominent Roman general and statesman who lived from 236 BC to 183 BC. He is best known for his decisive role in the Second Punic War against Carthage and his victory over Hannibal at the Battle of Zama in 202 BC.
> His life and career exemplify the qualities of leadership, strategic brilliance, and resilience. His contributions to Rome's military and political spheres left a lasting impact on the Roman Empire.
Expand All @@ -61,9 +59,7 @@ If you want to interact with Scipio, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/07-mcp/assets/scipio.png" alt="Scipio Africanus" width="300">
</div>
![Scipio Africanus](/lessons/07-mcp/assets/scipio.png)

**Steps**:

Expand Down
8 changes: 2 additions & 6 deletions lessons/08-mcp-advanced/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@ You once again traveled back to Ada's mansion. This time Ada was meeting you at

Everything fades to black. Swirling colors rush past, and moments later, your vision begins to focus. You see a man sitting by a piano, animatedly talking with a woman who has dark brown and curly hair. Both are gesticulating excitedly as they speak.

<div>
<img src="/lessons/08-mcp-advanced/assets/hedy-invention.jpeg" alt="Hedy Lamarr" width="600" />
</div>
![Hedy Lamarr](/lessons/08-mcp-advanced/assets/hedy-invention.jpeg)

The woman turned around to face Ada standing next to you to exclaim "Ada it's you, it's been far too long".

Expand Down Expand Up @@ -88,9 +86,7 @@ If you want to interact with Hedy, run the [Characters](/app/README.md) app.
> This is entirely fictional; the responses are generated by AI.
> [Responsible AI disclaimer](/README.md#responsible-ai-disclaimer)

<div>
<img src="/lessons/08-mcp-advanced/assets/hedylamarr.jpeg" alt="Hedy Lamarr" width="300">
</div>
![Hedy Lamarr](/lessons/08-mcp-advanced/assets/hedylamarr.jpeg)

**Steps**:

Expand Down