# Deep Learning Methods for Bug Bite Classification: An End-to-End System
## 2 Materials and Methods
### System Architecture and Proposed Strategy Workflow  
**Mobile Client Architecture. ** In the next step of our research, we developed a mobile application for bug bite classification based on the strategy described in this paper. This makes our results practical and useful, gives more insight into the real time usability, and also provides a way to enrich the database. The architecture of the mobile client was built upon the Flutter framework, which was created by Google in 2017. The main components of the architecture are depicted in Figure 7. The figure consists of 3 types of components: (1) the material app, represented as a light-blue rectangle, (2) the pages, represented as blue tilted rectangles, and (3) the services, represented as rounded red rectangles. The main component is the material app, consisting of two separate pages: (1) the image capture page and (2) the image stream page. The pages communicate with several services, as shown in Figure 7.  
The image capture page presents the home screen, with functionalities for uploading a bite image from the gallery or starting an image stream from the device's camera as visible in Figure 8. The skin image classifier component evaluates the validity of the uploaded images and allows only valid skin close-up images to be accepted. When an image is accepted, the user can crop or zoom the image and then send it to the server with the goal of receiving an accurate prediction of the type of the bug bite. The image stream page presents a camera view with a bounding box to the user. Images are streamed from the device's camera in real-time, using Flutter's camera plugin, and skin prediction is performed on consecutive frames. If a frame is found to represent a skin image, it is accepted by the application, and the user is allowed to crop and zoom it before sending it to the server. The server communications service component is responsible for maintaining the communication between the mobile client and the cloud server. The chosen communication protocol is HTTP. Upon the start of the application, the server communications service retrieves the global application settings used for pre-processing the user images before uploading them to the server. These settings are also used to define the number and values of the class labels. The local data storage service component stores a unique user identifier each time the application is installed on a device. This identifier is used for calculating per-user statistics by the back-end server. Moreover, the global settings retrieved from the server are stored in the device's local storage, with the purpose of easier access by multiple components. It also prevents failure in case of a lost connection with the cloud server. \begin{table}
\begin{tabular}{c c c} \hline \hline
**Layer** & **Output Shape** & **Number of Parameters** \\ \hline Conv2D & (None, 7, 7, 1280) & 409,600 \\ Conv 1 Batch Normalization & (None, 7, 7, 1280) & 5120 \\ Out ReLU & (None, 7, 7, 1280) & 0 \\ Global average pooling2d & (None, 1280) & 0 \\ Batch Normalization & (None, 1280) & 5120 \\ Dropout & (None, 1280) & 0 \\ Dense & (None, 512) & 655,872 \\ Dropout & (None, 512) & 0 \\ Dense & (None, 128) & 65,664 \\ Dense & (N, 1) & 129 \\ \hline Total parameters: 2,984,769 & & \\ Trainable parameters: 724,225 & & \\ Non-trainable parameters: 2,260,544 & & \\ \hline \hline \end{tabular}
\end{table} 
Table 9: Summary of the custom layers added to the pre-trained MobileNet-v2 model for skin classification task. The chart data service is used solely by the image capture page as a utility component for processing the data returned upon the prediction of a bite image. The data consists of a normalized probability distribution over all of the class labels and is presented to the user in bar chart format. The image processor service implements functionality for cropping, scaling, resizing, and uploading images from the gallery.