1261 lines
32 KiB
HTML
Executable File
1261 lines
32 KiB
HTML
Executable File
<?xml version="1.0" encoding="utf-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||
<head>
|
||
<!-- 2025-12-28 Sun 20:49 -->
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>uml_fyp</title>
|
||
<meta name="generator" content="Org Mode" />
|
||
<style type="text/css">
|
||
#content { max-width: 60em; margin: auto; }
|
||
.title { text-align: center;
|
||
margin-bottom: .2em; }
|
||
.subtitle { text-align: center;
|
||
font-size: medium;
|
||
font-weight: bold;
|
||
margin-top:0; }
|
||
.todo { font-family: monospace; color: red; }
|
||
.done { font-family: monospace; color: green; }
|
||
.priority { font-family: monospace; color: orange; }
|
||
.tag { background-color: #eee; font-family: monospace;
|
||
padding: 2px; font-size: 80%; font-weight: normal; }
|
||
.timestamp { color: #bebebe; }
|
||
.timestamp-kwd { color: #5f9ea0; }
|
||
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
|
||
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
|
||
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
|
||
.underline { text-decoration: underline; }
|
||
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
|
||
p.verse { margin-left: 3%; }
|
||
pre {
|
||
border: 1px solid #e6e6e6;
|
||
border-radius: 3px;
|
||
background-color: #f2f2f2;
|
||
padding: 8pt;
|
||
font-family: monospace;
|
||
overflow: auto;
|
||
margin: 1.2em;
|
||
}
|
||
pre.src {
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
pre.src:before {
|
||
display: none;
|
||
position: absolute;
|
||
top: -8px;
|
||
right: 12px;
|
||
padding: 3px;
|
||
color: #555;
|
||
background-color: #f2f2f299;
|
||
}
|
||
pre.src:hover:before { display: inline; margin-top: 14px;}
|
||
/* Languages per Org manual */
|
||
pre.src-asymptote:before { content: 'Asymptote'; }
|
||
pre.src-awk:before { content: 'Awk'; }
|
||
pre.src-authinfo::before { content: 'Authinfo'; }
|
||
pre.src-C:before { content: 'C'; }
|
||
/* pre.src-C++ doesn't work in CSS */
|
||
pre.src-clojure:before { content: 'Clojure'; }
|
||
pre.src-css:before { content: 'CSS'; }
|
||
pre.src-D:before { content: 'D'; }
|
||
pre.src-ditaa:before { content: 'ditaa'; }
|
||
pre.src-dot:before { content: 'Graphviz'; }
|
||
pre.src-calc:before { content: 'Emacs Calc'; }
|
||
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
|
||
pre.src-fortran:before { content: 'Fortran'; }
|
||
pre.src-gnuplot:before { content: 'gnuplot'; }
|
||
pre.src-haskell:before { content: 'Haskell'; }
|
||
pre.src-hledger:before { content: 'hledger'; }
|
||
pre.src-java:before { content: 'Java'; }
|
||
pre.src-js:before { content: 'Javascript'; }
|
||
pre.src-latex:before { content: 'LaTeX'; }
|
||
pre.src-ledger:before { content: 'Ledger'; }
|
||
pre.src-lisp:before { content: 'Lisp'; }
|
||
pre.src-lilypond:before { content: 'Lilypond'; }
|
||
pre.src-lua:before { content: 'Lua'; }
|
||
pre.src-matlab:before { content: 'MATLAB'; }
|
||
pre.src-mscgen:before { content: 'Mscgen'; }
|
||
pre.src-ocaml:before { content: 'Objective Caml'; }
|
||
pre.src-octave:before { content: 'Octave'; }
|
||
pre.src-org:before { content: 'Org mode'; }
|
||
pre.src-oz:before { content: 'OZ'; }
|
||
pre.src-plantuml:before { content: 'Plantuml'; }
|
||
pre.src-processing:before { content: 'Processing.js'; }
|
||
pre.src-python:before { content: 'Python'; }
|
||
pre.src-R:before { content: 'R'; }
|
||
pre.src-ruby:before { content: 'Ruby'; }
|
||
pre.src-sass:before { content: 'Sass'; }
|
||
pre.src-scheme:before { content: 'Scheme'; }
|
||
pre.src-screen:before { content: 'Gnu Screen'; }
|
||
pre.src-sed:before { content: 'Sed'; }
|
||
pre.src-sh:before { content: 'shell'; }
|
||
pre.src-sql:before { content: 'SQL'; }
|
||
pre.src-sqlite:before { content: 'SQLite'; }
|
||
/* additional languages in org.el's org-babel-load-languages alist */
|
||
pre.src-forth:before { content: 'Forth'; }
|
||
pre.src-io:before { content: 'IO'; }
|
||
pre.src-J:before { content: 'J'; }
|
||
pre.src-makefile:before { content: 'Makefile'; }
|
||
pre.src-maxima:before { content: 'Maxima'; }
|
||
pre.src-perl:before { content: 'Perl'; }
|
||
pre.src-picolisp:before { content: 'Pico Lisp'; }
|
||
pre.src-scala:before { content: 'Scala'; }
|
||
pre.src-shell:before { content: 'Shell Script'; }
|
||
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
|
||
/* additional language identifiers per "defun org-babel-execute"
|
||
in ob-*.el */
|
||
pre.src-cpp:before { content: 'C++'; }
|
||
pre.src-abc:before { content: 'ABC'; }
|
||
pre.src-coq:before { content: 'Coq'; }
|
||
pre.src-groovy:before { content: 'Groovy'; }
|
||
/* additional language identifiers from org-babel-shell-names in
|
||
ob-shell.el: ob-shell is the only babel language using a lambda to put
|
||
the execution function name together. */
|
||
pre.src-bash:before { content: 'bash'; }
|
||
pre.src-csh:before { content: 'csh'; }
|
||
pre.src-ash:before { content: 'ash'; }
|
||
pre.src-dash:before { content: 'dash'; }
|
||
pre.src-ksh:before { content: 'ksh'; }
|
||
pre.src-mksh:before { content: 'mksh'; }
|
||
pre.src-posh:before { content: 'posh'; }
|
||
/* Additional Emacs modes also supported by the LaTeX listings package */
|
||
pre.src-ada:before { content: 'Ada'; }
|
||
pre.src-asm:before { content: 'Assembler'; }
|
||
pre.src-caml:before { content: 'Caml'; }
|
||
pre.src-delphi:before { content: 'Delphi'; }
|
||
pre.src-html:before { content: 'HTML'; }
|
||
pre.src-idl:before { content: 'IDL'; }
|
||
pre.src-mercury:before { content: 'Mercury'; }
|
||
pre.src-metapost:before { content: 'MetaPost'; }
|
||
pre.src-modula-2:before { content: 'Modula-2'; }
|
||
pre.src-pascal:before { content: 'Pascal'; }
|
||
pre.src-ps:before { content: 'PostScript'; }
|
||
pre.src-prolog:before { content: 'Prolog'; }
|
||
pre.src-simula:before { content: 'Simula'; }
|
||
pre.src-tcl:before { content: 'tcl'; }
|
||
pre.src-tex:before { content: 'TeX'; }
|
||
pre.src-plain-tex:before { content: 'Plain TeX'; }
|
||
pre.src-verilog:before { content: 'Verilog'; }
|
||
pre.src-vhdl:before { content: 'VHDL'; }
|
||
pre.src-xml:before { content: 'XML'; }
|
||
pre.src-nxml:before { content: 'XML'; }
|
||
/* add a generic configuration mode; LaTeX export needs an additional
|
||
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
|
||
pre.src-conf:before { content: 'Configuration File'; }
|
||
|
||
table { border-collapse:collapse; }
|
||
caption.t-above { caption-side: top; }
|
||
caption.t-bottom { caption-side: bottom; }
|
||
td, th { vertical-align:top; }
|
||
th.org-right { text-align: center; }
|
||
th.org-left { text-align: center; }
|
||
th.org-center { text-align: center; }
|
||
td.org-right { text-align: right; }
|
||
td.org-left { text-align: left; }
|
||
td.org-center { text-align: center; }
|
||
dt { font-weight: bold; }
|
||
.footpara { display: inline; }
|
||
.footdef { margin-bottom: 1em; }
|
||
.figure { padding: 1em; }
|
||
.figure p { text-align: center; }
|
||
.equation-container {
|
||
display: table;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
.equation {
|
||
vertical-align: middle;
|
||
}
|
||
.equation-label {
|
||
display: table-cell;
|
||
text-align: right;
|
||
vertical-align: middle;
|
||
}
|
||
.inlinetask {
|
||
padding: 10px;
|
||
border: 2px solid gray;
|
||
margin: 10px;
|
||
background: #ffffcc;
|
||
}
|
||
#org-div-home-and-up
|
||
{ text-align: right; font-size: 70%; white-space: nowrap; }
|
||
textarea { overflow-x: auto; }
|
||
.linenr { font-size: smaller }
|
||
.code-highlighted { background-color: #ffff00; }
|
||
.org-info-js_info-navigation { border-style: none; }
|
||
#org-info-js_console-label
|
||
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
|
||
.org-info-js_search-highlight
|
||
{ background-color: #ffff00; color: #000000; font-weight: bold; }
|
||
.org-svg { }
|
||
</style>
|
||
|
||
<link rel="stylesheet" href="/assets/styles/style.css" />
|
||
<link rel="stylesheet" href="/assets/styles/bigger-picture.min.css" />
|
||
<link rel="stylesheet" href="/assets/styles/media.css" />
|
||
|
||
<script src="/assets/scripts/script.js" defer></script>
|
||
<script src="/assets/scripts/search.js" defer></script>
|
||
<script src="/assets/scripts/bigger-picture.min.js" defer></script>
|
||
<script src="/assets/scripts/svg-pan-zoom.min.js" defer></script>
|
||
<script src="/assets/scripts/gallery-init.js" defer></script>
|
||
<script>
|
||
window.MathJax = {
|
||
tex: {
|
||
ams: {
|
||
multlineWidth: '85%'
|
||
},
|
||
tags: 'ams',
|
||
tagSide: 'right',
|
||
tagIndent: '.8em'
|
||
},
|
||
chtml: {
|
||
scale: 1.0,
|
||
displayAlign: 'center',
|
||
displayIndent: '0em'
|
||
},
|
||
svg: {
|
||
scale: 1.0,
|
||
displayAlign: 'center',
|
||
displayIndent: '0em'
|
||
},
|
||
output: {
|
||
font: 'mathjax-modern',
|
||
displayOverflow: 'overflow'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script
|
||
id="MathJax-script"
|
||
async
|
||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="preamble" class="status">
|
||
|
||
<div class="banner-header">
|
||
<div class="banner-left">
|
||
<a href="/20241210233721-brain_moc.html"> <img src="/assets/gr.png" alt="Site Logo" class="banner-logo" /> </a>
|
||
<div id="updated">Updated: 2025-12-28 Sun 19:48</div>
|
||
</div>
|
||
|
||
<div class="banner-search">
|
||
<input id="search-box"
|
||
type="search"
|
||
placeholder="Search notes…"
|
||
aria-label="Search notes"
|
||
autocomplete="off" />
|
||
<div id="search-results"></div>
|
||
</div>
|
||
|
||
<button id="close-all">Close All</button>
|
||
</div>
|
||
</div>
|
||
<div id="stack-root">
|
||
<div class="stack-track">
|
||
<article class="stack-pane pane-root" data-url="/20241210232054-uml_fyp.html">
|
||
<div id="content" class="content">
|
||
<div class="title-section">
|
||
<div class="title-controls">
|
||
<button class="pane-fullscreen" aria-label="Fullscreen">F</button>
|
||
<button class="pane-edit" aria-label="Edit pane">E</button>
|
||
<button class="pane-close" aria-label="Close pane">×</button>
|
||
</div>
|
||
<h1 class="title">uml<sub>fyp</sub></h1>
|
||
<div class="title-metadata">
|
||
<span class="metadata-item">
|
||
<span class="metadata-label">planted:</span>
|
||
<span class="metadata-value">2024-12-10</span>
|
||
</span>
|
||
<span class="metadata-item">
|
||
<span class="metadata-label">last tended to:</span>
|
||
<span class="metadata-value">2025-12-28</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-orgc3688e1" class="outline-2">
|
||
<h2 id="orgc3688e1"><a href="#orgc3688e1">Class diagram</a></h2>
|
||
<div class="outline-text-2" id="text-orgc3688e1">
|
||
</div>
|
||
<div id="outline-container-org2d9f8e0" class="outline-3">
|
||
<h3 id="org2d9f8e0"><a href="#org2d9f8e0">class 2:</a></h3>
|
||
<div class="outline-text-3" id="text-org2d9f8e0">
|
||
<p>
|
||
@startuml
|
||
skinparam classAttributeIconSize 0
|
||
skinparam packageStyle rectangle
|
||
skinparam linetype ortho
|
||
left to right direction
|
||
</p>
|
||
|
||
<p>
|
||
’ Entity Layer
|
||
rectangle “Entity Layer” as EntityLayer #E3F2FD {
|
||
class User {
|
||
+id: Long
|
||
+roles: Set<String>
|
||
+firstName: String
|
||
+lastName: String
|
||
+username: String
|
||
+password: String
|
||
+confirmPassword: String
|
||
+email: String
|
||
+phoneNumber: String
|
||
+picture: byte[]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Workspace {
|
||
+id: Long
|
||
+name: String
|
||
+description: String
|
||
+fileCount: int
|
||
+noteCount: int
|
||
+lastAccessed: LocalDateTime
|
||
+dateCreated: LocalDateTime
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Library {
|
||
+id: Long
|
||
+name: String
|
||
+description: String
|
||
+dateCreated: LocalDateTime
|
||
+lastAccessed: LocalDateTime
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Page {
|
||
+id: Long
|
||
+name: String
|
||
+workspaceId: Long
|
||
+content: Text
|
||
+height: int
|
||
+width: int
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class FileMetadata {
|
||
+id: Long
|
||
+fileUrl: String
|
||
+userId: String
|
||
+description: String
|
||
+fileData: byte[]
|
||
+fileName: String
|
||
+fileType: String
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class AiChat {
|
||
+id: Long
|
||
+name: String
|
||
+workspaceId: Long
|
||
+createdAt: LocalDateTime
|
||
+messages: List<AIChatMessage>
|
||
}
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Repository Layer
|
||
rectangle “Repository Layer” as RepositoryLayer #E8F5E9 {
|
||
class AiChatRepository
|
||
class FileMetadataRepository
|
||
class LibraryRepository
|
||
class PageRepository
|
||
class UserRepository
|
||
class WorkspaceRepository
|
||
class RegisterRepository
|
||
class AuthRepository
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Service Layer
|
||
rectangle “Service Layer” as ServiceLayer #FFF3E0 {
|
||
class AiChatService
|
||
class AuthService
|
||
class FileMetadataService
|
||
class LibraryService
|
||
class PageService
|
||
class RegisterService
|
||
class UserService
|
||
class WorkspaceService
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Controller Layer
|
||
rectangle “Controller Layer” as ControllerLayer #F3E5F5 {
|
||
class AiChatController
|
||
class AiChatWebSocketController
|
||
class AuthController
|
||
class FileMetadataController
|
||
class LibraryController
|
||
class PageController
|
||
class RegisterController
|
||
class UserController
|
||
class WorkspaceController
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ External Python Microservice
|
||
rectangle “External NLP Module (Python FastAPI)” as ExternalNLP #FCE4EC {
|
||
class FastAPINLPServer {
|
||
+/extract<sub>text</sub>
|
||
+/keywords
|
||
+/tfidf<sub>keywords</sub>
|
||
+/summarize
|
||
+/ner
|
||
}
|
||
}
|
||
</p>
|
||
|
||
|
||
|
||
<p>
|
||
rectangle “Frontend Core” as FrontendCore {
|
||
class AboutComponent
|
||
class AccessibilityComponent
|
||
class ContactComponent
|
||
class ForgotPasswordComponent
|
||
class LoginComponent
|
||
class LoginService
|
||
class PrivacyComponent
|
||
class RegisterComponent
|
||
class RegisterService
|
||
class SecurityComponent
|
||
class TermsComponent
|
||
</p>
|
||
|
||
<p>
|
||
LoginComponent –> LoginService
|
||
RegisterComponent –> RegisterService
|
||
</p>
|
||
|
||
<p>
|
||
LoginService ..> AuthController : REST
|
||
RegisterService ..> RegisterController : REST
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
rectangle “Frontend Entities” as FrontendEntities {
|
||
class AiChatComponent
|
||
class DashboardComponent
|
||
class DefaultLayoutComponent
|
||
class HomeComponent
|
||
class LibraryComponent
|
||
class ProfileComponent
|
||
class WorkspacePageComponent
|
||
class WorkspacesComponent
|
||
</p>
|
||
|
||
<p>
|
||
class AiChatServiceFE
|
||
class DashboardServiceFE
|
||
class LayoutServiceFE
|
||
class HomeServiceFE
|
||
class LibraryServiceFE
|
||
class ProfileServiceFE
|
||
class WorkspacePageServiceFE
|
||
class WorkspacesServiceFE
|
||
</p>
|
||
|
||
<p>
|
||
AiChatComponent –> AiChatServiceFE
|
||
DashboardComponent –> DashboardServiceFE
|
||
DefaultLayoutComponent –> LayoutServiceFE
|
||
DefaultLayoutComponent –> LoginComponent
|
||
DefaultLayoutComponent –> RegisterComponent
|
||
HomeComponent –> HomeServiceFE
|
||
LibraryComponent –> LibraryServiceFE
|
||
ProfileComponent –> ProfileServiceFE
|
||
WorkspacePageComponent –> WorkspacePageServiceFE
|
||
WorkspacesComponent –> WorkspacesServiceFE
|
||
</p>
|
||
|
||
<p>
|
||
ForgotPasswordComponent ..> UserController : REST
|
||
AiChatServiceFE ..> AiChatController : REST
|
||
AiChatServiceFE ..> AiChatWebSocketController : WebSocket
|
||
</p>
|
||
|
||
<p>
|
||
DashboardServiceFE ..> WorkspaceController : REST
|
||
DashboardServiceFE ..> PageController : REST
|
||
DashboardServiceFE ..> AiChatController : REST
|
||
</p>
|
||
|
||
<p>
|
||
LayoutServiceFE ..> UserController : REST
|
||
</p>
|
||
|
||
<p>
|
||
HomeServiceFE ..> AuthController : REST
|
||
</p>
|
||
|
||
<p>
|
||
LibraryServiceFE ..> LibraryController : REST
|
||
LibraryServiceFE ..> FileMetadataController : REST
|
||
</p>
|
||
|
||
<p>
|
||
ProfileServiceFE ..> UserController : REST
|
||
</p>
|
||
|
||
<p>
|
||
WorkspacePageServiceFE ..> PageController : REST
|
||
WorkspacePageServiceFE ..> FileMetadataController : REST
|
||
WorkspacePageServiceFE ..> AiChatController : REST
|
||
</p>
|
||
|
||
<p>
|
||
WorkspacesServiceFE ..> WorkspaceController : REST
|
||
AboutComponent –> ContactComponent
|
||
AboutComponent –> TermsComponent
|
||
AboutComponent –> PrivacyComponent
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class AngularClient
|
||
AngularClient –> FrontendCore
|
||
AngularClient –> FrontendEntities
|
||
AngularClient ..> FastAPINLPServer : REST
|
||
</p>
|
||
|
||
|
||
<p>
|
||
’ Entity Relationships
|
||
User “1” –> “many” Library
|
||
User “1” –> “many” Workspace
|
||
Library “1” –> “many” Workspace
|
||
Library “1” –> “many” FileMetadata
|
||
Workspace “1” –> “many” Page
|
||
Workspace “1” –> “many” FileMetadata
|
||
Workspace “1” –> “many” AiChat
|
||
</p>
|
||
|
||
<p>
|
||
’ Controller → Service
|
||
AiChatController –> AiChatService
|
||
AiChatWebSocketController –> AiChatService
|
||
AuthController –> AuthService
|
||
FileMetadataController –> FileMetadataService
|
||
LibraryController –> LibraryService
|
||
PageController –> PageService
|
||
RegisterController –> RegisterService
|
||
UserController –> UserService
|
||
WorkspaceController –> WorkspaceService
|
||
</p>
|
||
|
||
<p>
|
||
’ Service → Repository
|
||
AiChatService –> AiChatRepository
|
||
AuthService –> AuthRepository
|
||
FileMetadataService –> FileMetadataRepository
|
||
LibraryService –> LibraryRepository
|
||
PageService –> PageRepository
|
||
RegisterService –> RegisterRepository
|
||
UserService –> UserRepository
|
||
WorkspaceService –> WorkspaceRepository
|
||
</p>
|
||
|
||
<p>
|
||
’ Repository → Entity
|
||
AiChatRepository –> AiChat
|
||
FileMetadataRepository –> FileMetadata
|
||
LibraryRepository –> Library
|
||
PageRepository –> Page
|
||
UserRepository –> User
|
||
WorkspaceRepository –> Workspace
|
||
RegisterRepository –> User
|
||
AuthRepository –> User
|
||
</p>
|
||
|
||
<p>
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-orgc653b2b" class="outline-3">
|
||
<h3 id="orgc653b2b"><a href="#orgc653b2b">authentication sequence diagram:</a></h3>
|
||
<div class="outline-text-3" id="text-orgc653b2b">
|
||
<p>
|
||
@startuml
|
||
title Full Authentication Flow - Registration to Secured Access
|
||
</p>
|
||
|
||
<p>
|
||
skinparam shadowing true
|
||
skinparam packageStyle rectangle
|
||
skinparam handwritten false
|
||
skinparam linetype polyline
|
||
skinparam ParticipantPadding 20
|
||
skinparam maxMessageSize 150
|
||
</p>
|
||
|
||
<p>
|
||
actor User
|
||
</p>
|
||
|
||
<p>
|
||
<code>= Registration Process =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “Client” #E3F2FD
|
||
participant UserClient as “User”
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
box “Backend - Registration” #E8F5E9
|
||
participant RegisterController
|
||
participant UserService
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
UserClient -> RegisterController : POST /register\n(username, password, confirmPassword)
|
||
RegisterController -> RegisterController : Check if passwords match
|
||
alt Passwords do not match
|
||
RegisterController –> UserClient : 400 Bad Request (Passwords mismatch)
|
||
return
|
||
end
|
||
RegisterController -> RegisterController : Hash password (BCrypt)
|
||
RegisterController -> RegisterController : Load default profile image
|
||
RegisterController -> UserService : createUser(user)
|
||
RegisterController –> UserClient : 200 OK (User Created)
|
||
</p>
|
||
|
||
<p>
|
||
<code>= Authentication Process =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “Backend - Authentication” #FFF3E0
|
||
participant AuthController
|
||
participant AuthenticationManager
|
||
participant JwtUtil
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
UserClient -> AuthController : POST /auth/login\n(username, password)
|
||
AuthController -> AuthenticationManager : Authenticate credentials
|
||
alt Valid credentials
|
||
AuthController -> JwtUtil : generateToken(userDetails, userId)
|
||
AuthController –> UserClient : 200 OK + JWT
|
||
else Invalid credentials
|
||
AuthController –> UserClient : 401 Unauthorized
|
||
return
|
||
end
|
||
</p>
|
||
|
||
<p>
|
||
<code>= Accessing a Protected API =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “Security Filter Chain” #F3E5F5
|
||
participant JwtRequestFilter
|
||
participant UserDetailsService
|
||
participant JwtUtilFilter as “JwtUtil”
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
UserClient -> JwtRequestFilter : Request with Authorization header
|
||
JwtRequestFilter -> JwtUtilFilter : extractUsername(jwt)
|
||
JwtRequestFilter -> UserDetailsService : loadUserByUsername
|
||
JwtRequestFilter -> JwtUtilFilter : validateToken(jwt, userDetails)
|
||
alt Valid token
|
||
JwtRequestFilter -> SecurityContext : Set authentication
|
||
else Invalid token
|
||
JwtRequestFilter -> JwtRequestFilter : Log and skip authentication
|
||
end
|
||
JwtRequestFilter –> UserClient : Continue filter chain
|
||
</p>
|
||
|
||
<p>
|
||
<code>= @JwtRequired Secured Method Access =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “AOP - Method Security” #E1F5FE
|
||
participant JwtAspect
|
||
participant JwtUtilAspect as “JwtUtil”
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
UserClient -> JwtAspect : Call method annotated with @JwtRequired
|
||
JwtAspect -> JwtAspect : Extract JWT from header
|
||
JwtAspect -> JwtUtilAspect : extractUsername(jwt)
|
||
JwtAspect -> SecurityContext : Get UserDetails
|
||
JwtAspect -> JwtUtilAspect : validateToken(jwt, userDetails)
|
||
alt Token valid and user matches
|
||
JwtAspect –> UserClient : Proceed to method execution
|
||
else Invalid/mismatched token
|
||
JwtAspect –> UserClient : Unauthorized exception
|
||
return
|
||
end
|
||
</p>
|
||
|
||
<p>
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-orgae45afc" class="outline-3">
|
||
<h3 id="orgae45afc"><a href="#orgae45afc">class</a></h3>
|
||
<div class="outline-text-3" id="text-orgae45afc">
|
||
<p>
|
||
@startuml
|
||
skinparam classAttributeIconSize 0
|
||
skinparam packageStyle rectangle
|
||
</p>
|
||
|
||
<p>
|
||
package “High-Level Overview” {
|
||
</p>
|
||
|
||
<p>
|
||
’ Controller Layer
|
||
package “Controller Layer” {
|
||
class AiChatController
|
||
class AiChatWebSocketController
|
||
class AuthController
|
||
class FileMetadataController
|
||
class LibraryController
|
||
class PageController
|
||
class RegisterController
|
||
class UserController
|
||
class WorkspaceController
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Service Layer
|
||
package “Service Layer” {
|
||
class AiChatService
|
||
class AuthService
|
||
class FileMetadataService
|
||
class LibraryService
|
||
class PageService
|
||
class RegisterService
|
||
class UserService
|
||
class WorkspaceService
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Repository Layer
|
||
package “Repository Layer” {
|
||
class AiChatRepository
|
||
class FileMetadataRepository
|
||
class LibraryRepository
|
||
class PageRepository
|
||
class UserRepository
|
||
class WorkspaceRepository
|
||
class RegisterRepository
|
||
class AuthRepository
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Entity Layer
|
||
package “Entity Layer” {
|
||
</p>
|
||
|
||
<p>
|
||
class User {
|
||
+id: Long
|
||
+roles: Set<String>
|
||
+firstName: String
|
||
+lastName: String
|
||
+username: String
|
||
+password: String
|
||
+confirmPassword: String
|
||
+email: String
|
||
+phoneNumber: String
|
||
+picture: byte[]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Workspace {
|
||
+id: Long
|
||
+name: String
|
||
+description: String
|
||
+fileCount: int
|
||
+noteCount: int
|
||
+lastAccessed: LocalDateTime
|
||
+dateCreated: LocalDateTime
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Library {
|
||
+id: Long
|
||
+name: String
|
||
+description: String
|
||
+dateCreated: LocalDateTime
|
||
+lastAccessed: LocalDateTime
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class Page {
|
||
+id: Long
|
||
+name: String
|
||
+workspaceId: Long
|
||
+content: Text
|
||
+height: int
|
||
+width: int
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class FileMetadata {
|
||
+id: Long
|
||
+fileUrl: String
|
||
+userId: String
|
||
+description: String
|
||
+fileData: byte[]
|
||
+fileName: String
|
||
+fileType: String
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
class AiChat {
|
||
+id: Long
|
||
+name: String
|
||
+workspaceId: Long
|
||
+createdAt: LocalDateTime
|
||
+messages: List<AIChatMessage>
|
||
}
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Python NLP Microservice
|
||
package “External NLP Module (Python FastAPI)” {
|
||
class FastAPINLPServer {
|
||
+/extract<sub>text</sub>
|
||
+/keywords
|
||
+/tfidf<sub>keywords</sub>
|
||
+/summarize
|
||
+/ner
|
||
}
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Entity Relationships
|
||
User “1” –> “many” Library
|
||
User “1” –> “many” Workspace
|
||
Library “1” –> “many” Workspace
|
||
Library “1” –> “many” FileMetadata
|
||
Workspace “1” –> “many” Page
|
||
Workspace “1” –> “many” FileMetadata
|
||
Workspace “1” –> “many” AiChat
|
||
</p>
|
||
|
||
<p>
|
||
’ Controller → Service
|
||
AiChatController –> AiChatService
|
||
AiChatWebSocketController –> AiChatService
|
||
AuthController –> AuthService
|
||
FileMetadataController –> FileMetadataService
|
||
LibraryController –> LibraryService
|
||
PageController –> PageService
|
||
RegisterController –> RegisterService
|
||
UserController –> UserService
|
||
WorkspaceController –> WorkspaceService
|
||
</p>
|
||
|
||
<p>
|
||
’ Service → Repository
|
||
AiChatService –> AiChatRepository
|
||
AuthService –> AuthRepository
|
||
FileMetadataService –> FileMetadataRepository
|
||
LibraryService –> LibraryRepository
|
||
PageService –> PageRepository
|
||
RegisterService –> RegisterRepository
|
||
UserService –> UserRepository
|
||
WorkspaceService –> WorkspaceRepository
|
||
</p>
|
||
|
||
<p>
|
||
’ Repository → Entity
|
||
AiChatRepository –> AiChat
|
||
FileMetadataRepository –> FileMetadata
|
||
LibraryRepository –> Library
|
||
PageRepository –> Page
|
||
UserRepository –> User
|
||
WorkspaceRepository –> Workspace
|
||
RegisterRepository –> User
|
||
AuthRepository –> User
|
||
</p>
|
||
|
||
<p>
|
||
’ Frontend → NLP Server
|
||
</p>
|
||
|
||
<p>
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Frontend Component
|
||
package “Frontend” {
|
||
class AngularClient
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Angular communicates with both backends
|
||
AngularClient ..> AiChatController : REST
|
||
AngularClient ..> AiChatWebSocketController : WebSocket
|
||
AngularClient ..> AuthController : REST
|
||
AngularClient ..> PageController : REST
|
||
AngularClient ..> FileMetadataController : REST
|
||
AngularClient ..> WorkspaceController : REST
|
||
AngularClient ..> LibraryController : REST
|
||
AngularClient ..> RegisterController : REST
|
||
AngularClient ..> UserController : REST
|
||
AngularClient ..> FastAPINLPServer : REST
|
||
</p>
|
||
|
||
<p>
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-org6fe7f5f" class="outline-3">
|
||
<h3 id="org6fe7f5f"><a href="#org6fe7f5f">client-server</a></h3>
|
||
<div class="outline-text-3" id="text-org6fe7f5f">
|
||
<p>
|
||
@startuml
|
||
!pragma layout smetana
|
||
</p>
|
||
|
||
<p>
|
||
actor User
|
||
</p>
|
||
|
||
<p>
|
||
package “Client Side (Angular)” {
|
||
[Angular App] as Frontend
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “Spring Boot Backend” {
|
||
[Auth Controller]
|
||
[Note Controller]
|
||
[NLP Proxy Service]
|
||
[Spring Boot App] as Backend
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “Database Layer” {
|
||
database “PostgreSQL Database” as DB
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “FastAPI NLP Server (Port 9010)” {
|
||
[FastAPI NLP Service] as NLP
|
||
[Summarisation Endpoint] as SumEndpoint
|
||
[Keyword Extraction] as KeywordEndpoint
|
||
[NER Endpoint] as NEREndpoint
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “External API” {
|
||
[OpenAI API]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Interactions
|
||
User –> Frontend : Uses Web Interface
|
||
Frontend –> Backend : REST API Calls
|
||
Backend –> [Auth Controller] : Handles Auth
|
||
Backend –> [Note Controller] : Handles Notes
|
||
Backend –> [NLP Proxy Service] : Handles NLP Requests
|
||
[Auth Controller] –> DB : Access users table
|
||
[Note Controller] –> DB : Access notes table
|
||
[NLP Proxy Service] –> NLP : HTTP (port 9010)
|
||
NLP –> SumEndpoint : /summarise
|
||
NLP –> KeywordEndpoint : /keywords
|
||
NLP –> NEREndpoint : /ner
|
||
SumEndpoint –> [OpenAI API] : API call for contextual help
|
||
</p>
|
||
|
||
<p>
|
||
note right of Frontend
|
||
Angular app includes:
|
||
</p>
|
||
<ul class="org-ul">
|
||
<li>Note Editor</li>
|
||
<li>Summary View</li>
|
||
<li>Keyword Panel</li>
|
||
</ul>
|
||
<p>
|
||
end note
|
||
</p>
|
||
|
||
<p>
|
||
note right of Backend
|
||
Spring Boot includes:
|
||
</p>
|
||
<ul class="org-ul">
|
||
<li>Auth Controller</li>
|
||
<li>Note Controller</li>
|
||
<li>NLP Proxy Service (calls FastAPI)</li>
|
||
</ul>
|
||
<p>
|
||
end note
|
||
</p>
|
||
|
||
<p>
|
||
note right of NLP
|
||
FastAPI exposes endpoints for:
|
||
</p>
|
||
<ul class="org-ul">
|
||
<li>Summarisation (Pegasus)</li>
|
||
<li>Keyword Extraction (TF-IDF, YAKE)</li>
|
||
<li>NER (spaCy)</li>
|
||
</ul>
|
||
<p>
|
||
end note
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-orgf2791a4" class="outline-3">
|
||
<h3 id="orgf2791a4"><a href="#orgf2791a4">high level:</a></h3>
|
||
<div class="outline-text-3" id="text-orgf2791a4">
|
||
<p>
|
||
@startuml
|
||
skinparam componentStyle uml2
|
||
skinparam packageStyle rectangle
|
||
</p>
|
||
|
||
<p>
|
||
package “Client (Frontend)” {
|
||
[Angular UI]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “Java Backend (Spring Boot)” {
|
||
[REST API Controller Layer]
|
||
[WebSocket Controller]
|
||
[Service Layer]
|
||
[Repository Layer]
|
||
[JPA Entities]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “Python NLP Service” {
|
||
[FastAPI Server]
|
||
[Summarizer (Pegasus)]
|
||
[Keyword Extractor (YAKE / TF-IDF)]
|
||
[NER (spaCy)]
|
||
[Extract Text (Canvas Object)]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
package “External Services” {
|
||
[OpenAI API]
|
||
[PostgreSQL DB]
|
||
}
|
||
</p>
|
||
|
||
<p>
|
||
’ Communication Arrows
|
||
[Angular UI] –> [REST API Controller Layer] : REST API (JSON)
|
||
[Angular UI] –> [WebSocket Controller] : WebSocket
|
||
</p>
|
||
|
||
<p>
|
||
[REST API Controller Layer] –> [Service Layer]
|
||
[WebSocket Controller] –> [Service Layer]
|
||
[Service Layer] –> [Repository Layer]
|
||
[Repository Layer] ..> [JPA Entities] : uses
|
||
[Service Layer] –> [OpenAI API] : API calls
|
||
</p>
|
||
|
||
<p>
|
||
[Service Layer] –> [FastAPI Server] : REST (NLP Requests)
|
||
[FastAPI Server] –> [Summarizer (Pegasus)]
|
||
[FastAPI Server] –> [Keyword Extractor (YAKE / TF-IDF)]
|
||
[FastAPI Server] –> [NER (spaCy)]
|
||
[FastAPI Server] –> [Extract Text (Canvas Object)]
|
||
</p>
|
||
|
||
<p>
|
||
[Repository Layer] –> [PostgreSQL DB] : Hibernate ORM
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-org3abacd3" class="outline-3">
|
||
<h3 id="org3abacd3"><a href="#org3abacd3">title AI Chat + Workspace Workflow</a></h3>
|
||
<div class="outline-text-3" id="text-org3abacd3">
|
||
<p>
|
||
@startuml
|
||
title AI Chat + Workspace Workflow
|
||
</p>
|
||
|
||
<p>
|
||
skinparam shadowing true
|
||
skinparam packageStyle rectangle
|
||
skinparam handwritten false
|
||
skinparam linetype polyline
|
||
skinparam ParticipantPadding 20
|
||
skinparam maxMessageSize 150
|
||
</p>
|
||
|
||
<p>
|
||
actor User
|
||
</p>
|
||
|
||
<p>
|
||
<code>= AI Chat Session Creation =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “Client” #E3F2FD
|
||
participant AngularClient as “User”
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
box “Backend - AI Chat” #E8F5E9
|
||
participant AiChatController
|
||
participant AiChatService
|
||
participant AiChatRepository
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
box “External NLP Service” #FCE4EC
|
||
participant FastAPINLPServer as “FastAPI NLP”
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
User -> AngularClient : Open AI Chat page
|
||
AngularClient -> AiChatController : POST /ai-chat\n(chat metadata)
|
||
AiChatController -> AiChatService : createChat(chatDto)
|
||
AiChatService -> AiChatRepository : save(chat)
|
||
AiChatService –> AiChatController : chatId
|
||
AiChatController –> AngularClient : 200 OK + chatId
|
||
</p>
|
||
|
||
<p>
|
||
User -> AngularClient : Send message via WebSocket
|
||
AngularClient -> AiChatWebSocketController : message
|
||
AiChatWebSocketController -> AiChatService : handleMessage()
|
||
</p>
|
||
|
||
<p>
|
||
alt Message requires NLP
|
||
AiChatService -> FastAPINLPServer : POST /summarize or /ner
|
||
FastAPINLPServer –> AiChatService : NLP result
|
||
end
|
||
</p>
|
||
|
||
<p>
|
||
AiChatService -> AiChatRepository : update(chat with message)
|
||
AiChatWebSocketController –> AngularClient : Message response
|
||
</p>
|
||
|
||
<p>
|
||
<code>= Workspace Creation =</code>
|
||
</p>
|
||
|
||
<p>
|
||
box “Backend - Workspace” #FFF3E0
|
||
participant WorkspaceController
|
||
participant WorkspaceService
|
||
participant WorkspaceRepository
|
||
end box
|
||
</p>
|
||
|
||
<p>
|
||
User -> AngularClient : Create Workspace
|
||
AngularClient -> WorkspaceController : POST /workspace\n(name, description)
|
||
WorkspaceController -> WorkspaceService : createWorkspace(dto)
|
||
WorkspaceService -> WorkspaceRepository : save(workspace)
|
||
WorkspaceService –> WorkspaceController : workspaceId
|
||
WorkspaceController –> AngularClient : 200 OK + workspaceId
|
||
</p>
|
||
|
||
<p>
|
||
@enduml
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="outline-container-orge25d17d" class="outline-2">
|
||
<h2 id="orge25d17d"><a href="#orge25d17d">Screenshots:</a></h2>
|
||
<div class="outline-text-2" id="text-orge25d17d">
|
||
</div>
|
||
<div id="outline-container-orgee85374" class="outline-3">
|
||
<h3 id="orgee85374"><a href="#orgee85374">Draft 1:</a></h3>
|
||
<div class="outline-text-3" id="text-orgee85374">
|
||
|
||
<div id="orgc29c9b6" class="figure">
|
||
<p><img src="file:///home/zaine/master-folder/FYP/uml/draft1.png" alt="draft1.png" />
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<p class="backlinks-section" id="backlinks">
|
||
Backlinks
|
||
</p>
|
||
<ul class="org-ul backlinks-list">
|
||
<li><a href="20241210012703-fyp.html#ID-7d199fbe-b0e7-48fd-b8a1-793044dbea01">fyp</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></article></div></div>
|
||
<div id="postamble" class="status">
|
||
<footer>
|
||
<div class="copyright-container">
|
||
<div class="copyright">
|
||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||
<div class="generated">
|
||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.2 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.archlinux.org/">Arch</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|