Saiph's Blog: Crea tu primer sitio web interactivo impulsado por IA generativa con el modelo LLaMA de Meta

Sunday, March 23, 2025

Crea tu primer sitio web interactivo impulsado por IA generativa con el modelo LLaMA de Meta

¡Hola amigas y amigos! 👋

En este tutorial, vas a crear una página web súper sencilla donde las personas puedan escribir una pregunta y recibir una respuesta de una IA — ¡igual que con ChatGPT! Pero aquí usarás el modelo LLaMA de Meta (un modelo de IA de código abierto) a través de Hugging Face.

Vas a aprender a:

✅ Usar un modelo de IA
✅ Crear una página web básica
✅ Conectar todo con código en Python

🧠 ¿Qué herramientas vamos a usar?

Antes de comenzar a escribir código, conozcamos las herramientas:

🟣 Hugging Face

Imagina una biblioteca gigante de modelos de IA poderosos (como LLaMA, GPT, etc.) que puedes usar en tus proyectos. Es como el Netflix de los modelos de IA — ¡solo inicia sesión, elige uno y listo!

🟠 Flask (Python)

Es un programa ligero que convierte tu código en Python en una pequeña página web. Es como el cerebro que está detrás de escena — recibe la pregunta del usuario, se la pasa a la IA, y devuelve la respuesta.

✅ Tutorial paso a paso

🔧 Paso 1: Abre Google Colab

Ve a Google Colab y abre un nuevo notebook.

📦 Paso 2: Instala las herramientas necesarias

!pip install flask flask-ngrok transformers torch pyngrok

🔐 Paso 3: Inicia sesión en Hugging Face

Visita https://huggingface.co
Inicia sesión → Ve a Settings > Access Tokens
Copia tu token y pégalo aquí:

from huggingface_hub import login
HUGGING_FACE_KEY = "pega-tu-token-aquí"
login(HUGGING_FACE_KEY)

🤖 Paso 4: Carga el modelo LLaMA de Meta

from transformers import AutoTokenizer, AutoModelForCausalLM
import torch

model_name = "meta-llama/Llama-3.2-1B"
tokenizer = AutoTokenizer.from_pretrained(model_name)
model = AutoModelForCausalLM.from_pretrained(model_name)

🧠 Paso 5: Construyamos el backend (el cerebro del sitio web)

¿Qué es el backend?
Es como el chef en un restaurante. La persona hace un pedido (una pregunta), y el backend prepara la respuesta usando IA.

from flask import Flask, request, jsonify
from flask_ngrok import run_with_ngrok

app = Flask(__name__)
run_with_ngrok(app)

@app.route("/ask", methods=["POST"])
def ask():
    prompt = request.json.get("prompt", "")
    inputs = tokenizer(prompt, return_tensors="pt")
    outputs = model.generate(inputs["input_ids"], max_length=100)
    response = tokenizer.decode(outputs[0], skip_special_tokens=True)
    return jsonify({"response": response})

🌐 Paso 6: Crea la página web (frontend)

Ahora vamos a construir la parte que las personas ven e interactúan — el frontend.

%%writefile index.html
<!DOCTYPE html>
<html>
<head><title>Pregúntale a la IA</title></head>
<body>
  <h2>Pregúntale a la IA</h2>
  <textarea id="prompt" rows="4" cols="50" placeholder="Escribe tu pregunta aquí..."></textarea><br>
  <button onclick="askAI()">Preguntar</button>
  <p><strong>Respuesta:</strong> <span id="response"></span></p>

  <script>
    async function askAI() {
      const prompt = document.getElementById("prompt").value;
      const res = await fetch("/ask", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt: prompt })
      });
      const data = await res.json();
      document.getElementById("response").innerText = data.response;
    }
  </script>
</body>
</html>

🧩 Paso 7: Conecta todo y ejecuta la app

from flask import send_from_directory

@app.route('/')
def serve_frontend():
    return send_from_directory('.', 'index.html')

app.run()

Vas a recibir un enlace como este: https://xxxxx.ngrok.io
¡Haz clic y... 🎉 tu sitio web con IA está EN VIVO!

🏁 ¡Misión cumplida!

Acabas de construir:

Un asistente de IA funcionando con el modelo LLaMA de Meta
Una página web personalizada
Un backend en Python que conecta todo

¡Ya estás programando con modelos de IA reales! Bienvenida/o al mundo del desarrollo con inteligencia artificial 💻🤖🧠

Saiph's Blog