-
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.
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 |
On start up the page shows an upload field. The user can drag and drop a judgment to anonymize as pdf there or click the field and search the pdf file in the local file system. 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 fields 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 (deletes it and keeps the marked original)
- 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 save and export the document. Saving the document leads to updating the training data with the saved anonymizations)
- 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.
To change something in the frontend it is necessary to set up a Angular Project with ng new anonml_gui, install bootstrap and clone the frontend code (e.g. via https://github.com/anon-ml/anonml-gui.git). After that set it all together. 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.