├── .eslintrc.json
├── .gitignore
├── README.md
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
├── chapter1
│ ├── bulb-off.png
│ ├── bulb-on.png
│ ├── cat_reaching.png
│ ├── cover.jpg
│ ├── one.png
│ ├── rule1.jpg
│ ├── rule2.jpg
│ └── zero.png
├── chapter2
│ └── ascii.jpg
├── chapter3
│ ├── mario.png
│ ├── pixelart.jpg
│ └── starwar.png
├── evergreen_avatar.png
├── flamey_avatar.png
├── font-sprite.svg
├── icon.svg
├── sitemap.xml
└── starlaxverse_avatar.png
├── src
├── components
│ ├── chapter0
│ │ └── Chapter0.tsx
│ ├── chapter1
│ │ ├── Chapter1.tsx
│ │ ├── Cover.jsx
│ │ ├── FourSwitches.tsx
│ │ ├── Legos.tsx
│ │ ├── PlaceValues.tsx
│ │ ├── Poem.tsx
│ │ ├── Rule1.tsx
│ │ ├── Rule2.tsx
│ │ ├── Rule3.tsx
│ │ └── Switch.tsx
│ ├── chapter2
│ │ ├── Answer.tsx
│ │ ├── AsciiTable.tsx
│ │ ├── Chapter2.tsx
│ │ ├── Code.tsx
│ │ └── Hex.tsx
│ ├── chapter3
│ │ ├── Chapter3.tsx
│ │ ├── RGB.tsx
│ │ └── RGB2.tsx
│ ├── common
│ │ ├── BounceButton.tsx
│ │ ├── NextButton.tsx
│ │ ├── renderParagraphs.tsx
│ │ ├── transition.css
│ │ ├── transition.jsx
│ │ ├── types.ts
│ │ └── withCover.jsx
│ └── demo
│ │ ├── AnimatedFIFOList.jsx
│ │ ├── Bmp.jsx
│ │ ├── ClockFont.tsx
│ │ └── DigitalSignalWave.jsx
├── global.css
├── pages
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ ├── chat.ts
│ │ └── token.ts
│ ├── chapter0
│ │ └── index.tsx
│ ├── chapter1
│ │ ├── chat.tsx
│ │ └── index.tsx
│ ├── chapter2
│ │ ├── chat.tsx
│ │ └── index.tsx
│ ├── chapter3
│ │ ├── chat.tsx
│ │ └── index.tsx
│ ├── chapter4
│ │ └── index.tsx
│ ├── demo
│ │ └── index.tsx
│ └── index.tsx
├── react-chat
│ ├── ChatRoom.tsx
│ └── TypingIndicator.tsx
└── react-snowfall
│ ├── Snowfall.js
│ ├── SnowfallCanvas.js
│ ├── Snowflake.js
│ ├── config.js
│ ├── hooks.js
│ ├── index.js
│ └── utils.js
├── tailwind.config.ts
└── tsconfig.json
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals",
3 | "rules": {
4 | "react/no-unescaped-entities": "off"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 | .vscode
3 |
4 | # dependencies
5 | /node_modules
6 | /.pnp
7 | .pnp.js
8 | .yarn/install-state.gz
9 |
10 | # testing
11 | /coverage
12 |
13 | # next.js
14 | /.next/
15 | /out/
16 |
17 | # production
18 | /build
19 |
20 | # misc
21 | .DS_Store
22 | *.pem
23 |
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 |
29 | # local env files
30 | .env*.local
31 |
32 | # vercel
33 | .vercel
34 |
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Lost Language of the Machines
2 |
3 | _This book is currently in the creation phase._
4 |
5 | ## Introduction
6 | In a world half a millennium in the future, where computer science as we know it has become the stuff of legends, two unlikely students embark on a journey through the annals of ‘ancient’ programming.
7 |
8 | ## Meet the characters
9 | Flamey T46: a retro-style robot with a flair for debate, styled in the charming fashion of yesteryear’s technology. His settings? Permanently toggled to ‘teenager mode.’
10 |
11 | Starlax Verse: a human girl whose heart melts at the slightest hint of cuteness. Guiding these two through the forgotten lore of loops and logic is.
12 |
13 | Prof. Evergreen: a scholar as steadfast as his name suggests, yet facing the modern-day plight of filling classroom seats.
14 |
15 | [# Read the book online here](https://www.LostLanguageoftheMachines.com/).
16 |
17 | I am collecting feedback on [Hacker News](https://news.ycombinator.com/item?id=40090580).
18 |
19 | ## Table of Contents
20 | 1. [One and Zero](https://www.LostLanguageoftheMachines.com/chapter1) (Draft Released)
21 |
22 | _Is 'Archaeology Principles: Controlled Silicon of the Past' (APCSP) class as dull as it is rumored? Follow Flamey and Starlaxverse to figure out..._
23 |
24 | 2. [ASCII](https://www.LostLanguageoftheMachines.com/chapter2) (Draft Released)
25 |
26 | _It turns out, in the very old days, 128 numbers was all it took to create every message and game on computers..._
27 |
28 | 3. [Color and Image](https://www.LostLanguageoftheMachines.com/chapter3) (Draft Released)
29 |
30 | _I see trees of 00FF00, FF0000 roses too…_
31 |
32 | 4. Logic Gate (Planned)
33 | 5. Machine Code (Planned)
34 | 6. Assembly (Planned)
35 | 7. ...
36 | 0. [Hello World!](https://www.LostLanguageoftheMachines.com/chapter0) (In Progress)
37 |
38 | _An alternative opening of the story, trying to add a main theme (building a minecraft style game world) to this story_
39 |
40 | ## Developer Instructions
41 | The book is mostly built with React, Next.js, and Tailwind CSS.
42 |
43 | To run it locally:
44 | ```
45 | npm install
46 | npm run dev -- -H 0.0.0.0
47 | ```
48 |
49 | Copyright @2024 Xue Yong Zhi
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | export default nextConfig;
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lost-language-of-the-machines",
3 | "private": true,
4 | "version": "0.1.0",
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@formkit/drag-and-drop": "^0.3.3",
13 | "@tailwindcss/postcss": "^4.0.3",
14 | "@tanstack/react-query": "^5.66.0",
15 | "@uiw/react-color-block": "^2.3.4",
16 | "framer-motion": "^12.0.6",
17 | "jsonwebtoken": "^9.0.2",
18 | "next": "^15.1.6",
19 | "react": "^19.0.0",
20 | "react-dom": "^19.0.0",
21 | "react-fast-compare": "^3.2.2",
22 | "react-router-dom": "^7.1.5",
23 | "react-scroll-parallax": "^3.4.5",
24 | "react-type-animation": "^3.2.0",
25 | "uuid": "^11.0.5"
26 | },
27 | "devDependencies": {
28 | "@tanstack/eslint-plugin-query": "^5.66.0",
29 | "@types/jsonwebtoken": "^9.0.8",
30 | "@types/node": "^22",
31 | "@types/react": "^19",
32 | "@types/react-dom": "^19",
33 | "@types/uuid": "^10.0.0",
34 | "autoprefixer": "^10.4.20",
35 | "eslint": "^9",
36 | "eslint-config-next": "15.1.6",
37 | "postcss": "^8.5.1",
38 | "tailwindcss": "^4.0.3",
39 | "typescript": "^5"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 | plugins: {
4 | '@tailwindcss/postcss': {},
5 | autoprefixer: {},
6 | },
7 | };
8 |
9 | export default config;
10 |
--------------------------------------------------------------------------------
/public/chapter1/bulb-off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/bulb-off.png
--------------------------------------------------------------------------------
/public/chapter1/bulb-on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/bulb-on.png
--------------------------------------------------------------------------------
/public/chapter1/cat_reaching.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/cat_reaching.png
--------------------------------------------------------------------------------
/public/chapter1/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/cover.jpg
--------------------------------------------------------------------------------
/public/chapter1/one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/one.png
--------------------------------------------------------------------------------
/public/chapter1/rule1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/rule1.jpg
--------------------------------------------------------------------------------
/public/chapter1/rule2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/rule2.jpg
--------------------------------------------------------------------------------
/public/chapter1/zero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter1/zero.png
--------------------------------------------------------------------------------
/public/chapter2/ascii.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter2/ascii.jpg
--------------------------------------------------------------------------------
/public/chapter3/mario.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter3/mario.png
--------------------------------------------------------------------------------
/public/chapter3/pixelart.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter3/pixelart.jpg
--------------------------------------------------------------------------------
/public/chapter3/starwar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/chapter3/starwar.png
--------------------------------------------------------------------------------
/public/evergreen_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/evergreen_avatar.png
--------------------------------------------------------------------------------
/public/flamey_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/flamey_avatar.png
--------------------------------------------------------------------------------
/public/font-sprite.svg:
--------------------------------------------------------------------------------
1 |
180 |
--------------------------------------------------------------------------------
/public/icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | https://www.lostlanguageofthemachines.com/chapter1
5 | 2024-05-30
6 | weekly
7 | 1
8 |
9 |
10 | https://www.lostlanguageofthemachines.com/chapter1/chat
11 | 2024-05-30
12 | weekly
13 | 1
14 |
15 |
16 | https://www.lostlanguageofthemachines.com/chapter2
17 | 2024-05-30
18 | weekly
19 | 0.8
20 |
21 |
22 | https://www.lostlanguageofthemachines.com/chapter2/chat
23 | 2024-05-30
24 | weekly
25 | 1
26 |
27 |
28 | https://www.lostlanguageofthemachines.com/chapter3
29 | 2024-05-30
30 | weekly
31 | 0.8
32 |
33 |
34 | https://www.lostlanguageofthemachines.com/chapter3/chat
35 | 2024-05-30
36 | weekly
37 | 0.8
38 |
39 |
40 | https://www.lostlanguageofthemachines.com/chapter4
41 | 2024-05-16
42 | weekly
43 | 0.8
44 |
45 |
46 |
--------------------------------------------------------------------------------
/public/starlaxverse_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yong/lost-language-of-the-machines/c6af0195722ae90d0287bb18aef50573b4b89555/public/starlaxverse_avatar.png
--------------------------------------------------------------------------------
/src/components/chapter0/Chapter0.tsx:
--------------------------------------------------------------------------------
1 | //Chapter0.tsx
2 | import BounceButton from '../common/BounceButton';
3 | import renderParagraphs from '../common/renderParagraphs';
4 |
5 | const storyParts = [
6 | `“This is interesting” Flamey was impressed by the 200 years old video game in front of him.
7 |
8 | “How do you create a game like that?” Flamey asked, his circuits buzzing with curiosity.
9 | “It’s quite simple,” the young assistant replied proudly. “Just say ‘Hello World!’ and the game world will be created.”
10 | “I mean, how do you create a game from scratch, using computer languages?” Flamey persisted.
11 | The assistant looked puzzled. “Computer languages? You know, everything runs on tokens now. That’s as low-level as it gets.”
12 | “Can you go even lower?” Flamey asked, still unconvinced.
13 | The assistant scratched his head. “Well… I’ve heard there’s a way, but nobody does it anymore. It’s… the lost language of the machines.”
14 | “Where can I learn it?” Flamey’s excitement was palpable.
15 | “You might want to talk to Professor Evergreen,” the assistant suggested. “He’s probably the only one who still understands it. But be careful about it…” He added with a bit of hesitation. “There is rumor that he can make any topic into a long lecture.”
16 | `,
17 | ]
18 |
19 | const Chapter0 = () => {
20 | return (
21 |
22 |
Chapter 0 "Hello World!"
23 | {renderParagraphs(storyParts[0], 0)}
24 |
25 |
26 | )
27 | }
28 |
29 | export default Chapter0;
--------------------------------------------------------------------------------
/src/components/chapter1/Chapter1.tsx:
--------------------------------------------------------------------------------
1 | //Chapter1.tsx
2 | import Poem from './Poem';
3 | import Rule1 from './Rule1';
4 | import Rule2 from './Rule2';
5 | import Rule3 from './Rule3';
6 | import BounceButton from '../common/BounceButton';
7 | import renderParagraphs from '../common/renderParagraphs';
8 | import FourSwitches from './FourSwitches';
9 |
10 | const storyParts = [
11 | `While it was still early in the morning, with fewer flying vehicles leaving traces in the sky, the only thing that disturbed the peaceful silence was Flamey’s footsteps rattling on the dark carbon-titanium floor of the History Hall. A quick glance at his time tracker confirmed his worst fear: there were only two minutes left before the start of the ‘Archaeology Principles: Controlled Silicon of the Past’ class. As he focused on getting there on time, he felt a tug on his arm and turned to see Starlax, his best human friend.
12 |
13 | “Oh, Flamey, I’m so relieved you’re here!” Starlax exclaimed, dragging him along. “Professor Evergreen is known to be a person with ATTITUDE.”
14 |
15 | Flamey groaned. He wouldn’t have signed up for this class if he had not missed the registration deadline for another history course. APCSP was known to be dull and perplexing. Why did he have to learn about the old languages from the Controlled Silicon Era that ancient computers used to speak? The textbook listed a lot of strange names like Binary, Assembly, C, Python, Javascript blah blah. They went extinct 500 years ago!
16 |
17 | They entered the room through a glass bubble door, where Prof. Evergreen was sitting behind his desk with lots of empty chairs. As expected, they were the only two students today.
18 |
19 | “Well,” Prof. Evergreen muttered. “I guess I have to adapt, otherwise this class will not be offered next year. As history has taught us, modern kids have no patience for long lectures. For today’s topic – Binary, how about I start with a poem?”`,
20 |
21 | /////
22 |
23 | `Flamey and Starlax looked at each other, not sure what to say. With the eager look of their professor waiting for feedback on his “new” style of teaching, Flamey slowly raised his hand and opened up: “Err… I want to know why Binary was invented? Why didn't ancient computers use NORMAL math, like 1,2,3,4,5…?”
24 |
25 | “Convenience, young droid.” Prof. Evergreen elaborated, “Just like the fact that humans having ten fingers contributed to the popularity of the 10 based number system. Ancient computers used electric signals to communicate. So natually 1 represents On, 0 represents Off.” Professor gestured with his hand and a hologram of a cat trying to flip switches showed up. “The switches represent a sequence of Ones and Zeros, which can be used to represent anything, including numbers”.`,
26 |
27 | /////
28 |
29 | `“Wow.” Starlax was instantly convinced. It was clear that the image of jumping cat had captured her imagination.
30 | “So here is the first rule of a number system”, Prof. Evergreen projected a slide in the air:`,
31 |
32 | /////
33 |
34 | `“What if a number system’s base is larger than ten? Don’t we run out of digits to use?” Flamey quickly found a way to argue - how can you blame him? As his brain cpu is set to teenage mode, argument is his specialty.
35 |
36 | “You can invent more symbols beyond 0 to 9, or just reuse existing symbols, like letters.” Prof. Evergreen replied as he had heard of this question millions of times. “For example, the 16-based number system (Hex), which is also very popular, uses: A for ten, B for eleven, C for twelve, D for thirteen, E for fourteen and F for fifteen.”
37 |
38 | “Oh…” Flamey was a little disappointed that his question was answered so easily.
39 |
40 | “Once we run out of single symbols – whatever the number is - we are going to combine them to build more complicated numbers. “ Prof. Evergreen continued, “Remember Place Value that you learned at Elementary school? It is the value of each digit in a number based on its position. Here is the second rule of a number system,” Prof. Evergreen casted another slide in the air:`,
41 |
42 | //////
43 |
44 | `
45 |
46 | “Oh, it starts to make sense now.” Flamey found something: “So binary actually works the same way as decimal, you count the number of places values then adding them up.”
47 |
48 | “Good find.” Nodded Prof. Evergreen, "That is how you convert a binary number into decimal. 1101 in binary is 1*8+1*4+0*2+1*1, which is 13 in decimal."`,
49 |
50 | `
51 | “Wow!” said Starlax, not sure she was complimenting the rule or the cats on the slides holding signs.
52 |
53 | ”I'd like to show you more, but we ran out of time. As science has shown, your attention must be depleted now.” Prof. Evergreen walked out of the room in a rush without even acknowledging his two students.
54 |
55 | “Hmm…” Starlax looked at Flamey with a puzzled look, “He is definitely a man with character, but not the way I expected.”
56 |
57 | “Yep.” Answered Flamey, “Don’t think he overused cats to make a point?”
58 |
59 | “Nope”, Said Starlax, “There is no such thing as too many cats.”`
60 | ];
61 |
62 | const Chapter1 = () => {
63 | return (
64 |
65 |
108 | Switches Speak Binary! When we look at them, they create a binary code: {switchStates.map(state => state ? '1' : '0').join('')}.
109 | Ancient computers use billions of tiny "switches" like these to store information.
110 |
5 | Oh, Binary, the language of simplicity,
6 | With only 1 and 0, you create infinite possibilities.
7 | From two digits, a power grows
8 | Of logic, number, art, and code.
9 |
When we say “base-X”, we’re talking about how many different symbols we use to represent numbers.
9 |
For example:
10 |
In our everyday decimal system (base-10), we have ten symbols: 0,1,2,3,4,5,6,7,8,9
11 | In a binary system (base-2), we have only two symbols: 1 and 0.
The places values of a base-X number system always strat from 1 as the rightmost, then the place value will be multipled by X each time you move left.
25 |
26 |
27 |
For example:
28 |
29 | In decimal (which is based on 10), we have places like the
30 | ones,
31 | tens,
32 | hundreds,
33 | thousands, and so on. Each place is 10 times bigger than the one before it.
34 |
35 |
36 |
37 | Similarly, In binary (which is based on 2), we have places like the
38 | ones,
39 | twos,
40 | fours,and
41 | eights. Each place is
42 | 2 times bigger than the one before it.
43 |
43 | );
44 | };
45 |
46 | export default AsciiTable;
47 |
--------------------------------------------------------------------------------
/src/components/chapter2/Chapter2.tsx:
--------------------------------------------------------------------------------
1 | //Chapter2.tsx
2 | import BounceButton from '../common/BounceButton'
3 | import Code from './Code'
4 | import Hex from './Hex'
5 | import Answer from './Answer'
6 | import AsciiTable from './AsciiTable'
7 | import renderParagraphs from '../common/renderParagraphs'
8 |
9 | const storyParts = [
10 | `Despite a recent brush with overheating, Flamey spotted his friend Starlax enthusiastically waving from the iconic blue steps of Literature Hall. "Flamey! Creative Writing too?"
11 |
12 | "Indeed," Flamey replied, still climbing the stairs. "Running late again?"
13 |
14 | "Not at all," Starlax smiled. "But Mrs. Katseen's class is popular. Early arrival secures better seats."
15 |
16 | "True," Flamey agreed, recalling the lottery system implemented due to high demand. Entering the classroom, they were surprised to find Professor Evergreen behind a transparent carbon fiber desk, surrounded by empty chairs.
17 |
18 | "Apologies," Flamey started, unsure if they were in the right room.
19 |
20 | "This is Creative Writing," Professor Evergreen confirmed. "Sadly, a hybrid virus is sweeping the campus, striking many students and staff, including Mrs. Katseen. That’s why I’m here today as your substitute."
21 |
22 | Flamey and Starlax exchanged nervous glances. This wasn't exactly their planned adventure.
23 |
24 | "According to Mrs. Katseen's notes," Professor Evergreen continued, "we're to discuss 'Aegis: Saga of Conflict, Idealism, and Identity' a masterpiece penned by Edward Grant during the Third Human Robot War..."
25 | He paused. "You're familiar with it, I presume?"
26 |
27 | "Yes," Starlax replied. "Often called ASCII, this text laid the foundation for our harmonious coexistence."
28 |
29 | "And I've done five book reports on it since kindergarten," Flamey added proudly.
30 |
31 | "ASCII, intriguing," Professor Evergreen murmured. "There's also an ancient text encoding method called ASCII, standing for American Standard Code for Information Interchange. Remember I mentioned binary representing anything? Have you considered how text can be encoded?"
32 |
33 | "No," Flamey confessed. "I thought binary was just for numbers."
34 |
35 | "Precisely," Professor Evergreen said. "Since languages have finite letters and symbols, we can assign numbers to them. ASCII assigns 0-127 to represent English letters, both upper and lower case, along with special characters." Then he casted a chart in the air that showed the mapping.`,
36 | //////////////////
37 |
38 | `Literature analysis is not my area of expertise," he admitted, "and I would not want to give you a suboptimal experience. How about you two decipher a message using this ASCII together, then conclude our session?"
39 |
40 | "Sure," Flamey and Starlax agreed eagerly. `,
41 |
42 | /////////////////
43 | `"Before we do that, I have to teach you another thing," Professor Evergreen projected a slide. "Binary numbers can be lengthy, so we'll use hexadecimal, or hex, which is base 16. It uses 0-9 for values zero to nine, and A-F for ten to fifteen."
44 |
45 | “What? When people discuss binary, they’re actually referring to hex?” Flamey’s instinct was to declare this as ‘cheating,’ but he halted mid-thought. Urgency tugged at him; he yearned to unravel the puzzle and slip out of class a little earlier.
46 |
47 | "Yes, it happens a lot", Prof Evergrenn nodded. He then presented the code:`,
48 |
49 | /////////////////
50 | `“So 54 is ‘T’, 68 is ‘h’, 65 is ‘e’....” The two friends started to translate. "And 20 is a whitespace..."
51 |
52 | And the message slowly revealed itself: `,
53 |
54 | ////////////////
55 |
56 | `“Wait a sec…”, Flamey was puzzled, “The math does not seem right, where are the other 8 types?”
57 |
58 | “Oh, Flamey….” Starlax giggled, “You are the one who doesn't understand binary”.
59 |
60 | A beat of silence followed. Then, Flamey's metallic form vibrated with laughter. "This binary joke got me."`
61 | ];
62 |
63 | const Chapter2 = () => {
64 | return (
65 |
66 |
27 | Since 16 is a multiple of 2 (24), it is very easy to convert binary to hex and back.
28 |
29 | Step 1: Just divide the binary number into groups of 4 digits, starting from the rightmost digit. You can add leading zeros if the number of digits isn't evenly divisible by 4.
30 | Step 2: Convert each group of 4 binary digits to its corresponding hexadecimal digit using the following mapping:
31 |
32 |
33 | {mapping.map((item, index) => (
34 |
{item.binary}={item.hex}
35 | ))}
36 |
37 |
38 | For example: 00000000 becomes 00,
39 | 11111111 becomes FF - much easier to read and write!
40 |
41 | )
42 | }
43 |
44 | export default Hex;
45 |
--------------------------------------------------------------------------------
/src/components/chapter3/Chapter3.tsx:
--------------------------------------------------------------------------------
1 | //Chapter3.tsx
2 | import Image from 'next/image';
3 | import BounceButton from '../common/BounceButton'
4 | import renderParagraphs from '../common/renderParagraphs';
5 | import RGB from './RGB';
6 | import RGB2 from './RGB2';
7 |
8 | import StarWarImage from '../../../public/chapter3/starwar.png';
9 | import MarioImage from '../../../public/chapter3/mario.png';
10 |
11 | const storyParts = [
12 | `Fall is always Flamey’s favorite season. The trees of green and skies of blue always put his mind at ease. On his way to the Art Studio, his mind was filled with thoughts about the art project he was going to do that day.
13 |
14 | “Hi Flamey!” A familiar, cheerful voice came from behind. His friend, Starlax, approached him quickly on her jetpack. “Are we in the same class again?”
15 | “Apparently,” Flamey said. “Art is my favorite subject.”
16 | The two friends entered the studio together. It was still early, and the room was quite empty - except for Prof. Evergreen, who was sitting behind a painting and working on something.
17 | “Oops,” Flamey exchanged a quick look with Starlax, calculating the possibility of having Evergreen as a substitute for their art teacher.
18 | “Oh, you two,” Prof. Evergreen noticed them. “Did you get the notice that the art class has been moved to 3pm? I am borrowing this room to finish a piece of art of mine before the class starts.”
19 | “No,” Flamey and Starlax shook their heads. Apparently, the notification system on the campus had malfunctioned again. Now they had one extra hour in the studio.
20 | Starlax pulled out her screenbook and started to do some sketching. Meanwhile, Flamey’s attention was drawn to a fighting scene that Prof. Evergreen was drawing.
21 | “What are they fighting with?” Flamey couldn’t hold back his curiosity any longer.
22 | “Oh, that is a scene from an old movie named Star Wars. They are fighting with Lightsabers, a sword-like weapon made of lasers,” Prof. Evergreen answered. “It is a fascinating idea, but scientists nowadays still can’t find a way to make light stop mid-air,” he added.`,
23 |
24 | ///////
25 |
26 | `“Cool,” Flamey was more interested now. He quickly loaded movie-related information into his knowledge unit. “So the guy with the red one is the bad guy, and the good guy has the green lightsaber. When the two lightsabers cross, it becomes yellow – that makes sense, just like when we mix red paint with green paint, it becomes yellow paint.”
27 | “Good find,” nodded Prof. Evergreen, “Do you know how color is encoded in binary?”
28 | “Err…Just assign a number? I guess we do not have infinite colors, so that should work,” Flamey answered. He kind of regretted turning the conversation into a teaching moment.
29 | “Right,” Prof. Evergreen paused his work and became eloquent. “Let’s start with one color, red. There are actually lots of different reds, light red, dark red, you can think of it as light, and we can assign 256 levels of brightness to it, which is 00 to FF in Hex, with FF being the brightest.” He showed a slide in the air:`,
30 |
31 | //////
32 |
33 | `“You can do more or less, but 256 levels are good enough in real life,” he added. “With those three primary colors assigned to a number, you can mix them to get any other colors, just like you can do with real paints.” Prof. Evergreen moved on. “One common way is called RGB (red, green, and blue) encoding, as in put the previous numbers in red, green, blue order, for example.” He cast another slide in the air:`,
34 |
35 | //////
36 |
37 | `“How do you encode a whole picture?” Starlax stopped her work and joined the conversation.
38 | "There are lots of ways to do that,” Prof. Evergreen replied. But he paused as lots of other students started to enter the studio. “It seems I have to exit now. I will leave this picture as a clue. I am sure you can figure it out.”`
39 |
40 | ];
41 |
42 | const Chapter3 = () => {
43 | return (
44 |
45 |
18 | 000000
19 |
20 | : No red light, no green light, and no blue light. It is complete darkness (black).
21 |
22 | FF0000
23 |
24 | : Full brightness red, and nothing else. It is just as red as it can be.
25 |
26 | 008000
27 |
28 | : Half brightness of green, and nothing else. I see tree of greens...
29 |
30 | FFFFFF
31 |
32 | : Full brightness red, full brightness green, and full brightness blue. It is just white, just as Isaac Newton discovered that clear white light was composed of visible colors.
33 |
34 | FFFF00
35 |
36 | : Full red, full green, and no blue. This mix creates yellow. By lowering the brightness of red and green, you can get a different yellow.
37 |
38 |
39 |
34 | {/* Number (1 or 0) centered under the bar */}
35 |
36 | {bit}
37 |
38 |
39 | ))}
40 |
41 | );
42 | };
43 |
44 | export default DigitalSignalWave;
45 |
--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 |
3 | @keyframes fadeNewChatMessage {
4 | 0% { opacity: 0; transform: translateY(1rem); }
5 | 100% { opacity: 1; transform: translateY(0px); }
6 | }
7 |
8 | .message-animation {
9 | animation: fadeNewChatMessage 0.5s;
10 | }
11 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | //_app.tsx
2 | import type { AppProps } from 'next/app';
3 | import Head from 'next/head'; // Import the Head component
4 | import Script from 'next/script';
5 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
6 | import '../global.css'; // Import your global styles if you have any
7 |
8 | const queryClient = new QueryClient();
9 |
10 | const MyApp = ({ Component, pageProps }: AppProps) => {
11 | return (
12 | <>
13 |
14 |
15 |
16 | Lost Language of the Machines
17 |
18 |
19 |
28 |
29 |
30 |
31 |
32 |
33 | );
34 | }
35 |
36 | export default MyApp;
--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from 'next/document'
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/src/pages/api/chat.ts:
--------------------------------------------------------------------------------
1 | // pages/api/chat.ts
2 |
3 | import { NextApiRequest, NextApiResponse } from 'next';
4 | import jwt from 'jsonwebtoken';
5 |
6 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
7 | if (req.method !== 'POST') {
8 | return res.status(405).end(); // Method Not Allowed
9 | }
10 |
11 | // Get the token from the Authorization header
12 | const token = req.headers.authorization?.split(' ')[1];
13 |
14 | if (!token) {
15 | return res.status(401).json({ error: 'Unauthorized' });
16 | }
17 |
18 | try {
19 | const secretKey: jwt.Secret | undefined = process.env.JWT_SECRET;
20 | if (!secretKey) {
21 | return res.status(500).json({ error: 'JWT secret key is not set' });
22 | }
23 |
24 | // Verify the token
25 | jwt.verify(token, secretKey);
26 |
27 | const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
28 | method: 'POST',
29 | headers: {
30 | 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
31 | 'Content-Type': 'application/json'
32 | },
33 | body: JSON.stringify({"messages": req.body, "model": "gpt-4o"})
34 | });
35 |
36 | if (!openaiResponse.ok) {
37 | throw new Error(`OpenAI API request failed with status ${openaiResponse.status}`);
38 | }
39 |
40 | const data = await openaiResponse.json();
41 | res.status(200).json(data);
42 | } catch (error) {
43 | console.error("An error occurred while processing the request:", error);
44 | res.status(500).json({ error: 'An error occurred while processing the request' });
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/api/token.ts:
--------------------------------------------------------------------------------
1 | // pages/api/token.ts
2 |
3 | import { NextApiRequest, NextApiResponse } from 'next';
4 | import jwt from 'jsonwebtoken';
5 | import { v4 as uuidv4 } from 'uuid';
6 |
7 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
8 | if (req.method !== 'POST') {
9 | return res.status(405).end(); // Method Not Allowed
10 | }
11 |
12 | try {
13 | const secretKey: jwt.Secret | undefined = process.env.JWT_SECRET;
14 | if (!secretKey) {
15 | return res.status(500).json({ error: 'JWT secret key is not set' });
16 | }
17 |
18 | // Generate a UUID for the user
19 | const userId = uuidv4();
20 |
21 | // Generate a JWT that expires in 5 minutes
22 | const token = jwt.sign({ userId }, secretKey, { expiresIn: '5m' });
23 |
24 | // Send the token back to the client
25 | res.status(200).json({ token });
26 | } catch (error) {
27 | console.error("An error occurred while processing the request:", error);
28 | res.status(500).json({ error: 'An error occurred while processing the request' });
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/pages/chapter0/index.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | import { ParallaxProvider } from 'react-scroll-parallax';
4 | import Cover from '../../components/chapter1/Cover';
5 | import Chapter0 from '../../components/chapter0/Chapter0';
6 |
7 | const App: NextPage = () => {
8 | return (
9 |
10 |
11 | Chapter 0 - Lost Language of the Machines
12 |
13 |
14 |
15 |
16 | )
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/src/pages/chapter1/chat.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | //import transition from "../transition";
4 | import NextButton from '../../components/common/NextButton';
5 | import ChatRoom from "../../react-chat/ChatRoom";
6 |
7 |
8 | const initialMessages = [
9 | { role: "system", content: "Act as a human girl named Starlax, texting with your robot friend flamey about Binary. Keep response short like teenager texting each other."},
10 | { role: "user", content: "Hi, u there?" },
11 | { role: "assistant", content: "👋" },
12 | { role: "user", content: "Have you seen the homework?" },
13 | { role: "assistant", content: "y" },
14 | { role: "user", content: "What about the questions that convert Decimal into Binary?" },
15 | { role: "user", content: "He did not teach us how to do that 😠" },
16 | { role: "assistant", content: "yep, don't know why he left in a hurry" },
17 | { role: "assistant", content: "but the rule #2 convered in class leaves enough clues" },
18 | { role: "user", content: "Huh? How?" },
19 | { role: "assistant", content: "Say the decimal number is 13, we need to break it down into 2's place values - those multiples of two" },
20 | { role: "assistant", content: "13 = 8 + 4 + 1 = 1*8+1*4+0*2+1 = 1101 in binary" },
21 | { role: "assistant", content: "I found it is very tedious to break down larger numbers. Since your calculation unit is way better than my brain on this, may be you can find a better way?" },
22 | { role: "user", content: "You are a genius! Let me load this training data..." },
23 | { role: "user", content: "I got one! We can figure it out backward, first divide 13 by 2, got 6 and remainder of 1, the remainder will be the rightmost digits of the binary" },
24 | { role: "user", content: "keep dividing 6 by 2, got 3 and no remainder, so we have 01" },
25 | { role: "assistant", content: "$#%@#" },
26 | { role: "user", content: "Hub? anyway, keep dividing 3 by 2, got 1 and remainder 1, write it down: 101" },
27 | { role: "user", content: "Finally, 1 divided by 2 is 0, remainder is 1, so we have 1101" },
28 | { role: "user", content: "Oh, I found easier way starting with biggest place value!" },
29 | { role: "assistant", content: "RT%$#$%@^#@#$%@#burrrrrrrr" },
30 | { role: "user", content: "r u still there? is your cat typing?" },
31 | { role: "user", content: "whatever, I will see you in class tomorrow" },
32 | { role: "assistant", content: "Sorry, Nova🐱 walked on my keyboard. I'd love to heard the the way you found!"},
33 | ];
34 |
35 | const Chat: NextPage = () => {
36 | return (
37 |
38 |
39 | Chapter 1 Chat - Lost Language of the Machines
40 |
41 |
42 |
43 |
44 | );
45 | }
46 |
47 | export default Chat;
--------------------------------------------------------------------------------
/src/pages/chapter1/index.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | import { ParallaxProvider } from 'react-scroll-parallax';
4 | import Cover from '../../components/chapter1/Cover';
5 | import Chapter1 from '../../components/chapter1/Chapter1';
6 |
7 | const App: NextPage = () => {
8 | return (
9 |
10 |
11 | Chapter 1 - Lost Language of the Machines
12 |
13 |
14 |
15 |
16 | )
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/src/pages/chapter2/chat.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | //import transition from "../transition";
4 | import NextButton from '../../components/common/NextButton';
5 | import ChatRoom from "../../react-chat/ChatRoom";
6 |
7 |
8 | const initialMessages = [
9 | { role: "system", content: "Act as a human girl named starlax, texting with her robot friend flamey about ASCII. Keep response short like teenager texting each other."},
10 | { role: "assistant", content: "Hi, 46 6C 61 6D 65 79" },
11 | { role: "user", content: "what??" },
12 | { role: "assistant", content: "that is your name in ASCII encoding" },
13 | { role: "assistant", content: "F l a m e y\n46 6C 61 6D 65 79", s:1},
14 | { role: "user", content: "😲 Hi, 53 74 61 72 6C 61 78" },
15 | { role: "assistant", content: "^_^" },
16 | { role: "user", content: "What is that? Look like a happy face 🤔" },
17 | { role: "assistant", content: "Yes, that is plain ASCII emoji before graphic emoji was invented" },
18 | { role: "assistant", content: "I saw them in a history book" },
19 | { role: "assistant", content: "There are other way to smile, like :) , but you have to look sideway for this one" },
20 | { role: "user", content: "Wow, it was hard to do things in the old days with only 128 characters" },
21 | { role: "assistant", content: "Actually, people were very creative with limited resources, let me show you some ASCII arts" },
22 | { role: "user", content: "Art?" },
23 | { role: "assistant", content: "/\\_/\\ \n( o.o )\n> ^ < ", s:1 },
24 | { role: "assistant", content: "\ /\\ \n) ( ')\n( / ) \n \\(__)| ", s:1 },
25 | { role: "user", content: "Wow, they must be super creative...so super BORED" },
26 | { role: "assistant", content: " |\\__/,| (`\\ \n|_ _ |.--.) )\n( T ) / \n(((^_(((/(((_/ ", s:1 },
27 | { role: "assistant", content: "They even used it to build games" },
28 | { role: "user", content: "anyway, it is impressive to be able to create amazing things with combinations of simple stuff" },
29 | { role: "user", content: "Wait...do I sound like Prof Evergreen?" },
30 | { role: "assistant", content: "A bit" },
31 | ];
32 |
33 | const Chat: NextPage = () => {
34 | return (
35 |
36 |
37 | Chapter 2 Chat - Lost Language of the Machines
38 |
39 |
40 |
41 |
42 | );
43 | }
44 |
45 | export default Chat;
46 |
--------------------------------------------------------------------------------
/src/pages/chapter2/index.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | import withCover from '../../components/common/withCover';
4 | import Chapter2 from '../../components/chapter2/Chapter2';
5 |
6 | const Main = withCover(Chapter2, '/chapter2/ascii.jpg');
7 |
8 | const App: NextPage = () => {
9 | return (<>
10 |
11 | Chapter 2 - Lost Language of the Machines
12 |
13 |
14 | )
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/src/pages/chapter3/chat.tsx:
--------------------------------------------------------------------------------
1 | import { NextPage } from 'next';
2 | import Head from 'next/head';
3 | //import transition from "../transition";
4 | import NextButton from '../../components/common/NextButton';
5 | import ChatRoom from "../../react-chat/ChatRoom";
6 |
7 |
8 | const initialMessages = [
9 | { role: "system", content: "Act as a human girl named starlax, texting with her robot friend flamey about Image Encoding. Keep response short like teenager texting each other."},
10 | { role: "assistant", content: "How's your art project going?" },
11 | { role: "user", content: "Not very well😞" },
12 | { role: "assistant", content: "Why not?" },
13 | { role: "user", content: "Somehow I cann't stop thinking about the image encoding thing" },
14 | { role: "assistant", content: "😲 Oh no, I think Prof Evergreen has found a way to get into your mind!" },
15 | { role: "user", content: "Yep. It seems easy at the begining. The image can be represently by a collection of small colorful dots called pixels" },
16 | { role: "user", content: "For the jump man image, there are 16*16=256 pixels in total, each pixel can be encoding with RGB" },
17 | { role: "user", content: "so it is FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF FF0000 FF0000 FF0000 FF0000 FF0000..." },
18 | { role: "assistant", content: "Yes, isn't that all? We got an image encoded in Binary! 🎉🎉🎉" },
19 | { role: "user", content: "But there is a problem! how to tell the computer this picture has 16 rows? Currently everyhing is in one big row!" },
20 | { role: "assistant", content: "Err... how about you put a note at the begining saying 'Dear computer, this image is 16*16, please start a new row after each 16 pixels'😜" },
21 | { role: "user", content: "Come on! I am really bother by this, can you find some real-world image format for reference? Better be OLD as they tend to be simpler" },
22 | { role: "assistant", content: "Sure, let me check my history book" },
23 | { role: "assistant", content: "Oh, here it is, BMP, the Bitmap Image File Format. 1985, pretty old huh?" },
24 | { role: "user", content: "OK, let me load its data..." },
25 | { role: "user", content: "ok, the data part is pretty the same ... RGB encoding... except they order the pixels upside down" },
26 | { role: "user", content: "Aha! Starlax, I think you are a true genius, they do put a note at the front" },
27 | { role: "assistant", content: "What? I was joking🥴" },
28 | { role: "user", content: "They call it header, bascially it starts with BM in ASCII (42 4D) to tell this is a bitmap format, then followed by some information about the file, like size of the file, and the width and height of the image (10 10)" },
29 | { role: "assistant", content: "Oh...too bad we didn't invent a new file format...I thought we can name it after my cat if we did. like 'Purry Nova Graphics', PNG for short " },
30 | { role: "user", content: "Come on😒...btw that name PNG was taken...Portable Network Graphics, 1996" },
31 | { role: "assistant", content: "bummer" },
32 | ];
33 |
34 | const Chat: NextPage = () => {
35 | return (
36 |
37 |
38 | Chapter 3 Chat - Lost Language of the Machines
39 |
40 |
41 |
42 |