{"id":27408,"date":"2024-04-29T12:53:36","date_gmt":"2024-04-29T10:53:36","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27408"},"modified":"2024-08-06T10:58:23","modified_gmt":"2024-08-06T08:58:23","slug":"modello-ai-client-side-nel-browser","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/modello-ai-client-side-nel-browser\/","title":{"rendered":"Eseguire Modelli di AI Client-Side nel Browser"},"content":{"rendered":"\n

Normalmente quando parliamo di integrare in una Web App un modello di Intelligenza Artificiale pensiamo immediatamente a server in Python o, ancora pi\u00f9 spesso, a API di piattaforme in cloud. In questa piccola guida vogliamo per\u00f2 esplorare un terreno poco battuto: la possibilit\u00e0 di includere modelli AI direttamente nelle Web App per usarle gi\u00e0 oggi client-side grazie a Javascript e gli attuali Standard Web!<\/p>\n\n\n\n

Ma prima di lanciarci con la fantasia e il codice, \u00e8 necessario che vi introduca i protagonisti della storia.<\/p>\n\n\n\n

Vi Presento i Transformers…<\/h2>\n\n\n\n

I “Transformers” hanno rivoluzionato il campo dell’elaborazione del linguaggio naturale (NLP) e dell’intelligenza artificiale: questa architettura, basata sul concetto di “auto-attenzione”, consente ai modelli di prestare attenzione a diverse parti di un testo contemporaneamente<\/strong>, catturando cos\u00ec le relazioni tra le parole<\/em> anche se sono distanti nella sequenza.<\/p>\n\n\n\n

Ma cosa rende i “Transformers” cos\u00ec speciali?<\/strong><\/p>\n\n\n\n

A differenza dei tradizionali modelli di rete neurale sequenziale<\/a>, come le reti neurali ricorrenti (RNN) o le reti neurali convoluzionali (CNN), che elaborano i dati in modo sequenziale, i “Transformers” sono in grado di elaborare le sequenze in parallelo, rendendo l’elaborazione molto pi\u00f9 efficiente e rapida.<\/p>\n\n\n\n

Transformers.js – La Libreria per eseguire [quasi] tutti i Modelli disponibili su Huggingface nel Browser!<\/h2>\n\n\n\n

Tra i tanti nuovi tool e software legati alle IA potrebbe esserti sfuggita una soluzione che unisce i “Transformers” ed il mondo web: \u00e8 la libreria Transformers.js!<\/p>\n\n\n\n

Questa libreria ti permette di eseguire modelli di intelligenza artificiale disponibili nel mondo Python direttamente nel tuo browser, aprendo cos\u00ec nuove possibilit\u00e0 nel campo dello sviluppo web e non solo.<\/p>\n\n\n\n

Con Transformers.js, puoi incorporare facilmente potenti modelli di NLP, come GPT e BERT ma anche task di Computer Vision come image-to-text, depth-estimation e molto altro, nelle tue applicazioni web, Node.js o Electron!<\/p>\n\n\n\n

Tutto senza la necessit\u00e0 di dipendere da server esterni o servizi cloud poich\u00e9 tutto viene eseguito all’interno del browser<\/strong>.<\/p>\n\n\n\n

Questa caratteristica, oltre all’evidente basso costo di infrastruttura introduce un livello di privacy completo: i dati (informazioni sensibili come lo stato di salute o le immagini della webcam) possono non lasciare il dispositivo dell’utente: addirittura, dopo aver scaricato il modello, la tua web app funzioner\u00e0 anche offline!<\/p>\n\n\n\n

Ma come possiamo iniziare a utilizzare Transformers.js nei nostri progetti JavaScript? Continua a leggere per scoprirlo!<\/p>\n\n\n\n

Ora Proviamo l’Ebbrezza di Creare una Vera Web App Basata su AI…<\/h2>\n\n\n\n

Ecco la parte pi\u00f9 emozionante: mettere in pratica ci\u00f2 che abbiamo discusso e creare una vera web app basata su intelligenza artificiale utilizzando Transformers.js!<\/p>\n\n\n\n

In questo tutorial, ti guideremo passo dopo passo attraverso la creazione di una semplice applicazione web che utilizza un modello di generazione di testo basato su “Transformers” per tradurre dall’italiano all’inglese le frasi inserite dall’utente. Vedrai come \u00e8 facile integrare Transformers.js nel tuo progetto ed iniziare ad esplorare il mondo dell’Intelligenza Artificiale in modo creativo e familiare.<\/p>\n\n\n\n

Prepara il tuo editor di codice preferito ed affrontiamo questa sfida passo passo… come in una ricetta di cucina!<\/p>\n\n\n\n

Ricetta pratica per Traduttore basato su Intelligenza Artificiale<\/em> integrato in pagina web<\/h2>\n\n\n\n

A titolo di esempio svilupperemo un semplice traduttore che user\u00e0 un modello IA per tradurre dall’Italiano all’Inglese<\/a> con un click!<\/p>\n\n\n\n

Requisiti<\/h3>\n\n\n\n

Non serve saperne di IA, Python o data-science, basta cavarsela con vanilla JavaScript, HTML5 e CSS: la ricetta \u00e8 pensata per essere chiara ed accessibile<\/a>!<\/p>\n\n\n\n

Ad esempio, non useremo nessun bundler ma una semplice cartella \/public<\/code> da servire con il vostro web server preferito.<\/p>\n\n\n\n

Ingredienti<\/h3>\n\n\n\n

Per la nostra webapp avremo bisogno di tre ingredienti principali:<\/p>\n\n\n\n

Una UI minimalista<\/strong>:<\/p>\n\n\n\n

\"Interfaccia<\/figure>
\n