EthicalAI

EthicalAI è una piattaforma web full-stack che fornisce un'interfaccia di chat per interagire con diversi modelli linguistici di grandi dimensioni (LLM), con un sistema di autenticazione utente sicuro. Il frontend è sviluppato con React e TypeScript, mentre il backend utilizza PHP con MariaDB per la gestione del database e delle chiamate API agli LLM.

Caratteristiche Principali

• Autenticazione Utente: Registrazione e login sicuri con password hashata (Argon2ID).
• Interfaccia Chat Moderna: Un'interfaccia reattiva per conversare con gli LLM, con evidenziazione della chat attiva.
• Selezione Automatica del Modello (Modalità 'Auto'): Una feature intelligente che utilizza un LLM (Gemini 2.5 Pro) per analizzare la domanda dell'utente e selezionare il modello più adatto dalla lista disponibile, tenendo conto di costo, capacità (es. visione) e complessità della richiesta.
• Badge Modello Utilizzato: Quando si usa la 'Selezione Automatica', un badge visibile mostra quale LLM è stato effettivamente scelto per generare la risposta, garantendo trasparenza.
• Supporto Multi-LLM: Architettura backend che funge da proxy per diversi provider di LLM. Supporta i modelli di OpenAI (GPT-4o), Google (Gemini 2.5 Pro, Gemini 2.5 Flash, Gemini Flash Lite) e OpenRouter.
• Risposte in Streaming: Ricezione delle risposte parola per parola dai modelli supportati, per un'esperienza più fluida e immediata.
• Evidenziazione della Sintassi: I blocchi di codice nelle risposte del modello vengono renderizzati con l'evidenziazione della sintassi per una migliore leggibilità.
• Supporto Multimodale (Immagini): Possibilità di allegare file di immagine (JPEG, PNG, etc.) alle conversazioni con modelli compatibili come GPT-4o e Gemini.
• Cronologia Conversazioni: Le chat vengono salvate nel database e possono essere riprese in qualsiasi momento.
• Azioni sui Messaggi: Controlli rapidi su ogni messaggio inviato per copiare il testo, riprovare la domanda in una nuova chat o eliminare il messaggio in modo permanente.
• Eliminazione Conversazioni: Possibilità di eliminare intere conversazioni direttamente dal menu laterale.
• Gestione Sessioni Sicura: Sessioni protette con rigenerazione ID, cookie HTTP-only e protezione CSRF.
• Pagina Dettagli Account: Una sezione dedicata per visualizzare le informazioni del profilo utente.
• Gestione Errori Robusta: Il backend cattura e riporta in modo trasparente gli errori di connessione o di risposta delle API LLM.

Tecnologie Utilizzate

Frontend

• React 19 con TypeScript
• Vite per il build e development server
• Tailwind CSS per lo styling
• Axios e Fetch API (per lo streaming) per le chiamate API
• React Markdown per il rendering delle risposte
• React Syntax Highlighter per la formattazione del codice
• React Icons per le icone

Backend

• PHP 8+ con PDO per il database
• MariaDB/MySQL per il data storage
• cURL per le chiamate API server-to-server verso gli LLM, con supporto a streaming.

Struttura del Progetto

├── backend/
│   ├── .env                # Credenziali DB e chiavi API LLM
│   ├── .htaccess           # Configurazione Apache
│   ├── bootstrap.php       # Inizializzazione (CORS, env, sessioni)
│   ├── db.php              # Connessione PDO al database
│   └── api/
│       ├── ... (auth endpoints)
│       ├── chat.php        # Proxy per LLM con logica di selezione "Auto"
│       ├── delete_conversation.php # Endpoint per eliminare conversazioni
│       ├── delete_message.php # Endpoint per eliminare messaggi
│       └── ... (conversation endpoints)
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── AccountPage.tsx # Pagina dettagli utente
│   │   │   ├── AuthPage.tsx    # Form di login/registrazione
│   │   │   ├── ChatPage.tsx    # Pagina principale della chat
│   │   │   ├── Sidebar.tsx     # Menu laterale con le conversazioni
│   │   │   └── ChatView.tsx    # Area centrale con messaggi e input
│   │   └── ...
├── database.sql            # Script SQL per creare le tabelle
└── README.md               # Questo file

Prerequisiti

• Node.js 18+
• PHP 8+ con estensioni pdo_mysql, curl e fileinfo (per mime_content_type).
• Server MariaDB/MySQL
• Server web (es. Apache)
• Chiavi API per i servizi LLM che si desidera utilizzare.

Installazione

1. Clona il Repository.

2. Setup Backend:

   • Esegui composer install nella cartella backend/ se hai delle dipendenze PHP gestite con Composer.
   • Configura backend/.env con le credenziali del database e le chiavi API.

3. Setup Frontend:

   • Naviga nella cartella frontend/ ed esegui npm install per installare le dipendenze.
   • Avvia il server di sviluppo con npm run dev.

4. Setup Database:

   • Crea un database (es. ethicalai_db).
   • Importa lo script database.sql per creare le tabelle necessarie.