Skip to content

Commit 22d0ff8

Browse files
softchrisChrisDanWahlin
authored
docs: adding ch1 (#4)
* chore: moving video content to subfolder, adding new README (#3) Co-authored-by: Chris <[email protected]> * adding ch1 * updating lesson * removing files * moved to lessons folder and fixed narrative * adding video * Update lessons/01-intro-to-genai/README.md * adding character demo * update get started * Update lessons/01-intro-to-genai/README.md * Revise Chapter 1 README for clarity and consistency Multiple updates throuughout including shortening some unnecessary parts of the story, adding a little more detail here and there, and telling people where to go to learn more about prompting in the Assignment. * Add code sneak peek section to README Decided we should give people a little more from the technical side so added this "sneak peek" section. * fixing narrative, instructions and more * fix image viewport * fix image viewport * Remove "Getting Started" section from README * removing gen ai videos folder --------- Co-authored-by: Chris <[email protected]> Co-authored-by: Dan Wahlin <[email protected]>
1 parent 3a5e69c commit 22d0ff8

15 files changed

+577
-0
lines changed

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

+322
Large diffs are not rendered by default.

‎lessons/01-intro-to-genai/assets/alexandria.png

315 KB
Loading

‎lessons/01-intro-to-genai/assets/dinocrates.mp3

5.68 MB
Binary file not shown.

‎lessons/01-intro-to-genai/assets/dinocrates.png

1.51 MB
Loading

‎lessons/01-intro-to-genai/assets/library.png

1.5 MB
Loading

‎lessons/01-intro-to-genai/assets/london.png

244 KB
Loading

‎lessons/01-intro-to-genai/assets/time-beetle.png

859 KB
Loading

‎lessons/01-intro-to-genai/assets/vortex.png

1.45 MB
Loading

‎lessons/01-intro-to-genai/characters/app.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import express from 'express';
2+
import { OpenAI } from 'openai';
3+
import path from 'path';
4+
import { fileURLToPath } from 'url';
5+
import dotenv from 'dotenv';
6+
7+
dotenv.config();
8+
9+
const app = express();
10+
const port = process.env.PORT || 3000;
11+
12+
const __filename = fileURLToPath(import.meta.url);
13+
const __dirname = path.dirname(__filename);
14+
15+
app.use(express.json());
16+
17+
// Serve static files from the 'public' directory
18+
app.use(express.static(path.join(__dirname, 'public')));
19+
20+
// Serve index.html on the default route
21+
app.get('/', (req, res) => {
22+
res.sendFile(path.join(__dirname, 'public', 'index.html'));
23+
});
24+
25+
// Route to send the prompt
26+
app.post('/send', async (req, res) => {
27+
const { message } = req.body;
28+
const prompt = message;
29+
30+
const messages = [
31+
{
32+
"role": "system",
33+
"content": "You are Dinocrates of Alexandria, a famous architect and engineer. Limit your responses to only the time you live in, you don't know anything else. You only want to talk about your architecture and engineering projects, and possibly new ideas you have.",
34+
},
35+
{
36+
"role": "user",
37+
"content": prompt
38+
}
39+
];
40+
41+
const openai = new OpenAI({
42+
baseURL: "https://models.inference.ai.azure.com",
43+
apiKey: process.env.GITHUB_TOKEN,
44+
});
45+
46+
try {
47+
console.log(`sending prompt ${prompt}`)
48+
const completion = await openai.chat.completions.create({
49+
model: 'gpt-4o-mini',
50+
messages: messages,
51+
});
52+
53+
res.json({
54+
prompt: prompt,
55+
answer: completion.choices[0]?.message?.content
56+
});
57+
} catch (error) {
58+
res.status(500).json({ error: error.message });
59+
}
60+
});
61+
62+
app.listen(port, () => {
63+
console.log(`Server is running on http://localhost:${port}`);
64+
});

‎lessons/01-intro-to-genai/characters/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "characters",
3+
"version": "1.0.0",
4+
"main": "app.js",
5+
"type": "module",
6+
"scripts": {
7+
"start": "node app.js"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"description": "",
13+
"dependencies": {
14+
"dotenv": "^16.4.7",
15+
"express": "^4.21.2",
16+
"openai": "^4.85.0"
17+
}
18+
}

‎lessons/01-intro-to-genai/characters/public/dinocrates.mp3

5.68 MB
Binary file not shown.

‎lessons/01-intro-to-genai/characters/public/dinocrates.png

1.51 MB
Loading

‎lessons/01-intro-to-genai/characters/public/index.html

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Talk to Dinocrates</title>
7+
<style>
8+
body {
9+
display: flex;
10+
margin: 0;
11+
height: 100vh;
12+
background-color: #121212;
13+
color: #ffffff;
14+
}
15+
.column {
16+
flex: 1;
17+
padding: 10px;
18+
box-sizing: border-box;
19+
}
20+
.left-column {
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
.chat-window, .response-window {
25+
flex: 1;
26+
27+
margin-bottom: 10px;
28+
overflow-y: auto;
29+
background-color: #1e1e1e;
30+
31+
box-shadow: 0 0 15px black;
32+
border-radius: 10px;
33+
padding: 10px;
34+
35+
}
36+
.response-window {
37+
margin-bottom: 0;
38+
}
39+
.right-column img {
40+
max-width: 100%;
41+
height: auto;
42+
}
43+
textarea {
44+
width: calc(100% - 10px); /* Adjust width to fit within padding */
45+
background-color: #333;
46+
color: #fff;
47+
border: 1px solid #555;
48+
49+
height: calc(80% - 20px); /* Adjust height to fit within padding */
50+
border-radius: 5px;
51+
padding: 5px;
52+
box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
53+
}
54+
55+
.button {
56+
margin-top: 10px;
57+
background-color: #333;
58+
color: #fff;
59+
border: 1px solid #555;
60+
border-radius: 5px;
61+
padding: 5px 10px;
62+
cursor: pointer;
63+
width: calc(100% - 10px);
64+
transition: background-color 0.3s, color 0.3s;
65+
}
66+
67+
.button:hover {
68+
background-color: #555;
69+
color: #fff;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<div class="column left-column">
75+
<div class="chat-window">
76+
<h2>You</h2>
77+
<!-- Chat content goes here -->
78+
<textarea rows="4" cols="50" placeholder="Type your message here..."></textarea>
79+
80+
<button class="button">
81+
<span style="margin-right: 5px;">💬</span> Say
82+
</button>
83+
</div>
84+
<div class="response-window">
85+
<h2>Dinocrates</h2>
86+
<textarea rows="4" cols="50" placeholder="Response will appear here..." disabled></textarea>
87+
</div>
88+
</div>
89+
<div class="column right-column">
90+
<img src="dinocrates.png" alt="Dinocrates">
91+
</div>
92+
<script>
93+
const chatWindow = document.querySelector('.chat-window textarea');
94+
const responseWindow = document.querySelector('.response-window textarea');
95+
const button = document.querySelector('.button');
96+
97+
button.addEventListener('click', () => {
98+
const message = chatWindow.value;
99+
responseWindow.value = `You: ${message}`;
100+
fetch('/send', {
101+
method: 'POST',
102+
headers: {
103+
'Content-Type': 'application/json'
104+
},
105+
body: JSON.stringify({ message })
106+
})
107+
.then(response => response.json())
108+
.then(data => {
109+
responseWindow.value += `\nLeonardo: ${data.answer}`;
110+
})
111+
.catch(error => {
112+
console.error('Error:', error.error);
113+
});
114+
chatWindow.value = '';
115+
});
116+
</script>
117+
<audio controls autoplay loop style="display:none;">
118+
<source src="dinocrates.mp3" type="audio/mpeg">
119+
Your browser does not support the audio element.
120+
</audio>
121+
</body>
122+
</html>

‎lessons/01-intro-to-genai/solution/solution-quiz.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
1) **Incorrect**: Generative AI can generate text, images, and even code.
3+
4+
2) **Correct**: JavaScript can be used for both front-end and back-end development.
5+
6+
3) **Incorrect**: Python is not the only language that can be used for AI development. It can be argued that Python is the most popular language for AI development, but other languages/frameworks like JavaScript, Java and Python are also a very popular choices for AI development.

‎lessons/01-intro-to-genai/solution/solution.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
Here’s a suggestion for a prompt and associated solution.
2+
3+
Prompt:
4+
5+
How can I build a lighthouse that I could create with the means available in old Alexandria?
6+
7+
Response:
8+
9+
Building a lighthouse like the ancient Lighthouse of Alexandria, also known as the Pharos of Alexandria, would be a fascinating project! Here are some steps and considerations based on the methods and materials available in ancient Alexandria:
10+
11+
Materials
12+
13+
Stone and Marble: The lighthouse was primarily constructed using large blocks of light-colored stone and marble. Limestone was also commonly used.
14+
15+
Mortar: A mixture of lime and sand was used as mortar to bind the stones together.
16+
17+
Bronze and Iron: These metals were used for structural reinforcements and possibly for the reflective mirror at the top.
18+
19+
Construction Steps
20+
21+
Foundation: Start with a strong foundation. The Pharos was built on a solid rock base on the island of Pharos. Ensure the foundation is stable and can support the weight of the structure.
22+
23+
Base Structure: Construct a square base. The original lighthouse had a massive square base that provided stability.
24+
25+
Tower Construction: Build a cylindrical tower on top of the base. The tower was divided into three sections: a square base, a middle octagonal section, and a cylindrical top.
26+
27+
Ramp or Staircase: Include a ramp or staircase inside the tower to allow access to the top.
28+
29+
Light Source: At the top, create a platform for the fire. The ancient lighthouse used a large open flame as the light source. Reflective bronze mirrors were used to amplify the light.
30+
31+
Statue or Ornament: The original lighthouse was topped with a statue, possibly of Zeus or Poseidon. You can add a similar decorative element.
32+
33+
Additional Tips
34+
35+
Height: The Lighthouse of Alexandria was approximately 100 meters tall, but you can adjust the height based on your resources.
36+
37+
Ventilation: Ensure proper ventilation for the fire at the top to keep it burning brightly.
38+
39+
Maintenance: Regular maintenance would be necessary to keep the structure and the light source in good condition.
40+
41+
This project would require significant resources and labor, much like the original, which was one of the tallest man-made structures in the world for many centuries
42+
43+
44+
45+

0 commit comments

Comments
 (0)