Implementar LiteRT-LM

LiteRT-LM

1      Algoritmo de LiteRT-LM

En un SCRIPT de tipo Módulo, extraeremos el objeto Engine de la librería LiteRT-LM:

JavaScript de tipo Módulo, luego de creado el BODY

import { Engine } from "https://cdn.jsdelivr.net/npm/@litert-lm/core/+esm"; // Objeto window.MecanismoLiteRT = Engine ; // Objeto

 

Ahora vamos a crear el mecanismo de chat (chat engine) pero antes tenemos que descargar el cerebro computado (modelo de IA).

JavaScript, continuación de lo anterior u otro SCRIPT con top-await

const _URL_CEREBRO = "https://huggingface.co/litert-community/gemma-4-E2B-it-litert-lm/resolve/main/gemma-4-E2B-it-web.litertlm"; // Frase/String   // Tarda lo que tenga que tardar descargando 1915 MB de información let _cerebroDescargado = await fnDescargarCerebro( _URL_CEREBRO ) ; // Objeto URL // Listo, ahora compilará el Cerebro; en PCs con 4 GB de RAM esto bloquea todo let _mecanismoChat = await MecanismoLiteRT.create(   { model: _cerebroDescargado } ); // Objeto // Cuando termine esto se desbloqueará todo let _conversacion = _mecanismoChat.createConversation() ; // Objeto   // Hacer que reaccione el botón de chatear idBotonEnviar.onclick = function() {   fnProcesarTexto( idInputUsuario.value.trim() ) ;   idInputUsuario.select() ;   idInputUsuario.focus() ;   return ; } // Función // Hacer que el INPUT reaccione a un Enter, UX idInputUsuario.onkeyup = function( {key} ) {   if( key == "Enter" ) idBotonEnviar.click() ;   return ; } // Función

 

JavaScript, función para descargar de la URL dada el modelo de LiteRT-LM

async function fnDescargarCerebro( _dadaURL ) {   let _solicitud = await fetch( _dadaURL ) ; // Objeto   let _totalBytes = + _solicitud.headers.get( "content-length" ) ; // Número entero   let _lectorBytes = _solicitud.body.getReader() ; // Objeto     let _listaBytes = [] ; // Array   let _cantBytesRecibidos = 0 ; // Número entero     while( true ) {     let _lectura = await _lectorBytes.read() ; // Objeto     if( _lectura.done ) break ;     _listaBytes.push( _lectura.value ) ;     _cantBytesRecibidos += _lectura.value.length ; // Número entero     if( _totalBytes ) {       let _porcentaje = _cantBytesRecibidos*100 / _totalBytes ; // Número con decim.       // Hacer algo para mostrar el porcentaje     }   }   let _archivoVirtual = new Blob( _listaBytes ) ; // Objeto Blob   return URL.createObjectURL( _archivoVirtual ) ; // Objeto URL }

 

Ahora generamos la función para que LiteRT-LM analice el texto del usuario y vaya generando mediante Streaming (a medida que va llegando) la oración.

JavaScript, función para procesar texto por la IA de LiteRT-LM

async function fnProcesarTexto( _dadoTexto ) {   console.log( "Procesando: [%s]", _dadoTexto ) ;   fnMostrarMensajeDelUsuario( _dadoTexto ) ;   let _divIA = fnGenerarDivAsistente() ;   for await ( let _cadaPalabra of _conversacion.sendMessageStreaming( _dadoTexto ) ){     if( _cadaPalabra && _cadaPalabra.content && _cadaPalabra.content[0] )       _divIA.innerHTML += _cadaPalabra.content[0].text     ;   }   return ; }

 

Quedará en ustedes crear:

a)     La función para mostrar el mensaje del usuario

b)    La función para generar el DIV que tendrá la respuesta progresiva del asistente.