chore: more work on the report

2024-03-12 11:15:05 +00:00 · 2024-03-12 11:15:05 +00:00 · e59cdd33e6
commit e59cdd33e6
parent a02acd9b4f
4 changed files with 165 additions and 38 deletions
--- a/diagrams/models-flow.d2
+++ b/diagrams/models-flow.d2
@ -0,0 +1,27 @@
+direction: right
+
+User: "Authenticated User" {
+	shape: Person
+}
+
+User->Login: "User Signs In"
+User->Register: "User Registers"
+
+App: "Web APP"
+
+Login->App: "User uses the App"
+Register->App: "User uses the App"
+
+Token: "Generate API Token"
+
+Login->Token
+Register->Token
+
+Server: "User' Servers" {
+	shape: Cloud
+}
+
+Token->Server: "User Provides Token"
+User->Server: "User controls Server"
+
+Server->API: "Users' Servers Interact with API"
--- a/diagrams/service_authentication.d2
+++ b/diagrams/service_authentication.d2
@ -0,0 +1,25 @@
+direction: right
+
+User.shape: Person
+
+User->Login: "User Signs In"
+User->Register: "User Registers"
+
+App: "Web APP"
+
+Login->App: "User uses the App"
+Register->App: "User uses the App"
+
+Token: "Generate API Token"
+
+Login->Token
+Register->Token
+
+Server: "User' Servers" {
+	shape: Cloud
+}
+
+Token->Server: "User Provides Token"
+User->Server: "User controls Server"
+
+Server->API: "Users' Servers Interact with API"
--- a/main.bib
+++ b/main.bib
@ -279,3 +279,53 @@ year =		1998
 	publisher = {MarketSplash},
 	url = {https://marketsplash.com/api-statistics}
 }
+@misc{svelte,
+	title = {{Svelte {\ifmmode\bullet\else\textbullet\fi} Cybernetically enhanced web apps}},
+	year = {2024},
+	month = mar,
+	note = {[Online; accessed 12. Mar. 2024]},
+	url = {https://svelte.dev}
+}
+@misc{state-of-js-2022,
+	title = {{State of JavaScript 2022: Front-end Frameworks}},
+	year = {2023},
+	month = nov,
+	note = {[Online; accessed 12. Mar. 2024]},
+	url = {https://2022.stateofjs.com/en-US/libraries/front-end-frameworks}
+}
+@misc{js-frontend-frameworks-performance,
+	title = {{Interactive Results}},
+	year = {2024},
+	month = mar,
+	note = {[Online; accessed 12. Mar. 2024]},
+	url = {https://krausest.github.io/js-framework-benchmark/current.html}
+}
+@misc{svelte-kit,
+	title = {{SvelteKit {\ifmmode\bullet\else\textbullet\fi} Web development, streamlined}},
+	year = {2024},
+	month = mar,
+	note = {[Online; accessed 12. Mar. 2024]},
+	url = {https://kit.svelte.dev}
+}
+@misc{nginx,
+	title = {{Advanced Load Balancer, Web Server, {\&} Reverse Proxy - NGINX}},
+	journal = {NGINX},
+	year = {2024},
+	month = feb,
+	note = {[Online; accessed 12. Mar. 2024]},
+	url = {https://www.nginx.com}
+}
+@article{bycrpt,
+author = {Provos, Niels and Mazieres, David},
+year = {2001},
+month = {03},
+pages = {},
+title = {A Future-Adaptable Password Scheme}
+}
+
+
+
+
+
+
+
--- a/report/report.tex
+++ b/report/report.tex
@ -332,10 +332,11 @@

 	\pagebreak

-	\section{Service Design}
+	\section{Service Design and Implementation}

-		This section will discuss the design of the system.
-		The section will discuss the inter application interface, control platform, and server, dataset, and model management.
+		This section will discuss the design of the service.
+
+		This section will discuss the design decissions for the web aplication, API.

 		\subsection{Structure of the Service}

@ -363,42 +364,70 @@
 			The API layer, controls the system, it's the interface that both the webpage and users' servers used to interact with the system.

 			The Worker layer, consists of a set of servers available to perform GPU loads.
+
+		
+		\subsection{Web application} \label{web-app-design}
+
+			The web application (WEB App) is the chosen GUI to control the service.
+
+			This subsection discusses details of the workdflows and implementation of the application.
+
+			\subsubsection*{Implementation Details}
+
+				The web application uses the API to controll the functiononality of the service, this design is advanatagues because it allows users of the application do everything that the application does with the API, which is ideal in a SaaS project.
+
+				The Web APP is a single-page application (SPA).
+				The SPA architecure is one of the most prevelant architetures that exists nowadays.
+				It allows for the fast transistions between pages without having a full reload of the browser happening.
+
+				Since this in project the API and the Web APP are seperated it makes the use of server side rendering more complex and less eficient as the server would have to first request the API for information 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 currelnty many frameworks to create SPAs.
+				I selected Svelte \cite{svelte} for this project. 
+				I sellected Svelte because it's been one of the most liked frameworks to work with in the last years, acordiningly to the State of JS survey \cite{state-of-js-2022}.
+				It's also one of the best performant frameworks that is surrently available that has extermiy 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 gratelly improves the devloper expirience.
+				Svelkit allows for the easly creating for SPA with a good default web router.
+
+				The staic adapter will be used to generate a static HTML and javascrip files and they will be hosted by an NGINX proxy \cite{nginx}.
 			
+			\subsubsection*{Service authetication}
+
+			    \begin{figure}[h!]
+					\centering
+					\includegraphics[width=\textwidth]{service_authentication}
+			        \caption{Simpleified Diagram of User Authenticationm}
+					\label{fig:simplified_auth_diagram}
+			    \end{figure}
+
+				The user uses an email and password to Sign In or Register with the application.
+				This is send 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 Googles' OAuth.
+
+				Once logged In the user will be able to use the application and manage tokens that where emited for this application.
+				This allows the user to manage what services have access to the account and the usage that those services have used.
+
+				The User can emit new tokens that can be used in the users services to request the calssification of images.
+
+			\subsubsection*{Model Management}
+
+			    \begin{figure}[h!]
+					\centering
+					\includegraphics[width=\textwidth]{service_authentication}
+			        \caption{Simpleified Diagram of Model management}
+					\label{fig:simplified_model_diagram}
+			    \end{figure}

 		\subsection{Application Programming Interface}
 			As a software as a service, one of the main requirements is to be able to communicate with other services.

 			The current main way that servers communicate over the internet is using https and a rest JSON API\cite{json-api-usage-stats}.

-		\subsection{Web application} \label{web-app-design}
-
-			Why use a web application to control the system?
-
-			The main purpose of the web application is to visually manage your account and your models.
-
-			The web interface allows the user to:
-			\begin{itemize}
-				\item{Manage data before training.} %TODO add image for proof
-				\item{Start the training process.} %TODO add image for proff 
-				\item{Visualize the model training.} %TODO add image for proff 
-				\item{Run Images thought the model.} %TODO add image for proff 
-				\item{Expand the model with new classes.} %TODO add image for proff 
-				\item{See the performance of the model.} %TODO add image for proff 
-			\end{itemize}
-
-
-		\subsection{Web App}
-
-			The goal of the project is to provide a software as a service platform for classification tasks. With that in mind, the service needs to have a way of controlling it. This will be achieved with a web interface.
-
-			The web-interface will have to manage:
-			\begin{itemize}
-				\item{User Data}
-				\item{Model Data}
-				\item{Dataset Data}
-				% TODO maybe resourse data e.i. the resourses the system is using to manage everthing
-			\end{itemize}
-
 		\subsection{Generation Models}
 			The system requires the generation of models \ref{fig:expandable_models_generator}. Generating all models based on one single model would decrease the complexity of the system, but it would not guarantee success.
 			
@ -429,9 +458,6 @@



-	\pagebreak
-    \section{Service Implementation}
-
 	\pagebreak
    \section{Legal and Ethical Issues}

@ -469,17 +495,16 @@

 	\pagebreak
    \section{Appendix}
-
 	    \begin{figure}
 	        \begin{center}
-				\includegraphics[height=0.9\textheight]{expandable_models_simple}
+				\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.9\textheight]{expandable_models_generator}
+				\includegraphics[height=0.8\textheight]{expandable_models_generator}
 	        \end{center}
 	        \caption{Contains an overall view of the model genration system}\label{fig:expandable_models_generator}
 	    \end{figure}