Unhealthy skin analyzer for mobile platform using Canny Edge Detection and Similarity Score

The increasing use of mobile platforms for detecting a disease challenge the researcher for designing a more efficient application than previously. Skin diseases can be recognized visually by an expert. However, the diseases are often ignored, especially by they who live in the remote area. For this reason, it requires a system worked solely independent of medic expert through a simple device like a smartphone. The study designs a system for detecting the healthiness of skin through its image. The proposed design is the improved model of the previously published work. The system requires suspected unhealthy and reference images. Both images will be compared after passing the edge process. The result is displayed on the platform containing a suggestion for the user to have medical treatment. For detecting the skin diseases accurately, an adjustment in the edge process and comparing process (similarity check) is required. Based on the experiment, a suitable threshold for edge detection are 0 for low and 50 for high. Regarding the edge process, a suitable similarity threshold will be estimated. The similarity threshold that suits to the designed application is 6. Lastly, the decision making to determine the healthiness of an image is 45.35%.


Introduction
Image processing now plays an essential role in the new design system, and this technique is used everywhere. In the early study, Fourier was used to transforming information to non-time domain due to difficulties in processing it the limited time frames. As the processor speed boost up quickly the processing becoming faster and capable of performing the large image quickly in a simple embedded device. Nowadays, mobile devices like PC tablets and smartphone are replacing the powerful and expensive desktop computer. The later even now owned more than one by a person [1,2].
In medical application, many testing tools have been produced. They tend to reduce the function or assist the paramedic. Therefore, the increasing use of mobile platforms for detecting a disease challenge the researcher for designing a more efficient application than before.
Some studies in designing mobile platform for medical purposes have been developed for several decades. The use of edge detection technique in the mobile-based for medical treatment has become quite common. For example, in 2011, research aimed to reduce the use of biopsy function as Melanoma diagnostic was conducted. The idea may be useful for them in healing precancerous skin [3]. Later in 2016, an algorithm used for determining edges of internal organs was proposed. The author claimed that the idea based on removing speckle noise proved to be successfully implemented [4].
The neural network was used to detect skin disease. The authors tried to utilize two images of skin disease, which are Basel Cell Carcinoma and Skin Angioma [5]. A method for detecting the skin abnormality by exploring the distinction of patches and the construction of sparse neighborhood net pixels was introduced [6]. Later, a method for detecting Psoriatic plaque is published. However, the idea that implemented using Semi-Wrapped Gaussian Mixture Model (SWGMM) is less successful due to the limited problem [7]. In 2015, Bliznuks et al. created a mobile application for online skin optical images. The idea was implemented with the help of online Matlab server [8].
On the other hand, in comparing among images, the use of similarity technique becoming quite common. For medical purposes, especially in the application that requires comparing technique, it would be helpful to utilize the property similarity checking. The new idea is the use of a smartphone for detecting skin abnormality [9]. They involve partially edge detection technique to convert the images (suspected unhealthy and healthy images). The processed images were compared their similarity using a statistical parameter (mean). At the beginning of their study, a method for distinguishing skin image against others was proposed.
From some of these studies, it can be concluded that the detection of skin diseases is becoming a more serious effort. Therefore, it requires a technique or other application that able to analyze skin diseases quickly without the help of paramedics directly. Such application has been introduced recently using Canny edge detection [9]. This study intends to improve the latest proposed design [10] using a better comparison technique. This study aims to implement the similarity score technique in decision making for determining whether a suspected image is unhealthy or not.
This study proposes an Android application or software for detecting the abnormality of skin base on image running on mobile phones. This application will compare two images where the first image is a skin image in a (suspected) unhealthy area, while the second image is a skin image taken from the area around the unhealthy skin. Both images will be processed with edge detection based on a Canny algorithm. The results of the edge analysis of both images are compared to find the equality level. If both images are different, then it is concluded that the analyzed skin is unhealthy. Meanwhile, conversely when the similarity level is low, it is concluded that the suspected skin is healthy.

Mobile platform design
In the earlier design [9], the study excludes the image skin detection. Therefore, any image can be uploaded into the system cause unreliable result. The system is designed to accept only skin image. In this study, the platform has been included for better accuracy in prediction the healthiness of the skin. When a not skin image uploaded to the system, it will not process, and a message is a pop up to notify the user. The distinctive characteristics of the skin image are derived basically from statistical analyzes [11] and higher moment statistical [10].
The proposed design is developed from the previous study [9] with the addition of skin image detection. Figure 1 views a block diagram of the proposed platform design. Two images are required to run the application. The first image should be captured from the skin area suspected unhealthy. Meanwhile, the second picture has to be from the neighboring area of suspected skin. These images will then processed to determine whether they are going to pass to the next block or not. In case one or both image is not meet the requirement, the system will notify the user to upload another image.
The images are then recognized as unhealthy or reference image. After that, both images are converted to 2D grayscale format as per the Canny edge detection requirement. The resulted edged images are now ready to compare. The resulted Canny edged image is in binary format (the entire matrix contains '1' or '0'). Until this stage, both images do not have to be equal size. However, for the similarity check, the system will only compare the same area of both images. The compared area is defined to be equal to the smaller image [12].

Canny edge algorithm
The Canny algorithm is one of the widespread use of edge detection nowadays. However, the study did not investigate which edge detection system suit more with the proposed system yet. The Canny algorithm used for detecting the edge of an image can be classified into five stages as follows [13]. First. The Gaussian filter is applied for smoothing the image aim to remove the noise. Second, the calculation for determining the intensity gradient of an image. Third, a non-maximum suppression technique is applied to eliminate false response. Four, low and high threshold are applied to the processed image. Five, a sted to track edge with hysteresis to press all weak sides and not connected to the sharp edges.
The Canny edge detection technique algorithm contains some adjustable parameters. The changes in them will affect the estimation period and the effectiveness of the algorithm. The only thing to do is the size of the Gaussian filter. The suitable filter may significantly affect the edge detection results. The result will be slightly blurred whenever the filter is quite small. Conversely, if the filter used is too big, it will cause more blur image. Another commonly used adjustment is the two thresholds. However, the determination of the threshold still determines the quality of the outcome. A high threshold may cause missing valuable information, while a low threshold will lead to misidentification [14].

Similarity score
Similarity algorithms often use to compare two or more images to find the level of similarity. Many algorithms have been proposed for this purpose [15,16]. One of them detects the similarity level by comparing specific particular small location between two images [17]. Figure 2 shows an illustration of the comparison process between two images. The particular location usually contains only 3x3 or 4x4 pixels. Choosing a smaller area is not recommended because loosing of its detail leads to failing in detect the similarity. However, when a wider location is used caused difficulty in finding a suitable threshold. For a grayscale image, a comparison can be made using the mean or median of the area at the same location of both images. However, for a binary image, the comparing process can be done using mean only. The system will check all 3x3 pixels locations of both images. Therefore, the images should be of equal size. In the real application, the user allows uploading any unequal size image. Hence, the proposed design equipped with a selection of the same area. The rest will not be included in the checking process.

Graphical user interface
The design was created using the latest version of Android Studio. The opening page showing application information is not discussed here. Figure 3 view the main page in the mobile platform based on Android and iOS. In the page, the name of the application name is placed on the top. Two spaces preserve for displaying the suspected unhealthy image (upside) dan the reference image or the image is taken from the neighbor suspected image. Each image can be uploaded by pressing the SELECT button. Images can be captured using an attached mobile camera, or it also allows to include from the library either local or online. In order to prevent the user from uploading the wrong image, the clues were written just below the image. However, the design in this paper did not prevent it yet. The system may work well, but the displayed image on the decision page is from healthy skin. Anytime the user press the analyze button, the process will begin, and the next page will be showing up.

Figure 3
Display of the main page for uploading the suspected unhealthy and reference images Figure 4 shows the design of the final page or decision page. Before the system showing this page, there is another page showed at a glance. However, the page is no a significant effect in this design, just displaying the edges images and not interactable. The decision page was designed to show information regarding the result of analyzing the suspected unhealthy skin image. Whenever the submitted image is taken from an unhealthy skin, the application will show the text "Your skin probably unhealthy, please have a medical treatment". However, if in case the image uploaded is captured from the healthy skin, the system will show "Your skin is healthy, however, you may visit your Doctor." The detection process may be repeated endlessly by pressing the REPEAT button located at the bottom of the page.

Decision making
The core of the idea is how to determine whether an image was healthy or not. In this study, two parameters, which are the threshold of Canny edge detection and the similarity score of two-edged images, will be adjusted to find the best value.
Finding the best threshold of Canny process, it requires an experiment to analyze the influence of threshold changes to the skin images. The Canny method provides a flexible choice of processing parameters. The process can be employed without providing external (given) threshold. The system will calculate the suitable threshold for the image. This mean Canny will apply a different threshold for different images. The study will use the Canny method for finding the average threshold of both low and high of a series of skin images.
After that, a new experiment using the new threshold will be conducted to extract the edges. A set of unhealthy skin image and their compared images will be processed. The resulted edged binary images will be analyzed to determine their equality level. The value next is going to use for decision making for determining the healthiness of the skin. However, a straight forward technique will not work since the similarity scores vary for different skin images. Therefore, again, here is required to find the suitable (compromise) score that can be used to analyze all skin images.

Result and discussions
This paper analyzes twenty (20) suspected skin images and their compared images for analyzing the suitable threshold and similarity score. All prepared suspected images are formatted to JPG format of 100 x 100 pixels. The comparing images are captured from the healthy skin around the unhealthy skin. When the designed platform is implemented, the system also allows various image sizes and the file format beside JPG.

Canny edge threshold
One of the advantages of using the Canny method is that the user does not have to provide both low and high thresholds. The method will determine the suitable low and high thresholds base on the analyzed image. However, the calculated threshold may not fit specific purposes; in this case, the designer needs to estimate the thresholds. This paper initially determines the threshold based on the Canny Matlab calculated thresholds. In Canny, the threshold is between 0 and 1. Figure 5 shows four of twenty analyzed images. The images were cropped to fit the specific suspected unhealthy skin area. The images also captured from different skin color. Those images are then analyzed using the Canny edge detection method to find suitable double thresholds. Every time the new image was provided, the Canny assign different threshold values.  Figure 5 Four of twenty suspected unhealthy skin images Figure 6 views the resulted in low and high thresholds after Canny edge process. The Canny method accepts 2D grayscale image only. Therefore, the images were converted to grayscale before passing to the edge detector. From the figure, it can be seen that both either low and high thresholds are varied. For the low threshold, the values span from 0.05 to 0.13125. Similarly, for the high threshold, the value varies from 0.125 to 0.328125. The ranges of both resulted thresholds are a bit overlap, and the maximum low threshold is higher than the high minimum threshold. However, the values can be accepted since they resulted from different images.
The minimum range of the threshold is 0.075, which is quite narrow compare than its average value of 0.130313. This narrow indicates that the color of the image is more uniform than others. In this case, it will be difficult in determining the healthiness of the skin. Based on the Canny calculated threshold, the study is also going to estimate the suitable Canny thresholds for Mobile application. The platform was designed using OpenCV package in detecting edges. However, define thresholds are different compared to Matlab ones. The threshold range, which is between 0 and 255 is no connection with Matlab define. Therefore, the study estimates the threshold based on the experiment result that able to distinguish the suspect and healthy skin images. The study found two sets that maybe suit for designed application. The first one is to use low and high thresholds of 0 and 50, respectively. The second one is to use a higher high threshold which is 100 keeping similar low threshold.

Figure 6
Canny calculated thresholds of 20 suspected unhealthy skin images

Similarity analysis
This study utilizes the similarity score for identifying the healthiness of a skin based on its image. The idea is to compare between images of the suspect unhealthy skin dan healthy skin. The suspect skin should be cropped to localize the area of suspected unhealthy skin. The compared image should be captured in the nearest area of suspected skin. The captured image is aimed to provide an equal background to the image of the suspected. After edge processing using the Canny method, the images are then ready to be analyzed. Two images, as per Canny result in binary form, will be compared based on a localized area of (3x3) pixels. The amount of equal bit between two images is used to determine the similarity score. The similarity score is calculated based on equation (1) to extract percentage equality between two compared images.
where Ls refers to the number of comparisons that pass the similarity threshold (Th), and Sc is the number of comparisons that have been made. The similarity threshold is the set number to define whether an area ( pixels) are equal. Whenever the number of same bits is equal or higher than the similarity threshold, then the area is defined to be similar. The number of similar areas is accumulated in the Ls variable. Conversely, when a similar bit is less than the similarity threshold, the area is defined to be not similar and will not be accumulated at Ls.
The study analyzed the resulted similarity of twenty unhealthy images based on two sets of Canny thresholds against similarity thresholds. Table 1 views various similarity scores as a result of comparing images of suspected skin and healthy skin. As expected before, the similarity score is higher using a smaller similarity threshold. In general, both sets are resulting potentially used scores for mobile applications. However, because of some results differs a bit far than other, we have to analyzed carefully to choose a more suit set for detecting skin images.
The first set is better because of range consistency regardless of similarity thresholds. It maintains similarity range around 20%. However, using the second set, the range increases almost twice when the similarity threshold is reduced. Hence it will be overlapped when detecting the healthy skin images cause resulting wrong decision. In the case of the similarity threshold, this study found that using threshold = 6 is better in both sets. The low similarity scores are suitable for the designed application.
The study also analyzed the characteristic of healthy skin images to compare with the result of unhealthy skins. Some healthy skin images were compared to find the similarity scores. The results were excellent since they are higher than the results of unhealthy images. However, the second set of Canny is not suitable because resulted scores are always 100%. This value indicates that the system failed to identify the similarity of images. The first set of Canny threshold can detect the small difference of images. Table 2 shows the similarity score of healthy skin images using the first set of Canny thresholds. The study compares both tables to identify the most suitable similarity threshold for the application. As per data in Table 2, all resulted scores are higher than the ones in Table 1. However, looking at the similarity score is not enough since the result of the individual test will vary. Therefore, to avoid the wrong decision, the study chooses the similarity threshold that can completely differ between healthy and unhealthy images. In order to make sure this, the study analyzed the score ranges. The maximum score of testing unhealthy images should always be lower than the minimum score of testing healthy images. Base on both tables, the study recommended using a similarity threshold of 6. The minimum score of the healthy image is 53.07 is far higher than the maximum of the unhealthy image, which is 37.64. Then, for decision making, the study recommends using an average value between 37.64 and 53.07 which is 45.35. Any tested image resulted similarity score higher than 45.35% is concluded it captured from the healthy skin. Conversely, when the score is less than 45.35%, the system concludes that the image was captured from the unhealthy skin.

Conclusions
The application has been designed to improve the previously published work in determining the healthiness of a skin image. The application was designed to compare two images (suspected unhealthy, and it is neighbor skin). The threshold used in the edging part was generated automatically using Matlab and by analyzing application results of the 20 unhealthy skin images. The suitable Canny thresholds are 0 and 50 for low and high, respectively. Then, a suitable threshold in similarity check is 6, which was analyzed based on comparing results of healthy and unhealthy images tests. Lastly, any result of similarity check less than 45.35 is to be concluded that the analyzed image was taken from an unhealthy skin area. In the future, the use of another edge method should be considered since each edge detection method has advantages and drawback.