Scribd
Upload
8 views98 pages

Unit 2

Uploaded by

shubhambansude2740
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views98 pages

Unit 2

Uploaded by

shubhambansude2740
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 98

UNIT II

Structure of a web page: HTML tags, attributes, and CSS styles, Introduction to JavaScript and
its role in web development, Understanding DOM manipulation using JavaScript, Introduction
to AI integration in web development with TensorFlow.js, Building interactive web pages with
basic AI features (e.g., text classification, simple image processing),Using TensorFlow.js for
image classification in the browser, Basic example of a facial detection model in the browser.
HTML tags
• HTML tags are the fundamental elements of HTML used for defining
the structure of the document. These are letters or words enclosed by
angle brackets (< and >).
• Usually, most of the HTML tags contain an opening and a closing tag.
• Each tag has a different meaning, and the browser reads the tags and
displays the contents enclosed by them accordingly.
Heading Tags

• Heading tags are used to define headings of documents.


• You can use different sizes for your headings.
• HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
• While displaying any heading, the browser adds one line before and
one line after that heading.
Example

Following HTML code demonstrates various levels of headings:


<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body> </html>
Paragraph Tag

• The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag.
• Example
The following example demonstrates the use of paragraph (<p>) tag, here we are defining 3 paragraphs −
<!DOCTYPE html>
<html> <head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p> </body>
</html>
Line Break Tag

• the <br> tag is used to insert a line break in the text. It forces the content after it to appear on the
next line. This tag is used whenever you want the text to break into a new line without starting a
new paragraph.
• Note: The <br> tag is an empty tag and does not need a closing tag.
<!DOCTYPE html>
<html> <head>
<title>Line Break Example</title>
</head> <body>
<p>Hello
<br>You delivered your assignment on time.<br>Thanks<br>Mahnaz
</p>
</body>
</html>
HTML, the alignment
• In HTML, the alignment should be handled using CSS rather than
deprecated tags.
• The <center> tag, previously used to align content to the center of a
web page, is deprecated in HTML5.
• You can use the text-align: center; property of CSS to center text or
inline elements.
center
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<p>This text is not in the center.</p>
<p class="center-text">This text is in the center.</p>
</body>
</html>
Horizonal Rule Tag

• The <hr> tag is used to insert a horizontal line across the page.
• It is commonly used to separate sections of content visually.
• Note: Like <br> tag, the <hr> tag is also an empty tag and does not
need a closing tag.
Example

• The following example draws a horizontal line between two paragraphs −


<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top.</p>
<hr>
<p>This is paragraph two and should be at bottom.</p>
</body>
</html>
Listing Tags

• The <ul> and <ol> tags create the unordered and ordered listings, and
to display list items, the <li> tag is used.
• Example:The following example demonstrates the use of listing tags −
<!DOCTYPE html>
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<body>
<html>
What is an HTML Element
• HTML elements are the basic building blocks to create a web page,
created with an opening tag, content, and ending tag.
• An HTML element is a fundamental component of an HTML
document that can contain data to display on the webpage, such as
text, image, link, or sometimes nothing.
• An HTML element includes an opening tag, content, and a closing tag,
where the opening tag may also include attributes.
HTML element
• An HTML element includes:
• Opening Tag: An opening tag specifies the beginning of the element
and may include multiple attributes.
• Content: The content part includes the information to be displayed or
processed within an element.
• Closing Tag: A closing tag marks the end of the element (A closing tag
may be optional for some elements).
HTML element
• An HTML document consists of a tree of HTML elements, and they
define the content and layout of a webpage, like how and what
content should display in the different sections of a webpage.
• Example of HTML Elements
• Some of the examples of HTML elements are as follows:
• <p>This is paragraph content.</p> <h1>This is heading content.</h1>
<div>This is division content.</div>
HTML element
• HTML Element Structure
• The following image demonstrates the structure of an element, like
how an HTML element is written with the opening and closing tags:
Elements vs. Tags: What's the Real Difference?

• Tag :A tag is the code enclosed in angle brackets, used to define an


element in HTML.
• Opening tag: <p>Closing tag: </p>
• Self-closing tag: <img />
• Element
• An element consists of the opening tag, the content, and the closing
tag.
• <p>This is a paragraph.</p>
HTML Attributes

• HTML Attributes are special words used within the opening tag of an
HTML element.
• They provide additional information about HTML elements.
• HTML attributes are used to configure and adjust the element's
behavior, appearance, or functionality in a variety of ways.
• Each attribute has a name and a value, formatted as name="value".
Attributes tell the browser how to render the element or how it
should behave during user interactions.
• Syntax:
• <tagname attribute_name = "attribute_value"> content...
</tagname>
Code Example of Using HTML Attributes

<!DOCTYPE html>
<html>

<head>
<title>HTML img src Attribute</title>
</head>

<body>
<img src=
“C:/Download/i.jpg">
</body>

</html>
In this example:

Tag : <img>
Attribute : src
Value of Attribute : “C:\Users\admin\Pictures\k.jpg”
• Purpose : The <img> tag is used for embedding images in an HTML
page.
• The src attribute within the <img> tag specifies the path to the image
file you wish to display.
• This attribute is crucial as it directs the browser to the image’s
location on the internet or a local directory.
Components of Attribute

• An HTML attribute consists of two primary components:


1. attribute_name: This is the name of the attribute, which specifies
what kind of additional information or property you are defining for the
element. Common attribute names include href, src, class, id, etc.

2. attribute_value: The value is assigned to the attribute to define the


specific setting or behavior. It is always placed in quotes.
Attribute Description

class Groups elements and allows styling.

style Inline CSS styles.

Specifies the source of various resources, such as


src image URLs for the img element, video URLs for the
video element, and audio URLs for the audio element.

Determines whether the content within the element is


contenteditable
editable.

role Specifies the element’s accessibility role.

Determines the order of focus during keyboard


tabindex
navigation.

Assigns a unique identifier to an element, allowing


id
targeting with CSS or JavaScript.

Defines the hyperlink destination within the a element,


href
enabling navigation.
Attribute Description

class Groups elements and allows styling.

style Inline CSS styles.

Specifies the source of various resources, such as image URLs


src for the img element, video URLs for the video element, and
audio URLs for the audio element.

Assigns a unique identifier to an element, allowing targeting


id
with CSS or JavaScript.

Defines the hyperlink destination within the a element,


href
enabling navigation.
Some other main types of HTML attributes
are:
• Event Attributes - These define the actions to be taken on specific browser
events.
• Input Attributes - Specific to input elements within <form> tags.
• Image Attributes - Specific to the <img> element for handling images.
• Link Attributes - Specific to linking elements like <a> and <link> .
• Table Attributes - Used with table elements like <table> , <th> , <tr> , and <td> .
• Style Attributes - Define styles directly on an element.
• Media Attributes - Related to media elements like <audio> and <video> .
• Accessibility Attributes - Help improve accessibility, such as alt for images and
aria-* attributes.
• Meta Attributes - Used with meta elements to specify metadata like charset .
1. HTML alt Attribute

• The alt attribute in HTML provides alternative text for an image if the
image cannot be displayed. It improves accessibility and provides
context for screen readers.
• Example: This example explains the HTML alt Attributes to specify
the name of the file when the image is not loaded properly.
<!DOCTYPE html>
<html>
<head>
<title>HTML img alt Attribute</title>
</head>
<body>
<img src=“C:\ssj\sjsk\skks"><br>
<img src=""
alt="Since the src value is blank,the alt value is displayed">
</body>

</html>
2. HTML width and height Attribute

• The width and height Attribute is used to adjust the width and height
of an image(in pixels).
• Example: This example explains the HTML width & height Attributes
to specify the different sizes of the images.
<!DOCTYPE html>
<html lang="en">

<head>
<title>Width and Height</title>
</head>

<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
width="300px"
height="100px">
</body>

</html>
3. HTML id Attribute

• The id attribute in HTML assigns a unique identifier to an element,


allowing it to be targeted by CSS and JavaScript for styling and
manipulation purposes.
• Example: This example explains the HTML id Attribute to specify the
unique value for the specific element.
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
<body>
<h1 id=“hello">Welcome </h1>
</body>

</html>
• HTML href Attribute
• The href attribute in HTML, used with the <a> tag, specifies a link
destination. Clicking the linked text navigates to this address. Adding
`target="_blank"` opens it in a new tab.
• HTML style Attribute
• The style attribute is used to provide various CSS effects to the HTML
elements such as increasing font-size, changing font-family, coloring,
etc.
• Example: This example explains the HTML style Attributes to specify
the style properties for the HTML element.
DOM
• DOM (Document Object Model) is a tree-like structure that
represents an HTML document.
• JavaScript can access and change elements, styles, attributes, and
content in the DOM.
Basic DOM Manipulation Steps
• Select HTML elements
• Modify the elements
• Respond to user events
1. Selecting Elements
// By ID
• document.getElementById("myId");

// By Class
• document.getElementsByClassName("myClass");

// By Tag Name
• document.getElementsByTagName("p");

// Modern methods (recommended)


• document.querySelector(".myClass"); // First match
• document.querySelectorAll(".myClass"); // All matches
2. Modifying Elements
• document.getElementById("myId").innerText = “hi";
Changing HTML Content
• document.getElementById("myId").innerHTML = "<h1>Bold
Text</h1>";
Changing Attributes
• document.getElementById("myImage").src = "newimage.jpg";
Changing Styles
• document.getElementById("myBox").style.backgroundColor = "blue";
Handling events in JavaScript
• Handling events in JavaScript is how you make your web page
respond to user actions like clicks, typing, mouse movements, etc.
What is an Event?
• An event is a signal that something has happened. Common
examples:
Event Type Triggered When...
click User clicks on an element
mouseover Mouse hovers over an element
keydown A key is pressed
submit A form is submitted
load Page finishes loading
Inline HTML Method
<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
alert("Hello!");
}
</script>
Using addEventListener()
<button id="myBtn">Click</button>

<script>
document.getElementById("myBtn").addEventListener("click",
function() {
alert("Button clicked!");
});
</script>
Example: Changing Color on Click
<div id="box" style="width:100px; height:100px; background:red;"></div>
<button id="changeColorBtn">Change Color</button>

<script>
document.getElementById("changeColorBtn").addEventListener("click",
function() {
document.getElementById("box").style.backgroundColor = "blue";
});
</script>
Example: Form Submit Event
<form id="myForm">
<input type="text" id="name" />
<button type="submit">Submit</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // Stop form from refreshing page
const name = document.getElementById("name").value;
alert("Hello, " + name);
});
</script>
<!DOCTYPE html>
<html>

<head>
<title>style Attribute</title>
</head>

<body>
<h2 style="font-family:Chaparral Pro Light;">
Hello world.
</h2>
<h3 style="font-size:20px;">
Hello world. </h3>
<h2 style="color:#8CCEF9;">
Hello world. </h2>
<h2 style="text-align:center;">
Hello world. </h2>
</body>

</html>
Tensorflow.js Introduction

• TensorFlow.js brings machine learning to the browser and Node.js.


• It allows developers to build and run ML models directly in JavaScript
and access AI for web applications.
What is Tensorflow.js ?

• TensorFlow.js is a JavaScript library for training and deploying


machine learning models on web applications and in Node.js.
• You can develop the machine learning models from scratch using
tensorflow.js or can use the APIs provided to train your existing
models in the browser or on your Node.js server.
Prerequisite: Before starting Tensorflow.js,
you need to know the following:
• For browser:
• HTML: Basics knowledge of HTML is required
• JavaScript: Good knowledge of JS is required
For server-side:

• Node.js: Having a good command of Node.js. Also since Node.js is a JS


runtime, so having command over JavaScript would help a lot.
Setting Up Tensorflow.js:

• Browser Setup There are two ways to add TensorFlow.js in your


browser-based application:
• Using script tags.
• Installation from NPM
• 1. Using Script tags
• Add the following script tag to your main HTML file.

• <script
src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.mi
n.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js">
</script>
</head>
<body>
<script>
let value = "Hello ! Tensorflow here."
let tens = tf.scalar(value)
document.write(tens)
</script>
</body>
</html>
Tensors

• TensorFlow.js is a JavaScript library to define and operate on Tensors.


• The main data type in TensorFlow.js is the Tensor.
• A Tensor is much the same as a multidimensional array.
• A Tensor contains values in one or more dimensions:
Tensors
A Tensor has the following main
properties:

Property Description
dtype The data type
rank The number of dimensions
shape The size of each dimension
• Creating a Tensor
• The main data type in TensorFlow is the Tensor.
• A Tensor is created from any N-dimensional array with
the tf.tensor() method:
• Example 1
• const myArr = [[1, 2, 3, 4]];
const tensorA = tf.tensor(myArr);
Tensor Shape

• A Tensor can also be created from an array and a shape parameter:


Example1
• const myArr = [1, 2, 3, 4]:
const shape = [2, 2];
const tensorA = tf.tensor(myArr, shape);
Example2
• const tensorA = tf.tensor([1, 2, 3, 4], [2, 2]);
• Retrieve Tensor Values
• You can get the data behind a tensor using tensor.data():
• const myArr = [[1, 2], [3, 4]];
const shape = [2, 2];
const tensorA = tf.tensor(myArr, shape);
tensorA.data().then(data => display(data));

function display(data) {
document.getElementById("demo").innerHTML = data;
}
Tensor Data Types

• A Tensor can have the following data types:


• bool
• int32
• float32 (default)
• complex64
• string
• const myArr = [1, 2, 3, 4];
const shape = [2, 2];
const tensorA = tf.tensor(myArr, shape, "int32");
TensorFlow Models
Tensorflow Models

• Models and Layers are important building blocks in Machine


Learning.
• For different Machine Learning tasks you must combine different
types of Layers into a Model that can be trained with data to predict
future values.
• TensorFlow.js is supporting different types of Models and different
types of Layers.
• A TensorFlow Model is a Neural Network with one or more Layers.
•
Example

Suppose you knew a function that defined a strait line:


• Y = 1.2X + 5
• Then you could calculate any y value with the JavaScript formula:
• y = 1.2 * x + 5;
• // Create Training Data
const xs = tf.tensor([0, 1, 2, 3, 4]);
const ys = xs.mul(1.2).add(5);
// Define a Linear Regression Model
const model = tf.sequential();
model.add(tf.layers.dense({units:1, inputShape:[1]}));
// Specify Loss and Optimizer
model.compile({loss:'meanSquaredError', optimizer:'sgd'});
// Train the Model
model.fit(xs, ys, {epochs:500}).then(() => {myFunction()});
// Use the Model
function myFunction() {
const xMax = 10;
const xArr = [];
const yArr = [];
for (let x = 0; x <= xMax; x++) {
let result = model.predict(tf.tensor([Number(x)]));
result.data().then(y => {
xArr.push(x);
yArr.push(Number(y));
if (x == xMax) {plot(xArr, yArr)};
});
}
}
•
Cont…
Collecting Data
• Create a tensor (xs) with 5 x values:
const xs = tf.tensor([0, 1, 2, 3, 4]);
Create a tensor (ys) with 5 correct y answers (multiply xs with 1.2 and
add 5):
const ys = xs.mul(1.2).add(5);
• Creating a Model
• Create a sequential mode:.
• const model = tf.sequential();
Cont…
• Adding Layers
• Add one dense layer to the model.
• The layer is only one unit (tensor) and the shape is 1 (one
dimentional):
• model.add(tf.layers.dense({units:1, inputShape:[1]}));
Cont…
• Compiling the Model
• Compile the model using meanSquaredError as loss function and sgd
(stochastic gradient descent) as optimizer function:
• model.compile({loss:'meanSquaredError', optimizer:'sgd'});
Cont…
• Training the Model
• Train the model (using xs and ys) with 500 repeats (epochs):
• model.fit(xs, ys, {epochs:500}).then(() => {myFunction()});
Cont…
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script>
async function run() {
const model = await tf.loadLayersModel('https://your-model-path/model.json');
const image = document.getElementById('img'); // e.g., HTMLImageElement
const tensor = tf.browser.fromPixels(image)
.resizeNearestNeighbor([224, 224])
.toFloat()
.expandDims();

const prediction = model.predict(tensor);


prediction.print();
}

run();
</script>
Classification
• Classification teaches a machine to sort things into categories.
• It learns by looking at examples with labels (like emails marked
"spam" or "not spam").
• After learning, it can decide which category new items belong to, like
identifying if a new email is spam or not.
• A classifier is a type of machine learning model or algorithm that
assigns labels or categories to input data based on its features.
example
• For example a classification model might be trained on dataset of
images labeled as either dogs or cats
• and it can be used to predict the class of new and unseen images as
dogs or cats based on their features such as color, texture and shape
Examples of classifiers:

• Email spam detection: classifies emails as "spam" or "not spam"


• Image recognition: classifies images into categories like "cat," "dog,"
or "car"
• Sentiment analysis: classifies text as "positive," "negative," or
"neutral"
• Medical diagnosis: classifies patient data as "disease" or "no disease"
Types of Classification

• When we talk about classification in machine learning, we’re talking


about the process of sorting data into categories based on specific
features or characteristics.
• There are different types of classification problems depending on
how many categories (or classes) we are working with and how they
are organized. There are two main classification types in machine
learning:
1. Binary Classification

• This is the simplest kind of classification.


• In binary classification, the goal is to sort the data into two distinct
categories.
• Think of it like a simple choice between two options. Imagine a
system that sorts emails into either spam or not spam. It works by
looking at different features of the email like certain keywords or
sender details, and decides whether it’s spam or not.
• It only chooses between these two options.
2. Multiclass Classification

• Here, instead of just two categories, the data needs to be sorted


into more than two categories. The model picks the one that best
matches the input. Think of an image recognition system that sorts
pictures of animals into categories like cat, dog, and bird.
• Basically, machine looks at the features in the image (like shape,
color, or texture) and chooses which animal the picture is most
likely to be based on the training it received.
3. Multi-Label Classification

• In multi-label classification single piece of data can belong


to multiple categories at once.

• Unlike multiclass classification where each data point belongs to only


one class, multi-label classification allows data points to belong to
multiple classes. A movie recommendation system could tag a movie
as both action and comedy.
• The system checks various features (like movie plot, actors, or genre
tags) and assigns multiple labels to a single piece of data, rather than
just one.
How does Classification in Machine Learning Work?

• Classification involves training a model using a labeled dataset, where


each input is paired with its correct output label.
• The model learns patterns and relationships in the data, so it can
later predict labels for new, unseen inputs.
• In machine learning, classification works by training a model to learn
patterns from labeled data, so it can predict the category or class of
new, unseen data. Here's how it works:
• Data Collection: You start with a dataset where each item is labeled
with the correct class (for example, "cat" or "dog").
• Feature Extraction: The system identifies features (like color, shape,
or texture) that help distinguish one class from another. These
features are what the model uses to make predictions.
• Model Training: Classification - machine learning algorithm uses the
labeled data to learn how to map the features to the correct class. It
looks for patterns and relationships in the data.
• Model Evaluation: Once the model is trained, it's tested on new,
unseen data to check how accurately it can classify the items.
• Prediction: After being trained and evaluated, the model can be used
to predict the class of new data based on the features it has learned.
• Model Evaluation: Evaluating a classification model is a key step in
machine learning. It helps us check how well the model performs and
how good it is at handling new, unseen data. Depending on the
problem and needs we can use different metrics to measure its
performance
• If the quality metric is not satisfactory, the ML algorithm or
hyperparameters can be adjusted, and the model is retrained.
• This iterative process continues until a satisfactory performance is
achieved.
• In short, classification in machine learning is all about using existing
labeled data to teach the model how to predict the class of new,
unlabeled data based on the patterns it has learned
Common types of classifiers:

• Logistic Regression
• Decision Trees
• Support Vector Machines (SVM)
• Neural Networks (including deep learning models)
• Naive Bayes
TensorFlow.js for image classification in the
browser,
• TensorFlow.js is an open-source library that allows you to define,
train, and run machine learning (ML) models entirely in the browser
using JavaScript.
Why use TensorFlow.js for Image Classification in
the Browser?
• No server needed – Everything runs on the client side.
• Real-time processing – Use webcam input instantly.
• Cross-platform – Works on any device with a browser.
• Privacy – No data is sent to a server.
• Easy to deploy – Just need HTML + JS files.
How Image Classification Works in
TensorFlow.js
• Image classification is the task of assigning labels (classes) to images.
For example, classifying if an image contains a cat or a dog.
• Load or create a model (pre-trained or custom).
• Pre-process the image – resize, normalize, and convert to tensor.
• Run prediction on the image.
• Display result to the user.
1. Load or Create a Model (Pre-trained or
Custom)
• What is a model?
• A model is a pre-trained or trained system that can take an input (like
an image) and produce an output (like a label or prediction).
Two options in TensorFlow.js:
Pre-trained model
• These are already trained by experts on huge datasets like ImageNet.
• Example: mobilenet, coco-ssd, blazeface
• You can load them directly in the browser:js
const model = await blazeface.load();
Custom model

• You can train your own model using:


• Your own labeled datasetTensorFlow.js (in the browser) or TensorFlow
(in Python),
• then convert the model to use in the browserSteps:
• Collect images (e.g., cat vs dog)Train using TensorFlow or tools like
Teachable Machine
• Convert to .json format using TensorFlow.js Converter if needed
2. Pre-process the Image

• Before feeding an image into a model, you must convert it into a


format the model understands.
Preprocessing includes:

• Resize
• Models expect a fixed image size (e.g., 224x224 for MobileNet).
• Resize the image using:
• tf.image.resizeBilinear(imageTensor, [224, 224]);
2. Normalize

• Convert pixel values from 0–255 to 0–1 (or -1 to 1, depending on


model).
• This ensures consistent input and improves model performance.
• const normalized = imageTensor.div(255);
3. Convert to Tensor

• JavaScript images or canvas elements must be converted to Tensors:


• const tensor = tf.browser.fromPixels(imageElement);
Run Prediction on the Image

• Once the image is preprocessed, feed it into the model:


• const predictions = await model.classify(imageElement);
This will return an array of predictions like:
[
{ className: "tabby cat", probability: 0.92 },
{ className: "tiger cat", probability: 0.05 },
...
]
4. Display the Result to the User
• Show the predicted label and confidence score on the webpage:
document.getElementById("result").innerText =
`Prediction: ${predictions[0].className}
Confidence: ${predictions[0].probability.toFixed(2)}`;

You might also like