• Crearea unei platforme web care primește, procesează și salvează imaginile transmise prin MQTT de platforma hardware/mobilă
• Implementarea unui sistem de autentificare și autorizare pentru utilizatori
• Gestionarea dispozitivelor hardware/mobile conectate (vizualizare, actualizare firmware, configurare)
• Controlul parametrilor camerei și al modului de funcționare prin interfață web
• Vizualizarea și descărcarea imaginilor procesate

Puteti folosi ca si exemplu pentru inregistrarea si procesare urmatoarele imagini. Obiectul este cel de a extrage textul din imaginile sau PDF-ul atasat.

Din imaginea atasata putem extrage informatie despre persoana, profesia, locul de munca, avizul medical si tipul controlului de medicina muncii.

Pentru a simplifica partea de procesare pe partea de web se pot extrage aceste informatii din fisierul PDF atasat ca alternativa.

PDF raport medicina muncii

• Docker - pentru rularea containerelor
• Node.js (v16+, recomandat v24.0.2) - pentru development frontend
• npm sau yarn (recomandat yarn v1.22.22)
• Git - pentru clonarea proiectului

git clone https://github.com/ResearchYou/ss-web
cd ss-web

UID=501                               # User ID local (obține cu `id -u`)
GID=20                                # Group ID local (obține cu `id -g`)
MONGO_INITDB_ROOT_USERNAME=admin      # Username MongoDB
MONGO_INITDB_ROOT_PASSWORD=supersecret # Parolă MongoDB
JWT_SECRET=dev-secret                 # Secret pentru JWT
AWS_ACCESS_KEY=local-aws-access       # Opțional: pentru S3
AWS_SECRET_KEY=local-aws-secret       # Opțional: pentru S3
AWS_REGION=us-east-1                  # Opțional: pentru S3
S3_BUCKET_NAME=local-bucket           # Opțional: pentru S3
MQTT_HOST_IP=192.168.1.95             # IP-ul host-ului pentru MQTT

Metoda 1: Script automat (recomandat)

./start.sh

Acest script va:

• Instala dependențele client (yarn install)
• Porni containerele Docker (API, MongoDB, MQTT Broker)
• Porni serverul de development Vite

Metoda 2: Manual

# Terminal 1 - Pornește containerele Docker
docker compose up -d
 
# Terminal 2 - Pornește frontend-ul
cd client
yarn install
yarn dev:poll

După pornire, aplicația va fi disponibilă la:

# Oprește toate serviciile
./scripts/dev-stop.sh
 
# Sau manual
docker compose down

• Accesează http://localhost:5173
• Login sau înregistrează un cont nou

• Navighează la pagina Photos
• Vezi imaginile capturate de dispozitive
• Folosește căutarea pentru a găsi imagini după textul extras

• Accesează pagina Devices
• Vezi toate dispozitivele conectate
• Schimbă modul între Normal și Live

• Caută imagini după text extras (OCR)
• Filtrează după interval de date

docker ps
docker logs go-api
docker logs broker
docker logs mongo-db

python scripts/send_image.py

cat .dev-runtime/client.log

client/src/
├── components/       # Componente reutilizabile
│   ├── devicesCards/ # Card-uri pentru dispozitive
│   └── photosCards/  # Card-uri pentru fotografii
├── contexts/         # Context React (Auth)
├── pages/            # Paginile aplicației
│   ├── devicesPage/  # Management dispozitive
│   ├── homePage/     # Pagina principală
│   ├── loginPage/    # Autentificare
│   └── photosPage/   # Vizualizare fotografii
├── App.tsx           # Componenta principală
└── Router.tsx        # Configurare rute

server/
├── main.go           # Entry point
├── domain/           # Modele de date
├── repository/       # Acces bază de date
├── routes/           # Endpoint-uri HTTP
├── broker/           # Client MQTT
└── utils/            # Utilități

Scriptul care ne permite trimiterea individuală de imagini este: ./scripts/send_image.py

Acest script permite trimiterea unei singure imagini prin MQTT către server.

Utilizare:

# Trimitere imagine generată automat (pentru testare)
python3 scripts/send_image.py
 
# Trimitere fișier specificat
python3 scripts/send_image.py /cale/catre/imagine.jpg

Configurare Device ID: În fișierul send_image.py, poți modifica:

DEVICE_ID = "python-sender-1"
DEVICE_NAME = "Python Test Device"

Topic-uri MQTT utilizate:

• register/{DEVICE_ID} - pentru înregistrarea dispozitivului
• ssproject/images/{DEVICE_ID} - pentru trimiterea imaginilor

Pagina de Statistics se află în meniul aplicației și afișează grafice despre documentele procesate.

Acces: După autentificare → meniul Statistics

• Total Files - numărul total de documente procesate
• FIT (APT) - numărul de avize APT (apt pentru muncă)
• Periodic Checks - numărul de controale periodice

• Filtrare pe date - selectează interval de date (default: ultimele 30 zile)
• Toggle Bar/Pie - schimbă între grafic bar și grafic pie
• Refresh - reîncarcă datele

1. In pagina devices din aplicatia web (acolo apare si portul):

2. Aflat automat la pornirea serverului:

Când rulezi ./start.sh, scriptul afișează:

Detected HOST_IP: 192.168.1.95

Există două modalități de a șterge imaginile din aplicație:

1. Ștergere Individuală:

• Fiecare card de imagine are un buton de ștergere (🗑️) în colțul din dreapta-sus.
• Utilizați această opțiune pentru a elimina imagini specifice (ex: cele capturate greșit).

2. Ștergere Totală (Resetare):

• Butonul Delete All (roșu) șterge toate imaginile din baza de date.
• Această funcție este utilă pentru a curăța baza de date înainte de o nouă sesiune de testare sau demonstrativă.

• Verifică dacă imaginile încărcate apar corect
• Verifică textul extras automat (OCR)
• Testează funcția de căutare
• Testează butoanele Capture, Start Live, Stop Live
• Testează ștergerea pozelor (buton trash pe fiecare poză)

• Verifică dacă dispozitivele se înregistrează
• Testează schimbarea modului Normal/Live

• Verifică graficele cu distribuția tipurilor de control
• Verifică graficele cu rezultatele avizelor medicale

1. Pornește aplicația web (./start.sh)
2. Deschide un terminal și navighează în folderul proiectului
3. Rulează scriptul de trimitere imagini:

python3 scripts/send_image.py /cale/catre/o/imagine.jpg

1. Accesează pagina Photos în browser și verifică că imaginea a apărut
2. Verifică textul extras prin OCR (dacă imaginea conține text)

Livrabil: Screenshot cu imaginea încărcată vizibilă în pagina Photos

1. Încarcă mai multe imagini folosind send_image.py (repetă de mai multe ori):

python3 scripts/send_image.py /cale/catre/imagine1.jpg
python3 scripts/send_image.py /cale/catre/imagine2.jpg

1. Accesează pagina Statistics
2. Modifică intervalul de date și observă cum se schimbă graficele
3. Schimbă tipul graficului între Bar și Pie pentru ambele categorii
4. Notează câte documente sunt în fiecare categorie de aviz medical

Livrabil: Screenshot cu pagina Statistics afișând ambele grafice

• https://mqtt.org [MQTT Protocol Overview]
• https://opencv.org [OpenCV Image Processing]
• https://react.dev [React Documentation]