"use client"; import { useMemo, useRef, useState, type ChangeEvent } from "react"; import dynamic from "next/dynamic"; import { useRouter } from "next/navigation"; import { PencilRuler } from "lucide-react"; import { getPB } from "@/lib/pocketbase"; import { buildFromSpec, buildViews, buildDespiece, generateCortesCode, specFromPreset, normalizeSpec, COL3D, type Spec, } from "@/lib/disenador/engine"; const Viewer3D = dynamic(() => import("@/components/disenador/Viewer3D"), { ssr: false }); const EJEMPLO = "estantería de MDF de 60 de ancho por 25 de profundidad, laterales de 9mm, estantes de 12mm, fondo de 3mm. Dos compartimentos inferiores de 38 y tres superiores de 32, con zócalo de pino de 8 cm"; // Redimensiona y comprime en el navegador para no mandar imágenes enormes a la IA. async function fileToDataURL(file: File, max = 1024): Promise { const img = await new Promise((resolve, reject) => { const i = new Image(); i.onload = () => resolve(i); i.onerror = reject; i.src = URL.createObjectURL(file); }); const scale = Math.min(1, max / Math.max(img.width, img.height)); const w = Math.round(img.width * scale), h = Math.round(img.height * scale); const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; canvas.getContext("2d")!.drawImage(img, 0, 0, w, h); URL.revokeObjectURL(img.src); return canvas.toDataURL("image/jpeg", 0.85); } const MATERIALES = ["Melamina blanca", "Roble claro", "Nogal", "Negro mate", "Gris grafito", "Madera natural"]; const HERRAJES = ["Sin tiradores (uñero)", "Tiradores negros", "Tiradores dorados", "Manijas de aluminio"]; const AMBIENTES = ["Estudio neutro (catálogo)", "Living moderno", "Cocina", "Dormitorio"]; const ESTILOS = ["E-commerce, luz cálida", "Render arquitectónico", "Minimalista, luz fría"]; export default function DisenadorPage() { const [descripcion, setDescripcion] = useState(EJEMPLO); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [imagen, setImagen] = useState(null); const [spec, setSpec] = useState(() => specFromPreset("rack")); const [specText, setSpecText] = useState(() => JSON.stringify(specFromPreset("rack"), null, 2)); const [specErr, setSpecErr] = useState(""); const [showDoors, setShowDoors] = useState(true); const [showWall, setShowWall] = useState(true); // Render foto-real const [material, setMaterial] = useState(MATERIALES[0]); const [herrajes, setHerrajes] = useState(HERRAJES[0]); const [ambiente, setAmbiente] = useState(AMBIENTES[0]); const [estiloRender, setEstiloRender] = useState(ESTILOS[0]); const [rendering, setRendering] = useState(false); const [renderUrl, setRenderUrl] = useState(null); const [renderErr, setRenderErr] = useState(""); const [detallesRender, setDetallesRender] = useState(""); const [mejorando, setMejorando] = useState(false); const [calidad, setCalidad] = useState<"low" | "medium" | "high">("low"); const captureRef = useRef<(() => string | null) | null>(null); const panels = useMemo(() => buildFromSpec(spec), [spec]); const viewPanels = useMemo( () => panels.filter((p) => !(p.role === "puerta" && !showDoors)), [panels, showDoors], ); const views = useMemo(() => buildViews(viewPanels, spec), [viewPanels, spec]); const despiece = useMemo(() => buildDespiece(panels), [panels]); const cortesCode = useMemo(() => generateCortesCode(panels, spec), [panels, spec]); const router = useRouter(); const [copied, setCopied] = useState(false); async function copiarCortes() { try { await navigator.clipboard.writeText(cortesCode); setCopied(true); setTimeout(() => setCopied(false), 1500); } catch { /* clipboard no disponible */ } } async function mejorarPrompt() { setMejorando(true); try { const token = getPB().authStore.token; const r = await fetch("/api/disenador/mejorar-prompt", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify({ texto: detallesRender, nombre: spec.nombre, descripcion, material, herrajes, ambiente, estilo: estiloRender }), }); const data = await r.json(); if (r.ok && typeof data.prompt === "string") setDetallesRender(data.prompt); else setRenderErr(data?.error || "No pude mejorar el texto."); } catch (e) { setRenderErr((e as Error).message); } finally { setMejorando(false); } } async function generarRender() { const base = captureRef.current?.(); if (!base) { setRenderErr("No pude capturar la vista 3D."); return; } setRendering(true); setRenderErr(""); setRenderUrl(null); try { const token = getPB().authStore.token; const r = await fetch("/api/disenador/render", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify({ imagen: base, nombre: spec.nombre, descripcion, material, herrajes, ambiente, estilo: estiloRender, detalles: detallesRender, quality: calidad }), }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `Error ${r.status}`); setRenderUrl(data.imagen as string); } catch (e) { setRenderErr((e as Error).message); } finally { setRendering(false); } } function applySpec(next: Spec) { setSpec(next); setSpecText(JSON.stringify(next, null, 2)); setSpecErr(""); } async function onPickImage(e: ChangeEvent) { const f = e.target.files?.[0]; if (f) setImagen(await fileToDataURL(f)); e.target.value = ""; } async function generar() { setLoading(true); setError(""); try { const token = getPB().authStore.token; const r = await fetch("/api/disenador", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify({ descripcion, imagen }), }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `Error ${r.status}`); applySpec(data.spec as Spec); } catch (e) { setError((e as Error).message); } finally { setLoading(false); } } function aplicarSpecText() { try { applySpec(normalizeSpec(JSON.parse(specText))); } catch (e) { setSpecErr("JSON inválido: " + (e as Error).message); } } return (

Diseñador

{spec.nombre && · {spec.nombre}}
{/* Entrada de texto */}