Seeing a master of backend development left completely mindblown and speechless by smooth-talking AI? That is peak entertainment. (Check out media below - if you don't believe me, which is sad 😔)

But it also sparked a massive realization: How on earth does a machine learn to personalize things so well, and what is actually happening under the hood?

1. Demystifying the Beast: What is LLM?

Before we talk about the magic let's look at the actual engine. LLM stands for Large Language Model.

The easiest way to understand this is through a brilliant analogy used by Hitesh and Piyush in class: The Car vs The Engine.

• The Engine (Core LLM): This is the heavy machinery built by incredibly smart Machine Learning Engineers. They gather massive oceans of preprocessed text data, spend millions on compute power, and build a core engine that handles input and output using natural language. Think of models built by OpenAI, Google and Anthropic.

• The Car (Applied AI): An engine sitting on a garage floor is powerful, but you can't drive it to the grocery store. To make it useful, someone needs to build the chassis, the wheels, the steering wheel, and a sleek dashboard. That is our job as Application Developer. We take that raw engine and build the "car"; the practical, everyday applications that solve real-world problems.

When you use an LLM in daily life whether it's asking an AI to summarize a massive 50-page PDF, help you debug a stubborn syntax error, or translate a casual conversation, you are driving a beautifully built application powered by a massive language engine.

2. What Happens When You Press Enter?

When you type a prompt into ChatGPT and hit enter, it feels like you're texting an incredibly fast friend who happens to know everything. But what is it actually doing?

Here is the step-by-step breakdown of the journey your message takes:

Step 1: The Prompt Leaves Your Keyboard

You type your text. The application hands this natural language over to the core engine.

Step 2: Processing and Understanding

The engine doesn't read your sentence the way you do. It immediately breaks your words down into tiny pieces and analyzes the context.

Step 3: Generating the Response (The Big Misconception)

Here is the most important thing to understand: ChatGPT is absolutely not copying and pasting answers from the internet. It doesn't have a secret digital clipboard where it runs a Google Search, grabs a paragraph from Wikipedia, and pastes it into your chat box.

Instead, it works on Next-Token Prediction. Based on all the data it was trained on, it looks at your prompt and asks itself a statistical question: "Given these words, what is the single most logical next word to write?" It generates the response syllable by syllable, word by word, completely from scratch. It's creating something brand new every single time.

3. Why Computers Secretly Hate Human Language?

As application developers, we live and breathe strings, characters, and templates. But under the hood, computers are stubborn. They are essentially just massive, hyper-fast calculators. They don't understand the emotional weight of a sentence, the nuance of sarcasm, or what makes a joke funny.

Computers only understand numbers.

If you hand a core AI engine a raw string like Piyush Garg is Cute, the computer's internal reaction is basically a giant syntax error. For the engine to process language, calculate patterns, and spit out a response, we have to find a way to translate our messy, artistic human text into rigid, clean arrays of numbers.

And that brings us to the ultimate translator: Tokenization.

4. Tokenization: Breaking Down the Matrix

Tokenization is the first bridge between human chaos and computer logic. It is the process of chopping up a piece of text into smaller, digestible chunks called Tokens.

A lot of people think 1 Word = 1 Token. But AI is smarter (and more efficient) than that. Tokens can be whole words, characters or even common syllables (subwords).

To see this in action, we got our hands dirty during the lecture and built a simple tokenizer in JavaScript using the tiktoken npm package.

Imagine running this conceptual code in NodeJS:

import { encoding_for_model } from "tiktoken";

// Initialize the tokenizer brain
const coder = encoding_for_model("gpt-4o");

const text = "ChaiCode is cooking!";

// Step 1: Human Text to Computer Numbers (Encoding)
const tokens = coder.encode(text);
console,log(tokens);
// Output: Uint32Array(6) [ 1205, 1361, 2836, 382, 19307, 0 ]

// Step 2: Computer Numbers to Human Text (Decoding)
const decodedBytes = coder.decode(tokens);
const originalText = new TextDecoder().decode(decodedBytes);
console.log(originalText);
// Output: "ChaiCode is cooking!"

coder.free(); // Clean memory mentioned in official docs

Why do we need this?

When you see an array of numbers, that is what the LLM actually "reads". By breaking words into common sub-words, the model doesn't need to memorize every single variation of a word (like cook, cooking, cooked), It saves memory, keeps things lightning-fast, and ensures processing stays highly efficient.

5. Transformers: The 2017 Architecture That Changed Everything

Once your text is turned into an array of numbers, where does it go? it enters the brain of modern AI: The Transformer.

Back in 2017, a team of researchers at Google published a legendary whitepaper titled "Attention Is All You Need." They weren't trying to write a relationship advice column; they were introducing a brand-new way for machines to process data. Before Transformers, AI read text sequentially, word by word. If it reached the end of a long paragraph, it would completely forget how the sentence started.

Transformers fixed this by introducing Self-Attention.

The Power of Attention Mechanisms

Imagine the word "BANK".

• If I say: "I need to deposit money at the ICICI BANK."

• If I say: "Let's sit by the RIVER BANK."

How does the computer know the difference? A Transformer doesn't look at "BANK" in isolation. It looks at every single token in the sentence simultaneously. The token "BANK" interacts with the tokens "ICICI" or "RIVER", yielding a mathematical context vector (an Embedding).

Because of this architecture, modern LLMs can understand context, remember what you said a paragraph ago, and generate replies that feel genuinely human. Almost every dominant model today like GPT, Claude, Gemini, runs on this exact foundation.

Temperature: Hyperparameter

When an LLM predicts the next token, you can control its creativity using a setting called Temperature.

• Low Temperature(e.g. 0.2): The Safe & Boring Route. The model strictly picks the highest-probability words. Perfect for writing code, doing math, or factual questions.

• High Temperature(e.g. 0.9): The Creative & Wild Route. The model takes risks on less probable words. Perfect for brainstorming stories, writing marketing copy, or getting ChatGPT to call your instructor cute.

Conclusion: The Roadmap Ahead

Stepping into the world of Generative AI as a JavaScript developer feels like being handed the keys to a spaceship. Lecture 0 completely shattered the illusion of AI being a mysterious "black box". It's not magic, but it's architecture, math, tokenization, and attention.

As application developers, we aren't here to re-invent the engine. We are here to build the custom, high-performance cars that will drive the future.

How many phone numbers can you recall in today's digital age? Chances are, it's only a handful, given the convenience of storing contacts on our devices. Now, imagine if you had to memorise the IP addresses of every website you visit on the internet. It would be an overwhelming task, considering the vast number of websites we access daily. Fortunately, we don't have to worry about this daunting prospect because the Domain Name System (DNS) is here to assist us.

What is DNS ?

It is a system responsible to translate human readable domain names to numerical IP addresses.

For example: Instead to remembering the IP address “142.250.207.238” you remember and type “google.com“ and the page is served to you.

Types of DNS Records

1. A Record (Address Record): Maps domain name to IPv4 addresses.

   //command
   dig google.com
   
   //output
   google.com.        261    IN    A    142.250.67.238
   

2. AAAA Record (IPv6 Address Record): Maps domain name to IPv6 addresses.

   //command
   dig google.com
   
   //output
   ns1.google.com.        42757    IN    AAAA    2001:4860:4802:32::a
   ns2.google.com.        42757    IN    AAAA    2001:4860:4802:34::a
   ns3.google.com.        237425    IN    AAAA    2001:4860:4802:36::a
   ns4.google.com.        42757    IN    AAAA    2001:4860:4802:38::a
   

3. CNAME Record (Canonical Name Record): Points a domain name to another domain name.

   Ex: google.com → www.google.com

4. MX Record (Mail Exchange Record): Specifies mail server to domain to handle email delivery.

   //command
   dig google.com mx
   
   //output
   google.com.        300    IN    MX    10 smtp.google.com.
   

5. NS Record (Name Server Record): Specifies authoritative server for a domain.

   //command
   dig google.com ns
   
   //output
   google.com.        41507    IN    NS    ns2.google.com.
   google.com.        41507    IN    NS    ns4.google.com.
   google.com.        41507    IN    NS    ns3.google.com.
   google.com.        41507    IN    NS    ns1.google.com.
   

6. SOA Record (Start of Authority): Provides administrative information about a domain, including the primary name server and contact details.

   //command
   dig google.com ns
   
   //output
   google.com.        60    IN    SOA    ns1.google.com. dns-admin.google.com. 715308054 900 900 1800 60
   

DNS Hierarchy Explained: Root to Authoritative Servers

Process of DNS Resolution

1. Client Request: The user types google.com into their browser. The browser first checks its DNS Cache to see if it already knows the IP address for the domain. If not, it forwards the request to the Resolver.

2. Resolver: The Resolver (Recursive Server) which is ISP (Internet Service Provider) basically is a DNS server responsible for initiating and sequencing queries to resolve a domain name.

3. Root Server: The Root Server is the first step in resolution. It doesn’t contain the IP address of the domain but provides the address of the TLD server. For example: “Can you direct me to .com TLD server? - 104.250.87.15“

4. TLD (Top-Level Domain) Server: The TLD Server is specific to the domain's TLD (e.g., .com, .org). It redirects the Resolver to the Authoritative Name Server (ANS) for the domain google.com. For example: “Can you direct me to google.com ANS? - 176.150.90.10.

5. Authoritative Name Server: The ANS has the final answer. It provides the IP address of google.com to the Resolver. For example: “What is the IP address for google.com? - 142.250.66.14.

6. Resolver to client: The response i.e the IP address is sent back to the client and further the client gets connected to the website of google.com.

7. DNS Cache: The resolved IP address is stored in the Client’s DNS Cache to speed up future requests for the same domain.

Conclusion

In a world where memorizing countless IP addresses is unimaginable, the Domain Name System (DNS) simplifies our digital lives. By translating domain names into IP addresses, it ensures seamless, efficient, and user-friendly access to the internet, serving as the backbone of our connected world.

Thank you for taking the time to read this blog. I hope you found it informative.

Let’s imagine data journey as ordering a coffee at StarBucks.

• Placing the order at the counter - “One coffee please!“ (Browser sends a request).

• Barista takes your order - “Sure sir!“ (Server receives the request).

• Preparation of your coffee - “Hiss, Pssshhh!“ (Server processes the request).

• Pouring of your coffee - (Server sends response).

• Barista approaches with your coffee - “Here’s your coffee sir!“ (Data travels through the internet).

• You take your coffee - “Thank you!“ (Browser accepts and renders the response).

• You enjoy your coffee - “Ahhhh! Delicious“ (User interaction).

Diagram:

Web Browsers

What is the web browser ?

Web Browser is a software that enables an user to access the content such as website, images, videos etc on the World Wide Web.

Example: Google Chrome, Microsoft Edge, Brave, Firefox.

Architecture of a Web Browser

User Interface: The part of the browser which interacts with the user consists of search bar, buttons, address bar, other widgets etc.

Browser Engine: It acts as a mediator to marshal actions between the user interface and the rendering engine.

Rendering Engine: It is responsible for displaying the content provided by the server in response to the user's request. This engine parses the HTML code along with CSS to create a DOM (Document Object Model) tree, which then forms a render tree.

Data Persistance: The browser needs to save data locally (cookies, cache, etc.) so the Data Storage component handles this part.

Networking: The Networking Layer is responsible for making network calls to fetch resources.

Javascript Interpreter: It is responsible for executing the JavaScript code provided by the server, along with HTML and CSS.

UI Backend: This layer is responsible for drawing the basic widgets like select or input boxes and windows. Underneath it uses operating system UI methods.

HTTP / HTTPS

What is HTTP (Hypertext Transfer Protocol)?

It is a set of predefined rules i.e protocols which consists of links to other texts/ pages.

What is HTTPS (Hypertext Transfer Protocol Secure)?

It is hypertext transfer protocol secure which uses an SSL/TLS (Secure Shell/ Transport Layer Security)certificate secure the communication between client and the server using encryption.

Components of an HTTPS Request

• URL (Uniform Resource Locator): It uniquely identifies a resource over the Internet. Ex: https://google.com

• Headers: It consists of metadata regarding the request made to the server.

• Methods:

  • GET: Retrieves information from the server.

  • POST: Upload data to the server.

  • PUT: Updates data on the server.

  • DELETE: Removes data from the server.

Process of HTTP Request

• Step 1: DNS Lookup: Resolves the domain to an IP address.

• Step 2: SSL/TLS Handshake:

  • Client verifies the server's certificate.

  • Both client and server agree on encryption protocols and keys.

• Step 3: Data Transmission:

  • The client sends the HTTPS request.

  • The server processes the request and sends a secure response.

HTTP Status Codes

• 200-299: Success (e.g., 200 OK, 201 Created).

• 300-399: Redirection (e.g., 301 Moved Permanently).

• 400-499: Client errors (e.g., 400 Bad Request, 404 Not Found).

• 500-599: Server errors (e.g., 500 Internal Server Error).

DNS (Domain Name Server)

It is a server which translates human readable texts to numeric IP addresses that computers use to locate each other on the internet.

Types of DNS

1. Root Servers: Acts as the starting point for DNS resolution, directing queries to the correct Top-Level Domain (TLD) servers.

2. Top-Level Servers: Handles requests for specific domain extensions like .com or .org and directs them to authoritative servers.

3. Authoritative Servers: Provides the actual IP address for a specific domain name based on its records.

4. Recursive Servers: Resolves domain names by querying multiple DNS servers until it finds the final IP address.

5. Forwarding Servers: Forwards DNS queries from clients to external DNS servers for resolution.

6. Caching Servers: Temporarily stores DNS query results to speed up future requests for the same domain.

SSL / TLS Handshake

Process of SSL / TLS Handshake

• Client Hello:

  • Sent by the client to the server.

  • Contains:

    • TLS version.

    • Supported CipherSuites (in client's preference order).

    • Random byte string (for key computation).

    • Supported data compression methods.

• Server Hello:

  • Sent by the server to the client.

  • Contains:

    • Chosen CipherSuite.

    • Session ID.

    • Random byte string (for key computation).

    • Server's digital certificate.

  • Optionally includes a client certificate request if client authentication is required.

• Server Certificate Verification:

  • Client verifies the server's digital certificate.

• Key Exchange:

  • Client sends a random byte string encrypted with the server's public key to compute the shared secret key.

• Client Certificate (if requested):

  • Client sends:

    • Random byte string encrypted with the client’s private key.

    • Client's digital certificate.

    • Or a "no digital certificate alert" (if certificate is unavailable).

  • Server verifies the client's digital certificate.

• Client Finished Message:

  • Client sends a “finished” message encrypted with the shared secret key, signaling the completion of the client handshake.

• Server Finished Message:

  • Server sends a “finished” message encrypted with the shared secret key, signaling the completion of the server handshake.

• Secure Communication:

  • Both parties now exchange symmetrically encrypted messages using the shared secret key.

HTTP Request / Response Cycle

First, a user provides a client with a URL. The client then creates a request for information or resources from a server. When the server receives this request, it uses the details in the request to create a response containing the requested information. Once the response is ready, it is sent back to the client in the requested format to be displayed to the user.

Servers

What is a server?

A server is a computer or system that provides services, data, or resources to other devices (clients) over a network.

Types of servers

• Web server: Serving HTML, CSS and Javascript (static pages to client). Ex: Nginx

• Application server: Hosting backend application. Ex: Express.js, Django.

• Database server: Storing, retrieving and managing data. Ex: MongoDB, Postgresql.

Conclusion

Servers are the backbone of today's technology, allowing smooth communication, data storage, and app functions. As technology changes, servers meet new challenges, pushing innovation with cloud computing, edge technologies, and serverless designs. Their role is crucial in creating a connected, efficient, and secure digital future.