Building a smart website for selling clothes

- Research about machine learning, deep learning, and apply them into the website - add chatbot and buy product feature through voice recognition.. - Introduce deep learning & architectu

INFORMATION TECHNOLOGY

CAPSTONE PROJECT INFORMATION TECHNOLOGY

BUILDING A SMART WEBSITE FOR SELLING CLOTHES

INSTRUCTOR: MSc LÊ THỊ MINH CHÂU STUDENT: ĐỖ QUỐC KHÁNH

NGUYỄN HỮU QUYỀN

SKL009168

Ho Chi Minh City, August, 2021

MINISTRY OF EDUCATION AND TRAINING HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION

FACULTY OF INFORMATION TECHNOLOGY



CAPSTONE PROJECT

“Building a smart website for selling clothes”

STUDENT1: Đỗ Quốc Khánh ID: 17110041

STUDENT2: Nguyễn Hữu Quyền ID: 17110071

ACADEMIC YEAR: K17 INSTRUCTOR: MSc Lê Thị Minh Châu

Ho Chi Minh City, August 2021

THE SOCIALIST REPUBLIC OF VIETNAM

Independence – Freedom– Happiness

-Ho Chi Minh City, January 8, 2021

GRADUATION PROJECT ASSIGNMENT

Student name: Nguyễn Hữu Quyền Student ID: 17110071

Student name: Đỗ Quốc Khánh Student ID: 17110041

Major:Software Engineering Class: 171100CLA1

Advisor:MSc Lê Thị Minh Châu Phone number: 0902200557

Date of assignment: 15/03/2021 Date of submission: xx/xx/2021

1 Project title: Building a smart website for selling clothes

2 Initial materials provided by the advisor:

3 Content of the project: Integrate deep learning into the website

4 Final product: A smart e-commerce website

Independence – Freedom– Happiness

-Ho Chi Minh City, January 8, 2021

ADVISOR’S EVALUATION SHEET

Major: Software Engineering

Project title: Building a smart website for selling clothes

Advisor: Lê Thị Minh Châu, MSc

Independence – Freedom– Happiness

-Ho Chi Minh City, January 8 , 2021 PRE-DEFENSE EVALUATION SHEET Student name: Nguyễn Hữu Quyền Student ID: 17110071 Student name: Đỗ Quốc Khánh Student ID: 17110041 Major: Software Engineering Project title: Building a smart website for selling clothes Name of Reviewer: EVALUATION 1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Approval for oral defense? (Approved or denied)

5 Overall evaluation: (Excellent, Good, Fair, Poor)

6 Mark:………….(in words: )

Ho Chi Minh City, January 8 , 2021

REVIEWER

(Sign with full name)

Independence – Freedom– Happiness

-EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER

Student name: Nguyễn Hữu Quyền Student ID: 17110071

Major: Software Engineering

Project title: Building a smart website for selling clothes

Name of Defense Committee Member:

• Lê Thị Minh Châu, MSc

• Lê Vĩnh Thịnh, PhD

EVALUATION

1 Content and workload of the project

2 Strengths:

3 Weaknesses:

4 Overall evaluation: (Excellent, Good, Fair, Poor)

In the first words of this end-to-end "The Final Project" report, we would like to send our sincere thanks and gratitude to all those who have supported and provided us

with knowledge and spirituality during project implementation.

We would like to express our faith to Ms Minh Chau, lecturer at Ho Chi Minh

City University of Technical and Education that helped us.

Due to limited time, knowledge is still limited so the project implementation certainly not avoid certain shortcomings We would like to receive feedback from you so that we could have more experience to implement to complete our

project better Best regards!

Ho Chi Minh city, January 8, 2021

TABLE OF CONTENTS

GRADUATION PROJECT ASSIGNMENT i

PRE-DEFENSE EVALUATION SHEET iii

EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER iv

TABLE OF CONTENTS vi

LIST OF TABLES x

LIST OF FIGURES xi

CHAPTER 1 INTRODUCTION 1

1.1 Why need to build a smart website? 1

1.1.1 Purpose of this topic 1

1.1.2 Main content 1

CHAPTER 2 THEORETICAL BASIC 3

2.1 MERN Stack 3

2.1.1 Definition 3

2.1.2 Components 3

2.1.3 Workflow 10

2.1.4 Advantages of MERN Stack 10

2.1.5 Business benefits to MERN Stack 11

2.2 Machine Learning 12

2.2.1 Basic problem in machine learning 12

2.2.2 Approaches 13

2.3 Deep Learning 14

2.4 Common architecture used in application 15

2.4.1 Definition 15

2.4.2 Architecture 15

CHAPTER 3 CHATBOT IN DIALOGFLOW AND ALAN AI BOT 18

3.1 Chatbot 18

3.1.1 Definition 18

3.1.2 Types of chatbots 18

3.1.3 How does it work 19

3.2 Dialogflow 20

3.2.1 Definition 20

3.2.2 Components 20

3.2.3 User interactions with integrations 22

3.2.4 Data structure and flow 24

3.3 ALAN AI 26

3.3.1 About ALAN 26

3.3.2 Voice platform 27

3.3.3 Dialog design 27

3.3.4 Integration 30

CHAPTER 4 SURVEY 31

4.1 Chatbot survey 31

4.1.1 Chatbot GearVN 31

4.1.2 Chatbot Shopee 31

4.2 Website survey 32

4.2.1 Website Lazada 32

4.2.2 Website Shopee 33

4.2.3 Website GearVN 34

CHAPTER 5 ANALYZE REQUIREMENTS AND APPLICATION DESCRIPTION

… 36

5.1 Analyze requirements 36

5.1.1 System function requirements 36

5.1.2 Non-functional requirements 37

5.1.3 Functions 38

5.2 Application description 40

5.2.1 Use case diagram 40

5.2.2 System structure 40

5.2.3 Use case specifications 45

5.2.4 Sequence Diagram 53

5.2.5 Database 64

5.2.6 Implementation system 71

CHAPTER 6 IMPLEMENTING DIALOGFLOW AND ALAN AI TO THE E-COMMERCE WEBSITE 73

6.1 Dialogflow 73

6.2 ALAN AI 83

CHAPTER 7 ADDITONAL TASK 87

7.1 Send order confirmation email 87

7.1.1 Create a new service and email template on emailjs 87

7.2 Forgot password 89

7.2.1 Create an API Key 89

7.2.2 Integrate 89

7.3 Setup HTTPS locally 90

7.3.1 Adding https 90

7.3.2 Create an SSL Certificate 91

7.4 Run automation testing and some appearance testing 92

7.4.1 Automation testing 92

7.4.2 Appearance Testing 93

7.4.3 Test case for sign up screen 95

CHAPTER 8 FINAL INTERFACE 97

8.1 User 97

8.1.1 Homepage 97

8.1.2 Product page 97

8.1.3 Order status page 98

8.2 Admin 98

8.2.1 Homepage 98

8.2.2 Order history page 99

8.2.3 Product page 99

CHAPTER 9 CONCLUSION AND DEVELOPMENT 101

9.1 Summary 101

9.2 Compare with original target 101

9.2.1 Target 101

9.2.2 Task accomplished 101

9.3 Limit 101

9.4 Topic development 102

REFERENCES 103

WORK ASSIGNMENT 104

LIST OF TABLES

Table 1 Non-functional requirement 37

Table 2 Analsys requirements 38

Table 3 Use case Login 45

Table 4 Use case Sign up 46

Table 5 Use case Product Management 47

Table 6 Use case Cart Management 48

Table 7 Use case Order Management 49

Table 8 Use case User Management 50

Table 9 User case Staff Management 51

Table 10 Use case Buy Product 52

Table 11 Database Table Admin 64

Table 12 Database Table Users 65

Table 13 Database Table Carts 65

Table 14 Database Table Products 67

Table 15 Database Table Disable Products 68

Table 16 Database Table Opinions 69

Table 17 Table Chatbot Test Case 93

Table 18 Table Log In Test Case 94

Table 19 Table Sign Up Test Case 95

Table 20 Table Buy Product Test Case 96

LIST OF FIGURES

Figure 1 How does MERN Stack work [8] 10

Figure 2 MERN's processing on Front end, Back end and database [9] 11

Figure 3 Relationship between Artificial Intelligence, Machine Learning and Deep Learning [10] 14

Figure 4 Relationship between Intent and Agent [5] 20

Figure 5 Basic flow of how intent work [5] 21

Figure 6 Basic flow of fulfillment [5] 23

Figure 7 Basic flow of User interaction with the API [5] 24

Figure 8 Entire Data strucutre and flow in chatbot 25

Figure 9 Text Query Route 25

Figure 10 Event Query Route 25

Figure 11 Alan - Example of a pattern in user command [4] 28

Figure 12 Alan - Type of Slots [4] 29

Figure 13 Alan - Dynamic entities [4] 29

Figure 14 Alan - Contexts [4] 30

Figure 15 Alan - How to integrate [4] 30

Figure 16 Chatbot GearVN 31

Figure 17 Chatbot Shopee 31

Figure 18 Website Lazada 32

Figure 19 Website Shopee 33

Figure 20 Website GearVN 34

Figure 21 Use case diagram 40

Figure 22 Admin Functions 41

Figure 23 Staff Function 41

Figure 24 User Function 42

Figure 25 Guest Functions 42

Figure 26 Database 43

Figure 27 Admin View 43

Figure 28 Staff View 44

Figure 29 User View 44

Figure 30 Guest View 45

Figure 31 Sequence Diagram Login 53

Figure 32 Sequence Diagram User View Product 54

Figure 33 Sequence Diagram Admin View Product 55

Figure 34 Sequence Diagram Add Product 56

Figure 35 Sequence Diagram Edit Product 57

Figure 36 Sequence Diagram Disable Product 58

Figure 37 Sequence Diagram View Cart 59

Figure 38 Sequence Diagram View Product Detail 60

Figure 39 Sequence Diagram Add Product to Cart 61

Figure 40 Sequence Diagram Edit Cart 62

Figure 41 Sequence Diagram Buy Product 63

Figure 42 Database schema 70

Figure 43 Visual Code version 71

Figure 44 Window edition 71

Figure 45 Google Chrome, Firefox, etc [11] 72

Figure 46 Chatbot concept 73

Figure 47 Create Google project and link to Dialogflow step-by-step 74

Figure 48 Data flow of Dialogflow 74

Figure 49 Dialogflow - Agent setting page 75

Figure 50 Google service account 75

Figure 51 File dev.js 76

Figure 52 Google credentail for setting environment 76

Figure 53 Private json key generated by Google service 76

Figure 54 Dialogflow Fulfillment 77

Figure 55 Chatbot response - store location 81

Figure 56 Chatbot response - category 81

Figure 57 Chatbot response - open hour 82

Figure 58 Chatbot response - product available 82

Figure 59 Chatbot response - contact 82

Figure 60 Chatbot response - delivery information 83

Figure 61 Chatbot response - order information 83

Figure 62 Chatbot response - shipping fee 83

Figure 63 ALAN Integration 84

Figure 64 Create a new service account 87

Figure 65 Create an email template 88

Figure 66 Get user data 88

Figure 67 Send email function 88

Figure 68 Create an API Key on SendGrid 89

Figure 69 Add API key 89

Figure 70 Route handle user request 90

Figure 71 Add certificate result 92

Figure 72 OWASP ZAP Tool 92

Figure 73 Alerts after run attack 93

Figure 74 User Homepage 97

Figure 75 Product page 97

Figure 76 Order status page 98

Figure 77 Order history page 99

Figure 78 Admin Homepage 99

Figure 79 Admin product page 100

CHAPTER 1 INTRODUCTION

1.1 Why need to build a smart website?

Currently, the quality of human life is improved day by day thanks to thedevelopment of technology Besides development, the quality of human life hasalso been significantly improved Customer care service in every sales website hasalways been an essential need, nowadays, not only need a good service, but also itmust be fast and convenient That why create a smart website is necessary

1.1.1 Purpose of this topic

Build a smart website for selling clothes and integrate many new features toserve the request of customer:

- Improve UI/UX (User Interface/User Experience) website

- Research about machine learning, deep learning, and apply them into the website - add chatbot and buy product feature through voice recognition

- Add utility features for users - sort and search features

- Add graph statistics for admin

- Introduce deep learning & architecture models used in this application

Implement chatbot to the system:

- Logged in Dialogflow

- Create Service account

- Create Private Key

- Set environment variable called Google application credentials to private key

- Export Google application credentials key

Implement features of buying product through voice recognition into the system:

- Logged in to ALAN Studio

- Create voice assistant and chose type of project (empty)

- Create a command script for ALAN response

- Embedded ALAN AI to the website - code to handle event

CHAPTER 2 THEORETICAL BASIC 2.1 MERN Stack

2.1.1 Definition

MERN Stack is a powerful combination of technologies used to createscalable master online applications that include front-end, back-end, anddatabase components This is a technology stack, a user-friendly full-stackJavaScript framework for building dynamic web pages and applications This isthe reason why it is the most preferred platform by startups

The set of incredible technologies includes MongoDB, ExpressJS, ReactJSand NodeJS

2.1.2 Components

2.1.2.1 MongoDB

MongoDB - cross platform document database, is a document database inwhich data is kept in flexible documents with a JSON (JavaScript ObjectNotation) based query language The documents' content, size, and number offields may fluctuate, indicating that the data structure may change over time.The scalability and versatility of the MongoDB framework are widely known

2.1.2.1.1. Features

- MongoDB may be shared over many servers The information isduplicated to stay the system up and keep its running condition just in case of hardwarefailure

- MongoDB setups are extremely scalable

- It allows for Master-Slave replication MongoDB uses native

applications to keep up multiple copies of knowledge

- It supports MapReduce and versatile aggregation tools

- MongoDB JavaScript works well because the database uses the

language rather than procedures

2.1.2.1.2. Advantages

- MongoDB scales dynamically in data volume and throughput Thesolution allows for enough flexibility across several data centers while keeping highconsistency

- The dynamic data model with changeable schema, as well asrobust GUI and command line tools, allows developers to quickly construct and modifyapplications

- MongoDB stores data in JSON-like documents, making data

persistence and combining simple

- Because MongoDB operates on commodity hardware, costs areconsiderably reduced The system offers pay-as-you-go on-demand pricing with yearlysubscriptions, as well as global support 24 hours a day, seven days a week

2.1.2.1.3. Disadvantages

- Unlike relational databases, MongoDB does not support joinsoperation However, one may use joins functionality by manually coding it However, itmay lead to slow execution and have an impact on performance

- MongoDB does not enable transactions in order to gain speed andscalability This makes MongoDB incredibly easy to expand horizontally, utilizing a lot ofcheap hardware to balance the load

- MongoDB maintains key names for each value pair There is alsodata redundancy owing to the lack of functionality of joins As a result, memory is beingused in ways that aren't essential

2.1.2.1.4. Reasons to use

- It makes indexing papers a breeze

- Ensure scalability by splitting huge amounts of data among severalcomputers

- Schema-less as any form of data contained in a distinct document

- Setting up a MongoDB environment is straightforward

- It has a flexible document-model that is easy to build

2.1.2.2 ExpressJS

ExpressJS that is a backend web application framework is a webapplication framework for Node.js The framework makes it easier to put inwriting server code Developers do not have to duplicate the identical codethey previously ran using the NodeJS HTTP module

The Express framework is for developing robust and scalable onlineapplications and APIs It is well-known for its high speed and easyarchitecture

2.1.2.2.1. Reasons to use

- It is asynchronous and Single-threaded

- It is quick and scalable

- It aids in code reuse by utilizing the built-in router

2.1.2.3 ReactJS

ReactJS - a library for building User interfaces, was developed byFacebook developers The library is employed for developing views inHTML Rather than using templates to automate the creation of repetitiveHTML elements, ReactJS uses a comprehensive programing language to

make repetitive DOM elements With this, users can run the identical code

on both the server and therefore the browser

The latest version of ReactJS framework is ReactJS 17.0.2 It involvesnew features, bug fixes, and new deprecation warnings to assist steel onselffor a future major release

2.1.2.3.1. Features

- A virtual DOM is a lightweight replica of the original DOM In

fact it contains all the attributes of the DOM

- One-way databinding is supported, which implies that data travels

in just one direction throughout the program This gives us more power over it

- ReactJS is a framework built on components Because componentlogic is done in JavaScript rather than templates, it is simple to transfer data through the appwhile keeping state off of the DOM

2.1.2.3.2. Facts

- ReactJS is the most popular web framework, with 74.5 percent ofdevelopers asked preferring to create with it The equivalent figure for Angular is 57.6percent, putting it in ninth place

- According to the research, ReactJS has surpassed Angular in terms

of popularity While ReactJS was favored by 31.3 percent of programmers, Angular waspreferred by 30.7 percent

2.1.2.3.3. Advantages

- Virtual DOM improves user experience and speeds up developer

work

- It depends on a virtual-DOM and re-renders just what has changed,resulting in superior performance.

- Aids in the tight binding of values or the management of local

variables versus global variables

- One-way data flow ensures that the code is stable

2.1.2.3.4. Disadvantages

- Integrating with some MVC frameworks will necessitate being

aware of the configuration modifications that must be made

- ReactJS technology is changing rapidly and growing, and we don'thave time to provide the right documentation To address this, developers create their owndocumentation for the technologies they use in their current work

- It makes use of JSX (JavaScript XML) It is a syntactic extensionthat allows us to combine HTML and JavaScript Developers and designers are not happywith the complexity of JSX and the resulting high learning curve

- Because the learning curve for developers is fairly steep, ReactJSshould not be the first one to be attempted by any new WEB developer

2.1.2.3.5. Reasons to use

- ReactJS provides components, which are essentially UI buildingblocks, with each component having its own logic The components also facilitate code reuseand make the web application easier to create and comprehend

- It is significantly quicker than other frameworks because to

features such as Virtual DOM, JSX, and Components

- Using JavaScript and ReactJS, React Native can simply write for

Android and iOS apps

2.1.2.4 NodeJS

Google Chrome provides the foundation for NodeJS, a JavaScript runtimeenvironment that has been open-sourced The framework is based onChrome's JavaScript engine It is for developing extensible networkapplications and executing JavaScript code outside the browser Works finewhen wrapping in an HTML page without using modules

NodeJS current release line is 14, which supersedes NodeJS 13 NodeJS 14will be the current release for the next six months before being upgraded toLong-term Support (LTS) in October 2020

2.1.2.4.1. Features

- Because it is built on Google Chrome's version 8 JavaScript

Engine, the NodeJS library executes code quickly

- Data is never buffered in NodeJS applications These algorithms

only generate data in pieces

- All NodeJS library APIs are asynchronous, or non-blocking Thissimply means that we don't have to wait for the NodeJS based server, API to return data

- NodeJS runs on the single-threaded architecture used by the eventloop Unlike a typical server, which has a limited number of threads to handle requests, theevent mechanism makes the server highly extensible by allowing it to respond in a non-blockingmanner

2.1.2.4.2. Advantages

- NodeJS is backed by the Google version 8 engine, which has the

ability to run JavaScript in the frontend at the same time

- It is open-source, user-friendly, and simple to use

- NodeJS can make it easier to utilize the web app and the server.This is due to the fact that we have the same code running at the server-side end as well asthe same code running in the client-side end

- NodeJS could be used to create powerful server-side applications

2.1.2.4.3. Disadvantages

- The NodeJS API or application programming interface is

constantly changing It is totally inconsistent

- With NodeJS we must create everything from scratch It can

reduce productivity and slow down our work

- NodeJS does not yet support multithreaded programming It canprovide much more complex applications than Ruby, but it is not suitable for performinglong-running calculations

2.1.2.4.4. Reasons to use

- It is compatible with the open-source JavaScript Runtime

Environment

- It features a single-threaded design

- Because it is built on Google Chrome's JavaScript Engine, NodeJSprovides rapid code execution

- It's quite extensible

2.1.3 Workflow

The MERN Stack architecture allows us to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON

Figure 1 How does MERN Stack work [8]

2.1.4 Advantages of MERN Stack

- It covers the web development cycle from front-end to back-end

- With the JavaScript stack, developers just need to be familiar with

JavaScript and JSON

- The four powerful technologies are capable of producing full-fledged

applications

- The framework includes a comprehensive set of testing tools that are built.

pre The MERN framework aids in the development of flexible and scalable

websites

- The four technologies allow for seamless interaction with cloud systems

Figure 2 MERN's processing on Front end, Back end and

database [9]

2.1.5 Business benefits to MERN Stack

- Outstanding User Experience: Any digital product's user experience iscritical to its success As far as the appearance and feel are concerned, the React Native app

is a completely responsive app

- Stability and evolution: React Native is still evolving and is supported by

a large community

- Shorter market launch time: React Native development boosts up themobile development industry in comparison to the native apps It allows companies to enterthe market more quickly

- Save money: Building a single cross-platform app is a far more effective option than developing two distinct apps for iOS and Android.

cost Save time: With React Native, we don't have to develop two distinctapplications for two different platforms Also, do not show how much time we will spendupgrading and mending them

2.2 Machine Learning

Machine learning (ML) is the study of computer algorithms that learn andimprove themselves automatically via experience and data It is regarded as acomponent of artificial intelligence

2.2.1 Basic problem in machine learning

2.2.1.1 Classification

Classification is a job that necessitates the application of machine learning algorithms to learn how to assign a class label to problem domain samples For instance, categorizing emails as "spam" or "not spam."

2.2.1.2 Regression

Regression is a technique for modeling a target value using independentpredictors This approach is commonly used for predicting and determiningthe cause-and-effect connection between variables

The amount of independent variables and the nature of link between theindependent and dependent variables are the main differences betweenregression approaches

2.2.1.3 Clustering

Clustering is a Machine Learning technique that involves the grouping ofdata points into a specific group by a particular group

In principle, data points in the same group should have comparablequalities and/or features, whereas data points in separate groups should havevery distinct properties and/or features.

2.2.2 Approaches

2.2.2.1. Supervised learning

The machine learning job of learning a function that translates an input to

an output based on example input-output pairs is known as supervisedlearning (SL) It derives a function using labeled training data, whichconsists of a collection of training samples

2.2.2.2 Unsupervised learning

Unsupervised learning (UL) is a sort of algorithm that discovers patterns

in unlabeled data The aim is that through mimicking, the machine will bedriven to construct a concise internal picture of its surroundings

In contrast to supervised learning, in which data is labeled by a human,such as "vehicle" or "fish," UL shows self-organization, which capturespatterns as neural preferences or probability densities

2.2.2.3. Semi-supervised learning

Semi-supervised learning is a method of machine learning in which alittle quantity of labeled data is combined with a large amount of unlabeleddata during training

Semi-supervised learning is a type of learning that exists betweenunsupervised learning (with no labeled training data) and supervised learning(with only labeled training data) It is an extreme case of poor supervision

2.2.2.4 Reinforcement learning

Reinforcement learning is a subfield of machine learning concerned withhow intelligent agents should behave in a given environment in order tomaximize the concept of cumulative reward

2.3 Deep Learning

Deep Learning is a branch of machine learning dealing with artificial neural

networks, which are algorithms inspired by the structure and function of the brain

Deep Learning is a stark example of this: It involves - but is not interchangeable

- the broader scope of Machine Learning This exacerbates the possibility ofcommon misunderstandings In fact, there is a similarity with the set of wooden dolls ofdecreasing size placed one inside another here: Deep Learning is inside Machine Learning,Machine Learning is in Artificial Intelligence / AI

Figure 3 Relationship between Artificial Intelligence, Machine

Learning and Deep Learning [10]

Many reasons have contributed to the growth of deep learning:

- The availability of huge labeled datasets

- The GPU's high-speed parallel processing

- The introduction of ReLU and associated triggers has restricted the vanishinggradient problem.

- Architecture enhancements such as GoogLeNet, VGG, ResNet, and transfer learning, as well as fine tuning methods

- A plethora of new regularization techniques, including dropout, batch

normalization, and data augmentation

- Several new libraries enable deep network training with GPUs, including

Theano, Caffe, Mxnet, Tensorflow, Pytorch, Keras, and more

- Numerous new optimization techniques: Adagrad, RMSProp, Adam, and so forth

2.4 Common architecture used in application

The architecture used mostly in this application is Convolutional Neural Network

2.4.2 Architecture

2.4.2.1. Convolutional layers

The layer that does all the calculations CNN uses filters to apply to areas

of the image These filter maps are a 3-dimensional matrix, which includesparameters

2.4.2.3 Fully connected layers

Fully connected layers are layers that are fully linked to each neuron inthe next layer It functions similarly to a typical multi-layer perceptron neuralnetwork (MLP) To categorize the pictures, the flattened matrix is passedthrough a fully linked layer

2.4.2.4 Receptive field

Each neuron in a neural network receives input from a number of places

in the preceding layer Each neuron in a convolutional layer gets informationfrom just a small portion of the preceding layer, known as the neuron'sreceptive field

In most cases, the area is a square (e.g 5 by 5 neurons) Of contrast, thereceptive field in a completely linked layer is the whole prior layer

2.4.2.5 Weights

In a neural network, each neuron calculates an output value by applying aspecific function to the input received from the receptive field of theprevious layer A weight vector and a bias decide the function that is applied

to the input data (typically real numbers) Iteratively changing these biasesand weights is what learning is all about

Filters are vectors of weights and biases that reflect certain characteristics

of the input CNNs are distinguished by the fact that many neurons can share

the same filter Because a single bias and a single vector of weights areutilized across all receptive fields that share that filter, the memory footprint

is reduced, as opposed to each receptive field have their own biases andweights of vectors

CHAPTER 3 CHATBOT IN DIALOGFLOW AND ALAN AI BOT

3.1 Chatbot

3.1.1 Definition

A chatbot for e-commerce gives us the ability to interact with new, existing, andpotential customers in whenever they have, which doesn't need someone tocontrol

Chatbots, like any discussion, are a two-way street with advantages for bothcompanies and users

Customers (or prospective costumes) can find information quickly, withouthaving to wait for a staff And shop can draw customers through the salesfunnel, without interacting with them directly

Chatbots leverage artificial intelligence more than any other technology, andprovide some benefits:

- Provide customer service and support

- Interact with previous customers, including shipping and return details

- Gather feedback on the customer experience

- Increase revenue by recommending similar goods

3.1.2 Types of chatbots

3.1.2.1 Simple Chatbot

Simple chatbot work based on pre-programmed keywords Developersusually use common words to program commands for the bot If a user asked anissue that failed to contain keywords, the bot won't be able to realize it and thatthey will respond with a message like: “Sorry, I did not get your question”

3.1.2.2 Smart Chatbot

Smart chatbot (contextual chatbot) works based on a combination ofNatural Language Processing, Artificial Intelligent and Machine Learning Itworks by remembering the customer’s interests and context from previousconversation This allow the chatbot to learn and grow over time, which thengive the most relevant response to the customer command

3.1.3 How does it work

Chatbot communicate with user base on a following process:

- Translator: User information/requests will be translated in programminglanguage The computer can then understand the work that needs to be done

- Processor: AI technology handles user requests

- Respondent: The computer receives the output from the AI and returns

the corresponding results to the user on the messenger platform

3.2 Dialogflow

3.2.1 Definition

Dialogflow is a natural language understanding platform that allows we toeasily create interactive user interfaces and integrate them into mobile apps,online applications, devices, robots, or interactive voice responses system, and

so on Using Dialogflow, provide new and engaging ways for users to interactwith owner’s product

Dialogflow can handle a variety of client inputs, including text and voice (forexample, phone calls and voice recordings) It can also respond to customers in

a couple of ways, either through text or with synthetic speech

3.2.2 Components

The Dialogflow agent is a virtual agent that manages end-user interaction Anatural language understanding module that subtly understands humanlanguage Dialogflow transforms end-user text or voice into structured data thatout app and service can understand during a conversation Design and configurethe Dialogflow agent to manage the types of system interaction

combination intents can handle a complete conversation Dialogflowmatches end-user expressions to the best intent in our agent when an end-user writes or says anything Intent categorization is another term formatching an intent A basic intent contains the following:

- Training phrases: These are some examples of what end consumers

could say If the end-user expression resembles one of these phrases, then Dialogflowmatches the intent Because Dialogflow's built-in machine learning extends on our list withadditional, comparable words, example does not have to be specified in every imaginablemanner

- Action: Action can be defined for each intent When the intents

match, Dialogflow can send an action to the system and use the action to activate a defined activity

system Parameters: When an intent is matched at runtime, Dialogflow

returns as an argument the value obtained from the end-user expression Each parameter has

a type called an entity type that governs how the data is extracted In contrast to raw end-userinput, parameters are structured data, which can be easily used for the execution of logic andthe creation of responses

- Responses: Defined text, speech, or visual responses to return to the

end-user These may offer responses to the end-user, request further information from theend-user, or discontinue the interaction

Figure 5 Basic flow of how intent work [5]

3.2.2.3 Entities

Each intent parameter has a type, called an entity type, that tells usexactly how to extract the data from the end-user expression

3.2.3 User interactions with integrations

Dialogflow works with a variety of common communication services,including Google Assistant, Slack, and FacebookMessenger If a businesswants to write an agent for one of these platforms, it must choose from avariety of integration possibilities Direct end-user interactions are handled,

so the shop can focus on building it agent

3.2.3.1. Fulfillment for integrations

Use “fulfillment for integrations” when using one of theintegration options When we enable fulfillment of an intent, Dialogflowresponds to that intent by calling the service it created For example, if anend user requests a haircut on Friday, the service could search thedatabase and return Friday availability information

Each intent has a context that allows it to be fulfilled If the intentrequires a system action or dynamic reaction, it should be activated as afulfillment If an intent matches with no fulfillment enabled, Dialogflowwill give us a static answer with the intent set

When a fulfillment-enabled intent is found, Dialogflow makes adetailed request to the webhook service for the matched intent Thesystem can carry out any necessary procedures and react to Dialogflowwith instructions on how to proceed The fulfillment processing sequence

is depicted in the diagram below

1 The end-user types or speaks a phrase

2 Dialogflow associates the end-user expression with an intent and

extracts parameters

3 Dialogflow sends a webhook request message to the webhookservice This message provides details about the matched intent, the action, the parameters,and the answer specified for the intent

4 The service performs actions as needed, like database queries or

external API calls

5 The service sends a webhook response message to Dialogflow.The response that should be provided to the end-user is contained in that message

6 Dialogflow sends the response to the end-user

7 The end-user sees or hears the response

Figure 6 Basic flow of fulfillment [5]

3.2.3.2 User interactions with the API

If we are sending end-user expressions and receiving intent matcheswithout using one of the integration options, use "User Interaction withAPI" The figure below depicts the processing sequence while interactingwith the API

1 The end-user types or speaks an expression.

2 The service sends this end-user expression to Dialogflow in a

detect intent request message

3 Dialogflow sends a detect intent response message to the service.This message contains information about the matched intent, the action, the parameters, andthe response defined for the intent

4 The service performs actions as needed, like database queries or

external API calls

5 The service sends a response to the end-user

6 The end-user sees or hears the response

Figure 7 Basic flow of User interaction with the API [5]

3.2.4 Data structure and flow

The entire structure and flow in this application is illustrated in the figure 8.First, inside the client, when user type something the bot will send the text to the

server Inside the server there are two routes: text query route and eventquery route Base on the action on the client the server will use thecorresponding route In this scenario, the text query route will handle the actionand then give some requests into the Dialogflow API This dialog API first takecare of the request and after dealing with all of them this will give the responseback to the server and then send back to the client

In another scenario, without typing anything, something can be triggerwith pre-defined event by using the Event query route The flow is the same asabove.

Figure 8 Entire Data strucutre and flow in chatbot

This is what the routes should look like in code

Figure 9 Text Query Route

Figure 10 Event Query Route