¡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 💻🤖🧠
