Adicionado sistema de busca utilizando IA

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-slate

modelo.html

@@ -31,6 +31,7 @@
     </section>
     <footer>
         &copy;Curso em Video
+        <p class="notice">Feito utilizando o banco de dados da <a href="https://generated.photos/">Generated.Photos</a></p>
     </footer>
     <script src="script.js"></script>
 </body>

script.js

@@ -2,6 +2,8 @@ function verificar() {
     var data = new Date()
     var ano = data.getFullYear()
     var fano = window.document.getElementById('txtano')
+
+    var http = new XMLHttpRequest() // Cria request para envio de pesquisa no banco de dados da API
 
     var res = window.document.getElementById('res')
     if (fano.value.length == 0 || fano.value > ano) {
@@ -11,37 +13,93 @@ function verificar() {
         var idade = ano - Number(fano.value)
         var gen = ''
         var img = window.document.createElement('img')
+        var tUrl = 'https://api.generated.photos/api/v1/faces'
+
         img.setAttribute('id', 'foto')
         if (fsex[0].checked) {
             gen = 'Homem'
+
             if (idade <= 10){ 
                 //Criança
-                img.setAttribute('src', 'homem_bebe.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=child' // Define o url com os parametros
             }else if (idade < 21) {
                 //Jovem
-                img.setAttribute('src', 'homem_jovem.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=young-adult' // Define o url com os parametros
             } else if (idade < 50) {
                 //Adulto
-                img.setAttribute('src', 'homem_adulto.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=adult' // Define o url com os parametros
             } else {
                 //Idoso
-                img.setAttribute('src', 'homem_idoso.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=male&age=elderly' // Define o url com os parametros
             }
+
+            http.open('GET', tUrl, true) // Abre a request em GET para o URL da API
+            http.setRequestHeader('Content-type', 'application/json') // Define o tipo de conteudo da request
+            http.setRequestHeader('Authorization', 'API-Key bSGCZorrN19B3rxPsM4EsQ')
+            http.responseType = 'json' // O tipo de resposta
+
+            http.onload = function() { // Altera a imagem quando receber um status de OK, caso contrario, usa a Database local
+                console.log(http.response)
+                img.setAttribute('src', http.response.faces[0].urls[3][256])
+            }
+
+            http.onerror = function() { // Usa a database local em caso de erros na API
+                if(idade <= 10) {
+                    img.setAttribute('src', 'homem_bebe.png')
+                } else if(idade <= 21) {
+                    img.setAttribute('src', 'homem_jovem.png')
+                } else if(idade <= 50) {
+                    img.setAttribute('src', 'homem_adulto.png')
+                } else {
+                    img.setAttribute('src', 'homem_idoso.png')
+                }
+            }
+
+            http.send()
         } else if (fsex[1].checked) {
             gen = 'Mulher'
+
             if (idade <= 10){ 
                 //Criança
-                img.setAttribute('src', 'mulher_bebe.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=child' // Define o url com os parametros
             }else if (idade < 21) {
                 //Jovem
-                img.setAttribute('src', 'mulher_jovem.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=young-adult' // Define o url com os parametros
             } else if (idade < 50) {
                 //Adulto
-                img.setAttribute('src', 'mulher_adulta.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=adult' // Define o url com os parametros
             } else {
                 //Idoso
-                img.setAttribute('src', 'mulher_idosa.png')
+                tUrl = 'https://api.generated.photos/api/v1/faces?gender=female&age=elderly' // Define o url com os parametros
+            }
+
+            http.open('GET', tUrl, true) // Abre a request em GET para o URL da API
+            http.setRequestHeader('Content-type', 'application/json') // Define o tipo de conteudo da request
+            http.setRequestHeader('Authorization', 'API-Key bSGCZorrN19B3rxPsM4EsQ')
+            http.responseType = 'json' // O tipo de resposta
+
+            http.onload = function() { // Altera a imagem quando receber um status de OK, caso contrario, usa a Database local
+                console.log(http.response)
+                img.setAttribute('src', http.response.faces[0].urls[3][256])
+            }
+
+            http.onerror = function() { // Usa a database local em caso de erros na API
+                if (idade <= 10){ 
+                    //Criança
+                    img.setAttribute('src', 'mulher_bebe.png')
+                }else if (idade < 21) {
+                    //Jovem
+                    img.setAttribute('src', 'mulher_jovem.png')
+                } else if (idade < 50) {
+                    //Adulto
+                    img.setAttribute('src', 'mulher_adulta.png')
+                } else {
+                    //Idoso
+                    img.setAttribute('src', 'mulher_idosa.png')
+                }
             }
+
+            http.send()
         }
         res.style.textAlign = 'center'
         res.innerHTML = `Detectamos ${gen} com ${idade} anos`

style.css

@@ -21,4 +21,14 @@ section{
 
 div{
     text-align: center;
+}
+
+#foto {
+    max-width: 250px;
+    border-radius: 50%;
+    margin-top: 25px;
+}
+
+.notice {
+    font-size: 12px;
 }