@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/privacyBlur/logic.ts

@@ -0,0 +1,249 @@
+export interface Layer {
+    id: number;
+    type: "pixel" | "blur" | "solid";
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    intensity: number;
+}
+
+export type ToolType = "pixel" | "blur" | "solid";
+
+interface FaceDetection {
+    box: { x: number; y: number; width: number; height: number };
+}
+
+declare const faceapi: {
+    loadTinyFaceDetectorModel: (path: string) => Promise<void>;
+    TinyFaceDetectorOptions: (opts: { inputSize: number; scoreThreshold: number }) => object;
+    detectAllFaces: (img: HTMLImageElement, detector: object) => Promise<FaceDetection[]>;
+};
+
+export class PrivacyBlurEngine {
+    private canvas: HTMLCanvasElement;
+    private ctx: CanvasRenderingContext2D;
+    private image: HTMLImageElement | null = null;
+    private layers: Layer[] = [];
+
+    private isDragging = false;
+    private startX = 0;
+    private startY = 0;
+    private currentSelection: { x: number; y: number; w: number; h: number } | null = null;
+    private tool: ToolType = "pixel";
+    private intensity = 10;
+    private isFaceApiLoaded = false;
+
+    constructor(canvas: HTMLCanvasElement) {
+        this.canvas = canvas;
+        this.ctx = this.canvas.getContext("2d", { willReadFrequently: true })!;
+    }
+
+    public setImage(img: HTMLImageElement) {
+        this.image = img;
+        this.layers = [];
+        this.canvas.width = img.naturalWidth;
+        this.canvas.height = img.naturalHeight;
+        this.redraw();
+    }
+
+    public setTool(tool: ToolType) {
+        this.tool = tool;
+    }
+
+    public setIntensity(val: number) {
+        this.intensity = val;
+        if (this.layers.length > 0) {
+            const last = this.layers[this.layers.length - 1];
+            if (last) {
+                last.intensity = this.intensity;
+                this.redraw();
+            }
+        }
+    }
+
+    public updateLastLayerTool(tool: ToolType) {
+        this.tool = tool;
+        if (this.layers.length > 0) {
+            const last = this.layers[this.layers.length - 1];
+            if (last) {
+                last.type = tool;
+                this.redraw();
+            }
+        }
+    }
+
+    public undo(): boolean {
+        if (this.layers.length === 0) return false;
+        this.layers.pop();
+        this.redraw();
+        return this.layers.length > 0;
+    }
+
+    public getCanvasData(): string {
+        return this.canvas.toDataURL("image/webp", 0.9);
+    }
+
+    public hasLayers(): boolean {
+        return this.layers.length > 0;
+    }
+
+    public async detectFaces(onLoading: (text: string) => void): Promise<boolean> {
+        if (!this.image) return false;
+
+        try {
+            if (typeof faceapi === "undefined") {
+                throw new Error("FaceAPI not loaded");
+            }
+
+            if (!this.isFaceApiLoaded) {
+                onLoading("Descargando modelos...");
+                await faceapi.loadTinyFaceDetectorModel(
+                    "https://justadudewhohacks.github.io/face-api.js/models"
+                );
+                this.isFaceApiLoaded = true;
+            }
+
+            onLoading("Analizando...");
+
+            const detections = await faceapi.detectAllFaces(
+                this.image,
+                new faceapi.TinyFaceDetectorOptions({ inputSize: 608, scoreThreshold: 0.4 })
+            );
+
+            if (detections.length === 0) {
+                return false;
+            } else {
+                detections.forEach((d: FaceDetection) => {
+                    const { x, y, width, height } = d.box;
+                    const pad = width * 0.15;
+                    this.layers.push({
+                        id: Date.now() + Math.random(),
+                        type: this.tool,
+                        x: x - pad,
+                        y: y - pad * 1.5,
+                        w: width + pad * 2,
+                        h: height + pad * 2,
+                        intensity: this.intensity,
+                    });
+                });
+                this.redraw();
+                return true;
+            }
+        } catch (e) {
+            console.error(e);
+            throw e;
+        }
+    }
+
+    public startDragging(clientX: number, clientY: number) {
+        if (!this.image) return;
+        this.isDragging = true;
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+
+        this.startX = (clientX - rect.left) * scaleX;
+        this.startY = (clientY - rect.top) * scaleY;
+        this.currentSelection = { x: this.startX, y: this.startY, w: 0, h: 0 };
+    }
+
+    public updateDragging(clientX: number, clientY: number) {
+        if (!this.isDragging || !this.image) return;
+        const rect = this.canvas.getBoundingClientRect();
+        const scaleX = this.canvas.width / rect.width;
+        const scaleY = this.canvas.height / rect.height;
+
+        const currentX = (clientX - rect.left) * scaleX;
+        const currentY = (clientY - rect.top) * scaleY;
+
+        this.currentSelection = {
+            x: Math.min(this.startX, currentX),
+            y: Math.min(this.startY, currentY),
+            w: Math.abs(currentX - this.startX),
+            h: Math.abs(currentY - this.startY)
+        };
+        this.redraw();
+    }
+
+    public endDragging(): boolean {
+        if (!this.isDragging || !this.currentSelection) return false;
+        this.isDragging = false;
+        const { w, h } = this.currentSelection;
+
+        if (w > 5 && h > 5) {
+            this.layers.push({
+                id: Date.now(),
+                type: this.tool,
+                x: this.currentSelection.x,
+                y: this.currentSelection.y,
+                w,
+                h,
+                intensity: this.intensity,
+            });
+            this.currentSelection = null;
+            this.redraw();
+            return true;
+        }
+
+        this.currentSelection = null;
+        this.redraw();
+        return false;
+    }
+
+    public cancelDragging() {
+        this.isDragging = false;
+        this.currentSelection = null;
+        this.redraw();
+    }
+
+    private redraw() {
+        if (!this.image) return;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.filter = "none";
+        this.ctx.drawImage(this.image, 0, 0);
+
+        this.layers.forEach((layer) => this.applyLayer(layer));
+
+        if (this.currentSelection) {
+            this.ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
+            this.ctx.lineWidth = 2;
+            this.ctx.strokeRect(this.currentSelection.x, this.currentSelection.y, this.currentSelection.w, this.currentSelection.h);
+        }
+    }
+
+    private applyLayer(layer: Layer) {
+        if (!this.image) return;
+        if (layer.type === "solid") {
+            this.ctx.fillStyle = "#000000";
+            this.ctx.fillRect(layer.x, layer.y, layer.w, layer.h);
+        } else if (layer.type === "blur") {
+            this.ctx.save();
+            this.ctx.beginPath();
+            this.ctx.rect(layer.x, layer.y, layer.w, layer.h);
+            this.ctx.clip();
+            this.ctx.filter = `blur(${layer.intensity * 2}px)`;
+            this.ctx.drawImage(this.image, 0, 0);
+            this.ctx.restore();
+            this.ctx.filter = "none";
+        } else if (layer.type === "pixel") {
+            const size = Math.max(2, layer.intensity);
+            const w = Math.floor(layer.w);
+            const h = Math.floor(layer.h);
+
+            const scaledW = w / size;
+            const scaledH = h / size;
+
+            this.ctx.imageSmoothingEnabled = false;
+            const tempCanvas = document.createElement("canvas");
+            tempCanvas.width = scaledW;
+            tempCanvas.height = scaledH;
+            const tCtx = tempCanvas.getContext("2d")!;
+            tCtx.imageSmoothingEnabled = false;
+
+            tCtx.drawImage(this.image, layer.x, layer.y, w, h, 0, 0, scaledW, scaledH);
+            this.ctx.drawImage(tempCanvas, 0, 0, scaledW, scaledH, layer.x, layer.y, w, h);
+            this.ctx.imageSmoothingEnabled = true;
+        }
+    }
+}

package/src/tool/privacyBlur/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { privacyBlur } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await privacyBlur.i18n[locale]?.();
+if (!content) return null;
+---
+
+<SEORenderer content={{ locale, sections: content.seo || [] }} />

package/src/tool/privacyBlur/style.css

@@ -0,0 +1,332 @@
+.pb-root {
+  --pb-bg: #fff;
+  --pb-bg-muted: #f8fafc;
+  --pb-border: #e2e8f0;
+  --pb-text: #0f172a;
+  --pb-text-muted: #64748b;
+  --pb-primary: #6366f1;
+  --pb-primary-light: rgba(99,102,241,0.1);
+  --pb-shadow: rgba(0,0,0,0.06);
+  --pb-toolbar-bg: rgba(255,255,255,0.92);
+  --pb-radius: 1.25rem;
+
+  width: 100%;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 90vh;
+  min-height: 600px;
+}
+
+.theme-dark .pb-root {
+  --pb-bg: #09090b;
+  --pb-bg-muted: #18181b;
+  --pb-border: #27272a;
+  --pb-text: #fafafa;
+  --pb-text-muted: #71717a;
+  --pb-primary: #818cf8;
+  --pb-primary-light: rgba(129,140,248,0.12);
+  --pb-shadow: rgba(0,0,0,0.4);
+  --pb-toolbar-bg: rgba(9,9,11,0.92);
+}
+
+.pb-toolbar {
+  position: sticky;
+  top: 0.5rem;
+  z-index: 100;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  background: var(--pb-toolbar-bg);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--pb-border);
+  border-radius: var(--pb-radius);
+  padding: 0.5rem 1rem;
+  box-shadow: 0 8px 32px var(--pb-shadow);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.pb-tool-selector {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--pb-bg-muted);
+  border-radius: 0.75rem;
+  padding: 0.25rem;
+}
+
+.pb-tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.875rem;
+  border-radius: 0.625rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--pb-text-muted);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.pb-tool-btn-active {
+  background: var(--pb-bg);
+  color: var(--pb-text);
+  box-shadow: 0 2px 8px var(--pb-shadow);
+}
+
+.pb-settings-row {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.pb-intensity-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--pb-text-muted);
+}
+
+.pb-slider {
+  width: 90px;
+  accent-color: var(--pb-primary);
+}
+
+.pb-auto-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 0.875rem;
+  background: var(--pb-primary-light);
+  color: var(--pb-primary);
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.pb-auto-btn:hover {
+  opacity: 0.8;
+}
+
+.pb-action-group {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.pb-undo-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
+  background: var(--pb-bg-muted);
+  border: 1px solid var(--pb-border);
+  color: var(--pb-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.pb-undo-btn:hover:not(:disabled) {
+  border-color: var(--pb-primary);
+  color: var(--pb-primary);
+}
+
+.pb-undo-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.pb-download-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 1.25rem;
+  background: var(--pb-primary);
+  color: #fff;
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
+  transition: all 0.2s;
+}
+
+.pb-download-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
+}
+
+.pb-download-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.pb-icon {
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+}
+
+.pb-workspace {
+  flex: 1;
+  position: relative;
+  background: var(--pb-bg-muted);
+  border: 2px dashed var(--pb-border);
+  border-radius: var(--pb-radius);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.pb-dragging .pb-workspace {
+  border-color: var(--pb-primary);
+  background: var(--pb-primary-light);
+}
+
+.pb-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  padding: 2rem;
+  gap: 0.75rem;
+}
+
+.pb-upload-icon {
+  width: 5rem;
+  height: 5rem;
+  background: var(--pb-bg);
+  border: 1px solid var(--pb-border);
+  border-radius: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pb-primary);
+  box-shadow: 0 8px 24px var(--pb-shadow);
+  margin-bottom: 0.5rem;
+}
+
+.pb-icon-lg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.pb-empty-title {
+  font-size: 1.75rem;
+  font-weight: 900;
+  color: var(--pb-text);
+  margin: 0;
+}
+
+.pb-empty-sub {
+  font-size: 1rem;
+  color: var(--pb-text-muted);
+  margin: 0;
+}
+
+.pb-badges {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.pb-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: var(--pb-bg);
+  border: 1px solid var(--pb-border);
+  border-radius: 9999px;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--pb-text-muted);
+}
+
+.pb-badge-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.pb-loader {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 10;
+}
+
+.pb-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid rgba(255,255,255,0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: pb-spin 0.7s linear infinite;
+}
+
+@keyframes pb-spin {
+  to { transform: rotate(360deg); }
+}
+
+.pb-loader-text {
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.pb-canvas-wrap {
+  position: absolute;
+  inset: 0;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pb-canvas-wrap canvas {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: crosshair;
+}
+
+.pb-hidden {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .pb-root {
+    padding: 0.5rem;
+    height: auto;
+    min-height: 500px;
+  }
+  .pb-empty-title {
+    font-size: 1.25rem;
+  }
+}

package/src/tool/privacyBlur/ui.ts

@@ -0,0 +1,124 @@
+import { PrivacyBlurEngine, type ToolType } from './logic';
+import type { PrivacyBlurUI } from './index';
+
+export function initPrivacyBlur() {
+    const root = document.getElementById('privacy-blur-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui || '{}') as PrivacyBlurUI;
+    const canvas = root.querySelector('#editor-canvas') as HTMLCanvasElement;
+    const engine = new PrivacyBlurEngine(canvas);
+
+    const fileInput = root.querySelector('#file-input') as HTMLInputElement;
+    const emptyState = root.querySelector('#empty-state') as HTMLElement;
+    const canvasContainer = root.querySelector('#canvas-container') as HTMLElement;
+    const undoBtn = root.querySelector('#undo-btn') as HTMLButtonElement;
+    const downloadBtn = root.querySelector('#download-btn') as HTMLButtonElement;
+    const intensityRange = root.querySelector('#intensity-range') as HTMLInputElement;
+    const btnAutoFace = root.querySelector('#btnAutoFace') as HTMLButtonElement;
+    const loaderOverlay = root.querySelector('#loader-overlay') as HTMLElement;
+    const loaderText = root.querySelector('#loader-text') as HTMLElement;
+
+    const toolBtns = root.querySelectorAll('.tool-btn-orig');
+
+    const updateControls = () => {
+        undoBtn.disabled = !engine.hasLayers();
+        downloadBtn.disabled = !engine.hasLayers();
+    };
+
+    const handleFile = (file: File) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                engine.setImage(img);
+                emptyState.classList.add('hidden');
+                canvasContainer.classList.remove('hidden');
+                updateControls();
+            };
+            img.src = e.target?.result as string;
+        };
+        reader.readAsDataURL(file);
+    };
+
+    fileInput.onchange = () => {
+        if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+    };
+
+    emptyState.onclick = () => fileInput.click();
+
+    root.ondragover = (e) => {
+        e.preventDefault();
+        root.classList.add('dragging');
+    };
+    root.ondragleave = () => root.classList.remove('dragging');
+    root.ondrop = (e) => {
+        e.preventDefault();
+        root.classList.remove('dragging');
+        if (e.dataTransfer?.files[0]) handleFile(e.dataTransfer.files[0]);
+    };
+
+    toolBtns.forEach(btn => {
+        (btn as HTMLElement).onclick = () => {
+            toolBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            engine.updateLastLayerTool((btn as HTMLElement).dataset.tool as ToolType);
+        };
+    });
+
+    intensityRange.oninput = () => {
+        engine.setIntensity(parseInt(intensityRange.value));
+    };
+
+    undoBtn.onclick = () => {
+        engine.undo();
+        updateControls();
+    };
+
+    downloadBtn.onclick = () => {
+        const link = document.createElement('a');
+        link.download = `privacy_protected_${Date.now()}.webp`;
+        link.href = engine.getCanvasData();
+        link.click();
+    };
+
+    btnAutoFace.onclick = async () => {
+        loaderOverlay.classList.remove('hidden');
+        try {
+            const found = await engine.detectFaces((text) => {
+                loaderText.textContent = text;
+            });
+            if (!found) {
+                alert(labels.noFacesDetected);
+            }
+            updateControls();
+        } catch (err) {
+            console.error(err);
+            alert("Error in detection");
+        } finally {
+            loaderOverlay.classList.add('hidden');
+        }
+    };
+
+    canvas.onmousedown = (e) => engine.startDragging(e.clientX, e.clientY);
+    window.onmousemove = (e) => engine.updateDragging(e.clientX, e.clientY);
+    window.onmouseup = () => {
+        if (engine.endDragging()) updateControls();
+    };
+
+    canvas.addEventListener('touchstart', (e) => {
+        e.preventDefault();
+        engine.startDragging(e.touches[0].clientX, e.touches[0].clientY);
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        engine.updateDragging(e.touches[0].clientX, e.touches[0].clientY);
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', () => {
+        if (engine.endDragging()) updateControls();
+    });
+
+    updateControls();
+}