feat: Agregar selección de modelo en index.html

Author: Mikel Echeverria

index.html

@@ -457,10 +457,11 @@ <h1>ChatGPT 100% local con WebGPU</h1>
         alert('Tu navegador no soporta WebGPU. Por favor, utiliza un navegador compatible como Chrome o Firefox. O tu dispositivo no soporta WebGPU.');
     }
 
-    import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm"; // Comentar esta línea si quieres desactivar el modelo
-
     // https://github.com/mlc-ai/web-llm/blob/main/src/config.ts#L293 para ver los modelos disponibles
-    const SELECTED_MODEL = 'Phi-3.5-mini-instruct-q4f16_1-MLC'; // Cambiar por el modelo que quieras usar usando el model_id
+    const MODELS = {
+        'Phi3.5 mini - Rápido': 'Phi-3.5-mini-instruct-q4f16_1-MLC',
+        'LLama3.1 - Inteligente': 'Llama-3.1-8B-Instruct-q4f32_1-MLC-1k',
+    };
 
     const $ = el => document.querySelector(el);
 
@@ -471,14 +472,31 @@ <h1>ChatGPT 100% local con WebGPU</h1>
     const $container = $('main');
     const $button = $('button');
     const $loadingMessage = $('small');
+    const $modelSelect = document.getElementById('model-select');
+
+    // Llenar el select con los modelos disponibles
+    for (const [key, value] of Object.entries(MODELS)) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = key;
+        $modelSelect.appendChild(option);
+    }
+
+    let SELECTED_MODEL = await new Promise((resolve) => {
+        $modelSelect.addEventListener('change', () => {
+            resolve($modelSelect.value);
+        });
+    });
+
+    import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm"; // Comentar esta línea si quieres desactivar el modelo
 
     // Cargar el modelo
     const engine = await CreateMLCEngine(
         SELECTED_MODEL,
         {
             initProgressCallback: (info) => {
                 console.log(info);
-                $loadingMessage.textContent = `Cargando modelo: ${(info.progress * 100).toFixed(0)}%`;
+                $button.textContent = `Cargando modelo: ${(info.progress * 100).toFixed(0)}%`;
                 if (info.progress === 1) {
                     $button.removeAttribute('disabled');
                 }