¡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 馃捇馃馃
