Add new project files

midudev · Jun 12, 2024 · 93bb155 · 93bb155
1 parent 56a9bc2
commit 93bb155
Show file tree

Hide file tree

Showing 4 changed files with 383 additions and 18 deletions.
diff --git a/04-chatgpt-local/index.html b/04-chatgpt-local/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -42,7 +43,7 @@
  flex-direction: column;
  margin: 4px 0;
  padding: 4px 8px;
- 
+
  span {
  width: 36px;
  height: 36px;
@@ -64,14 +65,18 @@
  &.user {
  align-self: flex-end;
  align-items: flex-end;
- span, p {
+
+ span,
+ p {
  background: rgb(219, 236, 255);
  }
  }
 
  &.bot {
  align-self: flex-start;
- span, p {
+
+ span,
+ p {
  background: rgb(198, 255, 220);
  }
  }
@@ -103,7 +108,7 @@
  opacity: .6;
  pointer-events: none;
  }
- 
+
  &:hover {
  background: rgb(0, 104, 173);
  }
@@ -120,13 +125,52 @@
  margin: auto;
  width: 400px;
  }
+
+ .loading {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 50%;
+
+ i {
+ pointer-events: none;
+ width: 2.5em;
+ height: 2.5em;
+ border: 0.4em solid transparent;
+ border-color: #eee;
+ border-top-color: #3E67EC;
+ border-radius: 50%;
+ animation: loadingspin 1s linear infinite;
+ }
+
+ h4 {
+ color: #444;
+ margin-bottom: 8px;
+ }
+
+ h5 {
+ font-weight: 400;
+ margin: 0;
+ font-size: 10px;
+ opacity: .4;
+ }
+ }
+
+ @keyframes loadingspin {
+ 100% {
+ transform: rotate(360deg)
+ }
+ }
  </style>
 
  <script type="module">
  import { CreateWebWorkerMLCEngine } from "https://esm.run/@mlc-ai/web-llm"
 
  const $ = el => document.querySelector(el)
- 
+
  // pongo delante de la variable un símbolo de $
  // para indicar que es un elemento del DOM
  const $form = $('form')
@@ -136,19 +180,23 @@
  const $container = $('main')
  const $button = $('button')
  const $info = $('small')
+ const $loading = $('.loading')
 
  let messages = []
 
  const SELECTED_MODEL = 'Llama-3-8B-Instruct-q4f32_1-MLC-1k'
 
  const engine = await CreateWebWorkerMLCEngine(
- new Worker('/worker.js', { type: 'module' }),
+ new Worker('./worker.js', { type: 'module' }),
  SELECTED_MODEL,
  {
  initProgressCallback: (info) => {
  $info.textContent = `${info.text}%`
  if (info.progress === 1) {
+ $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()
  }
  }
  }
@@ -201,7 +249,7 @@
  // clonar el template
  const clonedTemplate = $template.content.cloneNode(true)
  const $newMessage = clonedTemplate.querySelector('.message')
- 
+
  const $who = $newMessage.querySelector('span')
  const $text = $newMessage.querySelector('p')
 
@@ -217,9 +265,16 @@
  }
  </script>
 </head>
+
 <body>
  <main>
- <ul></ul>
+ <ul>
+ <li class="loading">
+ <i></i>
+ <h4>Cargando...</h4>
+ <h5>Esto puede tardar un poco. Paciencia.</h5>
+ </li>
+ </ul>
  </main>
 
  <form>
@@ -236,4 +291,5 @@
  </li>
  </template>
 </body>
+
 </html>
diff --git a/web/public/projects/03-midu-typing-game/index.html b/web/public/projects/03-midu-typing-game/index.html
@@ -177,6 +177,7 @@ <h3 id="results-accuracy"></h3>
 
  let words = []
  let currentTime = INITIAL_TIME
+ let playing
 
  initGame()
  initEvents()
@@ -186,6 +187,8 @@ <h3 id="results-accuracy"></h3>
  $results.style.display = 'none'
  $input.value = ''
 
+ playing = false
+
  words = INITIAL_WORDS.toSorted(
  () => Math.random() - 0.5
  ).slice(0, 50)
@@ -208,25 +211,28 @@ <h3 id="results-accuracy"></h3>
  const $firstWord = $paragraph.querySelector('word')
  $firstWord.classList.add('active')
  $firstWord.querySelector('letter').classList.add('active')
-
- const intervalId = setInterval(() => {
- currentTime--
- $time.textContent = currentTime
-
- if (currentTime === 0) {
- clearInterval(intervalId)
- gameOver()
- }
- }, 1000)
  }
 
  function initEvents() {
  document.addEventListener('keydown', () => {
  $input.focus()
+ if (!playing) {
+ playing = true
+ const intervalId = setInterval(() => {
+ currentTime--
+ $time.textContent = currentTime
+
+ if (currentTime === 0) {
+ clearInterval(intervalId)
+ gameOver()
+ }
+ }, 1000)
+ }
  })
  $input.addEventListener('keydown', onKeyDown)
  $input.addEventListener('keyup', onKeyUp)
  $button.addEventListener('click', initGame)
+
  }
 
  function onKeyDown(event) {