@srsergio/taptapp-ar 1.0.0 → 1.0.2

package/README.md

@@ -1,62 +1,136 @@
 # @srsergio/taptapp-ar
 
-AR Visualizer and Image Target Compiler for Astro and React.
+🚀 **TapTapp AR** is a high-performance Augmented Reality (AR) toolkit specifically designed for **Astro** and **Node.js** environments. It provides a seamless way to integrate image tracking, video overlays, and an offline compiler for image targets.
 
-## Features
+Built on top of **MindAR**, **A-Frame**, and **TensorFlow.js**, this package is optimized for both frontend visualization in Astro and backend/serverless image target compilation.
 
-- 🚀 **Astro-ready**: Built-in components for Astro projects.
-- ⚛️ **React Support**: Advanced AREditor and Progress UI.
-- 🖼️ **Offline Compiler**: Powerful image target compilation using TensorFlow.js.
-- 📱 **Mobile Optimized**: Smooth performance on mobile devices.
+---
+
+## 🌟 Key Features
+
+- 🚀 **Astro Native**: Optimized components for Astro's Islands architecture.
+- 🖼️ **Offline Compiler**: A powerful server-side compiler that generates `.mind` target files without a browser.
+- ⚡ **Optimized Performance**: Pre-warmed TensorFlow backends and adaptive memory management for serverless environments (Vercel, AWS Lambda).
+- 📱 **Mobile First**: Designed for smooth performance on iOS (Safari) and Android.
+
+---
 
-## Installation
+## 🛠 Installation
 
 ```bash
 npm install @srsergio/taptapp-ar
 ```
 
-Note: You should also have `three`, `aframe`, `react`, and `react-dom` installed in your project as peer dependencies.
+### 📦 Peer Dependencies
+
+Make sure you have the following packages installed in your host project:
+
+```bash
+npm install three aframe astro
+```
+
+Note: If you are using the `OfflineCompiler` in a Node.js environment, ensure you have the necessary TensorFlow.js backends installed.
+
+---
 
-## Usage
+## 🚀 Astro Integration Guide
 
-### Using the AR Visualizer in Astro
+The easiest way to display AR content is using the `ARVideoTrigger` component.
+
+### Usage
 
 ```astro
 ---
 import ARVideoTrigger from '@srsergio/taptapp-ar/astro/ARVideoTrigger.astro';
 
 const config = {
-  targetImageSrc: '/path/to/image.jpg',
-  targetMindSrc: '/path/to/targets.mind',
-  videoSrc: '/path/to/video.mp4',
+  cardId: 'unique-id',
+  targetImageSrc: 'https://cdn.example.com/target.jpg',
+  targetMindSrc: 'https://cdn.example.com/targets.mind',
+  videoSrc: 'https://cdn.example.com/overlay.mp4',
   videoWidth: 1280,
   videoHeight: 720,
-  scale: 1,
+  scale: 1.2,
 };
 ---
 
 <ARVideoTrigger config={config} />
 ```
 
-### Using the AR Editor in React
+### `ARVideoTrigger` Props (Config)
 
-```tsx
-import { AREditor } from '@srsergio/taptapp-ar';
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `cardId` | `string` | Unique identifier for tracking/session. |
+| `targetImageSrc` | `string` | URL of the image being tracked. |
+| `targetMindSrc` | `string` | URL of the compiled `.mind` target file. |
+| `videoSrc` | `string` | URL of the video to overlay on the target. |
+| `videoWidth` | `number` | Original width of the video. |
+| `videoHeight` | `number` | Original height of the video. |
+| `scale` | `number` | Scaling factor for the video overlay (Default: `1`). |
 
-function MyEditor() {
-  return <AREditor adminId="some-id" />;
-}
-```
+---
+
+## 🖼 Offline Compiler Guide
+
+The `OfflineCompiler` allows you to compile image targets on the backend. This is the heart of the TapTapp asset pipeline.
 
-### Using the Offline Compiler (Backend/Serverless)
+### Why use the Offline Compiler?
+Standard MindAR tools require a browser canvas to compile images. This compiler uses **TensorFlow.js** backends (CPU/WebGL/Node) to perform the computation as a background task.
+
+### Basic Usage
 
 ```typescript
 import { OfflineCompiler } from '@srsergio/taptapp-ar';
 
 const compiler = new OfflineCompiler();
-// ... logic to compile image targets
+
+async function compile(imageBuffer: Buffer) {
+  // targetImages is an array of images to compile into the same .mind file
+  const result = await compiler.compileTrack({
+    targetImages: [imageBuffer],
+    progressCallback: (progress) => console.log(`Compiling: ${progress}%`),
+    basePercent: 0
+  });
+  
+  // result is the compiled target data
+  return result;
+}
+```
+
+### ⚡ Serverless Optimization
+The compiler is optimized for environments like Vercel Functions:
+- **Early Initialization**: TensorFlow is pre-warmed on module import.
+- **Memory Management**: Aggressive garbage collection (`tf.dispose()`) and tensor cleanup.
+- **Batch Processing**: Automatically splits work to avoid memory spikes.
+
+---
+
+## ❓ Troubleshooting
+
+| Issue | Solution |
+| :--- | :--- |
+| **Camera not starting** | Ensure your site is served via `HTTPS`. Browsers block camera access on insecure origins. |
+| **Video not playing** | iOS Safari requires `muted` and `playsinline` attributes for autoplaying videos. Our components handle this by default. |
+| **CORS errors** | Ensure that `targetImageSrc`, `targetMindSrc`, and `videoSrc` have CORS headers enabled (`Access-Control-Allow-Origin: *`). |
+| **Memory Outage on Serverless** | Reduce the resolution of your target images. High-res images increase memory pressure during compilation. |
+
+---
+
+## 🏗 Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
 ```
 
-## License
+The package uses **TypeScript** and exports both ESM and CJS compatible builds located in the `dist` folder.
+
+---
+
+## 📄 License
 
-MIT
+MIT © [srsergiolazaro](https://github.com/srsergiolazaro)

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-export * from "./react/AREditor";
-export * from "./react/ProgressDialog";
 export * from "./react/types";
 export * from "./compiler/offline-compiler";
 export { Controller } from "./compiler/controller";

package/dist/index.js

@@ -1,5 +1,3 @@
-export * from "./react/AREditor";
-export * from "./react/ProgressDialog";
 export * from "./react/types";
 export * from "./compiler/offline-compiler";
 // Re-export specific compiler components if needed

package/package.json

@@ -1,7 +1,15 @@
 {
     "name": "@srsergio/taptapp-ar",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "AR Visualizer and Compiler for Astro and React",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/srsergiolazaro/taptapp-ar.git"
+    },
+    "bugs": {
+        "url": "https://github.com/srsergiolazaro/taptapp-ar/issues"
+    },
+    "homepage": "https://github.com/srsergiolazaro/taptapp-ar#readme",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",

package/src/index.ts

@@ -1,5 +1,3 @@
-export * from "./react/AREditor";
-export * from "./react/ProgressDialog";
 export * from "./react/types";
 export * from "./compiler/offline-compiler";
 

package/src/react/AREditor.tsx

@@ -1,394 +0,0 @@
-import { useState, useRef, useCallback } from "react";
-import { customAlphabet } from "nanoid";
-import { Image, Video, Upload, Camera, LoaderCircle } from "lucide-react";
-
-const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"];
-const ALLOWED_VIDEO_TYPES = ["video/mp4", "video/webm"];
-
-interface FileUploadState {
-  file: File | null;
-  preview: string;
-}
-
-interface AREditorProps {
-  adminId: string;
-}
-
-const useFileUpload = (allowedTypes: string[]) => {
-  const [fileState, setFileState] = useState<FileUploadState>({ file: null, preview: "" });
-  const [dimensions, setDimensions] = useState<{ width?: number; height?: number }>({});
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileChange = useCallback(
-    (file: File | null) => {
-      if (fileState.preview) {
-        URL.revokeObjectURL(fileState.preview);
-      }
-
-      if (!file) {
-        setFileState({ file: null, preview: "" });
-        return;
-      }
-
-      // Para archivos .mind, validar la extensión en lugar del tipo MIME
-      if (allowedTypes.includes(".mind")) {
-        if (!file.name.toLowerCase().endsWith(".mind")) {
-          throw new Error("El archivo debe tener extensión .mind");
-        }
-      } else if (!allowedTypes.includes(file.type)) {
-        throw new Error("Tipo de archivo no permitido");
-      }
-
-      if (file.type.includes("video")) {
-        const video = document.createElement("video");
-        video.src = URL.createObjectURL(file);
-      }
-
-      console.log("Archivo cargado:", {
-        nombre: file.name,
-        tamaño: (file.size / 1024).toFixed(2) + " KB",
-        tipo: file.type || "application/octet-stream",
-      });
-
-      const preview = URL.createObjectURL(file);
-      if (file.type.includes("video")) {
-        const video = document.createElement("video");
-        video.src = URL.createObjectURL(file);
-        video.addEventListener("loadedmetadata", () => {
-          const width = video.videoWidth;
-          const height = video.videoHeight;
-          setDimensions({ width, height });
-          console.log("Ancho y alto del video:", width, height);
-        });
-      }
-
-      setFileState({ file, preview });
-    },
-    [allowedTypes, fileState.preview],
-  );
-
-  const reset = useCallback(() => {
-    if (fileState.preview) {
-      URL.revokeObjectURL(fileState.preview);
-    }
-    setFileState({ file: null, preview: "" });
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  }, [fileState.preview]);
-
-  return { fileState, handleFileChange, reset, fileInputRef, dimensions };
-};
-
-const useUploadFile = () => {
-  const uploadFile = async (file: File, type: "image" | "video" | "mind") => {
-    const customNanoid = customAlphabet("1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ", 21);
-    const id = customNanoid();
-    const formData = new FormData();
-    formData.append("file", file);
-
-    const endpoint =
-      type === "video"
-        ? `https://r2-worker.sergiolazaromondargo.workers.dev/video/${id}`
-        : type === "mind"
-          ? `https://r2-worker.sergiolazaromondargo.workers.dev/mind/${id}`
-          : `https://r2-worker.sergiolazaromondargo.workers.dev/${id}`;
-
-    const response = await fetch(endpoint, {
-      method: "PUT",
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error(`Error al subir ${type}: ${response.status} ${response.statusText}`);
-    }
-
-    return await response.json();
-  };
-
-  return { uploadFile };
-};
-
-export const AREditor: React.FC<AREditorProps> = ({ adminId }) => {
-  const {
-    fileState: imageState,
-    handleFileChange: handleImageChange,
-    reset: resetImage,
-    fileInputRef: imageInputRef,
-  } = useFileUpload(ALLOWED_MIME_TYPES);
-
-  const {
-    fileState: mindState,
-    handleFileChange: handleMindChange,
-    reset: resetMind,
-    fileInputRef: mindInputRef,
-  } = useFileUpload([".mind"]);
-
-  const {
-    fileState: videoState,
-    handleFileChange: handleVideoChange,
-    reset: resetVideo,
-    fileInputRef: videoInputRef,
-    dimensions: videoDimensions,
-  } = useFileUpload(ALLOWED_VIDEO_TYPES);
-
-  const [videoScale, setVideoScale] = useState<number>(1);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string>("");
-
-  const { uploadFile } = useUploadFile();
-
-  const handleSave = async () => {
-    try {
-      setLoading(true);
-      setError("");
-
-      if (!imageState.file || !mindState.file || !videoState.file) {
-        throw new Error("Se requieren una imagen, un archivo .mind y un video");
-      }
-
-      const [imageResult, mindResult, videoResult] = await Promise.all([
-        uploadFile(imageState.file, "image"),
-        uploadFile(mindState.file, "mind"),
-        uploadFile(videoState.file, "video"),
-      ]);
-
-      const data = {
-        adminId,
-        data: [
-          {
-            id: `photos-${Date.now()}`,
-            type: "photos",
-            images: [{ image: imageResult.url, fileId: imageResult.fileId }],
-          },
-          {
-            id: `videoNative-${Date.now()}`,
-            type: "videoNative",
-            url: videoResult.url,
-            fileId: videoResult.fileId,
-            scale: videoScale,
-            width: videoDimensions.width,
-            height: videoDimensions.height,
-          },
-          {
-            id: `ar-${Date.now()}`,
-            type: "ar",
-            url: mindResult.url,
-            fileId: mindResult.fileId,
-          },
-        ],
-        type: "ar",
-      };
-
-      const response = await fetch("/api/updateadmin.json", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
-      });
-
-      if (!response.ok) {
-        throw new Error(`Error actualizando datos AR: ${response.status}`);
-      }
-
-      alert("¡Guardado exitosamente!");
-      resetImage();
-      resetMind();
-      resetVideo();
-    } catch (error: any) {
-      setError(error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const FileUploadSection = ({
-    type,
-    icon: Icon,
-    fileState,
-    inputRef,
-    onFileChange,
-    allowedTypes,
-    label,
-  }: {
-    type: string;
-    icon: typeof Image;
-    fileState: FileUploadState;
-    inputRef: React.RefObject<HTMLInputElement>;
-    onFileChange: (file: File | null) => void;
-    allowedTypes: string[];
-    label: string;
-  }) => (
-    <div className="group relative overflow-hidden rounded-xl shadow-lg bg-white/80 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:scale-[1.02] border border-gray-100">
-      <input
-        ref={inputRef}
-        type="file"
-        accept={allowedTypes.join(",")}
-        onChange={(e) => {
-          try {
-            const file = e.target.files?.[0] || null;
-            onFileChange(file);
-          } catch (error: any) {
-            setError(error.message);
-          }
-        }}
-        className="hidden"
-      />
-
-      {!fileState.file ? (
-        <label
-          htmlFor={inputRef.current?.id}
-          onClick={() => inputRef.current?.click()}
-          className="flex cursor-pointer flex-col items-center justify-center p-10 bg-gradient-to-br from-gray-50 to-white transition-colors group-hover:from-blue-50 group-hover:to-purple-50"
-        >
-          <div className="transform transition-transform duration-300 group-hover:scale-110">
-            <Icon className="h-16 w-16 text-gray-400 group-hover:text-blue-500" />
-          </div>
-          <span className="mt-4 text-lg font-medium bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-transparent group-hover:from-blue-600 group-hover:to-purple-600">
-            {label}
-          </span>
-          <span className="mt-2 text-sm text-gray-400 group-hover:text-gray-500">
-            {allowedTypes.join(", ")}
-          </span>
-        </label>
-      ) : (
-        <div className="p-6 space-y-4">
-          <div className="relative aspect-video w-full overflow-hidden rounded-lg ring-1 ring-gray-100">
-            {type === "video" ? (
-              <video src={fileState.preview} controls className="h-full w-full object-cover">
-                Tu navegador no soporta la reproducción de videos.
-              </video>
-            ) : type === "image" ? (
-              <img src={fileState.preview} alt="Preview" className="h-full w-full object-cover" />
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center space-y-3 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
-                <div className="flex items-center justify-center rounded-full bg-gradient-to-r from-blue-400 to-purple-400 p-3">
-                  <Upload className="h-6 w-6 text-white" />
-                </div>
-                <div className="text-center space-y-2">
-                  <span className="block text-lg font-medium text-gray-600">
-                    {fileState.file.name}
-                  </span>
-                  <span className="block text-sm text-gray-500">
-                    Tamaño: {(fileState.file.size / 1024).toFixed(2)} KB
-                  </span>
-                  <span className="mt-1 block text-sm font-medium text-green-600">
-                    ✓ Archivo AR cargado correctamente
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-3">
-              <Icon className="h-5 w-5 text-blue-500" />
-              <span className="text-sm font-medium text-gray-600">{fileState.file.name}</span>
-            </div>
-            <button
-              onClick={() => onFileChange(null)}
-              className="rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-4 py-2 text-sm font-medium text-white shadow-md transition-all hover:from-blue-600 hover:to-purple-600 hover:shadow-lg active:scale-95"
-            >
-              Cambiar
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-
-  return (
-    <div className="min-h-screen w-full bg-gradient-to-br from-blue-50 via-white to-purple-50 p-4 md:p-8">
-      <div className="mx-auto max-w-3xl rounded-3xl bg-white/90 backdrop-blur-md p-6 md:p-10 shadow-2xl ring-1 ring-black/10">
-        <div className="flex flex-col items-center justify-center space-y-8">
-          <div className="rounded-2xl bg-gradient-to-br from-blue-500 to-purple-500 p-6 shadow-xl shadow-blue-300/30 hover:scale-105 transition-transform">
-            <Camera className="h-12 w-12 text-white" />
-          </div>
-          <h1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-5xl font-bold text-transparent text-center">
-            Editor de Experiencia AR
-          </h1>
-          <p className="text-2xl text-gray-600 text-center font-light">
-            Crea una experiencia de realidad aumentada única
-          </p>
-        </div>
-
-        <div className="mt-12 space-y-8">
-          <FileUploadSection
-            type="image"
-            icon={Image}
-            fileState={imageState}
-            inputRef={imageInputRef}
-            onFileChange={handleImageChange}
-            allowedTypes={ALLOWED_MIME_TYPES}
-            label="Haz clic para seleccionar una imagen"
-          />
-
-          <FileUploadSection
-            type="mind"
-            icon={Upload}
-            fileState={mindState}
-            inputRef={mindInputRef}
-            onFileChange={handleMindChange}
-            allowedTypes={[".mind"]}
-            label="Haz clic para seleccionar archivo .mind"
-          />
-
-          <FileUploadSection
-            type="video"
-            icon={Video}
-            fileState={videoState}
-            inputRef={videoInputRef}
-            onFileChange={handleVideoChange}
-            allowedTypes={ALLOWED_VIDEO_TYPES}
-            label="Haz clic para seleccionar un video"
-          />
-
-          <div className="space-y-4 rounded-2xl border border-gray-200/50 bg-white/90 backdrop-blur-md p-8 shadow-lg ring-1 ring-black/10">
-            <label className="flex items-center justify-between text-2xl font-semibold text-gray-800">
-              <span>Escala del Video</span>
-              <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-bold">
-                {videoScale}x
-              </span>
-            </label>
-            <div className="relative py-8">
-              <div className="absolute h-3 w-full rounded-full bg-gradient-to-r from-blue-400 to-purple-400 opacity-20"></div>
-              <div
-                className="absolute h-3 rounded-full bg-gradient-to-r from-blue-400 to-purple-400 shadow-lg"
-                style={{ width: `${(videoScale / 2) * 100}%` }}
-              ></div>
-              <input
-                type="range"
-                min="0.1"
-                max="2"
-                step="0.1"
-                value={videoScale}
-                onChange={(e) => setVideoScale(Number(e.target.value))}
-                className="relative h-3 w-full cursor-pointer appearance-none rounded-lg bg-transparent focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-4"
-                style={{ WebkitAppearance: "none" }}
-              />
-            </div>
-          </div>
-        </div>
-
-        {error && (
-          <div className="mt-6 rounded-xl bg-red-50 p-4 text-red-700 shadow-sm ring-1 ring-red-100">
-            {error}
-          </div>
-        )}
-
-        <button
-          onClick={handleSave}
-          disabled={loading}
-          className="mt-10 w-full rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 py-5 text-xl font-semibold text-white shadow-xl transition-all hover:from-blue-700 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-400 disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-4"
-        >
-          {loading ? (
-            <div className="flex items-center justify-center space-x-3">
-              <LoaderCircle className="h-7 w-7 animate-spin" />
-              <span>Guardando...</span>
-            </div>
-          ) : (
-            "Guardar"
-          )}
-        </button>
-      </div>
-    </div>
-  );
-};

package/src/react/ProgressDialog.tsx

@@ -1,185 +0,0 @@
-import React, { useEffect } from "react";
-import {
-  CheckCircle2,
-  Loader2,
-  Upload,
-  Image as ImageIcon,
-  Video as VideoIcon,
-} from "lucide-react";
-
-interface ProgressStage {
-  label: string;
-  status: "pending" | "processing" | "completed" | "error";
-  progress?: number;
-  icon: React.ReactNode;
-}
-
-interface ProgressDialogProps {
-  open: boolean;
-  imageStatus: "pending" | "processing" | "completed" | "error";
-  videoStatus: "pending" | "processing" | "completed" | "error";
-  arProcessingStatus: "pending" | "processing" | "completed" | "error";
-  arUploadStatus: "pending" | "processing" | "completed" | "error";
-  imageProgress?: number;
-  videoProgress?: number;
-  arProcessingProgress?: number;
-  arUploadProgress?: number;
-}
-
-export function ProgressDialog({
-  open,
-  imageStatus,
-  videoStatus,
-  arProcessingStatus,
-  arUploadStatus,
-  imageProgress = 0,
-  videoProgress = 0,
-  arProcessingProgress = 0,
-  arUploadProgress = 0,
-}: ProgressDialogProps) {
-  // Configurar las etapas del progreso
-  const stages: ProgressStage[] = [
-    {
-      label: "Subiendo imagen",
-      status: imageStatus,
-      progress: imageProgress,
-      icon: <ImageIcon className="h-5 w-5" />,
-    },
-    {
-      label: "Subiendo video",
-      status: videoStatus,
-      progress: videoProgress,
-      icon: <VideoIcon className="h-5 w-5" />,
-    },
-    {
-      label: "Procesando imagen para AR",
-      status: arProcessingStatus,
-      progress: arProcessingProgress,
-      icon: <Loader2 className="h-5 w-5" />,
-    },
-    {
-      label: "Subiendo experiencia AR",
-      status: arUploadStatus,
-      progress: arUploadProgress,
-      icon: <Upload className="h-5 w-5" />,
-    },
-  ];
-
-  // Calcular el progreso total (promedio de todos los procesos)
-  const completedSteps = stages.filter((stage) => stage.status === "completed").length;
-  const totalProgress =
-    (imageProgress + videoProgress + arProcessingProgress + arUploadProgress) / 4;
-  const overallProgress = Math.min(Math.max(totalProgress, completedSteps * 25), 100);
-
-  // Bloquear el scroll cuando el modal está abierto
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [open]);
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black bg-opacity-50 p-4">
-      <div className="relative max-h-full w-full max-w-md overflow-hidden rounded-lg bg-white p-6 shadow-xl">
-        {/* Encabezado */}
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-center font-semibold text-xl">Guardando experiencia AR</h2>
-        </div>
-
-        {/* Barra de progreso general */}
-        <div className="mt-2">
-          <div className="relative pt-1">
-            <div className="mb-6">
-              <div className="h-2 w-full rounded-full bg-gray-200">
-                <div
-                  className="h-2 rounded-full bg-blue-600 transition-all duration-500"
-                  style={{ width: `${overallProgress}%` }}
-                ></div>
-              </div>
-              <div className="mt-2 text-center text-gray-600 text-sm">
-                Progreso total: {Math.round(overallProgress)}%
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Etapas individuales */}
-        <div className="mt-2 space-y-5">
-          {stages.map((stage, index) => (
-            <div key={index} className="relative">
-              <div className="flex items-center">
-                <div
-                  className={`mr-3 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full ${stage.status === "completed"
-                    ? "bg-green-100"
-                    : stage.status === "processing"
-                      ? "bg-blue-100"
-                      : stage.status === "error"
-                        ? "bg-red-100"
-                        : "bg-gray-100"
-                    }`}
-                >
-                  {stage.status === "completed" ? (
-                    <CheckCircle2 className="h-6 w-6 text-green-600" />
-                  ) : stage.status === "processing" ? (
-                    <div className="text-blue-600">{stage.icon}</div>
-                  ) : stage.status === "error" ? (
-                    <div className="text-red-600">{stage.icon}</div>
-                  ) : (
-                    <div className="text-gray-400">{stage.icon}</div>
-                  )}
-                </div>
-
-                <div className="min-w-0 flex-1">
-                  <div className="font-medium text-sm">{stage.label}</div>
-
-                  {stage.status === "processing" && (
-                    <div className="mt-1">
-                      <div className="h-1.5 w-full rounded-full bg-gray-200">
-                        <div
-                          className="h-1.5 rounded-full bg-blue-600 transition-all duration-300"
-                          style={{ width: `${stage.progress || 0}%` }}
-                        ></div>
-                      </div>
-                      <div className="mt-1 text-gray-500 text-xs">
-                        {Math.round(stage.progress || 0)}%
-                      </div>
-                    </div>
-                  )}
-
-                  {stage.status === "completed" && (
-                    <div className="mt-1 text-green-600 text-xs">Completado</div>
-                  )}
-
-                  {stage.status === "error" && (
-                    <div className="mt-1 text-red-600 text-xs">Error</div>
-                  )}
-
-                  {stage.status === "pending" && (
-                    <div className="mt-1 text-gray-500 text-xs">Pendiente</div>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Mensaje de finalización */}
-        {completedSteps === stages.length && (
-          <div className="mt-4 rounded-lg bg-green-50 p-4 text-center">
-            <CheckCircle2 className="mx-auto mb-2 h-8 w-8 text-green-500" />
-            <p className="font-medium text-green-800">¡Experiencia AR guardada con éxito!</p>
-            <p className="text-green-700 text-sm">Tu contenido está listo para ser visualizado.</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}