gpt-engineer-app[bot]
4f6a11c269
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
263 lines
10 KiB
TypeScript
263 lines
10 KiB
TypeScript
import { useEffect, useRef, useCallback, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Upload, Glasses, CheckCircle, XCircle, Loader2, Box, Package } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useModelStore } from '@/stores/useModelStore';
|
|
import { toast } from 'sonner';
|
|
import { getSupportedExtension, convertToGLB, ACCEPTED_EXTENSIONS } from '@/lib/convertToGLB';
|
|
import { convertIFCtoGLB } from '@/lib/convertIFC';
|
|
import { validateModelFile } from '@/lib/validateModelFile';
|
|
import { CloudLoader } from '@/components/CloudLoader';
|
|
import { SceneModelList } from '@/components/SceneModelList';
|
|
import { RecentFilesList } from '@/components/RecentFilesList';
|
|
import { addRecentFile } from '@/lib/recentFiles';
|
|
|
|
const Index = () => {
|
|
const navigate = useNavigate();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [loadingDemoIFC, setLoadingDemoIFC] = useState(false);
|
|
const [loadingDemoCotovelo, setLoadingDemoCotovelo] = useState(false);
|
|
|
|
const [converting, setConverting] = useState(false);
|
|
const { model, addModel, models, maxModels, xrSupported, setXrSupported } = useModelStore();
|
|
|
|
useEffect(() => {
|
|
if (navigator.xr) {
|
|
navigator.xr.isSessionSupported('immersive-ar').then(setXrSupported).catch(() => setXrSupported(false));
|
|
} else {
|
|
setXrSupported(false);
|
|
}
|
|
}, [setXrSupported]);
|
|
|
|
const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
const ext = getSupportedExtension(file.name);
|
|
if (!ext) {
|
|
toast.error('Formato inválido. Selecione um arquivo .GLB, .OBJ, .STL ou .IFC');
|
|
return;
|
|
}
|
|
|
|
// Pré-validação rápida (tamanho) antes de ler o arquivo inteiro na memória
|
|
const sizeCheck = validateModelFile(file.name, file.size, ext);
|
|
if (!sizeCheck.ok) {
|
|
toast.error(sizeCheck.reason!);
|
|
return;
|
|
}
|
|
|
|
if (ext === 'glb') {
|
|
// Para GLB, valida assinatura "glTF" antes de criar o objectURL
|
|
try {
|
|
const head = await file.slice(0, 16).arrayBuffer();
|
|
const sigCheck = validateModelFile(file.name, file.size, ext, head);
|
|
if (!sigCheck.ok) {
|
|
toast.error(sigCheck.reason!);
|
|
if (sigCheck.detail) console.warn('[validateModelFile]', sigCheck.detail);
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
console.error('[upload] header read failed', err);
|
|
}
|
|
const url = URL.createObjectURL(file);
|
|
addModel({ fileName: file.name, fileSize: file.size, url });
|
|
addRecentFile(file.name, file).catch(() => {});
|
|
toast.success(`Modelo "${file.name}" carregado com sucesso!`);
|
|
return;
|
|
}
|
|
|
|
// Convert OBJ/STL/IFC to GLB
|
|
setConverting(true);
|
|
try {
|
|
const buffer = await file.arrayBuffer();
|
|
const sigCheck = validateModelFile(file.name, file.size, ext, buffer);
|
|
if (!sigCheck.ok) {
|
|
toast.error(sigCheck.reason!);
|
|
if (sigCheck.detail) console.warn('[validateModelFile]', sigCheck.detail);
|
|
return;
|
|
}
|
|
let result;
|
|
if (ext === 'ifc') {
|
|
result = await convertIFCtoGLB(buffer, file.name);
|
|
} else {
|
|
result = await convertToGLB(buffer, ext, file.name);
|
|
}
|
|
const url = URL.createObjectURL(result.blob);
|
|
addModel({ fileName: result.fileName, fileSize: result.fileSize, url });
|
|
addRecentFile(result.fileName, result.blob).catch(() => {});
|
|
toast.success(`"${file.name}" convertido para GLB e carregado!`);
|
|
} catch (err) {
|
|
console.error('[upload] conversion failed', err);
|
|
const msg = err instanceof Error ? err.message : 'erro desconhecido';
|
|
toast.error(`Falha ao converter "${file.name}": ${msg}`);
|
|
} finally {
|
|
setConverting(false);
|
|
}
|
|
}, [addModel]);
|
|
|
|
// Carregar da Nuvem agora é encapsulado em <CloudLoader />
|
|
|
|
const handleLoadDemoIFC = useCallback(async () => {
|
|
setLoadingDemoIFC(true);
|
|
try {
|
|
const response = await fetch('/models/demo250hp.ifc');
|
|
const buffer = await response.arrayBuffer();
|
|
const result = await convertIFCtoGLB(buffer, 'demo250hp.ifc');
|
|
const url = URL.createObjectURL(result.blob);
|
|
addModel({ fileName: result.fileName, fileSize: result.fileSize, url });
|
|
addRecentFile(result.fileName, result.blob).catch(() => {});
|
|
toast.success('Modelo demo "250 HP" (IFC) carregado!');
|
|
} catch (err) {
|
|
console.error(err);
|
|
toast.error('Falha ao converter modelo demo IFC');
|
|
} finally {
|
|
setLoadingDemoIFC(false);
|
|
}
|
|
}, [addModel]);
|
|
|
|
const handleLoadDemoCotovelo = useCallback(async () => {
|
|
setLoadingDemoCotovelo(true);
|
|
try {
|
|
const response = await fetch('/models/B126-COTOVELO.ifc');
|
|
const buffer = await response.arrayBuffer();
|
|
const result = await convertIFCtoGLB(buffer, 'B126-COTOVELO.ifc');
|
|
const url = URL.createObjectURL(result.blob);
|
|
addModel({ fileName: result.fileName, fileSize: result.fileSize, url });
|
|
addRecentFile(result.fileName, result.blob).catch(() => {});
|
|
toast.success('Modelo demo "B126 Cotovelo" (IFC) carregado!');
|
|
} catch (err) {
|
|
console.error(err);
|
|
toast.error('Falha ao converter modelo demo Cotovelo');
|
|
} finally {
|
|
setLoadingDemoCotovelo(false);
|
|
}
|
|
}, [addModel]);
|
|
|
|
const handleEnterViewer = () => {
|
|
if (!model) {
|
|
toast.error('Importe um modelo GLB primeiro');
|
|
return;
|
|
}
|
|
navigate('/viewer');
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center bg-background grid-industrial p-6">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept={ACCEPTED_EXTENSIONS}
|
|
className="hidden"
|
|
onChange={handleFileUpload} />
|
|
|
|
|
|
{/* Logo area */}
|
|
<div className="mb-12 text-center">
|
|
<div className="mb-4 flex items-center justify-center gap-3">
|
|
<Box className="h-10 w-10 text-primary" />
|
|
<h1 className="text-3xl font-bold tracking-tight text-foreground md:text-4xl">
|
|
TrackSteel<span className="text-primary">XR</span>
|
|
</h1>
|
|
</div>
|
|
<p className="font-mono text-sm uppercase tracking-widest text-muted-foreground">
|
|
Inspeção de Qualidade Industrial
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main card */}
|
|
<div className="w-full max-w-md space-y-4">
|
|
{/* Import button */}
|
|
<Button
|
|
variant="outline"
|
|
className="h-28 w-full flex-col gap-3 border-dashed border-2 text-muted-foreground hover:border-primary hover:text-primary transition-all"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={converting}>
|
|
|
|
{converting ? <Loader2 className="h-8 w-8 animate-spin" /> : <Upload className="h-8 w-8" />}
|
|
<div className="text-center">
|
|
<p className="text-sm font-semibold">{converting ? 'Convertendo modelo…' : 'Importar Modelo 3D'}</p>
|
|
<p className="text-xs text-muted-foreground">GLB · OBJ · STL · IFC — Escala 1:1</p>
|
|
</div>
|
|
</Button>
|
|
|
|
{/* Demo buttons */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<CloudLoader />
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="h-12 w-full gap-2 border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary transition-all text-xs"
|
|
onClick={handleLoadDemoIFC}
|
|
disabled={loadingDemoIFC}>
|
|
{loadingDemoIFC ? <Loader2 className="h-4 w-4 animate-spin" /> : <Package className="h-4 w-4" />}
|
|
{loadingDemoIFC ? 'Convertendo…' : 'Demo — 250 HP (IFC)'}
|
|
</Button>
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="h-12 w-full gap-2 border-muted-foreground/30 text-muted-foreground hover:border-primary hover:text-primary transition-all text-xs"
|
|
onClick={handleLoadDemoCotovelo}
|
|
disabled={loadingDemoCotovelo}>
|
|
{loadingDemoCotovelo ? <Loader2 className="h-4 w-4 animate-spin" /> : <Package className="h-4 w-4" />}
|
|
{loadingDemoCotovelo ? 'Convertendo…' : 'Demo — B126 Cotovelo (IFC)'}
|
|
</Button>
|
|
</div>
|
|
|
|
|
|
{models.length > 0 && (
|
|
<div className="rounded-lg border border-primary/30 bg-primary/5 p-3 glow-primary">
|
|
<SceneModelList />
|
|
<p className="mt-2 text-center font-mono text-[10px] text-muted-foreground">
|
|
{models.length < maxModels
|
|
? `Você pode adicionar mais ${maxModels - models.length} peça(s) à cena`
|
|
: `Limite de ${maxModels} peças simultâneas atingido`}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recent files card — últimos 6 modelos abertos (cache local) */}
|
|
<div className="rounded-lg border border-border bg-card/50 p-3">
|
|
<RecentFilesList />
|
|
</div>
|
|
|
|
|
|
{/* Enter viewer */}
|
|
<Button
|
|
className="h-14 w-full gap-3 text-base font-semibold glow-primary"
|
|
disabled={!model}
|
|
onClick={handleEnterViewer}>
|
|
|
|
<Glasses className="h-5 w-5" />
|
|
Visualizar Modelo 3D
|
|
</Button>
|
|
|
|
{/* XR Status */}
|
|
<div className="flex items-center justify-center gap-2 pt-2">
|
|
{xrSupported === null ?
|
|
<>
|
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
|
<span className="text-xs text-muted-foreground">Verificando suporte WebXR…</span>
|
|
</> :
|
|
xrSupported ?
|
|
<>
|
|
<CheckCircle className="h-4 w-4 text-success" />
|
|
<span className="text-xs text-success">WebXR Compatível — Passthrough disponível</span>
|
|
</> :
|
|
|
|
<>
|
|
<XCircle className="h-4 w-4 text-destructive" />
|
|
<span className="text-xs text-destructive">WebXR não disponível neste navegador</span>
|
|
</>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<p className="mt-16 text-center font-mono text-xs text-muted-foreground/50">
|
|
TrackSteelXR v1.0 — Q.C. Inspection
|
|
</p>
|
|
</div>);
|
|
|
|
};
|
|
|
|
export default Index; |