Acceso al API de GEMINI desde PHP (Modelo de IA de Google)

[@diegomoissetdeespanes]

proyecto1.
index.html


Gemini

/* CSS para el formulario de consulta a GEMINI */
body {
font-family: Arial, sans-serif;
}
.contenedor {
max-width: 800px;
margin: 0 auto;
padding: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
margin-top: 0;
}
textarea {
width: 100%;
height: 200px;
font-size: 16px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
cursor: pointer;
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: 1px solid #3498db;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #2980b9;
}
button:disabled {
opacity: 0.5;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
white-space: pre-wrap;
overflow: auto;
}


Formulario de Consulta a GEMINI









const formulario1 = document.querySelector("#formulario1")
formulario1.addEventListener("submit", evento => {
evento.preventDefault()
const consulta = document.querySelector("#consulta").value.trim()
const botonConsultar = document.querySelector("input[type='submit']")
// Desactivar el botón y mostrar mensaje de espera
botonConsultar.disabled = true;
botonConsultar.value = "Espere, por favor..."
const datosFormulario = new FormData()
datosFormulario.append("consulta", consulta)
fetch("consulta.php", {
method: 'POST',
body: datosFormulario
}).then(respuesta => respuesta.json())
.then(respuesta => {
// Mostrar la respuesta y reactivar el botón
document.querySelector("#resultado").innerHTML = `${respuesta.mensaje}`
botonConsultar.disabled = false
botonConsultar.value = "Consultar"
})
.catch(error => {
console.error('Error en la solicitud fetch:', error)
// Reactivar el botón en caso de error
botonConsultar.disabled = false
botonConsultar.value = "Consultar"
})
});

-----------
consulta.php
--------------------------------

[@diegomoissetdeespanes]

Proyecto2
index.html


Gemini

/* CSS para el formulario de consulta a GEMINI */
body {
font-family: Arial, sans-serif;
}
.contenedor {
max-width: 800px;
margin: 0 auto;
padding: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
h1 {
margin-top: 0;
}
textarea {
width: 100%;
height: 200px;
font-size: 16px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="file"] {
margin-top: 10px;
}
#imagenPrevioContainer {
display: none;
/* Ocultar inicialmente */
}
img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
button {
cursor: pointer;
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: 1px solid #3498db;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #2980b9;
}
button:disabled {
opacity: 0.5;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
white-space: pre-wrap;
overflow: auto;
}


Formulario de Consulta a GEMINI










Ingrese su consulta sobre la imagen







function mostrarImagen() {
const imagenInput = document.querySelector("#imagen")
const imagenPrevioContainer = document.querySelector("#imagenPrevioContainer")
const imagenPrevio = document.querySelector("#imagenPrevio")
const consultaTextarea = document.querySelector("#consulta")
const resultadoPre = document.querySelector("#resultado")
if (imagenInput.files && imagenInput.files[0]) {
const reader = new FileReader()
reader.onload = function (e) {
imagenPrevio.src = e.target.result
// Mostrar el div de la imagen cuando se selecciona una imagen
imagenPrevioContainer.style.display = "block";
// Borrar el contenido del textarea y del resultado
consultaTextarea.value = ""
resultadoPre.innerHTML = ""
};
reader.readAsDataURL(imagenInput.files[0])
} else {
// Ocultar el div de la imagen cuando no se selecciona una imagen
imagenPrevioContainer.style.display = "none"
}
}
const formulario1 = document.querySelector("#formulario1")
document.querySelector("#imagen").addEventListener("change", () => {
mostrarImagen()
})
function escaparCaracteresHTML(texto) {
return texto.replace(//g, '>')
}
formulario1.addEventListener("submit", evento => {
evento.preventDefault()
const consulta = document.querySelector("#consulta").value.trim()
const imagenInput = document.querySelector("#imagen")
const imagen = imagenInput.files[0]
const botonConsultar = document.querySelector("input[type='submit']")
botonConsultar.disabled = true
botonConsultar.value = "Espere, por favor..."
const datosFormulario = new FormData()
datosFormulario.append("consulta", consulta)
datosFormulario.append("imagen", imagen)
fetch("consulta.php", {
method: 'POST',
body: datosFormulario
}).then(respuesta => respuesta.json())
.then(respuesta => {
console.log(respuesta.mensaje)
document.querySelector("#resultado").innerHTML = `${escaparCaracteresHTML(respuesta.mensaje)}`
botonConsultar.disabled = false
botonConsultar.value = "Consultar"
})
.catch(error => {
console.error('Error en la solicitud fetch:', error)
botonConsultar.disabled = false
botonConsultar.value = "Consultar"
});
});

--------------------------
consulta.php

[@edgarcaballero238]

@@diegomoissetdeespanes buenas, copie tu codigo asi como esta, pero el de la imagen no me funciona, me tira este error, index.html:167 Error en la solicitud fetch: SyntaxError: Unexpected token '

[@abrahamcoagtletemis6321]

Vengo del curso de Android Estudio Con java. Me meto a tu canal y veo que ES UNA MINA DE ORO. Es super genial tu canal y las explicaciones super bien. ERES GRANDE BRO 🎖️

[@fernandodiaz8231]

Gracias Diego. Fue de gran ayuda tu video. Gracias a tu aporte pude identificar que puedo emplear CURL para comunicarme con Gemini.
Tal vez me puedas dar una pista de como poder subir a Gemini un documento PDF para que lo consideré como una base de conocimiento.

[@JeremiasGonzalezEscamilla]

Buenas tardes Diego cuales son las especificaciones de las imagenes que acepta el api de Gemini? ya que estuve probando pero no me acepta muchas de ellas

[@jordansistemas]

Excelente!, gran aporte

[@JosueGS14XD]

excelente, sera buno ver un curso de spring boot, como hacer apis y tambien como conectarla a una base de datos de oracle

A resposta no Google é diferente (e [mais] precisa) da resposta da API.
Será que é por ser uma conta free?
Será que se eu pagar a resposta melhora?
Obrigado por este vídeo.

[@binhostaudt]

Model/aqa existe algo ?

[@martinmontes7653]

HERMANO SE CAYO TU PAGINA ESPERO LO PUEDAS ARREGLAR PRONTO , ME SIRVE DE MUCHA AYUDA TU PAGINA ESPERO TODO SALGA BIEN , BENDICIONES