Informatii generale
- Categorie: Web
- Judetul: București
- Surse: GitHub - andrei-0ps/santixx · GitHub
- Homepage: https://santix.rocomit.ro/
Descriere
Am pornit Santix de la o dificultate pe care o are aproape oricine încearcă să înțeleagă ce simte în propriul corp: ca să cauți o informație medicală, trebuie să știi deja cum se numește structura care te doare. Cine nu cunoaște termenul potrivit ajunge fie la rezultate care nu au legătură cu problema lui, fie la surse care sperie fără să explice. Santix pornește invers, de la zona pe care o arăți pe un corp uman în 3D, și abia apoi ajunge la denumirea anatomică.
Exploratorul de anatomie este partea centrală. Elevul se plimbă în jurul unui model tridimensional al corpului și comută între schelet, sistem muscular, organe interne și anatomie completă, în funcție de ce vrea să vadă. Când apasă pe o structură, camera se apropie de ea din față, iar panoul lateral arată denumirea populară alături de cea anatomică, descrierea, rolul în corp și detaliile tehnice: originea, inserția, inervația și acțiunea. Pentru cine nu știe de unde să înceapă există o căutare care înțelege și termeni populari, precum umăr, genunchi sau inimă, și un buton care pornește de la o zonă a corpului în loc de o denumire medicală.
Asistentul educațional funcționează în contextul structurii selectate, nu ca un chat general. Întrebările despre anatomie primesc explicații, iar descrierile de simptome pornesc un flux ghidat cu întrebări puse pe rând, până la un nivel orientativ de triaj. Asistentul nu pune diagnostice și spune explicit acest lucru; când răspunsurile indică semne de alarmă, îndrumă către consult medical. Dacă elevul descrie o problemă care ține de alt strat decât cel selectat, de exemplu vorbește despre o durere de os având selectat un mușchi, aplicația observă nepotrivirea și propune comutarea către structura potrivită. Conversația merge și fără cont, caz în care rămâne temporară, în sesiunea curentă; cu cont, este salvată în istoric și poate fi redeschisă mai târziu, în contextul structurii de la care a pornit.
Informația nu vine dintr-un model lăsat să improvizeze. Aplicația păstrează o bază de cunoștințe medicale proprie, cu afecțiuni, simptome, clasificări ale durerii și surse bibliografice legate de fiecare intrare, peste care se face o căutare semantică. Peste toate acestea există un set de reguli de siguranță care opresc răspunsurile riscante și identifică situațiile urgente.
Optică și Vedere este un cabinet optic virtual în care elevul experimentează el însuși deficiențele de vedere. Miopia și hipermetropia nu sunt imitate cu un filtru de blur, ci printr-o adâncime de câmp reală: doar planurile aflate departe de punctul de focalizare se încețoșează, iar puterea efectului este dată de o dioptrie selectabilă. Astigmatismul, cataracta, glaucomul, degenerescența maculară și cele trei forme de daltonism sunt redate fiecare prin efectul specific, de la vederea de tunel până la ondularea liniilor drepte. Elevul se plimbă prin cabinet, privește tabelul Snellen de la distanță și cartea de pe masă de aproape, apoi activează corecția potrivită și vede cum se schimbă imaginea.
Ajutor Aproape arată pe hartă unde se poate cere ajutor medical în apropiere. Elevul își poate permite localizarea, poate căuta o zonă sau poate alege manual un punct, iar aplicația diferențiază locațiile verificate de rezultatele venite din surse externe și afișează programul, ca deplasarea să nu fie inutilă.
Testul rapid verifică ce a rămas din explorare. După fiecare întrebare elevul vede dacă a răspuns corect, iar la final primește scorul. Stagiul de Inițiere îl conduce prin funcțiile principale ale aplicației, marcând acțiunile pe măsură ce sunt încercate, iar ghidul de utilizare explică fiecare modul, cu un cuprins și o secțiune de întrebări frecvente.
Întreaga aplicație funcționează în română și engleză, cu peste trei sute cincizeci de texte traduse, are temă luminoasă și întunecată, permite mărirea textului pentru citire mai ușoară și respectă preferința de reducere a animațiilor. Interfața se adaptează de la telefon la ecran mare, iar modelul 3D rămâne utilizabil pe ambele.
Tehnologii
Santix este o aplicație web completă, scrisă în TypeScript de la interfață până la funcțiile care rulează pe server. Am ales TypeScript pentru că aplicația lucrează cu structuri medicale cu multe câmpuri, în două limbi, iar tipurile prind la compilare greșelile care altfel ar ajunge în fața utilizatorului sub forma unui text lipsă sau a unei denumiri greșite.
Interfața este construită cu React 19 și Vite, iar navigarea este gestionată de TanStack Router împreună cu TanStack Start. Am preferat această combinație în locul unui router clasic pentru că permite scrierea de funcții care rulează exclusiv pe server, în același proiect și cu aceleași tipuri ca restul codului. Acest lucru contează pentru siguranță: cheia serviciului de inteligență artificială și cheia privilegiată a bazei de date sunt citite doar din mediul serverului și nu ajung niciodată în pachetul trimis către browser. Am verificat acest lucru: nicio cheie sensibilă nu apare în codul de client.
Modelul tridimensional al corpului folosește Three.js, împreună cu react-three-fiber, care permite descrierea scenei 3D în aceleași componente React ca restul aplicației, în loc să fie ținută separat, într-un cod imperativ greu de întreținut. Modelele anatomice sunt încărcate în format GLB, comprimat, și sunt împărțite pe straturi, astfel încât aplicația nu trebuie să încarce tot corpul dacă utilizatorul se uită doar la schelet. Simulatorul de optică folosește aceeași bibliotecă, dar cu procesare suplimentară a imaginii: miopia și hipermetropia sunt redate printr-o adâncime de câmp reală, calculată în funcție de distanța dintre cameră și obiectul urmărit, iar deficiențele de percepție a culorilor sunt aplicate prin matrici de culoare, corecte din punct de vedere optic.
Aspectul vizual este realizat cu Tailwind CSS, alegere care ține stilurile lângă componenta pe care o descriu și face mai ușoară adaptarea la ecrane de dimensiuni diferite. Pentru elementele care trebuie să funcționeze corect cu tastatura și cu cititoarele de ecran, precum ferestrele modale, am folosit componente accesibile din Radix, în locul unora scrise de la zero. Animațiile sunt făcute cu Framer Motion și respectă preferința sistemului de reducere a mișcării.
Datele stau într-o bază PostgreSQL găzduită pe Supabase, construită prin patruzeci de migrații versionate, astfel încât schema poate fi refăcută de la zero de oricine clonează proiectul. Structura acoperă anatomia, afecțiunile, simptomele, regulile de triaj și sursele medicale, cu legături între ele. Fiecare informație medicală poate fi urmărită până la sursa care o documentează. Peste baza de cunoștințe rulează o căutare semantică, folosind extensia pgvector și reprezentări vectoriale de 1536 de dimensiuni, ceea ce permite găsirea informației potrivite chiar dacă utilizatorul nu folosește termenul exact din text.
Accesul la date este protejat prin Row Level Security direct în baza de date, cu treizeci și opt de politici scrise pe optsprezece tabele. Aceasta înseamnă că un utilizator nu poate citi conversațiile altuia nici dacă ar ocoli complet interfața, pentru că restricția este aplicată de server, nu de aplicație. Autentificarea este gestionată tot de Supabase, cu email și parolă sau cont Google.
Partea de inteligență artificială este construită în spatele unei interfețe comune, astfel încât furnizorul poate fi schimbat fără modificări în restul aplicației. În acest moment folosim modelele OpenAI, dar aplicația poate rula și cu un model local, prin Ollama, iar alegerea se face automat în funcție de configurația din mediu. Conversația nu este lăsată doar în seama modelului: există un motor determinist care conduce fluxul de întrebări despre simptome și care răspunde chiar și atunci când serviciul extern nu este disponibil.
Toate datele care ajung pe server sunt validate cu Zod înainte de a fi folosite, iar textul introdus de utilizator trece printr-un filtru propriu de siguranță. Numărul de întrebări este limitat, diferit pentru utilizatorii autentificați și pentru vizitatori, ca serviciul să nu poată fi epuizat de trafic automat.
Testarea este făcută cu Playwright, în douăzeci și una de fișiere care acoperă fluxul conversațional, selecția structurilor anatomice, sistemul bilingv, modulul de ajutor medical și verificări de securitate. Dezvoltarea este urmărită în Git, iar codul respectă un format unitar, verificat automat cu ESLint și Prettier.
Aplicația este pregătită pentru publicare pe Cloudflare Workers, ceea ce înseamnă că poate fi accesată din browser, pe telefon sau pe calculator, fără instalare.
Cerinte sistem
Versiunea online nu necesită instalare. Este nevoie de un browser modern, precum Chrome, Edge, Firefox sau Safari, cu JavaScript activat și suport WebGL 2, folosit de modelul anatomic tridimensional și de simulatorul de optică, plus o conexiune la internet. Modelele se încarcă în funcție de stratul ales, iar o sesiune care le folosește pe toate descarcă în jur de cincizeci și cinci de megaocteți. Contul nu este obligatoriu și este necesar doar pentru păstrarea istoricului conversațiilor.
Pentru rularea locală sunt necesare Node.js 20.19 sau o versiune mai nouă, npm, un proiect Supabase cu migrațiile incluse aplicate și o cheie API OpenAI. Alternativ, aplicația poate rula cu un model local prin Ollama, iar fără nicio cheie configurată asistentul răspunde prin motorul determinist inclus.
Realizatori
Andrei Meila
- Scoala: Liceul Teoretic Ion Barbu
- Clasa: 11
- Judet: București
- Oras: Sector 5
Alexandru Grama
- Scoala: Liceul Teoretic Ion Barbu
- Clasa: 11
- Judet: București
- Oras: Sector 5
Screenshots


