Guía Práctica: Programando con IA desde la Consola de Chrome
← Ir a tutoriales

Guía Práctica: Programando con IA desde la Consola de Chrome

Club Argentino de Tecnología

Introducción

¡Bienvenidos al mundo de la programación! En esta guía aprenderemos a crear nuestra primera aplicación usando inteligencia artificial, todo desde el navegador Chrome. No necesitarás instalar ningún programa adicional.

Requisitos

  • Navegador Google Chrome
  • Conexión a internet
  • Ganas de aprender

Paso 1: Abriendo la Consola de Desarrollo

  1. Abre Google Chrome
  2. Presiona la tecla F12 (o click derecho en cualquier parte de la página y selecciona "Inspeccionar")
  3. Haz click en la pestaña "Consola"
  4. Tip: Puedes abrir una página en blanco escribiendo about:blank en la barra de direcciones

Paso 2: Nuestros Primeros Comandos

// Escribimos en la consola:
console.log("¡Hola mundo!")

// Probamos una suma
2 + 2

// Guardamos un nombre en la memoria
let nombre = "Juan"
console.log("Hola " + nombre)

Paso 3: Creando Nuestra Primera Función

// Una función es como una receta que podemos usar cuando queramos
function saludar(nombre) {
    console.log("¡Hola " + nombre + "!")
}

// La usamos así:
saludar("María")
saludar("Carlos")

Paso 4: ¡Creando un Generador de Excusas!

// Primero creamos nuestras listas de palabras
let inicios = [
    "Perdón por la demora, pero",
    "No pude llegar antes porque",
    "Lamento la tardanza,",
    "No vas a creer esto, pero",
    "Tengo una excusa muy buena:",
]

let eventos = [
    "mi vecino",
    "un perro callejero",
    "el colectivo",
    "mi tía Marta",
    "un superhéroe",
    "el presidente",
]

let acciones = [
    "se quedó atascado en la puerta",
    "estaba bailando en la calle",
    "me pidió direcciones para ir al obelisco",
    "necesitaba ayuda con su computadora",
    "no me dejaba salir de casa",
    "me invitó a tomar mate",
]

// Función para obtener un elemento aleatorio de una lista
function obtenerAleatorio(lista) {
    // Math.random() nos da un número entre 0 y 1
    // Lo multiplicamos por el largo de la lista
    // Math.floor() redondea hacia abajo
    let indice = Math.floor(Math.random() * lista.length)
    return lista[indice]
}

// Función para generar una excusa completa
function generarExcusa() {
    let inicio = obtenerAleatorio(inicios)
    let evento = obtenerAleatorio(eventos)
    let accion = obtenerAleatorio(acciones)
    
    let excusa = inicio + " " + evento + " " + accion
    return excusa
}

// ¡Probemos nuestro generador!
console.log(generarExcusa())

Paso 5: Trabajando con la IA

// Copiamos y pegamos la función askMichi que nos permitirá hablar con la IA
async function askMichi(prompt) {
    const MICHI_API_KEY = '11223344556677889900'; // Replace with actual API key

    try {
        const response = await fetch('https://server.llmule.cm64.studio/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'x-api-key': `${MICHI_API_KEY}`
            },
            body: JSON.stringify({
                model: 'TheBloke/OpenHermes-2.5-Mistral-7B-GGUF/openhermes-2.5-mistral-7b.Q2_K.gguf',
                messages: [{
                    role: 'user',
                    content: prompt
                }],
                temperature: 0.7
            })
        });

        const data = await response.json();
        if (data.error) {
            throw new Error(data.error.message);
        }
        return data.choices[0].message.content;
    } catch (error) {
        console.error('Error:', error);
        return 'Error calling Michi API: ' + error.message;
    }
}

// La probamos con una pregunta simple:
askMichi("¿Cuál es la capital de Argentina?")
    .then(respuesta => console.log(respuesta))

Paso 6: Creando una Interfaz Simple

// Función para agregar un título a la página
function agregarTitulo(texto) {
    const titulo = document.createElement('h1')
    titulo.textContent = texto
    titulo.style.margin = '20px'
    titulo.style.color = '#2c3e50'
    document.body.appendChild(titulo)
}

// Función para agregar un campo de texto
function agregarInput() {
    const input = document.createElement('input')
    input.style.margin = '20px'
    input.style.padding = '10px'
    input.style.width = '300px'
    document.body.appendChild(input)
    return input
}

// Función para agregar un botón
function agregarBoton(texto) {
    const boton = document.createElement('button')
    boton.textContent = texto
    boton.style.margin = '20px'
    boton.style.padding = '10px 20px'
    boton.style.backgroundColor = '#3498db'
    boton.style.color = 'white'
    boton.style.border = 'none'
    boton.style.borderRadius = '4px'
    document.body.appendChild(boton)
    return boton
}

// Función para mostrar la respuesta
function mostrarRespuesta(texto) {
    const respuesta = document.createElement('div')
    respuesta.textContent = texto
    respuesta.style.margin = '20px'
    respuesta.style.padding = '20px'
    respuesta.style.backgroundColor = '#f8f9fa'
    respuesta.style.borderRadius = '4px'
    document.body.appendChild(respuesta)
}

Paso 7: ¡Armando Todo!

// Esta función crea nuestra aplicación
function crearApp() {
    // Limpiamos la página
    document.body.innerHTML = ''

    // Agregamos los elementos
    agregarTitulo('Preguntale a la IA')
    const input = agregarInput()
    const boton = agregarBoton('Preguntar')

    // Cuando hacemos click en el botón...
    boton.onclick = async () => {
        const pregunta = input.value
        if (pregunta) {
            boton.disabled = true
            boton.textContent = 'Pensando...'

            const respuesta = await askMichi(pregunta)
            mostrarRespuesta(respuesta)

            boton.disabled = false
            boton.textContent = 'Preguntar'
        }
    }
}

// ¡Ejecutamos nuestra app!
crearApp()

Ejercicios Prácticos

  1. Modifica el título de la aplicación
  2. Cambia los colores del botón
  3. Agrega un mensaje de bienvenida
  4. Prueba diferentes preguntas para la IA

Tips y Trucos

  • Si algo no funciona, revisa la consola por mensajes de error
  • Puedes refrescar la página (F5) para empezar de nuevo
  • Todo lo que escribas en la consola se guarda hasta que refresques
  • Usa las flechas arriba/abajo para ver comandos anteriores

¿Qué Aprendimos?

  • Usar la consola de Chrome
  • Crear variables y funciones
  • Manipular elementos de una página web
  • Interactuar con una IA
  • Crear una interfaz de usuario simple

Próximos Pasos

  1. Experimenta modificando el diseño
  2. Agrega nuevas funcionalidades
  3. Prueba diferentes tipos de preguntas
  4. ¡Comparte tu creación con otros!

¡Felicitaciones! Has creado tu primera aplicación web con IA. 🎉

← Ir a tutoriales