{"id":27687,"date":"2024-05-14T12:51:57","date_gmt":"2024-05-14T10:51:57","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27687"},"modified":"2024-08-06T10:58:11","modified_gmt":"2024-08-06T08:58:11","slug":"ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/","title":{"rendered":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale"},"content":{"rendered":"\n<p>Scopriamo in che modo possiamo creare un&#8217;autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT senza dover dialogare con un server ma interamente all&#8217;interno del browser!<\/p>\n\n\n\n<p>\u00c8 veramente possibile farlo a costo zero interamente client-side con Javascript? Arriveremo veramente a qualcosa di &#8220;simile a ChatGPT&#8221;? Ci aspetta un futuro con assistenti virtuali offline e con un totale controllo della privacy?<\/p>\n\n\n\n<p>Rispondiamo a queste domande con il secondo tutorial dedicato a Transformers.js dedicato alla realizzazione di un chatbot basato su un vero modello LLM preso da Huggingface.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale-integrato-in-pagina-web-1\">Ricetta pratica per&nbsp;<em>Chatbot basato su Intelligenza Artificiale<\/em>&nbsp;integrato in pagina web<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"requisiti\">Requisiti<\/h3>\n\n\n\n<p><strong>Anche questa ricetta come per<a href=\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/modello-ai-client-side-nel-browser\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> la precedente<\/a> \u00e8 pensata per essere chiara ed accessibile!<\/strong><\/p>\n\n\n\n<p>Ad esempio, non useremo nessun bundler ma una semplice cartella&nbsp;<code>\/public<\/code>&nbsp;da servire con il vostro web server preferito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ingredienti\">Ingredienti<\/h3>\n\n\n\n<p>Per la nostra webapp avremo bisogno di tre ingredienti principali corrispondenti ai quattro file di progetto su cui lavoreremo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">.\/<span class=\"hljs-keyword\">public<\/span>\/\n    index.html\n    worker.js\n    app.js\n    style.css\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>UI minimalista per chat<\/strong>:<\/p>\n\n\n\n<p>All&#8217;interno del nostro&nbsp;<code>index.html<\/code>&nbsp;avremo<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>#chat-messages<\/code>&nbsp;dove appariranno (con stili diversi) i messaggi dell&#8217;utente, dell&#8217;assistente virtuale e del sistema<\/li>\n\n\n\n<li><code>#chat-input-container<\/code>&nbsp;per mandare un messaggio da tastiera e con un bottone<\/li>\n<\/ul>\n\n\n\n<p>Un&nbsp;<strong>web worker<\/strong>&nbsp;(caricato come modulo): conterr\u00e0 il nostro modello di IA e ci permetter\u00e0 di interrogarlo senza bloccare l&#8217;interfaccia utente del main thread.<\/p>\n\n\n\n<p>La&nbsp;<strong>logica applicativa<\/strong>&nbsp;di una classica chat: l&#8217;utente potr\u00e0 inviare i propri messaggi e altrettanto far\u00e0 il modello AI.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preparazione\">Preparazione<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"una-semplice-chat\">Una semplice Chat<\/h4>\n\n\n\n<p>Per questo esperimento ci limiteremo ad un container per ospitare l&#8217;intera chat con al suo interno un&nbsp;<code>#chat-header<\/code>,&nbsp;<code>#chat-messages<\/code>&nbsp;e&nbsp;<code>#chat-input-container<\/code>.<\/p>\n\n\n\n<p>Aggiungiamo quindi al nostro index.html tutto l&#8217;occorrente:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chat-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chat-header\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>My first LLM<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chat-messages\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"chat-messages\"<\/span>&gt;<\/span>\n            <span class=\"hljs-comment\">&lt;!-- qui appariranno i messaggi --&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chat-input-container\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"chat-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Type your message...\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"send-button\"<\/span> <span class=\"hljs-attr\">disabled<\/span>&gt;<\/span>Send<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"invio-e-ricezione-messaggi\">Invio e ricezione messaggi<\/h4>\n\n\n\n<p>Ora aggiungiamo nella nostra app.js il sistema per inviare i messaggi scritti dall&#8217;utente nella sua casella. Ci agganceremo al loro invio per mandare il messaggio alla nostra IA&#8230; ma prima creiamo un semplice sistema di invio e ricezioni messaggi.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">\"DOMContentLoaded\"<\/span>, () =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> sendButton = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"send-button\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> chatInput = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"chat-input\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> chatMessages = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"chat-messages\"<\/span>);\n\n  <span class=\"hljs-keyword\">const<\/span> disableUI = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    sendButton.setAttribute(<span class=\"hljs-string\">\"disabled\"<\/span>, <span class=\"hljs-literal\">true<\/span>);\n    sendButton.innerText = <span class=\"hljs-string\">\"...\"<\/span>;\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> enableUI = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    sendButton.removeAttribute(<span class=\"hljs-string\">\"disabled\"<\/span>);\n    sendButton.innerText = <span class=\"hljs-string\">\"Send\"<\/span>;\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> chat = <span class=\"hljs-function\">(<span class=\"hljs-params\">text<\/span>) =&gt;<\/span> {\n    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      addMessage(<span class=\"hljs-string\">\"Hello world\"<\/span>, <span class=\"hljs-string\">\"assistant\"<\/span>);\n    }, <span class=\"hljs-number\">1000<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> download = <span class=\"hljs-function\">(<span class=\"hljs-params\">modelURL<\/span>) =&gt;<\/span> {\n    disableUI();\n    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      addMessage(\n        <span class=\"hljs-string\">'&lt;small id=\"downloading-message\"&gt;Downloading model...&lt;\/small&gt;'<\/span>,\n        <span class=\"hljs-string\">\"system\"<\/span>\n      );\n    }, <span class=\"hljs-number\">1000<\/span>);\n\n    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n      addMessage(\n        <span class=\"hljs-string\">`&lt;small&gt;Model ready! More information here &lt;a href=\"https:\/\/huggingface.co\/<span class=\"hljs-subst\">${modelURL}<\/span>\" target=\"_blank\"&gt;<span class=\"hljs-subst\">${modelURL}<\/span>&lt;\/a&gt;&lt;\/small&gt;`<\/span>,\n        <span class=\"hljs-string\">\"system\"<\/span>\n      );\n      enableUI();\n    }, <span class=\"hljs-number\">2000<\/span>);\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> addMessage = <span class=\"hljs-function\">(<span class=\"hljs-params\">message, role<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> newMessageElement = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">\"div\"<\/span>);\n    newMessageElement.classList.add(<span class=\"hljs-string\">\"chat-message\"<\/span>);\n    newMessageElement.classList.add(role);\n\n    newMessageElement.innerHTML = message;\n    chatMessages.appendChild(newMessageElement);\n    chatMessages.scrollTop = chatMessages.scrollHeight;\n    <span class=\"hljs-keyword\">return<\/span> newMessageElement;\n  };\n\n  <span class=\"hljs-keyword\">const<\/span> sendMessage = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    disableUI();\n\n    <span class=\"hljs-keyword\">const<\/span> question = chatInput.value;\n\n    addMessage(question, <span class=\"hljs-string\">\"user\"<\/span>);\n    chat(question);\n    chatInput.value = <span class=\"hljs-string\">\"\"<\/span>;\n  };\n\n  sendButton.addEventListener(<span class=\"hljs-string\">\"click\"<\/span>, sendMessage);\n\n  chatInput.addEventListener(<span class=\"hljs-string\">\"keypress\"<\/span>, (event) =&gt; {\n    <span class=\"hljs-keyword\">if<\/span> (event.key === <span class=\"hljs-string\">\"Enter\"<\/span>) {\n      sendMessage();\n    }\n  });\n\n  download(<span class=\"hljs-string\">\"HF_USER\/HF_MODEL\"<\/span>);\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Con un pizzico di CSS prender\u00e0 un aspetto ed il comportamento di una classica chat!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span> {\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">font-family<\/span>: system-ui;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span>, <span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:visited<\/span>, <span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span>  {\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n}\n\n<span class=\"hljs-selector-id\">#container<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100<\/span>lvw;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100<\/span>lvh;\n    <span class=\"hljs-attribute\">justify-content<\/span>: center;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n}\n\n<span class=\"hljs-selector-id\">#chat-container<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">60vw<\/span>;\n    <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">80%<\/span>;\n    <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">80%<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: white;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">3px<\/span> solid <span class=\"hljs-number\">#666<\/span>;\n}\n\n<span class=\"hljs-selector-id\">#chat-header<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n}\n\n<span class=\"hljs-selector-id\">#chat-header<\/span> <span class=\"hljs-selector-tag\">button<\/span> {\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: transparent;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">3rem<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-id\">#chat-messages<\/span> {\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">50vh<\/span>;\n    <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n}\n\n<span class=\"hljs-selector-id\">#chat-input-container<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n}\n\n<span class=\"hljs-selector-id\">#chat-input<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-attr\">&#91;type=text]<\/span>, <span class=\"hljs-selector-tag\">button<\/span> {\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">button<\/span> {    \n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: white;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-tag\">button<\/span><span class=\"hljs-selector-pseudo\">:disabled<\/span> {  \n    <span class=\"hljs-attribute\">background-color<\/span>: white;\n    <span class=\"hljs-attribute\">cursor<\/span>: wait;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> dashed <span class=\"hljs-number\">#ff5c00<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-attr\">&#91;type=text]<\/span><span class=\"hljs-selector-pseudo\">:disabled<\/span> {  \n    <span class=\"hljs-attribute\">background-color<\/span>: white;\n    <span class=\"hljs-attribute\">cursor<\/span>: wait;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ff5c00<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> dashed <span class=\"hljs-number\">#ff5c00<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Avrai notato che i messaggi creati nella chat sono caratterizzati da un &#8220;ruolo&#8221;: questo ci permette di distinguere i messaggi di utente, assistente virtuale e sistema.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-class\">.chat-message<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n    <span class=\"hljs-attribute\">white-space<\/span>: break-spaces;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80%<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-class\">.chat-message<\/span><span class=\"hljs-selector-class\">.user<\/span> {\n    <span class=\"hljs-attribute\">background-color<\/span>: antiquewhite;\n    <span class=\"hljs-attribute\">align-self<\/span>: flex-end;\n}\n\n<span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-class\">.chat-message<\/span><span class=\"hljs-selector-class\">.assistant<\/span> {\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">249<\/span>, <span class=\"hljs-number\">205<\/span>, <span class=\"hljs-number\">147<\/span>);\n    <span class=\"hljs-attribute\">align-self<\/span>: flex-start;\n}\n\n<span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-class\">.chat-message<\/span><span class=\"hljs-selector-class\">.system<\/span> {\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#666<\/span>;\n    <span class=\"hljs-attribute\">font-family<\/span>: monospace;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La parte esteriore \u00e8 pronta! Non pregusti gi\u00e0 il risultato? \ud83e\udd24<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"957\" height=\"506\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/with_css.gif\" alt=\"\" class=\"wp-image-27692\"\/><\/figure>\n\n\n\n<p>Siamo pronti al vero e proprio sistema di comunicazione con il nostro modello IA!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"eseguire-un-modello-ia-allinterno-di-un-web-worker-%F0%9F%8C%B6%EF%B8%8F-%F0%9F%8C%B6%EF%B8%8F-%F0%9F%8C%B6%EF%B8%8F\">Eseguire un modello IA all&#8217;interno di un web worker \ud83c\udf36\ufe0f \ud83c\udf36\ufe0f \ud83c\udf36\ufe0f<\/h4>\n\n\n\n<p>Siamo giunti alla parte pi\u00f9 spicy della ricetta: la creazione di un web worker per scaricare ed eseguire il modello LLM nel browser senza bloccare il thread principale.<\/p>\n\n\n\n<p>Non conosci i Web Worker? \u00c8 un&#8217;ottima occasione per provarli!<\/p>\n\n\n\n<p>Nel file app.js includeremo il file worker.js come modulo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">var<\/span> aiWorker = <span class=\"hljs-keyword\">new<\/span> Worker(<span class=\"hljs-string\">'worker.js'<\/span>, {\n    <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"module\"<\/span>\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Implementiamo le due funzioni che ci permetteranno di mandare messaggi al web worker utilizzando il metodo&nbsp;<code>postMessage()<\/code>&nbsp;andando a sostituire quelle&nbsp;<em>finte<\/em>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Per mandare messaggi alla IA<\/span>\n<span class=\"hljs-keyword\">const<\/span> chat = <span class=\"hljs-function\">(<span class=\"hljs-params\">message<\/span>) =&gt;<\/span> {\n  aiWorker.postMessage({\n    <span class=\"hljs-attr\">action<\/span>: <span class=\"hljs-string\">\"chat\"<\/span>,\n    <span class=\"hljs-attr\">content<\/span>: message,\n  });\n};\n<span class=\"hljs-comment\">\/\/ Per caricare il modello IA: succede solo la prima volta<\/span>\n<span class=\"hljs-keyword\">const<\/span> download = <span class=\"hljs-function\">(<span class=\"hljs-params\">modelURL<\/span>) =&gt;<\/span> {\n  addMessage(\n    <span class=\"hljs-string\">'&lt;small id=\"downloading-message\"&gt;Downloading model...&lt;\/small&gt;'<\/span>,\n    <span class=\"hljs-string\">\"system\"<\/span>\n  );\n  aiWorker.postMessage({\n    <span class=\"hljs-attr\">action<\/span>: <span class=\"hljs-string\">'download'<\/span>,\n    <span class=\"hljs-attr\">modelURL<\/span>: modelURL,\n  });\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Per&nbsp;<strong>ascoltare le risposte del Web Worker<\/strong>&nbsp;dobbiamo semplicemente aggiungere un&nbsp;<em>event listener<\/em>&nbsp;che ci informer\u00e0 di ogni messaggio. Attenzione l&#8217;evento \u00e8 sempre&nbsp;<code>message<\/code>&nbsp;ma il contenuto che viene passato alla&nbsp;<em>callback<\/em>&nbsp;conterr\u00e0 un oggetto che sarai tu a definire: in pratica puoi inventare un tuo protocollo fatto di parametri e flag!<\/p>\n\n\n\n<p>Per questa ricetta a noi serve solo ricevere due tipi di messaggio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>se la risposta contiene la propriet\u00e0&nbsp;<code>status<\/code>&nbsp;allora \u00e8 il&nbsp;<strong>segnale che il modello \u00e8 pronto<\/strong>&nbsp;(cio\u00e8 la risposta al messaggio con&nbsp;<code>action: 'download'<\/code>&nbsp;inviato da noi una volta caricato&nbsp;<code>app.js<\/code>)<\/li>\n\n\n\n<li>altrimenti \u00e8 il testo generato dal modello e contenuto nella propriet\u00e0&nbsp;<code>result<\/code><\/li>\n<\/ul>\n\n\n\n<p>Vediamo il nostro sistema di ricezioni messaggi completo delle corrispondenti reazioni della nostra UI:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">aiWorker.addEventListener(<span class=\"hljs-string\">\"message\"<\/span>, (event) =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> aiResponse = event.data;\n\n  <span class=\"hljs-keyword\">if<\/span> (aiResponse.status == <span class=\"hljs-string\">\"ready\"<\/span>) {\n    addMessage(\n      <span class=\"hljs-string\">`&lt;small&gt;Model ready! More information here &lt;a href=\"https:\/\/huggingface.co\/<span class=\"hljs-subst\">${aiResponse.modelURL}<\/span>\" target=\"_blank\"&gt;<span class=\"hljs-subst\">${aiResponse.modelURL}<\/span>&lt;\/a&gt;&lt;\/small&gt;`<\/span>,\n      <span class=\"hljs-string\">\"system\"<\/span>\n    );\n  } <span class=\"hljs-keyword\">else<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> result = aiResponse.result;\n    addMessage(result, <span class=\"hljs-string\">'assistant'<\/span>);\n    enableUI();\n  }\n});\n\n<span class=\"hljs-comment\">\/\/ tutto parte da questa richiesta!<\/span>\ndownload(<span class=\"hljs-string\">'Felladrin\/onnx-Pythia-31M-Chat-v1'<\/span>);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Eh s\u00ec, hai letto bene: abbiamo un parametro&nbsp;<code>modelURL<\/code>! Pochi passaggi e scopriremo a cosa serve ma puoi immaginarlo \ud83e\udd13<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"web-worker-farcito-di-un-vero-chatbot\">Web Worker farcito di un vero Chatbot<\/h3>\n\n\n\n<p>\u00c8 tutto pronto per dare un&#8217;intelligenza al nostro assistente virtuale basato su modelli di text-generation (LLM) caricati interamente nel browser grazie a Transfomers.js!!!<\/p>\n\n\n\n<p>Per prima cosa carichiamo l&#8217;ultima versione di Transfomers.js direttamente da un servizio CDN. Attenzione! \ud83d\udd25 Non scottarti: possiamo caricare questa o altre librerie in questo modo esclusivamente perch\u00e9 abbiamo caricato il Web Worker con l&#8217;ozione&nbsp;<code>type: \"module\"<\/code>&nbsp;\ud83d\ude42\u200d\u2195\ufe0f<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> {\n  pipeline,\n  env,\n} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/@xenova\/transformers@2.17.1\"<\/span>;\n\nenv.allowLocalModels = <span class=\"hljs-literal\">false<\/span>; <span class=\"hljs-comment\">\/\/useremo modelli in remoto!<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ora non ci resta che implementare la nostra&nbsp;<em>pipeline<\/em>&nbsp;come negli esempi della&nbsp;<a href=\"https:\/\/huggingface.co\/docs\/transformers.js\/pipelines\">documentazione ufficiale<\/a>&nbsp;ma all&#8217;interno del web worker e quando lo chiede la app!<\/p>\n\n\n\n<p>La funzione&nbsp;<code>downloadModel<\/code>&nbsp;scaricher\u00e0 i file del modello da Huggingface e creer\u00e0 finalmente il nostro&nbsp;<code>generator<\/code>&nbsp;che \u00e8 una&nbsp;<em>text-generation pipeline<\/em><\/p>\n\n\n\n<p>Sicuramente avrai notato&nbsp;<code>async<\/code>&nbsp;e&nbsp;<code>await<\/code>! Quando scarichiamo il modello il Web Worker aspetter\u00e0 il completamento del download e poi&nbsp;<strong>avviser\u00e0 la nostra app<\/strong>&nbsp;che tutto \u00e8 pronto con&nbsp;<code>self.postMessage()<\/code>&nbsp;con la propriet\u00e0&nbsp;<code>status: \"ready\"<\/code>&nbsp;(che \u00e8 proprio quello che sta aspettando la nostra logica applicativa per attivare la UI e quindi poter usare la chat)<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">\n<span class=\"hljs-keyword\">var<\/span> generator;\n\n<span class=\"hljs-keyword\">const<\/span> downloadModel = <span class=\"hljs-keyword\">async<\/span> (modelURL) =&gt; {\n  generator = <span class=\"hljs-keyword\">await<\/span> pipeline(<span class=\"hljs-string\">\"text-generation\"<\/span>, modelURL);\n\n  self.postMessage({\n    <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-string\">\"ready\"<\/span>,\n    <span class=\"hljs-attr\">task<\/span>: <span class=\"hljs-string\">\"text-generation\"<\/span>,\n    <span class=\"hljs-attr\">modelURL<\/span>: modelURL,\n  });\n};\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Qui \u00e8 dove avviene la magia dei modelli text-generation e la loro capacit\u00e0 di sembrare &#8220;intelligenti&#8221;: che emozione!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> generateResponse = <span class=\"hljs-keyword\">async<\/span> (content) =&gt; {\n  <span class=\"hljs-comment\">\/\/ i modelli di text-generation per chatbot prendono come input una chat<\/span>\n  <span class=\"hljs-keyword\">const<\/span> messages = &#91;\n    {\n      <span class=\"hljs-attr\">role<\/span>: <span class=\"hljs-string\">\"system\"<\/span>,\n      <span class=\"hljs-attr\">content<\/span>: <span class=\"hljs-string\">\"You are a highly knowledgeable and friendly assistant.\"<\/span>,\n    },\n    {\n      <span class=\"hljs-attr\">role<\/span>: <span class=\"hljs-string\">\"user\"<\/span>,\n      <span class=\"hljs-attr\">content<\/span>: content,\n    },\n  ];\n\n  <span class=\"hljs-comment\">\/\/ I messaggi della chat con i loro ruoli vengono dati in pasto ad uno<\/span>\n  <span class=\"hljs-comment\">\/\/ speciale tokenizer specifico di quel modello che lo trasformer\u00e0 in vettori (embedding)<\/span>\n  <span class=\"hljs-keyword\">const<\/span> textInput = generator.tokenizer.apply_chat_template(messages, {\n    <span class=\"hljs-attr\">tokenize<\/span>: <span class=\"hljs-literal\">false<\/span>,\n    <span class=\"hljs-attr\">add_generation_prompt<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  });\n\n\n  <span class=\"hljs-comment\">\/\/ la pipeline in azione! \u00c8 qui che possiamo passare tanti parametri per cambiare il risultato della generazione del testo<\/span>\n  <span class=\"hljs-keyword\">const<\/span> output = <span class=\"hljs-keyword\">await<\/span> generator(textInput, {\n    <span class=\"hljs-attr\">max_new_tokens<\/span>: <span class=\"hljs-number\">64<\/span>,\n    <span class=\"hljs-attr\">do_sample<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  });\n\n  <span class=\"hljs-comment\">\/\/ la conversazione ci viene restituita in un formato specifico del modello<\/span>\n  <span class=\"hljs-comment\">\/\/ ma approfondendo la scheda su Huggingface troveremo tutte le informazioni<\/span>\n  <span class=\"hljs-comment\">\/\/ e potremo estrarre il contenuto dell'ultima risposta.<\/span>\n\n  <span class=\"hljs-comment\">\/\/ Al momento non c'\u00e8 ancora consenso su come deve essere un chat template ma per estrarre l'ultima frase (quindi la risposta della IA) basta tagliare quello che segue all'ultima occorrenza della stringa `\"assistant\\n\"` ad esempio in questo modo<\/span>\n\n  <span class=\"hljs-keyword\">const<\/span> conversation = output&#91;<span class=\"hljs-number\">0<\/span>].generated_text;\n  <span class=\"hljs-keyword\">const<\/span> start = conversation.lastIndexOf(<span class=\"hljs-string\">\"assistant\\n\"<\/span>);\n  <span class=\"hljs-keyword\">const<\/span> lastMessage = conversation\n    .substr(start)\n    .replace(<span class=\"hljs-string\">\"assistant\\n\"<\/span>, <span class=\"hljs-string\">\"\"<\/span>);\n\n  <span class=\"hljs-comment\">\/\/ tutto pronto per mandare la risposta generata dalla IA<\/span>\n  self.postMessage({\n    <span class=\"hljs-attr\">result<\/span>: lastMessage,\n  });\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Non ci resta che ammalgamare il Web Worker con richieste della nostra app.js.<\/p>\n\n\n\n<p>Avevamo preparato tutto in precedenza per mandare due messaggi&nbsp;<code>action: 'download'<\/code>&nbsp;e&nbsp;<code>action: 'chat'<\/code>&nbsp;e qui non facciamo altro che riceverli e reagire di conseguenza!<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">self<\/span>.addEventListener(<span class=\"hljs-string\">\"message\"<\/span>, (event) =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> userRequest = event.data;\n\n  <span class=\"hljs-keyword\">if<\/span> (userRequest.action == <span class=\"hljs-string\">\"download\"<\/span>) {\n    <span class=\"hljs-keyword\">const<\/span> modelURL = userRequest.modelURL;\n    downloadModel(modelURL);\n    \n  } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (userRequest.action == <span class=\"hljs-string\">\"chat\"<\/span>) {\n    <span class=\"hljs-keyword\">const<\/span> content = userRequest.content;\n\n    generateResponse(content);\n  }\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"risultato-finale\">Risultato finale<\/h2>\n\n\n\n<p>La prima conversazione con il nostro chatbot sar\u00e0, a dir poco, allucinante \ud83e\udd28 \ud83e\udd84\ud83d\udef8\ud83e\udd84<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"756\" height=\"348\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/pythia.png\" alt=\"\" class=\"wp-image-27693\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/pythia.png 756w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/pythia-300x138.png 300w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/figure>\n\n\n\n<p>Ma prima di guardare il bicchiere mezzo vuoto farmati a riflettere: hai un modo per dialogare con un modello di intelligenza artificiale!!!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-text-align-center\">S\u00ec, <strong>il nostro chatbot sembra un po&#8217; tonto<\/strong> in questa sua prima incarnazione! \ud83d\ude39<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Ma vediamo cosa sta succedendo prima di puntare il dito! \ud83e\udef6 \ud83e\udd16<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"differenti-modelli-capiscono-meglio-quello-che-diciamo\">Differenti modelli capiscono meglio quello che diciamo<\/h3>\n\n\n\n<p>Il <a href=\"https:\/\/huggingface.co\/Felladrin\/onnx-Pythia-31M-Chat-v1\" target=\"_blank\" aria-label=\"modello che abbiamo caricato in questo tutorial (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">modello che abbiamo caricato in questo tutorial<\/a> \u00e8 piccolissimo, poche decine di megabyte: questo \u00e8 stato utile per poter completare la nostra app ma evidentemente non \u00e8 in grado di servire a molto.<\/p>\n\n\n\n<p>Potremmo intervenire su alcuni parametri nella generazione. Ad esempio potremmo fornire una penalit\u00e0 alla ripetizione o chiedere di generare frasi pi\u00f9 lunghe:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> output = <span class=\"hljs-keyword\">await<\/span> generator(textInput, {\n    <span class=\"hljs-attr\">max_new_tokens<\/span>: <span class=\"hljs-number\">1024<\/span>, <span class=\"hljs-comment\">\/\/ valori alti possono rallentare la risposta<\/span>\n    <span class=\"hljs-attr\">repetition_penalty<\/span>: <span class=\"hljs-number\">1.2<\/span>, <span class=\"hljs-comment\">\/\/ penalizziamo la ripetizione delle stesse parole<\/span>\n    <span class=\"hljs-attr\">do_sample<\/span>: <span class=\"hljs-literal\">true<\/span>,\n  });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>La vera soluzione \u00e8 utilizzare modelli pi\u00f9 grandi come ad esempio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/huggingface.co\/Felladrin\/onnx-TinyMistral-248M-Chat-v2\" target=\"_blank\" aria-label=\"Felladrin\/onnx-TinyMistral-248M-Chat-v2 (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Felladrin\/onnx-TinyMistral-248M-Chat-v2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/huggingface.co\/Xenova\/Qwen1.5-0.5B-Chat\" target=\"_blank\" aria-label=\"Xenova\/Qwen1.5-0.5B-Chat (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Xenova\/Qwen1.5-0.5B-Chat<\/a><\/li>\n<\/ul>\n\n\n\n<p>Il secondo pesa la bellezza di 480Mb ma&#8230; finalmente iniziamo a vedere il potenziale di questa tecnologia!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final_with_qwen2-1024x523.png\" alt=\"\" class=\"wp-image-27696\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final_with_qwen2-1024x523.png 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final_with_qwen2-300x153.png 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final_with_qwen2-768x392.png 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final_with_qwen2.png 1385w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prossimi-esperimenti-suggeriti\">Prossimi esperimenti suggeriti<\/h2>\n\n\n\n<p>In questo tutorial hai potuto assaggiare la creazione di un chatbot basato su LLM: abbiamo approfondito l&#8217;uso di <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\" target=\"_blank\" aria-label=\"Web Worker API (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Web Worker API<\/a>, osservato la differenza tra alcuni modelli con <strong>31M<\/strong>, <strong>248M<\/strong> e <strong>0.5B<\/strong> parametri e siamo arrivati ad un assistente virtuale che inizia a dismostrare un pochino di&nbsp;<em>intelligenza<\/em>.<\/p>\n\n\n\n<p>Ora puoi continuare la tua esplorazione! Ad esempio potresti provare una delle seguenti sfide:<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"697\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/final.gif\" alt=\"Animazione di un chatbot che risponde usando un modello di Intelligenza Artificiale\" class=\"wp-image-27694 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<ol class=\"wp-block-list\">\n<li>Rileggi il <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/modello-ai-client-side-nel-browser\/\" class=\"ek-link\">primo tutorial di questa serie su Transformers.js<\/a> e scopri come implementare una User Experience molto pi\u00f9 fluida&#8230; dove i messaggi si scrivono&nbsp;<em>parola per parola<\/em><\/li>\n\n\n\n<li>Hai imparato a fare una chat che dialoga con un modello IA usando un Web Worker&#8230; perch\u00e9 non provare a creare un endpoint in Python ed implementare una tua API per dialogare con modelli a 7-8B invece di 0.5B?<\/li>\n\n\n\n<li>Qualcuno ha detto &#8220;Tutorial su come implementare un NPC con questa ricetta&#8221;?<\/li>\n\n\n\n<li>Continua l&#8217;esplorazione di altri task automatizzabili con modelli di Computer Vision o Speech Recognition sempre con Transformers.js: basta cercare <a aria-label=\"su Huggingface i modelli dell'autore della libreria (opens in a new tab)\" href=\"https:\/\/huggingface.co\/models?sort=trending&amp;search=Xenova\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">su Huggingface i modelli dell&#8217;autore della libreria<\/a> per avere un&#8217;ampia gamma di modelli da provare!<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ti-%C3%A8-piaciuta-questo-tutorial-ricetta\">Ti \u00e8 piaciuto questo tutorial-ricetta?<\/h2>\n\n\n\n<p>A noi piace molto creare questi contenuti e siamo sempre a caccia di argomenti e sfide nuove.<\/p>\n\n\n\n<p>Quindi perch\u00e9 non fai un salto nella <a href=\"https:\/\/t.me\/CodemotionIT\" target=\"_blank\" aria-label=\"nostra community Telegram (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">nostra community Telegram<\/a> e proponi un argomento?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scopriamo in che modo possiamo creare un&#8217;autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT senza dover dialogare con un server ma interamente all&#8217;interno del browser! \u00c8 veramente possibile farlo a costo zero interamente client-side con Javascript? Arriveremo veramente a qualcosa di &#8220;simile a ChatGPT&#8221;? Ci aspetta un futuro con&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\">Read more<\/a><\/p>\n","protected":false},"author":255,"featured_media":27691,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10261],"tags":[],"collections":[12402],"class_list":{"0":"post-27687","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-intelligenza-artificiale","8":"collections-codemotion-guides-it","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ricetta pratica per Chatbot basato su Intelligenza Artificiale - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Scopriamo come creare un&#039;autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all&#039;interno del browser!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ricetta pratica per Chatbot basato su Intelligenza Artificiale\" \/>\n<meta property=\"og:description\" content=\"Scopriamo come creare un&#039;autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all&#039;interno del browser!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-14T10:51:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-06T08:58:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Massimo Avvisati\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MassimoAvvisati\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Massimo Avvisati\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Ricetta pratica per Chatbot basato su Intelligenza Artificiale\",\"datePublished\":\"2024-05-14T10:51:57+00:00\",\"dateModified\":\"2024-08-06T08:58:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\"},\"wordCount\":1222,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png\",\"articleSection\":[\"Intelligenza artificiale\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\",\"name\":\"Ricetta pratica per Chatbot basato su Intelligenza Artificiale - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png\",\"datePublished\":\"2024-05-14T10:51:57+00:00\",\"dateModified\":\"2024-08-06T08:58:11+00:00\",\"description\":\"Scopriamo come creare un'autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all'interno del browser!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png\",\"width\":1024,\"height\":768,\"caption\":\"chatbon assistente virtuale AI sul browser.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Intelligenza artificiale\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ricetta pratica per Chatbot basato su Intelligenza Artificiale\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\",\"name\":\"Massimo Avvisati\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"caption\":\"Massimo Avvisati\"},\"description\":\"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/\",\"https:\/\/x.com\/MassimoAvvisati\"],\"knowsAbout\":[\"Javascript\",\"Node.js\",\"PHP\",\"AI\",\"Machine Learning\",\"Web Development\",\"Free Software\"],\"knowsLanguage\":[\"English\",\"Spanish\",\"Italian\"],\"jobTitle\":\"Head of EdTech R&D\",\"worksFor\":\"Codemotion spa\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale - Codemotion Magazine","description":"Scopriamo come creare un'autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all'interno del browser!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/","og_locale":"en_US","og_type":"article","og_title":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale","og_description":"Scopriamo come creare un'autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all'interno del browser!","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-05-14T10:51:57+00:00","article_modified_time":"2024-08-06T08:58:11+00:00","og_image":[{"width":1024,"height":768,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png","type":"image\/png"}],"author":"Massimo Avvisati","twitter_card":"summary_large_image","twitter_creator":"@MassimoAvvisati","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Massimo Avvisati","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale","datePublished":"2024-05-14T10:51:57+00:00","dateModified":"2024-08-06T08:58:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/"},"wordCount":1222,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png","articleSection":["Intelligenza artificiale"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/","name":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png","datePublished":"2024-05-14T10:51:57+00:00","dateModified":"2024-08-06T08:58:11+00:00","description":"Scopriamo come creare un'autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT all'interno del browser!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png","width":1024,"height":768,"caption":"chatbon assistente virtuale AI sul browser."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/ricetta-pratica-per-chatbot-basato-su-intelligenza-artificiale\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Intelligenza artificiale","item":"https:\/\/www.codemotion.com\/magazine\/it\/intelligenza-artificiale\/"},{"@type":"ListItem","position":3,"name":"Ricetta pratica per Chatbot basato su Intelligenza Artificiale"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a","name":"Massimo Avvisati","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","caption":"Massimo Avvisati"},"description":"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.","sameAs":["https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/","https:\/\/x.com\/MassimoAvvisati"],"knowsAbout":["Javascript","Node.js","PHP","AI","Machine Learning","Web Development","Free Software"],"knowsLanguage":["English","Spanish","Italian"],"jobTitle":"Head of EdTech R&D","worksFor":"Codemotion spa","url":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-600x600.png","author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png",1024,768,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-300x225.png",300,225,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-768x576.png",768,576,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png",1024,768,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png",1024,768,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e.png",1024,768,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/05\/cee94f9e-6bc3-420a-aeeb-a61dda06b10e-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_comment_info":0,"uagb_excerpt":"Scopriamo in che modo possiamo creare un&#8217;autentica chat con un assistente virtuale basata su un modello AI simile a ChatGPT senza dover dialogare con un server ma interamente all&#8217;interno del browser! \u00c8 veramente possibile farlo a costo zero interamente client-side con Javascript? Arriveremo veramente a qualcosa di &#8220;simile a ChatGPT&#8221;? Ci aspetta un futuro con&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=27687"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27687\/revisions"}],"predecessor-version":[{"id":29069,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/27687\/revisions\/29069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/27691"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=27687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=27687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=27687"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=27687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}