Reversed sorting and new code

Author: midudev

04-chatgpt-local/index.html

@@ -167,7 +167,12 @@
   </style>
 
   <script type="module">
-    import { CreateWebWorkerMLCEngine } from "https://esm.run/@mlc-ai/web-llm"
+    /* 
+    en el vídeo usamos "https://esm.run/@mlc-ai/web-llm"
+    el problema es que eso siempre es la versión más reciente
+    en el código usamos https://cdn.jsdelivr.net/npm/@mlc-ai/[email protected]/+esm
+    para fijar la versión */
+    import { CreateWebWorkerMLCEngine } from "https://cdn.jsdelivr.net/npm/@mlc-ai/[email protected]/+esm"
 
     const $ = el => document.querySelector(el)
 
@@ -183,6 +188,7 @@
     const $loading = $('.loading')
 
     let messages = []
+    let end = false
 
     const SELECTED_MODEL = 'Llama-3-8B-Instruct-q4f32_1-MLC-1k'
 
@@ -192,8 +198,9 @@
       {
         initProgressCallback: (info) => {
           $info.textContent = info.text
-          if (info.progress === 1) {
-            $loading.parentNode.removeChild($loading)
+          if (info.progress === 1 && !end) {
+            end = true
+            $loading?.parentNode?.removeChild($loading)
             $button.removeAttribute('disabled')
             addMessage("¡Hola! Soy un ChatGPT que se ejecuta completamente en tu navegador. ¿En qué puedo ayudarte hoy?", 'bot')
             $input.focus()

04-chatgpt-local/worker.js

@@ -1,4 +1,4 @@
-import { WebWorkerMLCEngineHandler } from "https://esm.run/@mlc-ai/web-llm"
+import { WebWorkerMLCEngineHandler } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
 
 const handler = new WebWorkerMLCEngineHandler()
 

web/public/projects/04-chatgpt-local/index.html

@@ -167,7 +167,12 @@
   </style>
 
   <script type="module">
-    import { CreateWebWorkerMLCEngine } from "https://esm.run/@mlc-ai/web-llm"
+    /* 
+    en el vídeo usamos "https://esm.run/@mlc-ai/web-llm"
+    el problema es que eso siempre es la versión más reciente
+    en el código usamos https://cdn.jsdelivr.net/npm/@mlc-ai/[email protected]/+esm
+    para fijar la versión */
+    import { CreateWebWorkerMLCEngine } from "https://cdn.jsdelivr.net/npm/@mlc-ai/[email protected]/+esm"
 
     const $ = el => document.querySelector(el)
 
@@ -183,6 +188,7 @@
     const $loading = $('.loading')
 
     let messages = []
+    let end = false
 
     const SELECTED_MODEL = 'Llama-3-8B-Instruct-q4f32_1-MLC-1k'
 
@@ -191,9 +197,10 @@
       SELECTED_MODEL,
       {
         initProgressCallback: (info) => {
-          $info.textContent = `${info.text}%`
-          if (info.progress === 1) {
-            $loading.parentNode.removeChild($loading)
+          $info.textContent = info.text
+          if (info.progress === 1 && !end) {
+            end = true
+            $loading?.parentNode?.removeChild($loading)
             $button.removeAttribute('disabled')
             addMessage("¡Hola! Soy un ChatGPT que se ejecuta completamente en tu navegador. ¿En qué puedo ayudarte hoy?", 'bot')
             $input.focus()
@@ -292,4 +299,4 @@ <h5>Esto puede tardar un poco. Paciencia.</h5>
   </template>
 </body>
 
-</html>
+</html>

web/public/projects/04-chatgpt-local/worker.js

@@ -1,4 +1,4 @@
-import { WebWorkerMLCEngineHandler } from "https://esm.run/@mlc-ai/web-llm"
+import { WebWorkerMLCEngineHandler } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
 
 const handler = new WebWorkerMLCEngineHandler()
 

web/src/components/Projects.astro

@@ -6,7 +6,8 @@ import { PROJECTS } from "../consts"
   class="grid gap-8 mb-6 lg:mb-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"
 >
   {
-    PROJECTS.map((project, index) => {
+    PROJECTS.toReversed().map((project, reversedIndex) => { 
+      const index = PROJECTS.length - reversedIndex - 1
       const num = `${index + 1}`.padStart(2, "0")
 
       return (