@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/privacyBlur/component.astro

@@ -0,0 +1,230 @@
+---
+import type { PrivacyBlurUI } from './index';
+import './style.css';
+
+interface Props {
+  ui: PrivacyBlurUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="pb-root" id="privacy-blur-root" data-ui={JSON.stringify(ui)}>
+
+  <div class="pb-toolbar">
+    <div class="pb-tool-selector">
+      <button class="pb-tool-btn pb-tool-btn-active" data-tool="pixel" title={ui.toolPixel}>
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <path d="M3 3h8v8H3zm0 10h8v8H3zm10-10h8v8h-8zm0 10h8v8h-8z"/>
+        </svg>
+        <span>{ui.toolPixel}</span>
+      </button>
+      <button class="pb-tool-btn" data-tool="blur" title={ui.toolBlur}>
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
+          <circle cx="12" cy="12" r="5"/>
+          <circle cx="12" cy="12" r="9"/>
+        </svg>
+        <span>{ui.toolBlur}</span>
+      </button>
+      <button class="pb-tool-btn" data-tool="solid" title={ui.toolSolid}>
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <rect x="4" y="4" width="16" height="16" rx="2"/>
+        </svg>
+        <span>{ui.toolSolid}</span>
+      </button>
+    </div>
+
+    <div class="pb-settings-row">
+      <div class="pb-intensity-wrap">
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <path d="M3 6h18v2H3zm3-4v4M12 4v4M21 6h-3M9 11v4M15 11v4M3 12h6m6 0h6M3 18h18v2H3zm3-4v4m6-4v4m6-4v4"/>
+        </svg>
+        <input type="range" id="pb-intensity" min="1" max="50" value="10" class="pb-slider" />
+      </div>
+      <button id="pb-auto-face" class="pb-auto-btn">
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <path d="M9 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm9 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM12 18c-2 0-3.5-1-4-2.5h8c-.5 1.5-2 2.5-4 2.5zM1 1v6h2V3h4V1H1zm18 0v2h4v4h2V1h-6zM1 17v6h6v-2H3v-4H1zm20 4v-4h2v6h-6v-2h4z"/>
+        </svg>
+        <span>{ui.autoDetectFaces}</span>
+      </button>
+    </div>
+
+    <div class="pb-action-group">
+      <button id="pb-undo" class="pb-undo-btn" disabled title={ui.undoButton}>
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62A6.89 6.89 0 0 1 12.5 10c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
+        </svg>
+      </button>
+      <button id="pb-download" class="pb-download-btn" disabled>
+        <svg viewBox="0 0 24 24" class="pb-icon" aria-hidden="true" fill="currentColor">
+          <path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/>
+        </svg>
+        <span>{ui.downloadButton}</span>
+      </button>
+    </div>
+  </div>
+
+  <div id="pb-workspace" class="pb-workspace">
+    <input type="file" id="pb-file-input" accept="image/*" class="pb-hidden" />
+
+    <div id="pb-empty" class="pb-empty">
+      <div class="pb-upload-icon">
+        <svg viewBox="0 0 24 24" class="pb-icon-lg" aria-hidden="true" fill="currentColor">
+          <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+        </svg>
+      </div>
+      <h2 class="pb-empty-title">{ui.dropTitle}</h2>
+      <p class="pb-empty-sub">{ui.dropSubtitle}</p>
+      <div class="pb-badges">
+        <div class="pb-badge">
+          <svg viewBox="0 0 24 24" class="pb-badge-icon" aria-hidden="true" fill="currentColor">
+            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
+          </svg>
+          <span>{ui.privacySecureLabel}</span>
+        </div>
+        <div class="pb-badge">
+          <svg viewBox="0 0 24 24" class="pb-badge-icon" aria-hidden="true" fill="currentColor">
+            <path d="M7 2v11h3v9l7-12h-4l4-8z"/>
+          </svg>
+          <span>{ui.offlineLabel}</span>
+        </div>
+      </div>
+    </div>
+
+    <div id="pb-loader" class="pb-loader pb-hidden">
+      <div class="pb-spinner"></div>
+      <p id="pb-loader-text" class="pb-loader-text"></p>
+    </div>
+
+    <div id="pb-canvas-wrap" class="pb-canvas-wrap pb-hidden">
+      <canvas id="pb-canvas"></canvas>
+    </div>
+  </div>
+
+</div>
+
+<script is:inline src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+
+<script>
+  import { PrivacyBlurEngine } from './logic';
+  import type { ToolType } from './logic';
+  import type { PrivacyBlurUI } from './index';
+
+  function init() {
+    const root = document.getElementById('privacy-blur-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui ?? '{}') as PrivacyBlurUI;
+    const canvas = root.querySelector('#pb-canvas') as HTMLCanvasElement;
+    const engine = new PrivacyBlurEngine(canvas);
+
+    const fileInput = root.querySelector('#pb-file-input') as HTMLInputElement;
+    const emptyState = root.querySelector('#pb-empty') as HTMLElement;
+    const canvasWrap = root.querySelector('#pb-canvas-wrap') as HTMLElement;
+    const undoBtn = root.querySelector('#pb-undo') as HTMLButtonElement;
+    const downloadBtn = root.querySelector('#pb-download') as HTMLButtonElement;
+    const intensityRange = root.querySelector('#pb-intensity') as HTMLInputElement;
+    const autoFaceBtn = root.querySelector('#pb-auto-face') as HTMLButtonElement;
+    const loader = root.querySelector('#pb-loader') as HTMLElement;
+    const loaderText = root.querySelector('#pb-loader-text') as HTMLElement;
+    const toolBtns = root.querySelectorAll('.pb-tool-btn') as NodeListOf<HTMLButtonElement>;
+
+    function updateControls() {
+      undoBtn.disabled = !engine.hasLayers();
+      downloadBtn.disabled = !engine.hasLayers();
+    }
+
+    function handleFile(file: File) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          engine.setImage(img);
+          emptyState.classList.add('pb-hidden');
+          canvasWrap.classList.remove('pb-hidden');
+          updateControls();
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+    });
+
+    emptyState.addEventListener('click', () => fileInput.click());
+
+    root.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      root.classList.add('pb-dragging');
+    });
+    root.addEventListener('dragleave', () => root.classList.remove('pb-dragging'));
+    root.addEventListener('drop', (e) => {
+      e.preventDefault();
+      root.classList.remove('pb-dragging');
+      if (e.dataTransfer?.files[0]) handleFile(e.dataTransfer.files[0]);
+    });
+
+    toolBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        toolBtns.forEach(b => b.classList.remove('pb-tool-btn-active'));
+        btn.classList.add('pb-tool-btn-active');
+        engine.updateLastLayerTool(btn.dataset.tool as ToolType);
+      });
+    });
+
+    intensityRange.addEventListener('input', () => {
+      engine.setIntensity(parseInt(intensityRange.value));
+    });
+
+    undoBtn.addEventListener('click', () => {
+      engine.undo();
+      updateControls();
+    });
+
+    downloadBtn.addEventListener('click', () => {
+      const a = document.createElement('a');
+      a.download = `privacy_protected_${Date.now()}.webp`;
+      a.href = engine.getCanvasData();
+      a.click();
+    });
+
+    autoFaceBtn.addEventListener('click', async () => {
+      loader.classList.remove('pb-hidden');
+      try {
+        const found = await engine.detectFaces((text) => {
+          loaderText.textContent = text;
+        });
+        if (!found) alert(labels.noFacesDetected);
+        updateControls();
+      } finally {
+        loader.classList.add('pb-hidden');
+      }
+    });
+
+    canvas.addEventListener('mousedown', (e) => engine.startDragging(e.clientX, e.clientY));
+    window.addEventListener('mousemove', (e) => engine.updateDragging(e.clientX, e.clientY));
+    window.addEventListener('mouseup', () => {
+      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();
+  }
+
+  init();
+  document.addEventListener('astro:page-load', init);
+</script>

package/src/tool/privacyBlur/i18n/en.ts

@@ -0,0 +1,238 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { PrivacyBlurUI, PrivacyBlurLocaleContent } from '../index';
+
+const slug = 'online-privacy-editor-pixelate-blur-faces-photos';
+const title = 'Online Privacy Editor - Pixelate and hide faces in photos';
+const description = 'Protect your identity by censoring sensitive areas of your photos. Pixelate faces, blur documents, or cover private information 100% locally.';
+
+const ui: PrivacyBlurUI = {
+    toolPixel: "Pixelate",
+    toolBlur: "Blur",
+    toolSolid: "Solid",
+    intensityLabel: "Intensity",
+    undoButton: "Undo",
+    downloadButton: "Save",
+    dropTitle: "Privacy Editor",
+    dropSubtitle: "Drag your image here or click to start",
+    privacySecureLabel: "100% Local",
+    offlineLabel: "Offline",
+    autoDetectFaces: "Auto Detect",
+    loadingModels: "Loading models...",
+    noFacesDetected: "No faces automatically detected.",
+    faqTitle: "Frequently Asked Questions",
+    bibliographyTitle: "References"
+};
+
+const faq: PrivacyBlurLocaleContent['faq'] = [
+    {
+        question: "Are my photos uploaded to any server?",
+        answer: "No. The privacy editor works entirely in your browser. Pixels are modified locally and nothing is sent outside of your device.",
+    },
+    {
+        question: "How does automatic face detection work?",
+        answer: "We use a lightweight neural network (TinyFaceDetector) that runs in your browser to identify facial features without needing an external connection.",
+    },
+];
+
+const howTo: PrivacyBlurLocaleContent['howTo'] = [
+    {
+        name: "Upload your photo",
+        text: "Drag or select the image that contains sensitive information you wish to hide.",
+    },
+    {
+        name: "Choose the tool",
+        text: "Select between pixelate, blur, or solid cover depending on the level of privacy you need.",
+    },
+    {
+        name: "Mark the area",
+        text: "Click and drag over the zone you want to protect (faces, license plates, names, etc.).",
+    },
+    {
+        name: "Save the result",
+        text: "Download the processed image with the security that the original data is inaccessible.",
+    },
+];
+
+const bibliography: PrivacyBlurLocaleContent['bibliography'] = [
+    {
+        name: "Privacy by Design (PbD) - AGPD",
+        url: "https://www.aepd.es/es/guias-y-herramientas/guias/guia-de-privacidad-desde-el-diseno",
+    },
+];
+
+const seo: PrivacyBlurLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Privacy Editor: Pixelate, Blur, and Hide',
+        items: [
+            'Three editing tools: Pixelate, Blur, Solid Cover',
+            'Automatic face detection with AI (TinyFaceDetector)',
+            '100% local processing - your photos never leave the browser',
+            'No watermarks, no limits, completely free'
+        ]
+    },
+    { type: 'title', text: 'Digital Privacy: How to Protect Your Visual Data', level: 2 },
+    { type: 'paragraph', html: 'In the era of social media, sharing photos without control can expose sensitive personal data. Our tool allowed you to hide critical information (faces, license plates, names, addresses) before uploading them to the Internet, ensuring that your privacy remains under your full control.' },
+
+    { type: 'stats', items: [
+        { value: '3', label: 'Hiding Methods', icon: 'mdi:tools' },
+        { value: '100%', label: 'Local Privacy', icon: 'mdi:shield-check' },
+        { value: 'AI', label: 'Face Detection', icon: 'mdi:brain' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Three Hiding Methods Explained', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Pixelate',
+            description: 'Divides the area into squares, impossible to recognize',
+            icon: 'mdi:blur',
+            points: [
+                'Maximum irreversible obfuscation',
+                'More secure against facial recognition',
+                'Visible, clear that something was hidden',
+                'Ideal: faces in public photos'
+            ]
+        },
+        {
+            title: 'Blur',
+            description: 'Gaussian Smoothing - more natural look',
+            icon: 'mdi:blur-off',
+            points: [
+                'More elegant visual appearance',
+                'Maintains some tone coherence',
+                'Mathematically reversible (theoretically)',
+                'Ideal: less sensitive information'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Solid Cover',
+            description: 'Opaque color block - maximum privacy',
+            icon: 'mdi:rectangle',
+            points: [
+                'Visible, obvious hiding',
+                'Maximum legal security/privacy',
+                'Changes visual composition',
+                'Ideal: documents, sensitive data'
+            ]
+        }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Automatic Face Detection with AI', level: 3 },
+    { type: 'paragraph', html: 'Our tool uses TinyFaceDetector, a compact neural network that runs directly in your browser to identify faces automatically:' },
+    { type: 'list', items: [
+        '<strong>100% Local:</strong> The AI model runs on your GPU/CPU, not on remote servers.',
+        '<strong>No Internet:</strong> After the initial download, it works completely offline.',
+        '<strong>Privacy Guaranteed:</strong> No one sees the faces: not Google, not OpenAI, nor us.',
+        '<strong>Automatic One-Click:</strong> Detects faces and lets you choose to hide with one click.'
+    ], icon: 'mdi:check' },
+
+    { type: 'card', title: 'Privacy by Design', html: 'By processing images using your browser\'s local GPU and CPU, we guarantee that original photos never leave your device. Even if you change your mind, nothing was transmitted. This is the maximum standard of digital privacy.' },
+
+    { type: 'title', text: 'Privacy Use Cases', level: 3 },
+    { type: 'table', headers: ['Sensitive Information', 'Recommended Method', 'Urgency'], rows: [
+        ['People\'s faces', 'Pixelate or Blur', 'Critical'],
+        ['Vehicle license plates', 'Pixelate (irreversible)', 'Critical'],
+        ['Identity documents', 'Solid Cover or Pixelate', 'Critical'],
+        ['Written names/addresses', 'Solid Cover or Pixelate', 'High'],
+        ['Phone numbers', 'Pixelate or Cover', 'High'],
+        ['Medical information', 'Solid Cover', 'Critical'],
+        ['Visible WiFi signals', 'Pixelate', 'Medium']
+    ] },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Total privacy: 100% local processing, no servers, no storage',
+            con: 'Requires modern browser with Canvas and WebGL support'
+        },
+        {
+            pro: 'Automatic face detection saves manual time',
+            con: 'AI is not perfect - profile or partial faces may not be detected'
+        },
+        {
+            pro: 'Three methods allow choosing security vs aesthetics',
+            con: 'No advanced options (smart warp, context fill)'
+        },
+        {
+            pro: 'Completely free, no advertising, no limits',
+            con: 'Not equivalent to professional software like Photoshop'
+        }
+    ], proTitle: 'Advantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'warning', title: 'Warning: Blurring is NOT 100% Secure', icon: 'mdi:alert', badge: 'Security', html: 'Gaussian blur is mathematically reversible through sophisticated inverse algorithms. If information is CRITICAL (legal documents, identity), use <strong>Pixelate or Solid Cover</strong>. Blur is aesthetically better but less secure.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Pixelation',
+            definition: 'Reducing resolution by dividing area into uniform color blocks. Irreversible. Maximum security against AI facial recognition.'
+        },
+        {
+            term: 'Gaussian Blur',
+            definition: 'Mathematical smoothing based on normal distribution. Theoretically reversible through deconvolution, but practically very difficult.'
+        },
+        {
+            term: 'Solid Cover',
+            definition: 'Opaque block of uniform color. Maximum security, maximum legal privacy, less visually elegant.'
+        },
+        {
+            term: 'TinyFaceDetector',
+            definition: 'Lightweight convolutional neural network (CNN) for detecting faces. Runs locally in browser without needing an external server.'
+        },
+        {
+            term: 'Privacy by Design (PbD)',
+            definition: 'Approach where privacy is integrated starting from system design, not added later. Our local approach is Privacy by Design.'
+        }
+    ] },
+
+    { type: 'message', title: 'Privacy in Your Control', ariaLabel: 'Information about privacy protection', html: 'We do not store or process your photos on remote servers. There are no tracking cookies. No editing histories. We don\'t know what you hide because we never see your images. Full control, full privacy, full freedom.' },
+
+    { type: 'title', text: 'Share Securely on Social Networks', level: 3 },
+    { type: 'paragraph', html: 'Before posting any photo on the Internet, ask yourself: is there information I would prefer not to be public? Children\'s faces, license plates, addresses, document numbers. A 2-minute privacy session now avoids years of problems.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'en',
+};
+
+export const content: PrivacyBlurLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faqTitle: "Frequently Asked Questions",
+    faq,
+    bibliographyTitle: "References",
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};