Pinta una lista de modelos sin inyectar HTML
Los nombres de modelo vienen de fuera. Pintarlos con textContent evita que un nombre raro se convierta en código.
Escribe renderModels(list). Recibe un array de objetos { name, size } y pinta un <li> por modelo dentro de <ul id="models">, con el texto nombre (tamaño), por ejemplo llama3.1:8b (4.9 GB).
Crea los elementos con document.createElement y pon el texto con textContent, nunca con innerHTML: un nombre como <img onerror=...> tiene que verse como texto.
Cada llamada sustituye la lista anterior. Si el array está vacío, pinta un único <li class="empty"> con el texto No models installed (la interfaz de ejemplo está en inglés).
MODELS ya contiene tres modelos de ejemplo.
Retos 0/4
- Pinta un <li> por modelo con el texto «nombre (tamaño)»
- Un nombre con HTML se muestra como texto, no como etiqueta
- Volver a llamarla sustituye la lista, no la duplica
- Con un array vacío muestra un único aviso con clase empty
function renderModels(list) {
const ul = document.getElementById('models');
// 1. vacía la lista
// 2. un <li> por modelo, con el texto en textContent: `${name} (${size})`
// 3. array vacío: un único <li class="empty">No models installed</li>
}
renderModels(MODELS);Para profundizar: la referencia de MDN (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →