Detectarea similaritatilor intre document e Coordonator: Student: Prof.dr.ing.Fl orin Radulescu Rotarescu Ciprian Marian CUPRINS 1. INTRODUCERE… [627550]

UNIVERSITATEA POLITEHNICA BUCUREȘTI
FACULTATEA DE AUTOMATICĂ ȘI CALCULATOARE
DEPARTAMENTUL CALCULATOARE
ABD 2017 – 2019

PROIECT DE DIZERTA ȚIE
Detectarea similaritatilor intre document e

Coordonator: Student: [anonimizat].dr.ing.Fl orin Radulescu Rotarescu Ciprian Marian

CUPRINS

1. INTRODUCERE ……………….. ……………….. ……………… ……………….. ……………….. ……………….. ……………….. ……………….
2. CONTINUTUL DOCUM ENTATIEI ……………….. ……………….. ……….. ………………. ………………. ……………….. …………….. ..
3. CARACTERISTICILE TEHNOLOGIILOR PROPU SE PENTRU DEZVOLTARE ……………….. …….. ………. ……………….. ………….
3.1 JAVASCRIPT ……………….. ……………….. ……………….. …………… ………………. ………………. …. ……………….. …………..
3.2 ANGULAR.JS ……………….. ……………….. ……………….. …………… ………………. ………………. ……………….. ………………
3.3 NODE.JS ……. ……………….. ……………….. ……………….. ………….. ………………. ………………. ……………….. ……………..
3.4 HTML ……………….. ……………….. ……………….. ……………….. ….. …………………. ……………. … ……………….. ……………
3.5 CSS ……………….. ……………….. ……………….. ……………….. ……. ………………. ………………. ……………….. …………….. .
4. IMPLEMENTARI & CONCLUZII ……………….. ……………….. …………… ………………. ………………. ……………….. ………………
4.1 ALGORITMUL CREAT E DE JOHN RESIG ……………….. …………….. …………. ……………….. ….. ………….. ……………….. ..
4.2 DRAFTABLE COMPARE API ……………….. ……………….. ………….. ………………. ………………. ……………….. …….. ………
4.3 LEVENSHTEIN ALGO RITM ……………….. ……………….. ……………. ……………….. …….. ………. ……………….. …….. ………
4.4 TRIGRAM CO MPARISON………… ……………….. ……………….. ….. ……………….. …….. …….. ……………….. ………………..
4.5 COSINE SIL IMARITY ……………….. ……………….. ……………….. …. ……………….. …….. ……………….. ……………….. ………
4.6 JARO -WINKL ER ALGORITM …………. ……………….. ………………. ……………….. …….. ………. ……………….. …….. ……….
5. ALEGEREA METODEI DE IMPLEMENTARE ……………….. ……………… ……………….. …….. ………. ……………….. ……………..
6. CONFIGURA RE BACKEND ……………….. ……………….. ……………….. .. ……………….. …….. ………. ……………….. …….. ……….
7. APLICATIE UI/UX ……………….. ……………….. ………………. ……………. ……………….. …….. ………. ……………….. …….. ……….
8. TESTE ……………….. ……………….. ……………….. ……………….. ………… ……………….. …….. ………. ……………….. …….. ……….
9. CONCLUZII ……………….. ……………….. ……………….. ……………….. …. ……………….. …….. ………. ……………….. …….. ……….
10. BIBLIOGRAFIE ……………….. ……………….. …………………… …………. ……………….. …….. ………. ……………….. …….. ……….

LISTA FIGURILOR, TA BELELOR ȘI A PLANȘEL OR

Figura 1 – NodeJs create server ………………………………………………… …………………………….. ………………. ………………. …..
Figura 2 – HTML sample ………………………………………………………………………………………….. ………………. ………………. …..
Figura 3 – Algoritmul John Resig (1) ………………………………………………………………………….. ………………. ………………. ….
Figura 4 – Algoritmul John Resig (2) …………………………………………………… …………………….. ………………. ………………. ….
Figura 5 – Algoritmul John Resig – read/upload ………………………………………………………….. ………………. ………………. …
Figura 6 – Algoritmul John R esig – interfata ……………………………………………………………….. ………………. ………………. …
Figura 7 – Algoritmul John Resig – lista pdf ………………………………………………………………… ………………… …………….. ..
Figura 8 – Algoritmul John Resig – rezultat 1 ………………………………………………………………. ………………. ………………. …
Figura 9 – Algoritmul John Resig – rezultat 2 ………. ……………………………………………………… ………………. ………………. …
Figura 10 Draftable – Modificare titlu ……………………………………………………………………….. ……………….. …….. ………. …
Figura 11 Draftable – Modificare titlu si header …………………………………………………………. ……………….. …….. ………. ….
Figura 12 Algoritmul Levenshtein – formula ………………………………….. ………………………….. ……………….. …….. ………. ….
Figura 13 Cosine Similarity – formula ………………………………………………………………………… ……………….. …….. ………. …
Figura 14 Cosine Similarity – exemplu ……………………………………………………………………….. ……………….. …….. ………. …
Figura 15 Cosine Similarity – cuvinte gasite ……………………………………………………….. ……… ……………….. …….. ………. …
Figura 16 Cosine Similarity – numararea cuvintelor …………………………………………………….. ……………….. …….. ………. …
Figura 17 Cosine Similarity – vectori ………… ………………………………………………………………. ……………….. …….. ………. …
Figura 18 Algoritmul Jaro Winker – formula ……………………………………………………………….. ……………….. ……………… …
Figura 19 Algoritmul Jaro Winker – exemplu ………………………………………………………………. ………………. ………………. …
Figura 20 Algoritmul Jaro Winker – distanta Jaro ……………………………. …………………………… ………………. ………………. …
Figura 21 Algoritmul Jaro Winker – formula distantei Jaro -Winkler ……………………………… ………………. ………………. …
Figura 22 Algoritmul Jaro Winker – distanta Jaro -Winkler …………………………………………… ………………. ………………. …
Figura 23 Draftable – prezentare ………………………………………………………………………………. …………… …………. ………. …
Figura 24 Draftable – credentiale api ………………………………………………………………………… ……………….. …….. ………. …
Figura 25 Draftable – cont ………………………………… …………………………………………………….. ………………. ………………. …
Figura 26 Backend filles ………………………………………………………………………………………….. ………………. ………………. …
Figura 27 backend implementation (1) ……………………………………………………………………. ………………. ………………. …
Figura 28 backend implementation (2) …………………………………. ………………………………… ………………. ………………. …
Figura 28 backend implementation (3) ……………………………………………………………………. ………………. ………………. …
Figura 29 backe nd implementation (4) ……………………………………………………………………. ………………. ………………. …
Figura 30 backend implementation (5) ………………………………………………………………… …. ………………. ………………. …
Figura 31 backend implementation (6) ……………………………………………………………………. ………………. ………………. …
Figura 32 backend implementation (7) …………. ………………………………………………………… ………………. ……………… ….
Figura 33 backend implementation (8) ……………………………………………………………………. ………………. ……….. …….. …
Figura 34 backend implementation (9 ) ……………………………………………………………………. ………………. ………………. …

Figura 35 Mongodb DB ………………………………………………………. ………………………………… ………………. ………………. …..
Figura 36 Mongodb collections ……………………………………………………………………………….. ………………. ………………. ….
Figura 37 Mongodb UI – Login ………………………………………………………………………………… ………………. ……………….. ….
Figura 38 Mongodb UI – Dashboard ……………………………………………………….. ……………….. ………………. ……………….. …
Figura 39 Mongodb UI – Dashboard pdf files …………………………………………………………….. ………………. ………………. ….
Figura 40 Mongodb UI – Library ………………………………………………………………………………. ………………. ………………. …..
Figura 41 Mongodb UI – Create ……………………………………………………………………………….. ………………….. …………… ….
Figura 42 Teste – "Measuring the health of open source software ecosystems Beyond" ………………….. ……………… …..
Figura 43 Teste – "Measuring the health of open source software ecosystems Beyond" ……………………. ……………. …..
Figura 44 Teste – " Prezentare ISBD SQL vs NoSQL " …………………………………………………… ……………….. ……………… ….
Figura 45 Teste – " Prezentare ISBD SQL vs NoSQL " ……… ………………………………………….. ……………….. ……………… …..
Figura 46 Teste – " Prezentare ISBD SQL vs NoSQL " …………………………………………………… ……………….. ……………… ….
Figura 4 7 Teste – "Diacritice" …………………………………………………………………………………… ……………….. ……………….. ..

Detectarea similaritatilor intre documente
Tema isi propune sa se finali zeze cu o dizertatie in cadrul careia sa existe si o implementare a
unui program de testare a documentelor pentru a descoperi eventuale diferente intre acestea .

1. Introducere
Tema de cercetare aleasă implică implementarea unei aplicații de testare a documentelor ,
pentru a ajuta un user in a descoperi diferentele intre diverse doua documente . Acest lucru poate ajuta
o persoana sa vada ce modificari au intervenit intr -un document intr -o perioada mare de timp (lucrare
stiintifica, carti, etc).
Pentru im plementarea acestei teme propunem implementarea unei aplicații web ce permite
utilizatorului să compare fișiere de tip pdf prin care să se deducă modificările / similaritățile dintre
acestea. Este aleasa varianta web a aplicatiei datorita accesului usor a l acestuia de catre orice utilizator
si datorita faptului ca nu necesita nici o instalare pe un anumit device.
Petru aceasta a plicatie am ales sa folosesc AngularJS 1.6 ca si tehnologie principala si NodeJS ca
si backend. Aceste tehnologii mentionate pot fi structurate intr -o arhitectura de model MVC (Model –
View – Controller), ceea ce permite organizarea codului, separarea logicii, o optimizarea imbunatatita si
de asemenea permite modificarea codului mult mai usor (atat pentru dezvoltatorul initial cat s i pentru
alti participanti).
Aceasta aplicatie poate fi folositoare pentru persoanele care doresc sa vada evolutia
documentelor printr -o interfata simpla si usor de folosit iar aplicabilitatea ei poate varia . Cateva
exemple pot fi scanarea a doua docume nte pentru a verifica similiaritatea acestora, ver ificarea
documentelor pentru a vedea diferenta intre versiunea veche si cea noua, detectarea semnelor
ortografice si multe altele.
Aceasta aplicatie poate fi folosita si pentru a detecta plagiatul intr -o masura limita. Ne putem da
seama de acest lucru datorita faptului ca doar textul lipsa sau modificat este evidentiat in aceasta
aplicatie iar restul textului este identic. Deci prin concluzie se poate descoperi nu numai ce modificari a
suferit documentul i n cauza ci putem stabili si daca documentul a fost plagiat.
Plagiatul reprezintă însusirea unor idei, metode, tehnologii sau texte ale unei persoane ca fiind
creație personală, indiferent de modalitatea prin care acestea au fost obținute, iar implementarea unei
aplicații pentru combaterea acestui neajuns și anume d etectarea textelor ce conțin un format similar
poate fi benefic (în special pentru instituțiile de învățământ).
Deasemenea doresc sa evidentiez faptul ca aceasta aplicatie nu are ca obiectiv detectarea
plagiatului. Exista tooluri si aplicatii mult mai a vansate pentru acest lucru si de asemenea mult mai
avansate din punct de vedere al implementarii iar aceasta functionalitate nu reprezinta obiectul
principal al acestui web app ci poate fi considerata una secundata daca chiar se doreste acest lucru.
Merit a mentionat si faptul ca nu exista multe aplicatii de acest gen disponibil in mediul web iar
implementarea si posibil dezvoltarea acesteia poate fi considerata si o solutie financiara daca se doreste
acest aspect. Insa daca se doreste acest lucru trebuie s a existe o fundatie solida din punct de vedere al
securitatii deoarece poate fi vorba de informatii confidentiale.
In paginile urmatoare sunt descrise mai multe informatii despre aceasta aplicatie web,
cercetarea amanuntita folosita pentru implementare, d etalii tehnice folosite in aplicatie cum ar fi
backend -ul folosit, tehnologiile folosite, interfetele web disponibile precum si rezultatele obtinute in
urma testelor implicate in cadrul dezvoltarii.

2. Continutul documentatiei
In cadrul ace stui document sunt evidentiate date teh nice legate de cod ul folosit (de exemplu
backend -ul folosit, ce baze de date sunt folosite, backend routes pentru frontend) , ce solutii au fost
gasite pentru implementarea temei alese, rezultate si teste, solutia acceptata pentru implementare,
implementarea solutiei acceptate in aplicatia de tip web si rezultatele obtinute.
Tot in acest document se pot gasi algoritmii si API (aplication program interface) folositi in
cercertare pentru a gasi o solutie ideala pentru aceasta aplicat ie. Cateva exemple pot fi:
Algoritmul Resign care folose ste of licenta MIT si permite diferentierea textelor din doua locatii
si produce un text final cu moficarile evidentiate sub diverse culori / subliniate.
Algoritmul Trigam este folosit pentru a comp ara doua stringuri si reprezinta secvente de n -gram .
Algoritmul Levenstein ce este folosita in acest algoritm masoara diferenta dintre doua secventa
iar in cazul nostru texte. Distanta dintre doua cuvinte/texte reprezinta numarul minim de editari ce cu
un singur caracter ce poate schimba semnificatia cuvantului in altul. Denumirea algoritmului vine de la
matematicianul Vladimir Levenshtein.
Algoritmul Jaro Winkler se baseza pe masurarea distantei de editare dintre doua frecvente.
Distanta Jar -Winkler foloseste o scala de prefix care ofera evaluari mai favorabile pentru siruri de
caractere care se potrivesc de la inceput pentru o lungime prestabilita.
Algorimul Cosine Similarity ce poate fi aplicat intre doua stringuri si este reprezentata ca punctul
de reprezentare vectorial al acestora.
Draftable Compare API ce este folosit pe ntru detectarea textel or dintr -un document
(https://github.com/draftable/compare -api-node -client).
Deasemenea sunt prezente toate paginile web disponibile in aceasta aplicati e si sunt explicate
toate functionalitatile pe care acestea le au (Login page, Dashboard page, Library page, Create page).
Sunt expuse si screenshots pentru fiecare pagina si sectiuni din pagina de interes in parte pentru o mai
buna intelegere a acestora.
Rezultatele sunt evidentiate atat in cadrul solutiei finale de implementare ( Draftable Compare
API ) pentru si a altor algoritmi folositi pe parcursul implementarii acestei aplicatii. A fost aleasa aceasta
medota deoarece a rezolva t o prob lema mare in t impul implementarii acestei aplicatii si aceea de a fi
user friendly. O aplicatie web trebuie cat mai prietenoasa cu utilizatorii sau aceasta risca sa nu fie
utilizata deloc indiferent cat de multa utilitatea genereaza aceasta.
Fiecare rezultat este expli cat si sunt expuse screenshots din aplicatie pentru a oferi un punct de
vedere solid pentru cel care citeste.
Tot in aceast document sunt explicate tehnologiile folosite, o scurta descriere al acestora,
motivul pentru care au fost folosite si in unele caz uri cateva exemple de cod pentru o mai buna
intelegere a acestora.
In ultima parte a documentatiei exista de asemenea cateva concluzii la care s -au ajuns in urma
implementarii acestei aplicatii si a deciziilor luate pe baza experientei acumulate in tot ac est timp.
Deasemenea sunt prezente si bibliografiile si sursele de referinta luate pentru implementarea aplicatiei.
3. Caracteristicile tehnologiilor propuse pentru dezvoltare
In acest capitol sunt prezentate caracteristiciile tehnologiilor propuse pentr u dezvoltarea temei
propuse. Acestea sunt principalele tehnologii esențiale pentru implemetarea temei de detectare a
textelor plagiate.

3.1 Javascript
JavaScript este folosit cel mai frecvent limbaj de programare folosit pe partea de frontend a
unei aplicatii web. Cu ajutorul aces tuia se pot implementa diverse interactiuni intre browser si user
(butoane, evenimente la click, animatii, etc), conectarea unei aplicatii cu o baza de date, transmiterea
de date catre o baza de date, extragerea de informatatii dintr -o baza de date, calc ule complexe si
procesari avansate ce pot crea un user experience foarte bun.
Datorita simplitatii acestui limbaj de programare s -au produs un numar mare de librarii utile,
foarte multe fiind open scource iar comunitatea din spatele acestora fiind una sem nificativa ajuta
dezvoltatea aplicatiilor web.
JavaScript poate fi folosit în alte contexte decât un browser Web. Netscape a creat JavaScript de
pe server ca limbă CGI care poate fi aproximativ aceeași ca și Perl sau ASP. Nu există niciun motiv pentru
care JavaScript nu a putut fi folosit pentru a scrie programe reale, complexe. Cu toate acestea, acest site
se ocupă exclusiv de utilizarea JavaScript în browserele web.
JavaScript este de asemenea in mod frecvent mentionat ca si Java, lucru eronat deoarece Ja va si
Javascript sunt doua limbaje de programare total diferite.
Deși numele sunt foarte asemănătoare, JavaScript este în primul rând un limbaj de scripting
pentru utilizarea în paginile HTML, în timp ce Java este un limbaj de programare real care face lu cruri
destul de diferite de cele ale JavaScript.
Java și JavaScript coboară din C și C ++, dar limbile (sau, mai degrabă, strămoșii lor) au mers în
direcții destul de diferite.
JavaScript nu este un limbaj de programare în sens strict. În schimb, este un l imbaj de scripting,
deoarece utilizează browser -ul pentru a face munca murdară. Insa JavaScript poate fi destul de dificil.
Acest lucru este rar necesar atunci când se ocupă de pagini web, dar este posibil. Aceasta înseamnă că
există câteva structuri com plexe de programare pe care le veți înțelege numai după studii prelungite.
Toate browserele web moderne acceptă JavaScript cu ajutorul interpreților încorporați.
JavaScript este aproape în întregime bazat pe obiecte . În JavaScript, un obiect este o matrice
asociativă , augmentată cu un prototip (vezi mai jos); fiecare cheie de șir furnizează numele unei
proprietăți obiect și există două modalități sintactice de a specifica un astfel de nume: notație punct
( obj.x = 10 ) și notație bracket ( obj ['x'] = 10 ). O proprietate poate fi adăugată, reluată sau șters în
timpul execuției. Majoritatea proprietăților unui obiect (și a oricărei proprietăți care aparține lanțului de
moșteniri prototip al unui obiect) pot fi enumerate utilizând o funcție pentru … în buclă.
JavaScript utilizează prototipuri în care multe alte limbi orientate pe obiecte
folosesc clase pentru moștenire . Este posibil să se simuleze multe caracteristici bazate pe clasă cu
prototipuri în JavaScript.

3.2 Angular.JS
Datorita polularitatii pe care o are Javascript -ul si a dezvoltarii acestuia de catre intregi
comunitati s -au dezvoltat diverse framework -uri care are la baza acestuia Javascript .
AngularJS este un astfel de framework ce poate fi folosit pentru aplicațiile web dinamice. Vă
permite să utilizat i codul HTML pentru a insera logica de javascript in acesta folosind anumite simboluri
( {{ }} ) sau comenzi speciale pentru a performa loops sau alte taskuri generale intr -o aplicatie (ng -repeat,
ng-show, ng -hide, etc).

AngularJS “data binding” si “dependency injection” ajuta dezvoltatorul sa economiseaza timp in
a scrie cod pentru tascur i generale cum ar fi actualizarea datelor atat in view cat si in controller .
Asa cum am mentionat anterior Angular JS simplifică dezvoltarea aplicațiilor prin stabilirea unor
seturi de reguli si de comenzi pentru a face viata unui d ezvoltator mai usoara dar trebuie stiut de la bun
inceput ca acest framework este doar o solutie pentru un anumit tip de problema iar de asemenea se
poate stabili ca nu orice tip de aplicație este potrivită pentru AngularJS. AngularJS a fost construit avand
ca scop construirea de aplicatii web . Din fericire, o mare parte din aplicatiile utilizate din viata de zi cu zi
sunt aplicațiilor web .
Cateva din elementele cheie ale lui Angular.JS sunt :
Data bindings , acestea sunt simbolizate prin {{} } iar acestea ajuta in transmiterea de
variabile/functii din controller in HTML . De exemplu daca doresti sa populezi textul unui div cu datele
dintr -o variabila din angular transmiterea acestora se poate face prin :
$scope.name = " John Doe ";
<div>{{ name }} </div>;
Structuri de control DOM cum ar fi repetarea de date dintr -un array, afișarea, ascunderea
segmentelor dintr -un DOM:
$scope.hideTemplate = false;
<div ng -if="hideTemplate"></div>
In cazul de mai sus comanda ng -if poate afisa sau ascunde un continut daca continutul din ""
este translatat intr -un boolean de true.
In cazul in care un ng -if este false continutul cat si elementul HTML este scos complet din DOM
si acest lucru poate fi aratat cu ajutorul unui inspect dat din browser.
<div ng -show="hideTemplate"></div>
<div ng -hide ="hideTemplate"></div>
Comenzile de mai sus sunt folosite pentru a afisa sau ascunde anumite portiuni din DOM
(document object model).
$scope.listArray = [1,2,3,4,5];
<ul>
<li ng -repeat="list in listArray"> {{ list }} </li>
</ul>
Ng-repreat este folosit pentru a itera prin liste si de asemenea pentru afisarea datelor in DOM.
Pe langa afisarea acestora se pot adauga comenzi aditionale pentru a extra indexul acestora sau diverse
informatii in functie de continutul listei (list of objects).
Angular JS permite dezoltatorului sa isi compuna singuri propriile instructiuni de Dom cu ajutorul
directivelor si a componentelor.

3.3 NodeJS
Node.js este o platforma construita cu ajutorul limbajului de programare C++ si cu ajutorul
acestuia se pot acces a fisiere de pe device -ul instalat (laptop/calculator), se pot crea fisiere/edita fisiere,
se poate crea un server de backend pentru diverse aplicatii si multe altele.

Node este proiectat pentru a const rui aplicații scalabile si se pot implementa aplicati i de tip reat
time chat cum ar fi "whatsapp" . În exemplul de mai jos figureaza crearea unui server de transmite
"hello world" . Prin ajutorul acestui server se pot face mai multe conexiuni ce pot fi gestionate simultan.

Figura 1 – NodeJs create server
Merita mentionat faptul ca te poti conecta la diverse baze de date (MySQL, SQL, NoSQL) cu
ajutorul pachetelor NPM si de asemenea sa transmiti date catre orice aplicatie se doreste. Aceste
pachete NPM sunt dezvoltate de catre dezvoltatori sau echipe de dezvoltatori ce rezolva diverse
probleme din viata de zi cu zi a unui developer (editare de fisiere pdf, algoritmi complexi, etc ).
De asemenea trebuie mentionat ca este foarte usor sa instalezi NodeJS s i exista mult support in
cazul in care exista probleme de instalare sau altele.

3.4 HTML
Acronimul HTML reprezintă Hypertext Marku p Language si e ste folosit pentru a scrie conținut pe
web , orice aplicatie web are cel putin o pagina de tip HTML . HTML a fost creat în 1991 de Tim Berners –
Lee , creatorul oficial și fondator al ceea ce acum știm ca World Wide Web.
Limba HTML consta dintr -o serie de coduri scurte introduce intr -un fisier de tip html pentru ca
un browser sa il poata citi si interpreta codul inserat in acesta.
HTML -ul poate fi afectat de diverse pluggin -uri sau framework -uri ce poate rezulta in
monipularea acestuia si afisarea unui continut nou/editat.
HTML poate încorpora programe scrise într -o limbă de scripting, cum ar fi JavaScript, care
afectează comportamentul și conținutul paginilor web. Includerea CSS definește aspectul și aspectul
conținutului.

Acest browser citeste fisierul si tradu ce textul intr -o forma vizibila. Pentru editarea codului
pentru aceasta aplicatie am folosit Sublime Text 3 iar un cod HTML arata ca si in figura urmatoare:

Figura 2 – HTML sample
3.5 CSS
CSS-ul poate fi folosit pentru a stiliza continutul web . CSS-ul poate
îmbunătăți accesibilitatea conținutului , poate oferi mai multă flexibilitate și control în specificarea
caracteristicilor de prezentare, permite mai multor pagini HTML să împărtășească forma tarea
specificând CSS relevant într -un fișier .css separat și reducând complexitatea și re petarea conținutului
structural .
CSS este conceput în primul rând pentru a permite separarea prezentării și a conținutului,
inclusiv aspecte precum aspectul , culorile și fonturile .
Această separare poate îmbunătăți accesibilitatea conținutului , poate oferi mai multă
flexibilitate și control în specificarea caracteristicilor de prezentare, permite mai multor pagini HTML să
împărtășească formatarea specificând CSS relevant într -un fișier .css sepa rat și reducând complexitatea
și repetarea conținutului structural .
CSS are o sintaxă simplă și utilizează un număr de cuvinte cheie în limba engleză pentru a
specifica numele diferitelor proprietăți ale stilului.
O foaie de stil constă dintr -o listă de reguli . Fiecare regulă sau set de reguli constă dintr -unul
sau mai mulți selectori și un bloc de declarație .
În CSS, selectorii declară care parte a marcajului aplică un stil prin potrivirea etichetelor și
atributelor în marcajul propriu -zis.
Selectorii se pot aplica la:
toate elementele de tipul specific, de exemplu, anteturile de nivelul al doilea h2
elemente specificate prin atribute , în special:
id : un identificator unic în document
clasă : un identificator care poate adnota mai multe elemente într -un document
elemente în funcț ie de modul în care sunt plasate în raport cu ceilalți în arborele de documente .
Clasele și ID -urile sunt sensibile la litere mici, încep cu litere și pot include caractere
alfanumerice și subliniere. O clasă se poate aplica oricărui număr de elemente de elemente. Un ID poate
fi aplicat numai unui singur element.

Pseudo -clasele sunt folosite în selectorii CSS pentru a permite formatarea pe baza informațiilor
care nu sunt conținute în arbore le de documente. Un exemplu de clasă pseudo -utilizată :
:hovera:hover#elementid:hover:link:visited::first -line::first -letter
Selectorii pot fi combinați în mai multe moduri pentru a obține o mare specificitate și
flexibilitate.
Selectorii multipli pot f i uniți într -o listă distanțată pentru a specifica elementele după locație,
tip de element, id, clasă sau orice combinație a acestora si ordinea selectorilor este importantă

4. Implementari & concluzii
Pentru implementarea acestei teme s -a facut o ce rcetare mai amanuntita asupra posibilitatilor
de implementare a temei si in urma acestelor exista o serie de pros/cons. In urmatoarele pagini sunt
redate implementarile respective si concluziile de pe urma acestora.
4.1 Algoritmul creat de John Resig
Pentru detectarea textelor dintr -un document am ales sa folosesc un algoritm pentru textelor
creat de John Resig, care foloseste of licenta MIT. Acest algoritm permite diferentierea textelor din doua
locatii si produce un text final cu moficarile evidentiate sub diverse culori / subliniate.
În urmatoarea figura se poate observa rezultatul diferențelor detectate dintre două texte
aproape similare similar e.

Figura 3 – Algoritmul John Re sig (1)
In figura de mai sus sunt afisate trei texte “First Text”, “Second Text” si “Result”. “First Text”,
“Second Text sunt interpretate ca si doua documente diferite iar al treilea text reprezinta rezultatul
dintre cele anterioare.
In acest test am dorit sa compar continutul din “Second text” cu “First Text”. Al doilea
document contine cuvinte evidentiate in culoarea mov si au textul “inserted text” ce au fost introduse
special pentru a genera o comparare cu “First text”.
Rezultatul produs a fost d e a evidentia cuvintele introduse “inserted text” din al doilea
document cu o culoare albastra si de asemenea subliniate.

De asemenea s -a facut si un test in cazul incare situatia este inversata (“First Text” contine
cuvinte in plus) iar rezultatul se poa te evidentia imaginea de mai jos.

Figura 4 – Algoritmul John Resig (2)
In acest caz rezultatul compara al doilea document cu primul iar cuvintele ce nu se regasesc in
documentul al doilea sunt t aiate si evidentiate cu culoarea rosie.
Pentru continut de dimensiuni reduse acest algoritm face exact ce a fost propus dar pentru
continut de dimensiuni medii/mari rezultatul nu este chiar acela dorit. In urma unor teste mai
amanuntite s -a constat ca ace st algoritm poate avea o marja de eroare 5% -10% aceasta fiind destul de
mare (lucru evidentiat in imaginile de mai jos).
Pentru a parcuge cateva teste mai detaliate s -a creat o interfata foarte simpla ce are ca scop
urmatoarele obiective:
1. Citirea unu i pdf.
2. Inserarea continutului unui pdf in baza de date.
3. Vizualizarea documentelor din db sub forma de lista.
4. Folosirea algoritmului pe aceste documente.
Pentru citirea unui pdf si de inserarea continutului s -au creat doua butoate tip file ce indeplinesc
acest obiectiv. Butoanele sunt evidentiate in imaginile de mai jos.

Figura 5 – Algoritmul John Resig – read/upload

De asemenea trebuie evidentiat ca atunci cand se apasa butonul "Read File", se po puleaza
elementul html de tip div cu continutul acestuia (UPLOADED PDF SAMPLE).
Din punct de vedere al functi onalitatii butonul "Read File" apeleaza un api customizat pentru a
citi datele din fisierul selectat. Acesta la randul lui functioneaza cu o lib rarie de NodeJs.

Functionalitatea butonului de "Upload File" genereaza un document similar cu cel selectat cu file
upload intr -o locatie aleasa de developer. De obicei aceste fisiere sunt stocate pe un server pentru a
putea fi acesate de mai multi utiliza tori.

Figura 6 – Algoritmul John Resig – interfata

Pentru vizualizarea documentelor din baza de date am dorit sa le evidentiez sub forma unei liste
in care fiecare element reprezinta un document.

Figura 7 – Algoritmul John Resig – lista pdf

De asemenea trebuie evidentiat ca s -a introdus un eveniment la click pe aceste elemente. Atunci
cand se face un click pe acest element el, frontend -ul compara textul din sectiune a "Uploaded PDF
sample" cu continutul ascuns din elementul din lista selectat.
Din punct de vedere functional cand se compara cele doua fisiere se apeleaza algoritmul John
Resig din backend si genereaza un rezultatul sub forma unui string. Acest string es te poate fi evidentiat
prin culoare rosie, albastra sau neagra (default). Fiecare culoare reprezinta faptul ca exista diferente
intre cele documente:
Rosu – reprezinta text lipsa;
Albastru – inseamna text extra;
Negru – default ( exista in ambele docume nte );

Figura 8 – Algoritmul John Resig – rezultat 1
In imaginea de mai sus este selectat un pdf din baza de date ce contine acelasi continut cu un
fisier pdf selectat din sistemul de operare. In urma analizei s -a constatat ca textul/continutul este 100%
identic. Daca ar fi fost inserat intr -unul din documente un text ce nu se regaseste in celalalt fisier acesta
ar fi fost evidentiat cu text rosu/albastru in functie de ce fisier se compara primu.
In experimentul urmator folosind aceeasi pasi dar un alt obiect din baza de date avem urmatorul
rezultat.
In acest experiment am inserat un obiect cu text initial identic cu cel vizibil in partea stanga a
aplicatie si modificat ulterior cu text random.
In urma analizei se poate vedea ca doar 61% din text este identic cu fisierul propus pentru
testare.

Textul modificat/inserat este evidentiat in partea dreapta a aplicatie cu o culoare rosie / albastra
in functie situatia textului (daca a cesta a fost taiat dintr -un document sau acesta a fost completa in
celalalt) .

Figura 9 – Algoritmul John Resig – rezultat 2

Dupa o analiza ma i detaliata a l continutului am constatat ca exista o marja de eroare intre
procentajul dat de algorimt 61% si realitate.
Acest lucru a fost posibil datorita analizei zonei evidentiate in partea dreapta. Acest lucru indica
faptul ca acest algoritm functio neaza mai bine pe documentele cu text scurte decat cele indicate pentru
tema aleasa.

4.2 Draftable Compare API
Pentru detectarea textelor dintr -un document am ales sa folosesc un API popular numit
"Draftable Compare API" (https://github.com/draftable/co mpare -api-node -client).
Acest API vine si cu un demo pentru a vizualiza rezultatul dat de catre acesta librarie.
Rezultatul dat de catre dezvoltatori sta la baza compararii a doua fisiere(unul pdf si altul rtf).
numit "left.rtf" si "right.pdf". Intre a ceste doua fisiere sunt evidentiate diferentele de cuvintelor dintre
cele documente prin nuantare de background al cuvintelor lipsa sau adaugate (rosu/verde).
Url-urile pentru aceste doua fisiere sunt urmatoarele: 1.https://api.draftable.com/static/test –
documents/code -of-conduct/left.rtf;
2.https://api.draftable.com/static/test -documents/code -of-conduct/right.pdf
In Imaginile de mai jos sunt evidentiate modificarile pe care acestea le au:
1.Modificari la baza titlului ("STANDARDS/STATEMENT, ETHICS/STAND ARDS");

Figura 10 Draftable – Modificare titlu

2. Modificari in baza cuprinsului;

Figura 10 Draftable – Modificare cuprins
3.Modificari in baza continutului.

Figura 10 Draftable – Modificare continut

4.Modificar in b aza titlurilor si header -ului

Figura 11 Draftable – Modificare titlu si header
Acest exemplu dat de catre dezvoltatori constituie exact ce ce trebuie pentru tema aleasa. De
asemen ea ne si arata vizual toate diferentele intre cele doua documente prin compararea pdf -urilor in
paralel si sunt evidentiate toate modificarile in ambele parti prin backgrounduri diferite.
Fiind spuse partile pozitive despre acesta librarie exista de aseme nea si cons. Una dintre ele fiind
faptul ca exista o limita de utilizari free/luna iar depasirea acestei limite necesita un abonament lunar
platit pentru dezvoltatori.
4.3 Algoritmul Levenshtein
Distanta Levenstein ce este folosita in acest algoritm masoara diferenta dintre doua secve nta
iar in cazul nostru texte. Distanta dintre doua cuvinte/texte reprezinta numarul minim de editari ce cu
un singur caracter ce poate schimba semnificatia cuvantului in altul. Denumirea algoritmului vine de la
matemati cianul Vladimir Levenshtein.
Din punct de vedere matematic distanta intre doua siruri de caractere folosind acest algoritm (a,b) este:

Figura 12 Algoritmul Levenshtein – formula
De exemplu, distanța dintre "p isoi" și "așezat" (in engleza) distanta Levenshtein este de
3, deoarece următoarele trei modificări se schimbă una în cealaltă și nu există nicio modalitate
de a face acest lucru cu mai puțin de trei modificări:

k itten → s itten (substituirea lui "s" p entru "k")
sitt e n → sitt i n (înlocuirea lui "i" cu "e")
sittin → sittin g (introducerea "g" la sfârșit).

Acest algoritm este ideal pentru siruri de texte de mici dimensiuni si poate fi folosit pentru
aplicatii de verificare a ortografiei, sisteme de corectie sau alte aplicatii ce au ca scop traducerea
textelor.
4.4 Compararea Trigram
Aceasta metoda de comparare poate fi folosita pentru a compara doua stringuri si reprezinta
secvente de n -gram. Pentru a demonstra acesta metoda avem cuvantul 'martha' si al doilea cuvant
'marhta' (acest cuvant este similar cu cel anterior doar ca sunt inversate caracterele 'h' si 't') iar
rezultatul este urmatorul :
Secventele n -gram pentru cuvantul “martha” sunt : { mar art rth tha }
Secventele n -gram pentru cuvan tul “marhta” sunt: { mar arh rht hta }
Pentru a detecta similaritatea intre cele doua texte impartim numarul de n -grams indentice
intre cele doua cuvinte iar in cazul de sus este 1 { mar } cu numarul de n -grams unice dintre cele doua
cuvinte 7 { mar art rth tha arh rht hta }.
Astfel pentru cuvintele “martha” si “marhta” similaritatea intre cele doua stringuri este de 14%
(1/7).
4.5 Cosine Similarity
Cosine Similarity intre doua stringuri este reprezentata ca punctul de reprezentare vectorial al
aces tora.

Figura 13 Cosine Similarity – formula
Un exemplu pentru acest algoritm poate fi redat in forma urmatoare:

Figura 14 Cosine Similarity – exemplu
Scopul final este de a observa cat de asemanatoare sunt cele doua texte (ordinea acestora nu
conteaza) iar din aceste texte se formeaza o lista cu cuvinte.

Figura 15 Cosine Similarity – cuvinte gasite
Dupa crearea acestui array se numara aparitia fiecarui cuvant in ambele texte.

Figura 16 Cosine Similarity – numara rea cuvintelor
Cu toate acestea, nu ne interesează cuvintele. Suntem interesați doar de acei doi vectori
verticali de numărare. De exemplu, există două exemple de "eu" în fiecare text. Vom decide cât de
apropiate sunt aceste două texte între ele prin calcularea unei func ții a celor doi vectori, și anume
cosinusul unghiului dintre ele.
Cei doi vectori formati in urma liste de mai sus sunt:

Figura 17 Cosine Similarity – vectori
Aproximi tatea dintre cele doua texte este de 0.822 (1 reprezinta 100%).
4.6 Jaro -Winkler Algoritm
Acest algorimt se baseza pe masurarea distantei de editare dintre doua frecvente. Distanta Jar –
Winkler foloseste o scala de prefix care ofera evaluari mai favorab ile pentru siruri de caractere care se
potrivesc de la inceput pentru o lungime prestabilita.
Formula pentru aceasta este de forma urmatoare:

Figura 1 8 Algoritmul Jaro Winker – formula
dj – reprezinta distanta Jaro;
m – reprezinta numarul decaractere care se potrivesc (intre s1 si s2)

t – reprezinta jumatatea din numarul de transpozitii
s1 – reprezinta lungima primului strin g
s2 – reprezinta lungimea de -al doilea string
Pentru a da un exemplu o sa folosim tot cuvintele "martha" si "marhta" iar rezultatele sunt
urmatoarele:

Figura 19 Algoritmul Jaro Winker – exemplu

Figura 20 Algoritmul Jaro Winker – distanta Jaro
Formula de mai sus ne da distanta Jaro iar cu aceasta putem calcula distanta Jaro -Winkler.
Similaritatea Jaro -Winker folosește o scară prefixă p care dă un rating mai favorabil la șirurile care se
potrivesc de la început pentru o lungime prestabilită l.
p este un factor de scalare constant pentru cât de mult scorul este ajustat în sus pentru a avea
prefixe comune. Valoarea standard a acestei constante în luc rarea lui Winkler este p = 0,1.
l este lungimea prefixului comun la începutul șirului (până la maxim 4 caractere).

Figura 21 Algoritmul Jaro Winker – form ula distantei Jaro -Winkler
Deci, înapoi la exemplul "martha" / "marhta" , să luăm o lungime de prefix de l = 3 (care se
referă la "mar" ). Ajungem la:

Figura 22 Algo ritmul Jaro Winker – distanta Jaro -Winkler
In urma celor mentionate putem stabili ca s imilaritatea dintre cele doua cuvinte "martha" si
"marhta" este de aproximativ 96.1 %.

In urma experimentelor anterioare am optat sa folosesc libraria Draftable Compare API datorita
faptului ca poate crea un user experience mai bun datorita view -ului create de API si datorita faptului ca
se poate integra cu tehnologiile optate pentru crearea aplicatiei.
5 Alegerea metodei de implementare
In urma experimentelor anterioa re am optat sa folosesc libraria Draftable Compare API datorita
faptului ca poate crea un user experience mai bun datorita view -ului create de API si datorita faptului ca
se poate integra cu tehnologiile optate pentru crearea aplicatiei.
Algoritmul creat de John Resign nu este recomandat pentru documente de dimensiuni
medii/mari si lasa de asemenea problema aspectului vizual deoarece este foarte greu de modificat un
fisier de tip pdf pentru a face un highlight la text sau de a modifica continutul acestuia.
De asemenea exista suport online pentru Draftable Compari API pentru cazul in care exista vreo
problema cu acesta librarie. Oricine doreste sa implementeze lgoritmul lui John Resign nu beneficieaza
nici un support sau vreo garantie.

Figura 23 Draftable – prezentare

Pentru a folosi acest API este necesar un cont de pe site -ul " https://api.draftable.com/". Dupa
ce este creat un cont pentru development se poate acc esa sectiunea "account" in care sunt stocate
tokenurile pentru a folosi acest api (aceste token -uri sunt folosite in NodeJs pentru autentificare).

Figura 24 Draftable – credentiale api

Tot de pe acest site se poate accesa documentatia la acest API si anume metodele de
autentificare, tehnologiile disponibile si de asemenea resursele dispobile. Fiecare cont are un anumit
numar de u tilizari disponibile pe luna iar aceasta difera in functie de tipul contului ( contul free are in jur
de 200 de c omparari de text disponibile pe luna)

Figura 25 Draftable – cont

6. Configu rare backend
Pentru ca aces t proiect sa foloseasca resursele mentionate anterior partea de backend este
configurata in NodeJS. Cu ajutorul acestuia se poate configura un serve r de backend ce poate fi folosit
pentru a manipula fisiere, autentificare si multe altele.

Figura 26 Backend filles

Fisierul ce este responsabil pentru backend este main.js din folder -ul backend iar in acesta avem
create un server cu cateva configurari de baza pentru server, autentificarea pentru Draftable API (e
nevoie de user si parola // line 9)

Figura 27 backend implementation (1)
Deasemenea in acest fisier sunt prezente modulele de nodejs folosite pentru a folosi
functionalitati cum ar fi cititea de fisiere, parsar ea documentelor de tip PDF, con exiunea la libraria
Draftable Compare API (ace asta trebuie inca user si client ce pot fi luate numai dupa ce iti creezi cont pe
site-ul producatorului), mongodb (pentru crearea si conexiunea la baza de date nosql de pe
"www/mlab.com").
Tot in acest fisuer sunt setate cateva configurari de CORS pentru a permite frontendul sa se
conextele la rutele de backend create. Fara acesta orice http request este sortit unei erori de conectare.
Serverul este creat cu cateva routes/rute de backend de care se poate lega frontend -ul pentru a
compara fisiere, insera re useri si login :

1. Prima ruta este "/compareApi" . Aceasta foloseste doua fisiere stocate pe un server online si
sunt special modificate pentru a se observa modificarile pe ace acestea le au . Acest exemplu este creat
de catre dezvoltatori i API -ului "Dr aftable" si este dat pentru a oferi un exemplu rapid al API -ului.
Aceasta metoda accepta ca si parametrii doua url -uri catre fisierele pdf ce se doresc a fi
comparate. Deasemenea trebuie mentionat tipul acestor fisiere ("rtf", "pdf", etc) iar rezultatul acestor
computari sunt trimise catre frontend prin metoda "res.send()".
Raspunsul generat reprezinta un obiect JSON ce contine printre alte informatii un url cu
documentele comparate. Acest URL este folosit in frontend prin folosirea unui element "iframe" prin
setarea parametrului "src" cu URL -ul primit din backend.

Figura 28 backend implementation (2)
2. A doua ruta creata este "/comp areTwoFilesApi" iar cu ajutorul acesteia se pot trimite doua
fisiere tip PDF de pe calculator in backend si sa se extraga diferentele dintre cele doua documente
folosind metodata "comparison.create()" (file inputs) .

Figura 28 backend implementation (3)

Aceasta ruta este asemanatoare cu cea mentionata anterior dar prezinta diferente. Una dintre
diferente consta in faptul ca url -ul su rsa al documentelor scanate nu mai sunt statice (prima metoda
este folosita pentru demo iar acele link -uri sunt date chiar de catre dezvoltatori pentru a arata
functionalitatea acestui API).
O a doua diferenta a acestei rute de backend consta in faptul ca se genereaza o copie identita a
fisierelor folosite in comparare. Acestea pot fi salvate pe un server de preferinta pentru a putea fi mai
usor accesibil utilizatorilor si pentru a putea reveni la acele fisiere intr -o alta perioada.
3. A treia ruta creata este "/login" iar cu ajutorul careia un utilizator se p oate authentifica in
aplicatie. Aceast cod foloseste sintaxa de mongodb pentru pentru a cauta un utilizator ce prezinta
acelasi nume si parola ca si parametrii trimisi de catre utilizator din formula rul din pagina de "login" .
Acesti parametrii pot fi extrasi din parametrul req ("request").

Figura 29 backend implementation (4)
4. O alta ruta este cea de "/addUser" in care un utilizat or admin poate crea un alt utilizator.
Acest cod foloseste formatul de "User" definit in mongoDB pentru a genera un nou utiliztor in baza de
date nosql.
In cazul intampinarii unei situatii neprevazute cu baza de date acest cod genereaza un raspuns
diferi t frontendului (cod status diferit si un mesaj diferit pentru ca logica de frontend sa apeleze logica
corespunzatoare si sa avertizeze utilizatorul cu un mesaj).

Figura 30 ba ckend implementation (5)
5. O alta ruta de backend este '/compareLocalFiles' cu ajutorul careia un utilizator poate alege
doua fisiere salvate intr -o baza de date. Aceasta ruta de backend primeste ca si parametrii denumirea a
doua fisiere c e se doresc a fi comparate.
Aceste fisiere se regasesc in baza de date nosql si de asemenea intr -un server pentru a fi folosite
de catre utilizator oricand doreste. Parametrii sunt luate din obiectul "req" ("request") iar in urma
computarii datelor sunt trimise catre frontend un obiect JSON cu url -ul generat de catre Draftable
Compare API si contine printre alte date un url ce poate fi folosit intr -un "iframe" HTML.
Iframe -ul genereaza un view cu cele doua documente si se poate observa diferentele intre cele
doua documente salvate pe server intr -un mod user friendly. Aceste URL -uri sunt salvate de catre

Draftable si pot fi folosite intr -un timp mai tarziu folosind o metoda speciala (mai multe detalii in
documentatia dezvoltatorilor).

Figura 31 backend implementation (6)
6. O alta ruta de backend este '/getDocuments cu ajutorul careia se incarca documentele salvate
intr-un DB. Aceast cod de mongodb genereaza un array de obiecte ce pot fi folosite sa generam in
frontend o lista de fisiere pdf. Fiecare fisier poate fi selectat cu ajutorul unui eveniment de "click" pe
elementul preferat iar tot prin intermediul acestora se pot accesa metoda anterioara de comparare a
documentelor. Primul si al doilea fisier selectat au culoarea dife rita (galben si respectiv verde).
Sectiunea de mai jos se poate regasi in pagina de Dashboard in partea dreapta a paginii. Practic
acesta reprezinta una dintre cele doua metode de comparare a documentelor (posibil cea mai utilizata si
mai user friendly) iar cea de -a doua metoda de comparare este de file upload a doua fisiere.

Figura 32 33 backend implementation (7)
6. O alta ruta de backend este '/uploadPDF cu ajutorul careia se insereaza datele unui
docu ment intr -un DB. Acesta ruta creata un fisier si il salvaza pe un server (sau local in cazul de testare)
si poate fi a ccesibil tuturor utilizatorilor.
Tot in acest cod sunt salvate in colectia de fisiere un document cu descrierea documentului ales
prin file upload.
In cazul in care exista vreo eroare in aceasta functionalitate acest cod o sa transmita catre
frontend un status cod 500 si eroarea corespunzatoare. Pe partea de frontend daca exista erori
utilizatorul este avertizat.

Figura 34 backend implementation (8)
Pentru acest proiect am ales sa folosesc bazele de date NoSQL datorita faptului ca documentele
pe care le dorim analizate nu pot avea un pattern concret sau o structura bine de finita. Datorita acestui
lucru consider ca baze de date non relationale sunt mai eficiente pentru stocarea datelor.
Am ales pentru acest proiect sa folosesc bazele de date de pe site -ul https://mlab.com. Cu
ajutorul acestui site pot sa creez baze de dat e tip NoSQL pentru a stoca date si a rula cateva teste.
Pentru acest proiecta am facut o baza de date numita "cheat". In aceast DB am creat o colectie
pentru stocarea datelor numita "filesaves". Bazele de date NoSQL folosesc colectii in loc de tabele asa
cum este traditional in SQL/MySQL.

Figura 35 Mongodb DB
In aceasta baza de date avem doua colectii de date si anume filesaves si users. Filesaves contine
datele despre fisierele compar ate si users contine date despre conturile utilizatorilor.

Figura 36 Mongodb collections

7. Aplicatie UI/UX
In acest capitol este prezentata aplicatia din punct de vedere al user inte rface (UI). Pentru
aceasta aplicatie am folosit libraria de css Bootstrap pentru reda un aspect vizual mai frumos si sa fie de
asemenea user friendly. Paginile principale pe care aceasta aplicatie o are sunt:

7.1 Login
Orice aplicatie are o pagina de login iar in consecinta si aceast web app are o pagina dedicata
authentificarii utilizatorului.
Este o authentificar e simpla prin username/password iar aceste credentiale pot fi generate de
utilizatori de tip admin.

Figura 37 Mongodb UI – Login

7.2 Dashboard
Pagina principala a aplicatiei o reprezinta pagina "Dashboard" in care un utilizator poate sa
compare documentele de tip pdf fie prin file input sau prin selectarea documentelo r salvate in baza de
date prin lista din stanga paginii . Ficare actiune are o sectiune separata in pagina iar din punct de vedere
UX este foarte usor de interpretat chiar si fara un manual de utilizare.
In partea din stanga a paginii se afla rezultatul ob tinut de catre Comparison API iar acesta
dureaza cateva momente de initializare din momentul in care faci o comparare de fisiere.
Pentru a adauga documente in sectiunea "All files" se acceseaza pagina "Library" din headerul aplicatiei.

Figura 38 Mongodb UI – Dashboard

In partea de UI utilizatorul are in partea drapta din pagina de dashboard o lista in care poate
selecta ce documente sa compare .

Figura 39 Mongodb UI – Dashboard pdf files
7.3 Library
Aceasta pagina este responsabila de a adauga datele unui fisier pdf ( numele, tipul fisierului de
ex) in baza de date NoSQL si de asemenea de a afisa ce fisiere sunt disponibile in DB. Pentru a adauga un
fisier pdf se foloseste de formularul din aceasta pagina iar dupa ce utilizatorul a incarcat fisierul si a

apasat butonul de upload, aplicatia o sa se actualizeze si deasemenea numele fisierului trimis in baza de
date este redat in lista de sub formular.

Figura 40 Mongodb UI – Library
7.3 Create
Ultima set iune din aceasta aplicatie este cea de create utilizator. Aceasta sectiune este prezenta
doar utilizatorilor de tip "admin". In aces t formular sunt necesare numele userului nou creat, parola
acestuia si de asemenea ce tip de utilizator o sa aiba contul nou creat ("normal" / "admin" ).

Figura 41 Mongodb UI – Create

8. Teste
In acest capitol s unt redate rezultatele aplicatiei implementand libraria Draftable Compare API
mentionata anterior. De asemenea este bine de mentionat ca sunt folosite cateva documente aproape
identice, acestea avand cateva modificari cum ar fi cuvinte, numere sau blocuri de text modificate sau
extrase.
Pentru primul test am folosit un document numit "Measuring the health of open source
software ecosystems Beyond" si am create o clona al acestuia adaugand prefixul -copy la finalul
documentului. Clona documentului are catev a cuvinte adaugate ("inserted text"), modificat anul de pe
prima pagina (2019 -2018) si sunt extrase cateva blocuri de text din document.

Figura 42 Teste – "Measuring the health of open source software ecosystems Beyond"

Figura 43 Teste – "Measuring the health of open source software ecosystems Beyond"

Se pot evidentia cuvintele adaugate/modificate in partea dreapta ca au un fundal de culoarea
verde iar in partea stanga aceleasi cuvinte au un fundal rosu. E de mention at ca si blocurile de text
extrase in partea dreapta au un fundal rosu in documentul din stanga.
Un alt exemplu pe care l -am testat cu ajutorul aplic atiei ce face subiectul acestuei dizertatii , a
fost de a compar a alte doua documente tip pdf numite "Prezentare ISBD SQL vs NoSQL " si " Prezentare
ISBD SQL vs NoSQL – Copy ".

Figura 4 4 Teste – " Prezentare ISBD SQL vs NoSQL "
Modificarile pe care le -am create pentru acest test s unt urmatoarele:
1. Am ales sa inserez in documentul clona " Prezentare ISBD SQL vs NoSQL " texte random
numite " -TEST -". Acestea sunt evidentiate cu un fundal rosu in cadrul imaginii din parte stanga .
2. Am ales sa scot portiuni ma ri de text din documentul clona pentru a putea fi evidentiate mai
usor. Acestea sunt evidentiate cu un fundal verde in cadrul imaginii din parte dreapta.
Cele mai multe modificari sunt evidentiate in cadrul pag 2 -6. din documente. De asemenea se
pot evident ia ce modificari au fost identificate daca se observa linia despartitoare a celor doua
documente (sunt prezente forme verzi /rosii in functie de ce s -a identificat ).

Deasemenea exista si modul fullscrean ce poate ajuta un utilizator sa observe in mai mul t
detaliu modificarile observate.
Aceasta aplicatie poate sa functioneze ca un detector manual de plagiat intre doua documente.

Figura 45 Teste – " Prezentare ISBD SQL vs NoSQL "
Iframe -ul generat de catre librarie doveste faptul ca genereaza o interfata foarte usoara si
intuitiva pentru utilizator .
Este de mentionat faptul ca poate evidentia diferente la diacritice pentru cuvinte (asta in cazul
incare exista cuvinte aproape asemanatoare).
Se poate folosi de asemenea de butoanele generate de iframe pentru navigare, zoom si salvare
daca utilizatorul doreste acest lucru. Bineinteles ca acestea pot disaparea daca se doreste acest lucru
prin configurarea javascriptului.
Experimentul este asemanator cu c el anterior avand doar o simpla observatie si anume ca
descrierea cuvintelor sunt scrise sub forma " -TEST -".
Exista si o sectiune in plus in documentul dreapta ce este evidentiat cu fundal verde al textului:
"Aceasta înseamnă că gestionați mai mult trafic prin ștergerea sau adăugând mai multe servere în baza de date
NoSQL. Este ca și cum ați adăuga mai multe etaje la aceeași clădire, în comparație cu adăugarea mai multor
clădiri în cartier. Acestea din urmă pot deveni în cele din urmă mai mari și mai puter nice, făcând bazele de date
NoSQL alegerea preferată pentru seturile de date mari sau în continuă schimbare."

Figura 46 Teste – " Prezentare ISBD SQL vs NoSQ L "
Sectiunea "Dezavantaje" a fost decupat dintr -un document si se poate observa fara probleme in
imaginea de mai sus iar in urmatoarele randuri sunt redate textele introduse /decupate :
"Dezavantaje
Comunitatea nu este atât de bine definită: în timp ce continuă să crească rapid, comunitatea NoSQL
este relativ nouă și nu are maturitatea bazei de utilizatori MySQL. Evident, NoSQL este în creștere rapidă, dar
pentru moment MySQL este greu de învins pentru vasta sa rețea de utilizatori finali cu experiență.
Lipsa instrumentelor de raportare: O problemă majoră pentru bazele de date NoSQL este lipsa
instrumentelor de raportare pentru analiza și testarea performanțelor.
Cu toate acestea, cu MySQL, puteți găsi o gamă largă de instrumente de raportare pentru a vă ajuta să
dovediți validitatea aplicației.
Lipsa standardizării: Pentru ca NoSQL să crească, are nevoie de o limbă standard de interogare ca SQL.
Aceasta este o problemă majoră evidențiată de cercetătorii de la Microsoft, care susțin că lipsa standar dizării de
către NoSQL poate provoca o problemă în timpul migrației. În plus, standardizarea este importantă pentru ca
industria bazei de date să se unească în viitor."
De asemenea este important de mentionat ca acest API poate sa identifice textele cu d iacritice
pentru documentele in limba Romana.

Figura 47 Teste – "Diacritice"
Modificarile de cuvinte pot fi observate pentru literele cum ar fi "â", " ă", etc . Acest lucru poate
fi be nefic pentru lucrarile in limba romana lucru pentru libraria Draftable dovedeste inca odata ca este
alegerea ideala pentru implementarea actuala.

9. Concluzii
Pentru detectarea plagiatului si in urma testelor mentionate s -a dovedit faptul ca acest API –
DRAFTABLE poate fi folosit pentru indeplinirea scopului propus . Exista insa si un drowback legat de
acest API si anume ca trebuie platit pentru a avea acces la un numar ridicat de comparari si alte
beneficii.
Algoritmii prezentati in capitolul 4 sunt folositori dar exista problema modului de afisare a
rezultatelor. Datorita acestei probleme Draftable API este solutia cea mai rapida pentru rezolvarea atat
acestui task de afisare cat si a corectitudinii datelor.
Aceasta aplicatie poate fi folositoare pentru persoanele care doresc sa vada evolutia
documentelor printr -o interfata simpla si usor de folosit (de exemplu evolutia unei documentatii).
Aplicatia poate fi imbunatatira prin implementarea modului de authe ntificare prin email /
facebook / gmail si de asemenea de inserare a altor functionalitati .

10. Bibliografie
https://api.draftable.com/
https://nodejs.org/en/about/
https://github.com/draftable/compare -api-node -client
https://www.quirksmode.org/js/intro.html
https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm
https://en.wikipedia.org/wiki/JavaScript
https://www.lifewire.com/what -is-html -3482374
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
https://docs.angularjs.org/guide/introduction
https://www.upwork.c om/hiring/development/angularjs -basics/
https://medium.com/@sumn2u/string -similarity -comparision -in-js-with -examples -4bae35f13968
https://en.wikipedia.org/wiki/Levenshtein_distance