Year: 2021

submitted by /u/laurnicolae
[link] [comments]

submitted by /u/mrmanwhoiscool [link] [comments]

submitted by /u/YoungFimps
[link] [comments]

Expo, React native… onboarding chatbot: Part three

How onboard user, simply and efficiently.

Third part of my on boarding chatbot article. It’s gone a be hot, today ! We will put everything working together.
If you missed the first part, it’s over here !
The second part, it’s here !

In summary for the moment we have, bubbles for the chatbot and the user, animation to simulate the chatbot’s text input.
We still have to link all these components together, make them communicate.

React allows us to create contexts, to encapsulate a part of our components to make them communicate with each other.
We will share in this context a very usefull react hook : UseReducer. This hook will allow us to manage complex state logic.
Then we will modified the chatbot screen and the bubbles factory to use the state management thought his context and update the app.

Let’s start by create and initialise a UseReducer.

UseReducer

const [state, dispatch] = useReducer(ChatBotReducer, InitialChatBotState)

UseReducer takes 2 arguments :

• a reducer function (ChatBotReducer),
• initial state as input (InitialChatBotState),

This hooks will returns the current state and a dispatch function as output with array destructuring.

Too well understand the redux logic, let’s start to talk about state.

ChatBot State

UseReducer is the state management solution.

A state is immutable. It is a picture taken at a given moment. For example our this is our initial State :

export const InitialChatBotState = {
    currentAction: ChatBotStates.STATE_ONE,
    renderItem: RenderItems.CHAT_BUBBLE,
    showButton: false,
    nextAction: ChatBotStates.STATE_TWO
}

It is a object with specific properties who describe our statement.

The render item used for this state will be chat-bubble , no button and the currentAction is State One for example !

Now, we have to determine, analyse the Figma board created by the UI / UX team :

Let’s describe what we have :

• the chatbot start to write, chatbot bubbles start to be visible.
• at the end typing a button is showing,
• Click on the button (here, purple arrows are actions in figma board) and show a user bubble,
• …

the first bullet is is exactly our initialState ! that’s good !

For this article part, we won’t follow the board figma above. We will make 2 states in addition to the initial one and put them in a enumeration object :

export const ChatBotStates = Object.freeze({
    STATE_ONE: 'stateOne',
    STATE_TWO: 'stateTwo',
    STATE_THREE: 'stateThree'
})

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

Chatbot Reducer

The first argument to create a useReducer is reducer (also called a reducing function). this function will manage and centralised all those states.
Reducers calculate a new state based on the previous state and an action.

export const ChatBotReducer = (state, action) => {
switch (action.type) {
case ChatBotStates.STATE_ONE :
return {
            currentAction: action.type,
            renderItem: RenderItems.CHAT_BUBBLE,
            showButton: false,
            showModal: false,
            nextAction: ChatBotStates.STATE_TWO
        }
case ChatBotStates.STATE_TWO :
return {
            currentAction: action.type,
            renderItem: RenderItems.USER_BUBBLE,
            showButton: true,
            showModal: false,
            nextAction: ChatBotStates.STATE_THREE
        }
case ChatBotStates.STATE_THREE :
return {
            currentAction: action.type,
            renderItem: RenderItems.CHAT_BUBBLE,
            showButton: false,
            showModal: false,
            nextAction: null
}
    }
}

This is our reducer called, ChatBotReducer. We find here our 2 new states, with their own particularities. let’s dive in this reducer function.

A reducer is a function with 2 arguments :

• State which is the current state with all properties (currentAction, renderItem, etc.).
• An action is a plain object that represents an intention to change the state. Actions are the only way to get data into the store. Those actions will be dispatched by the dispatch function

We use a conditional switch / case statement to manage the states in relation to the received action.

ChatBot Context

To create our chatbot context we use createContext method form react library. this method have argument, the defaultValue, is usefull when we dont have a provider, but, in our case we will create a provider with a useReducer as value, so we set defaultValue to undefined.

const ChatBotContext = createContext(undefined)

export default ChatBotContext

export function ChatBotProvider ({ children }) {
const [state, dispatch] = useReducer(ChatBotReducer, InitialChatBotState)
const reducer = { dispatch, state, ChatBotStates }

return (
        <ChatBotContext.Provider value={{ reducer }}>
            {children}
        </ChatBotContext.Provider>
    )
}

We will use our context in a component, ChatBotProvider. This component is a wrapper, as AnimatedWrapper for the chat-typing component.

Every Context object comes with a Provider that allows consuming components to subscribe to context changes.
Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider.

As you can see, we use the userReducer inside our ChatBotProvider.

Next, we create a reducer object that includes the dispatch function, the state from the initialisation of useReducer and the list of all states. We pass this reducer object to the props value of the provider.

This way we share all the tools used to communicate between all components, chat-bubble, user-bubble, bubbles-factory, etc. Chat bot state will be available for each component wrapped in our provider.

Let’s update the main screen of our app, Chatbot !

Modify chatbot screen

const ChatBot = (props) => {
const [components, setComponents] = useState([])
const { reducer } = useContext(ChatBotContext)
const { state, dispatch } = reducer

    useEffect(() => { console.log('ChatBot - props', props) }, [])

    useEffect(() => {
// console.log('state', state)
        if (data) {
            setComponents([
                ...components,
<BubblesFactory
data={data.chatBot[state.currentAction]}
bubble={ComponentsFactory(state.renderItem)}
interval={state.renderItem === RenderItems.CHAT_BUBBLE ? 3000 : 1500}
callback={() => {
                        state.nextAction && dispatch({ type: state.nextAction })
                    }}
                />
            ])
        }
    }, [state])

return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                {components.map((component, index) => {
return (
                        <Fragment key={index}>
                            { component }
                        </Fragment>
                    )
                })}
            </ScrollView>
        </SafeAreaView>
    )
}

To access to our context we initialise a useContext hooks with a context object (ChatBotContext)

const { reducer } = useContext(ChatBotContext)

This will returns the current context value for that context, in our case, the reducer object created in the ChatBotProvider.

We will retrieve the state and the dispatch function with an array destructuring of the object reducer.

const { state, dispatch } = reducer

We will listen our state with the useEffect hooks. The state object contains all the information to update our messages list, data, bubble type to render.

To facilitate the insertion of components, I have set up a component factory :

function ComponentsFactory (type) {
switch (type) {
case RenderItems.CHAT_BUBBLE:
return <ChatBubble />
case RenderItems.USER_BUBBLE:
return <UserBubble />
case RenderItems.BUTTON:
default:
return <View />
    }
}

Modify Bubbles Factory

I have added a callback to the bubble-factory component. It is used to dispatch the next action sent by the state when there are no more messages to display in the current state.

The call back method is called in the bubbles-factory in the stopBubbles method.

End of the day !

It’s done for today, it was a hard day, understand hooks logics is not easy. i recommended you to play with the code, create your own component, state, etc.

You can find the all source code here.

Thank you for taking the time to read this article. Don’t hesitate to leave comments, ask questions, improvements, and play with the code.
The next part, will be on how to add user interactions using our reducer…

Don’t forget to give us your 👏 !

---

Expo, React native… on boarding chatbot : Part three was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

How Chatbots Can Reduce Product Return — An Extensive Guide

A recent survey suggests that almost 30% of all purchases that are made online are returned. For startups and even for stable businesses, this is too much of a percentage.¹

If your business is facing conduct of shopper behavior that indicates a return is likely, a variety of chatbots can effectively and preemptively intervene in this transaction and can prevent a return from happening.

Introduction

There are multiple ways in which chatbots can help you to reduce your product returns, and this article will take a look at some of the significant ways in which chatbots can help businesses. However, it is important to understand here that chatbot efforts must be met with equal efforts from the business operators to ensure that chatbot is able to give its maximum.

· Helping Customers in Choosing the Suitable Products

This works in multiple ways. One of the basic ways, for example, is if a buyer has viewed and checked the size guide listed on your store and has wrongfully added two of the same items in the cart. Here, a chatbot can make its intervention and help the customer to select the products of the right size.

This ensures that not only the customers are being helped to avoid the hassle but also makes sure that the returns on products remain minimal. After all, 70% of the product returns are because of the initial wrong order placed by the customers.

Furthermore, chatbots can help potential buyers in making the right choices for the products. For example, a customer has searched for sportswear from your site for football, but since the search results will show all the sportswear listed on your website, a chatbot can then help the customers by intimating them about the particular product that they are actually looking for.²

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

· Guiding Customers about Usage and Installation of the Products

One of the major reasons for product return is when customers are unable to understand how to effectively use or install the product that they have bought. Amazon says that 40% returns of its products related to the niche of electrical accessories are because of the users’ ignorance to effectively use and/or install them.

However, with chatbots, you can easily solve this problem. Almost all the modern chatbots are providing installation guidelines with the help of video tutorials and the written guidebooks. It is a big factor that can significantly reduce the return of your products, especially if you are dealing with products that need installation or the ones that require tutorials to make the most of their usage.

· Making the Return/Exchange Process more Efficient

It has to be probably one of the most underrated functions of chatbots, and it needs to be talked about more. Even the era of human live chat support couldn’t cater to the return and exchange process more efficiently than how chatbots are doing right now.

Nowadays, if a customer wants to exchange a particular product, chatbots will quickly and efficiently solve the query of the customer. This way, your store will get an exchange instead of a return, which would normally have happened without the presence of chatbots. Even the customers that come looking for returns can be effectively guided by the chatbots to rather go an exchange.

Furthermore, when the return is inevitable, chatbots make sure that it happens as soon as possible and with the least of a hassle for the customer. It ensures that not only the product is returned quickly and ready to be sold again, but also that the customer enjoys a positive support experience and considers you for future orders.

Conclusion

Apart from the reasons listed above, there are multiple other ways in which chatbots can help boom your business and reduce your returns. Modern AI-based chatbots are able to track the user data and then use the data for future references and preferences to the particular users.³

You must have experienced it yourself when you left an online cart without processing it, and you received a mail reminding you to finalize and process your order. This is an AI chatbot at its best. With the development of AI, which seems unstoppable, there will be more features added in the chatbots that would surely make them more user-friendly, and that would help customers in catering for their problems regarding orders’ returns and exchanges.

Communicating Knowledge. Saltlux

Home – Saltlux

1. https://searchcustomerexperience.techtarget.com/feature/Customer-service-chatbots-help-reduce-product-returns

2. https://www.bigcommerce.com/blog/chatbots/

3. https://chatbotsmagazine.com/how-with-the-help-of-chatbots-customer-service-costs-could-be-reduced-up-to-30-b9266a369945

Don’t forget to give us your 👏 !

---

How Chatbots Can Reduce Product Return — An Extensive Guide was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

submitted by /u/Bot-study-21
[link] [comments]

submitted by /u/greetings__mortal [link] [comments]

Each second countless amount of data is created by social media users on the internet, for instance, since 2013, the number of Tweets each minute has increased 58 % to more than 474000 Tweets per minute in 2019. Instagram users upload over 100 million photos and videos everyday. Due to this constant flow of data the internet turns out to be the best data source that can be encountered, thus being the object of numerous analysis that can be performed using artificial intelligence.

One of the most famous platforms used these days to share media content is YouTube. YouTube is the preferred way that people use to share content, on this platform it can be encounter videos about endless topics so each video can reach millions of people that can react in a variety of ways. The purpose of this post is truly worth it. since, we will learn how to use data analysis, machine learning, and data mining techniques to analyze videos on YouTube.

Knowing the inside of a website.

First things first. Before performing any analysis, we need to collect the data of interest. Performing analysis over websites can be a bit challenging since in these cases there is not a data set or formal database that can be used to perform such analysis. To perform these studies we need to extract the data directly from the website delving into the deepest parts of it, the process to navigate into the website is called web scraping.

A brief introduction to Selenium.

Selenium is a web scraping Python library that allows us to interact with websites and extract data from them using Python code. Selenium serves as an interface between Python and the website using a web browser like Firefox or Chrome as a web engine. Let’s see a simple example to get an idea about all the potential this library can unfold.

The website https://quotes.toscrape.com/ will be our target to explore the different methods we can use to extract data from this page. The page looks like this:

The goal is to obtain quotes from the website, to do that we need to understand what is behind this website, thus we should dive into the html code that structures every website on the internet. Using the developer tools that most browsers have, we can uncover the HTML and CSS code, said that, the inner structure of our website looks like this:

In the image above it is shown part of the HTML code within the website, it can be observed a kind of tree structure where each node is represented by a HTML tag. HTML tags are like keywords that define how the web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content.

The text we want to obtain is within a span tag, which has a class named “text”, the tag span and therefore the “text” class are within a div section with a class named “quote”. We can see that the class “quote” is a container for each quote on the page. Known this, we can easily infer that each quote is within a tag named “text”, which in turn is inside a div tag with a class named “quote”. Let’s use this to get the first quote with Selenium. The code is shown below.

Selenium has a class WebDriver that will allow us to interact with websites. in this particular case, we are going to use Firefox as an interface between Python and the website. By default, when you use the WebDriver class, it opens up your browser.

Preventing the browser from loading

Since we are not interested in opening the browser when the WebDriver is executed, the lines the code 4 and 5 disable this event creating an option that is passed as an argument of the WebDriver instantiation done at the line of code 7.

Trending Bot Articles:

1. How Conversational AI can Automate Customer Service

2. Automated vs Live Chats: What will the Future of Customer Service Look Like?

3. Chatbots As Medical Assistants In COVID-19 Pandemic

4. Chatbot Vs. Intelligent Virtual Assistant — What’s the difference & Why Care?

The first quote

The driver.get method will then navigate to the page given by the URL. WebDriver will wait until the page is fully loaded before returning control to the script. Finally, WebDriver offers a number of ways to find elements by using one of the find_element_by_* methods.

Since we already know the name of the class that contains the quote, we will use it using the method find_element_by_class_name(class_name) using the class name as a parameter. Then we extract the text property from the object returned by the method to obtain the quote.

“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”

Getting the rest of the quotes.

This method obtains the first quote by default, however, we are getting the first quote just because it appears in the first element with the text class. if we want to obtain all the quotes on the first page, the driver object provides a set of methods that extract all the elements on the website with the class name indicated. In this scenario, the ways to find elements would be done using the find_elements_by_* methods. Notice the plural on the word “elements”.

If we want to obtain all the quotes from the first page, it is enough to implement a for loop using the method mentioned before. For example, the code shown below will extract all the quotes from the first page.

Diving into a YouTube page video.

Try to open a YouTube video and you will notice that the website does not load the comments until you scroll down over the page. Therefore, if we try to use the previous script we will have nothing but the data referring to the video player, which is loaded when the website starts.

Using Selenium to execute JavaScript code.

Fortunately, one of the advantages of selenium is that it allows us to navigate into the website using Python code in the same way as we would with the web browser. Using the following script we can scroll down over the web page.

The key to moving through the web page is the ability of Selenium to execute JavaScript code by using the method execute_script . Consequently, we can take advantage of all the dynamic properties within a web page. Thus, the script shown above gets information about the web page, specifically, the scrollHeight property, which indicates the height of the document element.

Then, it is time to scroll down over the web page using the method window.scrollTo(0, height) . Finally, the while loop will continue scrolling down to the point where it is impossible to continue doing this, that is, the property scrollHeight will not change anymore, indicating the page is fully loaded.

The comment section.

If we look at the HTML code that generates the comment section we will see the following structure.

It can be observed that the comments are inside a structure which starts with the id “comments”, then if we continue unfolding the structure, we realize that all the comments are within a div tag that contains the id “contents”, hence each comment is identified with the classes style-scope and ytd-comment-thread-renderer

Within this section we encounter two subsections that store data about the comment. The first section is identified with the id: “comment”, the second section identified with the id “replies” stores information about the replies made on that specific comment. Since the interest holds just above the text written about the video, let us concentrate on the first section.

As we unfolded the comment section we see two new sections, the first is identified with the id “paid-comment-images” and the other with id “body”, the last one contains the information that we are looking for, so unfolding this section we encounter three subsections with ids “author-thumbnail”, “main”, and “action-menu”. The first two contain the desired information, which for this case, will be the author of the comment, its URL channel, and the comment.

Now that we have an idea about the tags that contain the information we are looking for, we can use the WebDriver object to extract the data from those tags, the following methods can be used to achieve this.

The first thing we should do is to scroll down on the website, so we the comment section can fully be loaded, then we use the method find_elements_by_id to retrieve all the elements with the id “comment”. Next, we use a for loop to iterate over each comment. Finally, we use the find_element_by_* methods to move through the HTML structure and retrieve the information that we are looking for.

Conclusions.

In this post I explore only the surface of one of the applications for which we can use Selenium, since what, unlike other frameworks for web scrapping that only allows to load the static content, Selenium can be used to interact with websites using Python code similarly to the way we would do it using a browser.

In this case I used Selenium to execute JavaScript code to move through the page and load the comment section of a YouTube video. and extract the text content from the comments. This is a very naive implementation and the script I developed was just to show the potential of this library, but the wait times and the way we extract the comment can be optimized to use for real applications.

In future posts I will show how an entire application can be developed to not only extract the text from the comments but to analyze them using natural language processing (NLP). The script can be found in the following GitHub repository.

If you want to keep in contact with me and know more about this kind of content. I invite you to follow me on Medium and check my profile on LinkedIn

References

How Much Data is Created on the Internet Each Day?

YouTube Demographics & Data to Know in 2021

Selenium with Python

Don’t forget to give us your 👏 !

---

YouTube comment analysis. Part I. was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.

submitted by /u/jorenwouters
[link] [comments]