%%% Preamble
\documentclass[11pt, a4paper, twoside]{article}


\include{settings.tex}

% Write the approved title of your dissertation
\title{Image Classification as a Software Platform}

% Write your full name, as in University records
\author{Andre Henriques}

\date{}

%%% Begin document
\begin{document}
	\include{start}
	\include{intro}
	\include{lit}
	\include{sanr}
	\include{design}

	\section{Service Implementation} \label{sec:si}

		This chapter will discuss how the service followed some possible designs to achieve a working system.
		The design path that was decided matches what made sense for the scale and needs of the project.

		\subsection{Structure of the Service}

			The structure of the service matches the designed structure, as it can be seen in Figure \ref{fig:simplified_service_diagram}.

		    \begin{figure}[h!]
				\centering
				\includegraphics[height=0.4\textheight]{system_diagram}
		        \caption{Simplified diagram of the service}
				\label{fig:simplified_service_diagram}
		    \end{figure}

			The implementation contains: Web App; Web server, which serves the Web App; API; Training Runners; Model Runners.
			This differs from the designed solution, as it contains an extra nginx reverse proxy server \cite{nginx}. 
			The reverse proxy is requireed as it allows for the API and the webpage to be accessible from them same domain.

			The selected database was PostgresSQL \cite{postgressql} as it is one of the most advanced open source databases available.
			The database stores all data required for the system to work, with the exeption of uploaded images and model files.
			
			The rest of this chapter will discuss how each individual part of the system was implemented.

		\subsection{Web Application} \label{web-app-design}

			The web application (WEB App) is the chosen user interface to control the service.

			This subsection discusses details of the user flows and implementation of the application.

			\subsubsection*{Implementation Details}

				The Web APP is a single-page application (SPA).
				The SPA architecture is one of the most prevalent architectures that exists nowadays.
				It allows for the fast transitions between pages without having a full reload of the website.

				Since this implementation separated the API and the Web App, it makes the use of server-side rendering more complex and less efficient.
				As, the server would have to first request the API for information to build the web page and then send it to the users' device.
				Therefore, the system will use client-side rendering only, allowing for the users' device to request the API directly for more information.

				There exist currently many frameworks to create SPAs.
				I selected Svelte \cite{svelte} for this project. 
				I selected Svelte because it is been one of the most liked frameworks to work with in the last years, accordingly to the State of JS survey \cite{state-of-js-2022}.
				It is also one of the best performant frameworks that is currently available that has extremity good performance \cite{js-frontend-frameworks-performance}.
				I also already have experience with Svelte.

				I will be using Svelte with the SvelteKit framework \cite{svelte-kit} which greatly improves the developer experience. 
				SvelteKit allows for the easy creation of SPAs with a good default web router.
				When deploying into a production enviroment the static adapter can be used to generate a static HTML and JavaScript files.
				This static files can be then hosted in a more efficient http server, other than the one running on NodeJs.

				The web application uses the API to control the functionality of the service.
				This implementation allows users of the application to do everything that the application does with the API, which is ideal in a SaaS project.
				The communication with the API, when correcly consigured, uses HTTPS to make this communication encrypted and safe.
		
			\subsubsection*{Service authentication} \label{sec:impl:service-auth}

			    \begin{figure}[h!]
					\centering
					\includegraphics[width=\textwidth]{service_authentication}
			        \caption{Simplified Diagram of User Authentication}
					\label{fig:simplified_auth_diagram}
			    \end{figure}

				%TODO task about the above image

				The user uses an email and password to Sign In or Register with the application.
				This is sent to the server and stored in a user account.
				The Password is stored hashed using bcrypt \cite{bycrpt}.
				In the future, other methods of authentication might be provided; like using Google's OAuth.
				Once logged In, the user will be able to use the application and manage tokens that were emitted for this application.
				This allows the user to manage what services have access to the account. % and the usage that those services have used.
				On the web app, the user can manage existing tokens.
				Guaranteeing that only the clients that should be accessing the information are.
				In the management screen, which can be seen in Figure \ref{fig:token_page}, the user can remove, and create tokens.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.5\textwidth]{token_page}
					\caption{Screenshot of web application on the token control section.}
					\label{fig:token_page}
				\end{figure}

			\subsubsection*{Model Management}

			    \begin{figure}[h!]
					\centering
					\includegraphics[width=\textwidth]{models_flow}
			        \caption{Simplified Diagram of Model management.}
					\label{fig:simplified_model_diagram}
			    \end{figure}

				Figure \ref{fig:simplified_model_diagram} shows the steps that the user takes to use a model.

				First, the user creates the model.
				In this step, the user uploads a sample image of what the model will be handling.
				This image is used to define what the kinds of images the model will be able to intake.
				This is done in the page shown in Figure \ref{fig:create_model}, the user provides a name for the model and an image and then presses the button create.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.9\textwidth]{create_model}
					\caption{Screenshot of web application on the page that allows the creation of a new model.}
					\label{fig:create_model}
				\end{figure}

				The user is then shown the model page, which contains all the information about a model, which can be seen in Figure \ref{fig:model_page}.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.9\textwidth]{base_model_page}
					\caption{Screenshot of the web application on the page shows basic information about the model.}
					\label{fig:model_page}
				\end{figure}

				This page contains a set of tabs a top.
				Each tab gives different insight about the model.
				The ``Model'' tab, contains only relevant actions that the user can take.
				In Figure \ref{fig:model_page}, the user has created a model but has not added training data, so the page shows a section where the user can input training data.
				The ``Model Data'' tab contains a more detailed view about data that has been updated.

				Currently, the system does not support resizing of images that are different from the one uploaded at the creation step.
				This was done to guarantee that the image that the user wants to classify is unmodified.
				Moving the responsibility of cropping and resizing to the user.
				In the future, systems could be implemented that allow the user to select how an image can be cropped.

				The second step is uploading the rest of the dataset.
				This can be done via the ``Model'' tab or via the ``Model Data'' tab that becomes available when the data of the model is first uploaded.
				In this tab, the user can add and remove images, as well as create new classes for the model.
				The page also shows some useful information, such as the distribution of the dataset, which can be seen in \ref{fig:model_data_tab}.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.9\textwidth]{model_data_tab}
					\caption{Screenshot of web application part of the ``Model Data'' tab.}
					\label{fig:model_data_tab}
				\end{figure}

				This information can be useful to more advanced users that might decide to gather more data to balance the dataset. 
				To upload the reset of the data set, the user can upload a zip file that contains a set of classes and images corresponding to that class.
				That zip file is processed and images and classes are created.
				The user is given instruction on how to create the zip file so that the system can easily process the data, the upload set can be seen in Figure \ref{fig:upload_data_section}.  
				This process was original slow as the system did not have the capabilities to parallelize the process of importing the images, but this was implemented, and the import process was improved.
				The improved process now takes a few seconds to process and verify the entirety of the dataset, making the experience for the end user better.  
				Alternatively, the user can use the API to create new classes and upload images.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.9\textwidth]{upload_data_page}
					\caption{Screenshot of web application upload zip step of the model page.}
					\label{fig:upload_data_section}
				\end{figure}

				After all the images that are required for training are uploaded, the user can go to the training step.
				This step will appear both in the main tab of the model page and in the dataset tab. Once the user instructs the system to start training, the model page will become the training page, and it will show the progress of the training of the model.
				During this step, the system automatically trains the model.
				After the system trains a model that meets the specifications set by the user, the service will make the model available for the user to use.

				When the model is finished training, the user can use the model to run inference tasks on images.
				To achieve this, the user can either use the API to submit a classification task or use the tasks tab in the web platform.

				In the tasks tab, which can be seen in Figure \ref{fig:upload_data_section}, the user can see current and previous tasks.
				The users can see what tasks were performed and their results.
				The user can also inform the service if the task that was performed did return the correct results.
				This information can be used to keep track of the real accuracy of the model.
				The information can be used to see if the model needs refinement.
				The system can add the classes that failed to return the correct result to a list of the original data, to be used in case of retraining the model.

				\begin{figure}[H]
					\centering
					\includegraphics[height=0.95\textheight]{model_task_tab}
					\caption{Screenshot of web application on the tasks tab.}
					\label{fig:upload_data_section}
				\end{figure}

			\subsubsection*{Advanced Model Management}

			    \begin{figure}[H]
					\centering
					\includegraphics[width=\textwidth]{models_advanced_flow}
			        \caption{Simplified Diagram of Advanced Model management.}
					\label{fig:simplified_model_advanced_diagram}
			    \end{figure}

				Figure \ref{fig:simplified_model_advanced_diagram} shows the steps that the user takes to use a model.

				The steps are very similar to the normal model management.
				The user would follow all the steps that are required for normal model creation and training.

				At the end of the process, the user will be able to add new data to the model and retrain it.
				To achieve that, the user would simply go to the data tab and create a new class, which the Figure \ref{fig:expand_class_part} shows.
				Once a new class is added, the webpage will inform the user that the model can be retrained.
				The user might choose to retrain the model now or more new classes and retrain later.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.6\textwidth]{expand_class_part}
					\caption{Screenshot of web application on the expand part of the ``Model Data'' tab.}
					\label{fig:expand_class_part}
				\end{figure}

				During the entire process of creating new classes in the model and retraining the model, the user can still perform all the classifications tasks they desire.

			\subsubsection*{Task Management}

				Task management is the section of the website is where uses can manage their tasks. This includes training and classification tasks.

				Users in this tab can see what is the progress, and results of their tasks.
				The webpage also provides nice, easy to see statistics on the task results, allowing the user to see how the model is performing.
				Which is shown on Figure \ref{fig:upload_data_section}

				On the administrator, users should be able to change the status of tasks as well as see a more comprehensive view on how the tasks are being performed.
				Administrator users can see the current status of runners, as well as which task the runners are doing, the Figure \ref{fig:runner_page} shows the runner visualisation page.

				\begin{figure}[H]
					\centering
					\includegraphics[width=0.6\textwidth]{runner_page}
					\caption{Screenshot of web application on the runner administration page.}
					\label{fig:runner_page}
				\end{figure}


		\subsection{API}

			The API was implemented as a multithreaded Go \cite{go} server.
			The application, on launch, loads a configuration file and connects to the database.
			After connecting to the database, the application performs pre-startup checks to make sure no tasks that were interrupted via a server restart and were not left in an unrecoverable state.
			Once the checks are done, the application creates workers, which will be explained in section \ref{impl:runner}, which when completed the API server is finally started up.

			Information about the API is shown around the web page so that the user can see information about the API right next to where the user would normally do the action, providing a good user interface.
			As, the user can get information about right where they would normally do the action, as it can be seen in Figure \ref{fig:code_demo}.

			\begin{figure}[H]
				\centering
				\includegraphics[width=0.6\textwidth]{code_demo}
				\caption{Screenshot of the web application that shows the explanation of the API call.}
				\label{fig:code_demo}
			\end{figure}

			This server will take JSON and multipart form data requests, the requests are processed, and answered with a JSON response. 
			The multipart requests are required due to JSON's inability to transmit binary data, which will make the uploading of images extremely inefficient.
			Those images would have to be transformed into binary data and then uploaded as a byte array or encoded as base64 and uploaded.
			Either of those options is extremely inefficient.
			Therefore, there is a need to use multipart form requests are required to allow the easy uploading of binary files.

			Go was selected as the language to implement the backend due to various of its advantages.
			Go has extremely fast compilations which allows for rapid development, and iteration.
			It has a very minimal runtime which allows it to be faster, than heavy runtime languages such as JavaScript.
			It is also a simple language, which helps maintain the codebase.

			% TODO cite cgo tensorflow and torch
			The Go language integrates well with C libraries, which allows it access to machine learning libraries like TensorFlow or Lib Torch.

			\subsubsection*{Authentication}

				The API allows users to login, which emits a token, and once logged in, manually create tokens.
				While using the web application, this is done transparently, but it can also be manually done via the respective API calls.

				During the login process, the service checks to see if the user is registered and if the password provided during the login matches the stored hash.
				Upon verifying the user, a token is emitted.

				Once a user is logged in they can then create more tokens as seen in section \ref{sec:impl:service-auth}.
				While using the API the user should only use created tokens in the settings page as those tokens are named, and have controllable expiration dates.
				This is advantageous from a security perspective, as the user can manage who has access to the API.
				If the token gets leaked, the user can then delete the named token, to guarantee the safety of his access.

				The token can then be used in the ``token'' header as proof to the API that the user is authenticated.


		\subsection{Generation and Training of Models}

			Model generation happens on the API server, the API server analyses what the image that was provided and generates several model candidates accordingly.
			The number of model candidates is user defined.
			The model generation subsystem decides the structure of the model candidates based on the image size, it prioritises the smaller models for smaller images and convolution networks with bigger images.
			The depth is controlled both by the image size and number of outputs, models candidates that need to be expanded are generated with bigger values to account for possible new values.
			It tries to generate the optimal size if only one model is requested.
			If more than one is requested then the generator tries to generate models of various types and sizes, so if there is possible smaller model it will also be tested.

			Model training happens in a runner, more information about runners will be explained in section \ref{impl:runner}.

			% TODO explore this a bit more
			Model training was implemented using TensorFlow. % \cite{tensorflow}.
			Normally, when using go with machine learning, only the prediction is run in go and the training happens in python.
			The training system was implemented that way.

			The runner, when it needs to perform training it generates a python script tailored to the model candidate that needs to be trained, then runs the that python script, and monitors the result of the python script.
			While the python script is running, it takes use of the API to inform the runner of epoch and accuracy changes.

			The during train, the runner takes a round-robin approach.
			It trains every model candidate for a few epochs, then compares the different models candidates.
			If there is too much difference in accuracy, from the best model to the worst model, then the system might decide not to continue training a certain candidate and focus the training resources on candidates that are performing better.
			Once one candidate archives the target accuracy, which is user defined, the training system stops training the models candidates.
			The model candidate that achieved the target accuracy is then promoted to the model, and the other candidates are removed.
			The model now can be used to predict the labels for any image that the user decides to upload.

			\subsubsection*{Expandable Models}

				Expandable models follow mostly the same process as the normal models.
				First, bigger model candidates are generated.
				Then the models are training using the same technic.
				At the end, after the model candidate has been promoted to the full model, the system starts another python process that loads the just generated model and splits into a base model and a head model.

				With these two separate models, the system is now ready to start classifying new images.

				
			\subsubsection*{Expanding Expandable Models}

				During the expanding process, the generation system creates a new head candidate that matches the newly added classes.
				The base model, that was created in the original training process, is used with all available data to train the head candidate to perform the classification tasks.
				The training process is similar to the normal training system, but this uses a different training script.
				Once the model has finished training and the system meets the accuracy requirements, then makes the new head available for classification.
				

		\subsection{Model Inference}

			Model inference also runs inside a runner.
			However, inference runs internally on go, instead of creating tailored scripts for training using python.

			Once a classification request is received by the API, the uploaded image is checked to see if the model will accept it.
			If the model is capable of accepting the image, it is temporarily saved to disk and then a classification task is created.

			Eventually, a runner will pick up the classification task.
			Upon pickup, the runner will load the model and run the image through it, the results are then matched with the stored classes in the database.
			The system then stores the class with the highest probability of matching the image, according to the model, in the results of the task.

			The user then can finally use the API to obtain the results of the model.

			\subsubsection*{Expandable Models}

				For expandable models, the inference step is very similar to the normal models.
				The runner first loads the base model and runs the image through the model, the resultant features are then stored.
				Once the features are obtained, the system then runs those features to the various possible heads, and the results are then matched with the stored classes, and the one with the height probability is then selected.

		\subsection{Runner} \label{impl:runner}

			Runners are the name used to reference to the software that can perform CPU or GPU intensive tasks without halting the main API server.

		 	Architecturally, they were implemented as a controller and worker pattern.
			When the application that runs the main application starts, the system creates an orchestrator, this orchestrator is a piece of software that decides what work each runner is doing.
			The orchestrator runs on go routine created at startup.
			During the startup, the orchestrator by obtaining values from the configuration file.
			Those values define the number of local runners.

			These runners, which are started up by the orchestrator, act as local runners, runners that are running on the same machine as the main server.
			Local runners are useful when running the main server on a machine that also has GPU power available to it, and in testing.

			Local runners, run inside a go routine, this allows the runners and the orchestrator to communicate using go channels, which are the easiest way to communicate between two go routines.
			The orchestrator is constantly waiting to receive either for a timer-based event or a runner-based event.

			Timer-based events happen when the orchestrator internal clock informs it of needing to check if tasks are available to run.
			The time at which this clock ticks in configured in the settings of the app.
			Upon receiving a timer-based event, the orchestrator then checks if there is a new task available for it to run and if there are any runners available for the task to run on. 
			If there are tasks available, then the orchestrator instructors the runner to pick up the task and run it.

			Runner-based events happen when a runner finishes running a task or crashes while trying to do it.
			Upon receiving a runner event, the orchestrator checks if it is a success or a failure message.

			If it is a failure message and the runner is a local runner, then the orchestrator just restarts the runner.
			Upon restart, it adds the runner to the list of available runners.
			If the runner is a remote runner, the orchestrator marks the runner as failed and stops sending messages to the runner until the runner informs the service again that is available.

			If the message is of success, then the orchestrator just adds the runner to the list of viable runners, independently if the runner is remote or not.

			% TODO talk more about remote runners
			% TODO talk about how the runner loads images
			
				
		\subsection{Summary}
			This chapter went into the details of how the designed was implemented.
			The design was envisioned to be the best possible version of this service, but scope was restrained to the necessities of the system while it was being developed.
			And possible features that would make the implemented application closer to the ideal design could have been implemented if there was higher need during the development timeline.
			This will be more discussed in chapter \ref{sec:crpo}.
			

	\pagebreak











	
    \section{Legal, Societal, Ethical and Professional Considerations} \label{sec:lsec}
		This section will address possible legal, societal, ethical and professional issues that might arise from the deployment of the software being designed.


		The Self-Assessment for Governance and Ethics (SAGE) form has addressed, and it is submitted along with the report.

		\subsection{Legal Issues}

			Legal issues can occur due to the data being stored by the service.

			The service collects, the least amount of sensitive information, from the users who directly use the service.
			That data that is collected while being sensitive is required to be able to authenticate the user, such as name, email, and password.
			To safeguard that information, the system will be using industry standards to guarantee data security of that data.


			Legal issues might occur due to image uploaded images. For example, those images could be copyrighted, or the images could be confidential. The service is designed to provide ways to allow users to host their images without having to host the images itself, moving the legal requirement to the management of the data to the user of the system.

			\subsubsection*{GDPR}
				The General Data Protection Regulation (GDPR) (GDPR, 2018) is a data protection and privacy law in the European Union and the European Economic Area, that has also been implemented into British law.
				The main objective of the GDPR is to minimise the data collected by the application for purposes that are not the used in the application, as well as giving users the right to be forgotten.

				The application collects only personal data needed to authenticate the user, and data that is generated during the normal usage of the application.

				All the data that is related to the user can be deleted.
				The system will prevent any new work that is related to the data, that was requested to be deleted.
				Once the there is no more work that requires the data being done, the system will remove all relevant identifiable references to that data.

			\subsection{Social Issues}
				The web application was designed to be easy to use and there tries to consider all accessibility requirements.

				% TODO talk about this

				% The service itself could raise issues of taking jobs that are currently done by humans.
				% This is less problematic as time has shown that the jobs just change, instead of manually classifying the images, the job transforms from the classifying all the images that are needed to maintain and verifying that the data being input to the model is correct.

			\subsection{Ethical Issues}
				While the service itself does not raise any ethical concerns. The data that the service will process could raise ethical complications.

				For example, if the service gets acquired by a company that also wants to use the data provided to the system for other reasons.

			\subsection{Professional Issues}
				As a member of the British Computer Society (BCS), it is important to follow the Code of Conduct practices. The code of conduit contains 4 key principles.

				\subsubsection*{Public interest}
					This project tries to consider the public health, privacy, and security of third parties and therefore follows the principle of public interest.

				\subsubsection*{Professional Competence and Integrity}
					This project has been an enormous undertaking that pushed the limits of my capabilities.
					I am glad that I was able to use this opportunity to learn about distributed systems, image classification, go, and Svelte.
					During this project, I also followed the best practices of software development, such as using source control software and having an audit to tasks and issues.

				\subsubsection*{Duty to Relevant Authority}
					For the duration of the project, all the guidelines provided by the University of Surrey were followed.

				\subsubsection*{Duty to the Profession}
					During the research, design, and implementation, and report state all interactions with the supervisor of the project have been professional, respectful, and honest.
					To the best of my ability, I tried to design a system that would contribute to the field.


	\pagebreak


	\include{eval}
	\include{review}
		
	\pagebreak
    %\section{appendix}
	%    \begin{figure}[h!]
	%        \begin{center}
	%			\includegraphics[height=0.8\textheight]{expandable_models_simple}
	%        \end{center}
	%        \caption{contains an overall view of the entire system}
	%		\label{fig:expandable_models_simple}
	%    \end{figure}

	%    \begin{figure}
	%        \begin{center}
	%			\includegraphics[height=0.8\textheight]{expandable_models_generator}
	%        \end{center}
	%        \caption{contains an overall view of the model generation system}
	%		\label{fig:expandable_models_generator}
	%    \end{figure}
    


	\pagebreak
    \section{References}
    \printbibliography[heading=none]

    % TODO add my job title
\end{document}
