-
Notifications
You must be signed in to change notification settings - Fork 2
GUI
This part of the project contains the whole frontend code. In the frontend there is used Angular 4 in connection with Typescript for the functionality and the model handling. Furthermore for displaying there is used HTML. Actually the build frontend code is already placed in the anonml-web module.
On start up the page shows an upload field. The user can drag and drop a judgment there or click the field and search the pdf file in the local file system to upload it. After uploading and processing the file it is displayed as text with the same format as the original. The found anonymizations are marked by different background colors for different Labels (e.g. Location, Person, Organisation). The anonymization which is actually looked at is marked by red squares before and after the original word(-sequence).
The frontend is mostly controlable without using the mouse to speed up the anonymization process. With pressing the following key the described operation is executed.
- a - accept the marked anonymization (basically saves it and replaces it with the generated replacment)
- d - decline the marked anonymization (set status on declined, keeps the marked original and marks it as declined)
- w - rework the marked anonymization (the focus of the curser jumps to the shown anonymization to edit its properties)
- s - save the document (after finishing the last anonymization it is possible to export the document)
- Create - In addition to the key control it is possible to mark words or word sequences with the mouse to set up a new anonymization. After marking the mouse focus is placed on the rework area on the right to set up the right label and a replacement for the new anonymization.
- Reaccess - It is possible to reaccess accepted or declined anonymizations by marking the replacement or the original with the light blue background with the mouse.
The frontend only communicates with the web module via http.
| Method | Path | Result | Comment |
|---|---|---|---|
| GET | /api/labels | list of the Label names | |
| POST | /api/upload | Document object | capable of pdf documents |
| POST | /api/update/anonymizations/ | sends the corrected anonymizations after saving | |
| GET | /api/save/ | opens a window to save the anonymized document |
Changing something in the frontend requires to set up an Angular project (you need to have installed the angular-cli):
-
Clonethe frontend code (e.g. via https://github.com/anon-ml/anonml-gui.git) - To get the resources create a new project with
ng new anon-gui - Now copy the node_mudules folder to your cloned project
- Install Bootstrap
It is possible to start up the frontend by ng serve to see changes directly without starting up the whole backend.
With ng build the whole frontend code (Typescript and HTML source) is compiled into Javascript to deliver it over the backend. The compiled source can be found under the /dist folder.
The content of the /dist folder has to be placed in the anonml-web/src/main/resources/resources folder of the anonml-web module to be deliverd by the backend.