Artificial Intelligence (AI) is a branch of computer science that creates intelligent machines to interact as humans.
The groundwork for AI was laid in the 1950s by the famous Mathematician Alan Turing with his Turing Test, also known as the imitation game. Interested fellow researchers developed the concept further, which laid down the framework and architecture for the development of AI.

The concept of AI originated in the 1950s

Website is a necessity for all business niches in the market. Consumers usually access their web page to get to know the nature of the business. The webpage is then a credible source of the business and is vital for sales revenue.
Websites make use of various AI-incorporated solutions to provide a better user experience, such as AI chatbots, voice-based search, and analytics data. AI can also be trained to dynamically change the website design layout based on a user's preferences. However, there are a few challenges to overcome.

Artificial Intelligence in website development

The development phase requires proper planning and consideration. For example, a young child can recognise an apple by someone pointing and naming the fruit a few times. From there, he would be able to recognise all sorts of apples.
But in machine learning, it takes thousands or millions of data and algorithms for the machine to identify it as an apple.

Data collection

How much data is enough. 100, 1000, 10000?
Underfitting is when the model is too simplified to know the base structure of data. It has too little information to construct an accurate training model.
Overfitting is where researchers overgeneralise and hope the machine can produce insight by the end of the training.

Underfitting or Overfitting

When dealing with large datasets with many columns and variables, feature extracting is used to divide and reduce existing data into a manageable group.
But for image processing, machines can't extract features such as edges, shapes, or even size in this way. Instead, machines see and store an image in the form of a matrix of numbers. It gets more complicated when dealing with large images and datasets and eventually leads to the Curse of Dimensionality. Instead of processing each matrix, the machine will discard some features to more accurately map in a lower-dimensional space.

Feature extraction and suitable machine learning model

<figure><img alt="XIMNET — Digital Agency — an illustration of one of the most iconic attractions in Cameron Highlands, BOH Tea Centre, Malaysia" src="https://miro.medium.com/max/500/1*95MqihCvo9wWI-iEsgAB0" width="785" height="377"><figcaption class="dw dx dc da db dy dz ce b ea cg eb" data-selectable-paragraph="" dir="ltr">An illustration of <a href="https://en.wikipedia.org/wiki/BOH_Plantations" class="ck ec" rel="noopener ugc nofollow" dir="ltr">BOH Tea Centre, Cameron Highlands, Malaysia</a></figcaption></figure><h1 data-selectable-paragraph="">Background</h1>Artificial Intelligence, AI is a branch of computer science that creates intelligent machines to behave, learn or even think like an actual human being. Back in the 1950s, <a href="https://en.wikipedia.org/wiki/Turing_test" rel="noopener ugc nofollow" dir="ltr">Turing Test</a>, or formerly known as the imitation game was introduced by famous Mathematician Alan Turing, which allow the world to catch a glimpse of how a machine can demonstrate human intelligence. The concept attracted fellow researchers to lay down the framework and architecture of this academic exploration, which leads to a <a href="https://economictimes.indiatimes.com/tech/ites/the-rise-of-machines-timeline-of-the-evolution-of-artificial-intelligence/first-what-is-the-big-fuss-really/slideshow/77198656.cms" rel="noopener ugc nofollow" dir="ltr">series of promising development</a> in the AI field.1996: Eliza, developed by MIT’s Artificial Intelligence Lab, the first-ever natural language processing chatbot1997: IBM’s Deep Blue computer defeated chess champion Garry Kasparov2011: IBM’s Watson which beating everyone in the Jeopardy TV game show2018: Google spinoff Waymo introduces self-driving taxi service which allows users to be driven around without a driver2020: San-Francisco-based Open AI stunned everyone with its AI language model GPT-3 able to pen fiction, compose poetry and write business memos all without human intervention<figure><img alt="" src="https://miro.medium.com/max/500/1*dAlwXfVrtYspdCzmC8iAD" width="680" height="328"><figcaption dir="auto">Big Data Jobs</figcaption></figure><h2 data-selectable-paragraph="">Artificial Intelligence in website development</h2>Website is mandatory for all business niches in the market, ranging from SMEs to big corporations. On top of that, the consumer normally gets to know the nature of the business by accessing their web page, thanks to the high-speed internet that we currently have. Therefore, a webpage indirectly decides the business credibility which is as important as compared to the sales revenue. An innovative web page is a must to improve the overall user experience.Various AI-incorporated solutions can be seen in websites, such as AI chatbots with better reply predictions, voice-based search to provide better accessibility to the product list, and analytics data which allow business owners to understand their consumer intention which contributes to the overall marketing strategy.<h2 data-selectable-paragraph="">Using machines to differentiate website designs like human</h2>Aside from the example mentioned earlier, an AI-powered dynamic website is also one of the upcoming trends to provide a better user experience. This is achieved by personalizing content aligned with the user’s interest, and dynamically changing the website design layout based on what the specific user prefers or normally searches for when visiting a page.The logic is using machines and AI to learn different types of available web page templates and design, then dynamically display different website layouts to different user categories. This requires machines to be trained how to see like humans in web template and layout design context.For example, user group A prefers website template A, and user group B prefers website template B. AI machines being trained with a large number of different website templates can cluster and display distinct web page layouts for each user group. Sounds simple but how do we get machines to view visuals and layout patterns like humans? There are a few challenges to overcome before able to achieve this.<h1 data-selectable-paragraph="">Common Challenges</h1><h2 data-selectable-paragraph="" dir="ltr">1. Data Collection</h2><figure><img alt="" src="https://miro.medium.com/max/500/1*oTsFrFNywgcUqto8qpyKTQ" width="680" height="452"><figcaption dir="auto">Preprocessing and preparation of data is always an important but time-consuming stage.</figcaption></figure>To kick start the development phase, proper planning and consideration should be given to the data collection phase. Taking an example of a child, for him to recognize an apple for the first time, all you need to do is to point to it and tell him the name of the fruit a few times, then he would eventually recognize all sorts of apples with different size. However, it is not that straightforward for machine learning. It takes up to thousands or millions of data and algorithms for the machine to identify it is an apple.For the machine to recognize different page templates, there are two key data categories that we are interested in, namely the page screenshot in image form and elements position in JavaScript Object Notation (JSON) format. Next, we would need to decide how many web pages are we targeting as the input. For our case, we started with 1000 pages that are built from our content management system, <a href="https://www.xtopia.io/" rel="noopener ugc nofollow" dir="ltr">XTOPIA</a>.Then triple the datasets by varying the viewport size of the page, which includes desktop, tablet, and mobile view. Since this process would require a huge amount of manual work to complete the collection task, we decided to build an engine based on JavaScript and Python, with <a href="https://www.electronjs.org/" rel="noopener ugc nofollow" dir="ltr">Electron</a> to automate the task.<figure><img alt="" src="https://miro.medium.com/max/500/1*AVPGH_SemyQ7O8Iw0GPTng.png" width="168" height="500"><figcaption dir="auto">An example of wireframe generated (with different colors of boxes representing different elements) to compare with the real page.</figcaption></figure>However, the automation of the data collection mustn’t compromise the quality of the data collected. The page screenshots generated need to be a valid image file that clearly shows each element, whereas the JSON file needs to be cross-checked with the page for accuracy. To achieve this, we had generated wireframes (without context) of the page by using the JSON data just to crosscheck with the original page if it looks similar. By ticking off these items from the checklist, the quality of the data provided for machine learning is then assured.<h2 data-selectable-paragraph="">2. Underfitting or Overfitting</h2><figure><img alt="" src="https://miro.medium.com/max/500/1*UCd6KrmBxpzUpWt3bnoKEA.png" width="680" height="279"><figcaption class="dw dx dc da db dy dz ce b ea cg eb" data-selectable-paragraph="" dir="ltr">A simple illustration of underfitting and overfitting by <a href="https://www.geeksforgeeks.org/underfitting-and-overfitting-in-machine-learning/" class="ck ec" rel="noopener ugc nofollow" dir="ltr">Geeks for Geeks tutorial</a>.</figcaption></figure>One might ask, how much data is considered enough. 100, 1000, or 10000? Underfitting occurs when the model is too simplified to understand the base structure of data, having less information to construct an accurate training model which in layman’s terms, tries to fit in undersized pants. One of the key actions that we take is that we removed the header and footer elements while capturing page screenshot and JSON data, as we considered it as noise substantially. Other options to rectify this issue are by feeding better features to the learning algorithm or selecting an alternative or better model.On the other hand, overfitting is the complete opposite scenario, where researchers tend to overgeneralize. A simple machine learning example is when you are trying to recognize three different fruits: A, B, and C, where 3 different data size is fed into the AI model: 5000, 500, and 500. Fruit B and C will be more likely to be recognized as the training sample for fruit A is too high (Supervised Learning). This would be less applicable in this context as we have zero knowledge on how many types of page templates are from the 1000 x 3 pages that we fed in the model, hoping the machine can produce insight by the end of the training (Unsupervised Learning).<h2 data-selectable-paragraph="">3. Feature extraction and suitable machine learning model</h2><figure><img alt="" src="https://miro.medium.com/max/500/1*LG3fd9N5j-4wTthNa6mfLQ.png" width="680" height="316"><figcaption class="dw dx dc da db dy dz ce b ea cg eb" data-selectable-paragraph="" dir="ltr">Illustration by <a href="https://ieeexplore.ieee.org/document/7812925" class="ck ec" rel="noopener ugc nofollow" dir="ltr">Nina S. T. Hirata</a> on the feature extraction process</figcaption></figure>Feature extraction is a common term in the machine learning field. When dealing with large datasets with high dimensionality (a large amount of columns and variables), feature extraction is important to further divide and reduce the existing data into a manageable group. It involves getting the features that the researchers deemed suitable and combining them while retaining the originality of the data. This can help to overcome the limitation of computing resources when dealing with millions of data rows and columns. This is useful for dealing with numerical data, categorical data, or even text.However, for image processing with machines, it is not possible to extract features such as edges, shapes, or even size in such a way. Machines do not see images like how humans do. Generally, humans view an image as an illustration with colors and shapes, but machines view and store an image in the form of a matrix of numbers. Things got complicated when you are dealing with large images and large datasets. This will eventually lead the study to the infamous problem, <a href="https://en.wikipedia.org/wiki/Curse_of_dimensionality#:~:text=The%20expression%20was%20coined%20by,learning%2C%20data%20mining%20and%20databases." rel="noopener ugc nofollow" dir="ltr">Curse of Dimensionality</a>. Instead of processing each matrix, the machine begins discarding some features to compensate for a more accurate mapping in lower-dimensional space, thus explaining why most machine learning research faces an obstacle of machine learning models performing exceptionally poorly when dealing with images.We approached this by resizing uneven page sizes ( different viewport sizes) into a fixed dimension for example 224 x 224. This allows the machine to convert smaller image sizes to lower dimensions data. However, this leads to another problem, where large web page length (1366 x 10500) or even infinite scrolling pages would resize to a very small scale comparably to their original dimensions. We humans of course are unable to interpret the features (colors, sizes, shapes) of the pages but the question remains: Can machines still be able to extract any useful information from these resized pages?<h2 data-selectable-paragraph="">4. Results</h2><figure><img alt="Researches tend to end up questioning the integrity and accuracy of result produced by machine learning" src="https://miro.medium.com/max/500/1*X5BDxGoXk0sbOyPb0qW1oQ.png" width="680" height="510"><figcaption class="dw dx dc da db dy dz ce b ea cg eb" data-selectable-paragraph="" dir="ltr">Researches tend to end up questioning the integrity and accuracy of the result produced by machine learning. An illustration by <a href="https://dribbble.com/alzer81" class="ck ec" rel="noopener ugc nofollow" dir="ltr">Al Power™</a>.</figcaption></figure>One might ask, how do we determine which machine learning model to use? There are a wide variety of pre-trained deep learning models for image processing study, for example, VGG-16, ResNet, Inception, and many more. Each machine learning model has its characteristics and parameter which may suit your application. You may find out more from the deep learning API, <a href="https://keras.io/api/applications/" rel="noopener ugc nofollow" dir="ltr">Keras</a>.It is quite common and more convenient for image classifications project to use pre-trained models like this because they are built based on the largest available image library datasets such as ImageNet, which is most likely similar to your project needs.However, the problem lies after the machine performs its extensive training and generates the result, how do we decide if the results are accurate? Machine learning for numerical/categorical data (Supervised Learning) often requires the preparation of another smaller set of data to be labeled (validation data), which intends to determine the accuracy of the results. This is acceptable as the researchers already identify what class to expect from the data. But for our case, we have zero knowledge on how many template categories are there among the datasets. Hence such Unsupervised Learning can only rely on interpreting the results manually to determine the relevance of the outcome.Nevertheless, it is always tedious to weigh in on the results as a team as everyone has a different perspective, hence causing the results to be abstract, opinionated, and giving rise to <a href="https://searchenterpriseai.techtarget.com/definition/machine-learning-bias-algorithm-bias-or-AI-bias#:~:text=Machine%20learning%20bias%2C%20also%20sometimes,in%20the%20machine%20learning%20process." rel="noopener ugc nofollow" dir="ltr">Machine Bias</a> phenomenon.Some might argue that it might be reasonable for designers to be involved in the data collection stage to identify the page template categories first which then converts the whole study to supervised learning. However, this would consume a large amount of manpower and time. Furthermore, such a study would end up specifying rules for the machine instead of allowing the deep learning neural network to learn and figure out the distinctive features from the image matrix.Eventually, this situation would lose the original intention of allowing AI to recommend and display content with different layout designs to users.<h1 data-selectable-paragraph="">Conclusion</h1>With all said, it is still believable that machines can improve and evolve to be as similar as to how a human would behave or think in the future. We should not underestimate what AI can bring to the web industry, as we understand there are still many uncharted areas waiting to be discovered.By continuing and contributing to the efforts that had been made by fellow researchers previously, we would anticipate a more refreshing and innovative user experience in the coming years.If you are interested to read more about image processing and classification, here are some resources which we find useful:

While there are still challenges with Artificial Intelligence, we should not underestimate what AI can do. We know there are still many uncharted areas to be discovered in the coming years. 

Artificial Intelligence, AI is a branch of computer science that creates intelligent machines to behave, learn or even think like an actual human being. Back in the 1950s, Turing Test, or formerly…

Stashed ideas

Artificial Intelligence, AI is a branch of computer science that creates intelligent machines to behave, learn or even think like an actual human being. Back in the 1950s, <a href="https://en.wikipedia.org/wiki/Turing_test">Turing Test </a>, or formerly known as the imitation game was introduced by famous Mathematician Alan Turing, which allow the world to catch a glimpse of how a machine can demonstrate human intelligence. The concept attracted fellow researchers to lay down the framework and architecture of this academic exploration, which leads to a <a href="https://economictimes.indiatimes.com/tech/ites/the-rise-of-machines-timeline-of-the-evolution-of-artificial-intelligence/first-what-is-the-big-fuss-really/slideshow/77198656.cms">series of promising development </a>in the AI field.

1996: Eliza, developed by MIT’s Artificial Intelligence Lab, the first-ever natural language processing chatbot

1997: IBM’s Deep Blue computer defeated chess champion Garry Kasparov

2011: IBM’s Watson which beating everyone in the Jeopardy TV game show

2018: Google spinoff Waymo introduces self-driving taxi service which allows users to be driven around without a driver

2020: San-Francisco-based Open AI stunned everyone with its AI language model GPT-3 able to pen fiction, compose poetry and write business memos all without human intervention

Website is mandatory for all business niches in the market, ranging from SMEs to big corporations. On top of that, the consumer normally gets to know the nature of the business by accessing their web page, thanks to the high-speed internet that we currently have. Therefore, a webpage indirectly decides the business credibility which is as important as compared to the sales revenue. An innovative web page is a must to improve the overall user experience.

Various AI-incorporated solutions can be seen in websites, such as AI chatbots with better reply predictions, voice-based search to provide better accessibility to the product list, and analytics data which allow business owners to understand their consumer intention which contributes to the overall marketing strategy.

Using machines to differentiate website designs like human

Aside from the example mentioned earlier, an AI-powered dynamic website is also one of the upcoming trends to provide a better user experience. This is achieved by personalizing content aligned with the user’s interest, and dynamically changing the website design layout based on what the specific user prefers or normally searches for when visiting a page.

The logic is using machines and AI to learn different types of available web page templates and design, then dynamically display different website layouts to different user categories. This requires machines to be trained how to see like humans in web template and layout design context.

For example, user group A prefers website template A, and user group B prefers website template B. AI machines being trained with a large number of different website templates can cluster and display distinct web page layouts for each user group. Sounds simple but how do we get machines to view visuals and layout patterns like humans? There are a few challenges to overcome before able to achieve this.

To kick start the development phase, proper planning and consideration should be given to the data collection phase. Taking an example of a child, for him to recognize an apple for the first time, all you need to do is to point to it and tell him the name of the fruit a few times, then he would eventually recognize all sorts of apples with different size. However, it is not that straightforward for machine learning. It takes up to thousands or millions of data and algorithms for the machine to identify it is an apple.

For the machine to recognize different page templates, there are two key data categories that we are interested in, namely the page screenshot in image form and elements position in JavaScript Object Notation (JSON) format. Next, we would need to decide how many web pages are we targeting as the input. For our case, we started with 1000 pages that are built from our content management system, <a href="https://www.xtopia.io/">XTOPIA </a>.

Then triple the datasets by varying the viewport size of the page, which includes desktop, tablet, and mobile view. Since this process would require a huge amount of manual work to complete the collection task, we decided to build an engine based on JavaScript and Python, with <a href="https://www.electronjs.org/">Electron </a>to automate the task.

However, the automation of the data collection mustn’t compromise the quality of the data collected. The page screenshots generated need to be a valid image file that clearly shows each element, whereas the JSON file needs to be cross-checked with the page for accuracy. To achieve this, we had generated wireframes (without context) of the page by using the JSON data just to crosscheck with the original page if it looks similar. By ticking off these items from the checklist, the quality of the data provided for machine learning is then assured.

One might ask, how much data is considered enough. 100, 1000, or 10000? Underfitting occurs when the model is too simplified to understand the base structure of data, having less information to construct an accurate training model which in layman’s terms, tries to fit in undersized pants. One of the key actions that we take is that we removed the header and footer elements while capturing page screenshot and JSON data, as we considered it as noise substantially. Other options to rectify this issue are by feeding better features to the learning algorithm or selecting an alternative or better model.

On the other hand, overfitting is the complete opposite scenario, where researchers tend to overgeneralize. A simple machine learning example is when you are trying to recognize three different fruits: A, B, and C, where 3 different data size is fed into the AI model: 5000, 500, and 500. Fruit B and C will be more likely to be recognized as the training sample for fruit A is too high (Supervised Learning). This would be less applicable in this context as we have zero knowledge on how many types of page templates are from the 1000 x 3 pages that we fed in the model, hoping the machine can produce insight by the end of the training (Unsupervised Learning).

3. Feature extraction and suitable machine learning model

Feature extraction is a common term in the machine learning field. When dealing with large datasets with high dimensionality (a large amount of columns and variables), feature extraction is important to further divide and reduce the existing data into a manageable group. It involves getting the features that the researchers deemed suitable and combining them while retaining the originality of the data. This can help to overcome the limitation of computing resources when dealing with millions of data rows and columns. This is useful for dealing with numerical data, categorical data, or even text.

However, for image processing with machines, it is not possible to extract features such as edges, shapes, or even size in such a way. Machines do not see images like how humans do. Generally, humans view an image as an illustration with colors and shapes, but machines view and store an image in the form of a matrix of numbers. Things got complicated when you are dealing with large images and large datasets. This will eventually lead the study to the infamous problem, <a href="https://en.wikipedia.org/wiki/Curse_of_dimensionality#:~:text=The%20expression%20was%20coined%20by,learning%2C%20data%20mining%20and%20databases.">Curse of Dimensionality </a>. Instead of processing each matrix, the machine begins discarding some features to compensate for a more accurate mapping in lower-dimensional space, thus explaining why most machine learning research faces an obstacle of machine learning models performing exceptionally poorly when dealing with images.

We approached this by resizing uneven page sizes ( different viewport sizes) into a fixed dimension for example 224 x 224. This allows the machine to convert smaller image sizes to lower dimensions data. However, this leads to another problem, where large web page length (1366 x 10500) or even infinite scrolling pages would resize to a very small scale comparably to their original dimensions. We humans of course are unable to interpret the features (colors, sizes, shapes) of the pages but the question remains: Can machines still be able to extract any useful information from these resized pages?

One might ask, how do we determine which machine learning model to use? There are a wide variety of pre-trained deep learning models for image processing study, for example, VGG-16, ResNet, Inception, and many more. Each machine learning model has its characteristics and parameter which may suit your application. You may find out more from the deep learning API, <a href="https://keras.io/api/applications/">Keras </a>.

It is quite common and more convenient for image classifications project to use pre-trained models like this because they are built based on the largest available image library datasets such as ImageNet, which is most likely similar to your project needs.

However, the problem lies after the machine performs its extensive training and generates the result, how do we decide if the results are accurate? Machine learning for numerical/categorical data (Supervised Learning) often requires the preparation of another smaller set of data to be labeled (validation data), which intends to determine the accuracy of the results. This is acceptable as the researchers already identify what class to expect from the data. But for our case, we have zero knowledge on how many template categories are there among the datasets. Hence such Unsupervised Learning can only rely on interpreting the results manually to determine the relevance of the outcome.

Nevertheless, it is always tedious to weigh in on the results as a team as everyone has a different perspective, hence causing the results to be abstract, opinionated, and giving rise to <a href="https://searchenterpriseai.techtarget.com/definition/machine-learning-bias-algorithm-bias-or-AI-bias#:~:text=Machine%20learning%20bias%2C%20also%20sometimes,in%20the%20machine%20learning%20process.">Machine Bias </a>phenomenon.

Some might argue that it might be reasonable for designers to be involved in the data collection stage to identify the page template categories first which then converts the whole study to supervised learning. However, this would consume a large amount of manpower and time. Furthermore, such a study would end up specifying rules for the machine instead of allowing the deep learning neural network to learn and figure out the distinctive features from the image matrix.

Eventually, this situation would lose the original intention of allowing AI to recommend and display content with different layout designs to users.

With all said, it is still believable that machines can improve and evolve to be as similar as to how a human would behave or think in the future. We should not underestimate what AI can bring to the web industry, as we understand there are still many uncharted areas waiting to be discovered.

By continuing and contributing to the efforts that had been made by fellow researchers previously, we would anticipate a more refreshing and innovative user experience in the coming years.

If you are interested to read more about image processing and classification, here are some resources which we find useful:

Bite-sized knowledge
to upgrade
your career

The challenges in teaching machines to see like humans

The concept of AI originated in the 1950s

Artificial Intelligence in website development

Data collection

Underfitting or Overfitting

Feature extraction and suitable machine learning model

IDEAS ABOUT

MORE LIKE THIS

𝐅𝐮𝐭𝐮𝐫𝐞 𝐨𝐟 𝐀𝐈: 𝟕 𝐖𝐚𝐲𝐬 𝐀𝐫𝐭𝐢𝐟𝐢𝐜𝐢𝐚𝐥 𝐈𝐧𝐭𝐞𝐥𝐥𝐢𝐠𝐞𝐧𝐜𝐞 𝐂𝐡𝐚𝐧𝐠𝐞𝐬 𝐓𝐡𝐞 𝐖𝐨𝐫𝐥𝐝

How to Use Massive AI Models (Like GPT-3) in Your Startup

How to Use Massive AI Models (Like GPT-3) in Your Startup

It's time to

READ

LIKE

A PRO!

Bite-sized knowledgeto upgradeyour career

The challenges in teaching machines to see like humans

The concept of AI originated in the 1950s

Artificial Intelligence in website development

Data collection

Underfitting or Overfitting

Feature extraction and suitable machine learning model

IDEAS ABOUT

MORE LIKE THIS

𝐅𝐮𝐭𝐮𝐫𝐞 𝐨𝐟 𝐀𝐈: 𝟕 𝐖𝐚𝐲𝐬 𝐀𝐫𝐭𝐢𝐟𝐢𝐜𝐢𝐚𝐥 𝐈𝐧𝐭𝐞𝐥𝐥𝐢𝐠𝐞𝐧𝐜𝐞 𝐂𝐡𝐚𝐧𝐠𝐞𝐬 𝐓𝐡𝐞 𝐖𝐨𝐫𝐥𝐝

How to Use Massive AI Models (Like GPT-3) in Your Startup

How to Use Massive AI Models (Like GPT-3) in Your Startup

It's time to

READ

LIKE

A PRO!

Bite-sized knowledge
to upgrade
your career