@jjlmoya/utils-science 1.1.0

package/src/tool/colony-counter/component.astro

@@ -0,0 +1,358 @@
+---
+import "./ColonyCounter.css";
+import { Icon } from "astro-icon/components";
+---
+
+<div class="colony-container">
+    <div class="colony-main-card">
+        <div class="colony-grid">
+            <div class="colony-canvas-section">
+                <div class="colony-canvas-wrapper">
+                    <input type="file" id="image-upload" accept="image/*" class="colony-hidden" />
+
+                    <div id="upload-prompt" class="colony-upload-prompt">
+                        <Icon name="mdi:upload" class="colony-upload-icon" />
+                        <div class="colony-upload-text">
+                            <p class="colony-upload-title">
+                                Haz clic para subir tu placa de Petri
+                            </p>
+                            <p class="colony-upload-subtitle">
+                                Sube una foto de tu placa y empieza a contar colonias
+                            </p>
+                        </div>
+                    </div>
+
+                    <canvas
+                        id="petri-canvas"
+                        class="colony-hidden colony-petri-canvas"
+                    ></canvas>
+
+                    <div id="mode-indicator" class="colony-hidden colony-mode-indicator">
+                        <p class="colony-mode-label">
+                            Modo Actual
+                        </p>
+                        <p id="current-mode" class="colony-mode-value">
+                            Tipo A
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="colony-control-panel">
+                <div class="colony-control-section">
+                    <h3 class="colony-control-title">
+                        Tipo de Colonia
+                    </h3>
+
+                    <div class="colony-button-grid">
+                        <button
+                            id="mode-a"
+                            class="colony-mode-btn colony-mode-btn-active"
+                        >
+                            <span class="colony-color-dot colony-color-a"></span>
+                            Tipo A
+                        </button>
+                        <button
+                            id="mode-b"
+                            class="colony-mode-btn"
+                        >
+                            <span class="colony-color-dot colony-color-b"></span>
+                            Tipo B
+                        </button>
+                    </div>
+                </div>
+
+                <div class="colony-divider"></div>
+
+                <div class="colony-control-section">
+                    <h3 class="colony-control-title">
+                        Conteo
+                    </h3>
+
+                    <div class="colony-count-grid">
+                        <div class="colony-count-box colony-count-box-a">
+                            <p class="colony-count-label colony-count-label-a">
+                                Tipo A
+                            </p>
+                            <p id="count-a" class="colony-count-value">
+                                0
+                            </p>
+                        </div>
+                        <div class="colony-count-box colony-count-box-b">
+                            <p class="colony-count-label colony-count-label-b">
+                                Tipo B
+                            </p>
+                            <p id="count-b" class="colony-count-value">
+                                0
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="colony-count-total">
+                        <p class="colony-count-label-total">
+                            Total UFC
+                        </p>
+                        <p id="count-total" class="colony-count-value-total">
+                            0
+                        </p>
+                    </div>
+                </div>
+
+                <div class="colony-divider"></div>
+
+                <div class="colony-control-section colony-button-section">
+                    <button
+                        id="undo-btn"
+                        class="colony-action-btn colony-undo-btn"
+                    >
+                        <Icon name="mdi:undo" class="colony-btn-icon" />
+                        Deshacer Último
+                    </button>
+
+                    <button
+                        id="clear-btn"
+                        class="colony-action-btn colony-clear-btn"
+                    >
+                        <Icon name="mdi:delete-sweep" class="colony-btn-icon" />
+                        Limpiar Todo
+                    </button>
+                </div>
+
+                <div class="colony-info-text">
+                    <p>
+                        <Icon name="mdi:information" class="colony-info-icon" /> Haz clic en la placa para
+                        marcar colonias
+                    </p>
+                    <p>
+                        <Icon name="mdi:palette" class="colony-info-icon" /> Cambia el tipo antes de marcar
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script is:inline>
+    const canvas = document.getElementById("petri-canvas");
+    const ctx = canvas?.getContext("2d");
+    const imageUpload = document.getElementById("image-upload");
+    const uploadPrompt = document.getElementById("upload-prompt");
+    const modeIndicator = document.getElementById("mode-indicator");
+
+    const modeABtn = document.getElementById("mode-a");
+    const modeBBtn = document.getElementById("mode-b");
+    const undoBtn = document.getElementById("undo-btn");
+    const clearBtn = document.getElementById("clear-btn");
+
+    const countAEl = document.getElementById("count-a");
+    const countBEl = document.getElementById("count-b");
+    const countTotalEl = document.getElementById("count-total");
+    const currentModeEl = document.getElementById("current-mode");
+
+    let currentMode = "A";
+    let colonies = [];
+    let uploadedImage = null;
+
+    const COLONY_RADIUS = 8;
+    const COLORS = {
+        A: "#14b8a6",
+        B: "#a855f7",
+    };
+
+    if (uploadPrompt) {
+        uploadPrompt.addEventListener("click", () => {
+            if (imageUpload) imageUpload.click();
+        });
+    }
+
+    if (imageUpload) {
+        imageUpload.addEventListener("change", (imageEvent) => {
+            const target = imageEvent.target;
+            const file = target?.files?.[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                const img = new Image();
+                img.onload = () => {
+                    uploadedImage = img;
+                    if (uploadPrompt) uploadPrompt.classList.add("colony-hidden");
+                    if (canvas) canvas.classList.remove("colony-hidden");
+                    if (modeIndicator) modeIndicator.classList.remove("colony-hidden");
+                    resizeCanvas();
+                };
+                img.src = event.target?.result || "";
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+
+    function resizeCanvas() {
+        if (!canvas) return;
+        const rect = canvas.getBoundingClientRect();
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+        redraw();
+    }
+
+    function drawImage() {
+        if (!ctx || !canvas || !uploadedImage) return;
+
+        const canvasAspect = canvas.width / canvas.height;
+        const imageAspect = uploadedImage.width / uploadedImage.height;
+
+        let drawWidth, drawHeight, offsetX, offsetY;
+
+        if (canvasAspect > imageAspect) {
+            drawHeight = canvas.height;
+            drawWidth = uploadedImage.width * (canvas.height / uploadedImage.height);
+            offsetX = (canvas.width - drawWidth) / 2;
+            offsetY = 0;
+        } else {
+            drawWidth = canvas.width;
+            drawHeight = uploadedImage.height * (canvas.width / uploadedImage.width);
+            offsetX = 0;
+            offsetY = (canvas.height - drawHeight) / 2;
+        }
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(
+            canvas.width / 2,
+            canvas.height / 2,
+            Math.min(canvas.width, canvas.height) / 2,
+            0,
+            Math.PI * 2
+        );
+        ctx.clip();
+        ctx.drawImage(uploadedImage, offsetX, offsetY, drawWidth, drawHeight);
+        ctx.restore();
+    }
+
+    function drawColonies() {
+        if (!ctx) return;
+
+        colonies.forEach((colony) => {
+            ctx.fillStyle = COLORS[colony.type];
+            ctx.strokeStyle = "white";
+            ctx.lineWidth = 2;
+
+            ctx.beginPath();
+            ctx.arc(colony.x, colony.y, COLONY_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+        });
+    }
+
+    function redraw() {
+        if (!ctx || !canvas) return;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (uploadedImage) {
+            drawImage();
+        }
+
+        drawColonies();
+    }
+
+    function updateCounts() {
+        const countA = colonies.filter((c) => c.type === "A").length;
+        const countB = colonies.filter((c) => c.type === "B").length;
+        const total = colonies.length;
+
+        if (countAEl) countAEl.innerText = countA.toString();
+        if (countBEl) countBEl.innerText = countB.toString();
+        if (countTotalEl) countTotalEl.innerText = total.toString();
+    }
+
+    function playClickSound() {
+        try {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+
+            oscillator.frequency.value = 800;
+            oscillator.type = "sine";
+
+            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.1);
+        } catch {
+            void 0;
+        }
+    }
+
+    function setMode(mode) {
+        currentMode = mode;
+
+        if (currentModeEl) {
+            currentModeEl.innerText = `Tipo ${mode}`;
+            currentModeEl.className =
+                mode === "A"
+                    ? "colony-mode-value colony-mode-a"
+                    : "colony-mode-value colony-mode-b";
+        }
+
+        document.querySelectorAll(".colony-mode-btn").forEach((btn) => {
+            btn.classList.remove("colony-mode-btn-active");
+        });
+
+        const activeBtn = mode === "A" ? modeABtn : modeBBtn;
+        if (activeBtn) {
+            activeBtn.classList.add("colony-mode-btn-active");
+        }
+    }
+
+    if (canvas) {
+        canvas.addEventListener("click", (e) => {
+            if (!canvas) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = Math.min(canvas.width, canvas.height) / 2;
+            const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+
+            if (distance > radius - 20) return;
+
+            colonies.push({ x, y, type: currentMode });
+            playClickSound();
+            redraw();
+            updateCounts();
+        });
+    }
+
+    if (modeABtn) modeABtn.addEventListener("click", () => setMode("A"));
+    if (modeBBtn) modeBBtn.addEventListener("click", () => setMode("B"));
+
+    if (undoBtn) {
+        undoBtn.addEventListener("click", () => {
+            if (colonies.length > 0) {
+                colonies.pop();
+                redraw();
+                updateCounts();
+            }
+        });
+    }
+
+    if (clearBtn) {
+        clearBtn.addEventListener("click", () => {
+            if (confirm("¿Seguro que quieres borrar todas las colonias marcadas?")) {
+                colonies = [];
+                redraw();
+                updateCounts();
+            }
+        });
+    }
+
+    window.addEventListener("resize", resizeCanvas);
+    resizeCanvas();
+</script>

package/src/tool/colony-counter/i18n/en.ts

@@ -0,0 +1,151 @@
+import type { ToolLocaleContent } from '../../../types';
+
+const slug = 'colony-counter';
+const title = 'Colony Counter: Digital CFU Counting Tool for Petri Plates';
+const description = 'Digital tool for counting bacterial colonies on Petri plates. Differentiate types, avoid errors, and calculate CFU with precision.';
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Bibliographic References',
+  ui: {
+    uploadTitle: 'Click to upload your Petri dish',
+    uploadSubtitle: 'Upload a photo of your plate and start counting colonies',
+    currentModeLabel: 'Current Mode',
+    typeA: 'Type A',
+    typeB: 'Type B',
+    colonyType: 'Colony Type',
+    counting: 'Counting',
+    totalCFU: 'Total CFU',
+    undo: 'Undo Last',
+    clearAll: 'Clear All',
+    infoClick: 'Click on the plate to mark colonies',
+    infoChange: 'Change type before marking',
+    confirmClear: 'Are you sure you want to clear all marked colonies?',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'Digital Microbiology: Precise Colony Counting',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Counting bacterial colonies on Petri plates is a fundamental technique in microbiology. Traditionally performed with a hand counter and marker, it is easy to lose count or mark the same colony twice. This digital tool eliminates those errors and allows visual differentiation between colony types.',
+    },
+    {
+      type: 'title',
+      text: 'Why Colony Counting Matters',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'The number of colonies on a plate is directly proportional to the concentration of viable microorganisms in the original sample. This data is critical in:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Food Quality Control:</strong> Detecting bacterial contamination.',
+        '<strong>Pharmaceutical Research:</strong> Evaluating antibiotic efficacy.',
+        '<strong>Clinical Diagnosis:</strong> Quantifying infections in patient samples.',
+        '<strong>Biotechnology:</strong> Optimizing production cultures for recombinant proteins.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Colony Forming Units (CFU)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Each visible colony on a plate is assumed to originate from a single viable cell. That\'s why they are called <strong>CFU</strong> (Colony Forming Units).',
+    },
+    {
+      type: 'paragraph',
+      html: '<strong>Concentration Formula:</strong><br><code>CFU/mL = (Colonies Counted × Dilution Factor) / Volume Plated</code>',
+    },
+    {
+      type: 'title',
+      text: 'Best Practices for Counting',
+      level: 3,
+    },
+    {
+      type: 'title',
+      text: 'Countable Range',
+      level: 4,
+    },
+    {
+      type: 'paragraph',
+      html: 'The ideal range for manual counting is <strong>30 to 300 colonies</strong> per plate. Below 30, statistical error is too high. Above 300, colonies begin to merge and individual distinction becomes impossible.',
+    },
+    {
+      type: 'title',
+      text: 'Colony Types',
+      level: 4,
+    },
+    {
+      type: 'paragraph',
+      html: 'On selective or differential media, it is common to see multiple colony morphologies:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Type A (Teal/Green):</strong> Large, mucoid colonies, typical of Gram-negative lactose-fermenting bacteria.',
+        '<strong>Type B (Pink/Purple):</strong> Small, translucent colonies, non-fermenters.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Our tool allows differentiation of up to two colony types with distinct colors, facilitating differential counting without the need for physical markers.',
+    },
+  ],
+  faq: [
+    {
+      question: 'What is CFU counting?',
+      answer: 'Colony Forming Units (CFU) is a measurement that estimates the number of viable bacteria or fungal cells in a sample. It is assumed that each visible colony originated from a single cell or group of cells.',
+    },
+    {
+      question: 'Why is a digital counter better than manual counting?',
+      answer: 'Digital counting avoids human error in "losing track" while visually marking colonies. Our tool additionally allows differentiation of colony types by colors, facilitating analysis of mixed plates.',
+    },
+    {
+      question: 'How are CFU per milliliter calculated?',
+      answer: 'The number of colonies counted is multiplied by the inverted dilution factor. For example, if you count 30 colonies in a 1:100 dilution, the original sample contains 3000 CFU/ml.',
+    },
+    {
+      question: 'When is a plate considered "uncountable"?',
+      answer: 'In standard microbiology, if there are more than 250-300 colonies, the plate is considered too crowded (Too Numerous To Count, TNTC) and the data is unreliable due to colony competition.',
+    },
+  ],
+  bibliography: [
+    {
+      name: 'FDA - Bacteriological Analytical Manual',
+      url: 'https://www.fda.gov/food/laboratory-methods-food/bacteriological-analytical-manual-bam',
+    },
+    {
+      name: 'ISO 4833 - Colony Count Technique',
+      url: 'https://www.iso.org/standard/53728.html',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Prepare the plate image',
+      text: 'Place your Petri plate against a dark background or use a trans-illuminator so colonies contrast clearly.',
+    },
+    {
+      name: 'Identify colony types',
+      text: 'Use different marker colors to group colonies by morphology, color, or size.',
+    },
+    {
+      name: 'Mark each colony',
+      text: 'Click on each visible colony. The tool automatically numbers each click to prevent repetition or missed colonies.',
+    },
+    {
+      name: 'Calculate final concentration',
+      text: 'Enter the plated volume and dilution factor to get the final result in CFU/ml or CFU/g.',
+    },
+  ],
+  schemas: [],
+};

package/src/tool/colony-counter/i18n/es.ts

@@ -0,0 +1,151 @@
+import type { ToolLocaleContent } from '../../../types';
+
+const slug = 'contador-colonias';
+const title = 'Contador de Colonias: Conteo Digital de UFC en Placas de Petri';
+const description = 'Herramienta digital para contar colonias bacterianas en placas de Petri. Diferencia tipos, evita errores y calcula UFC con precisión.';
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Preguntas Frecuentes',
+  bibliographyTitle: 'Referencias Bibliográficas',
+  ui: {
+    uploadTitle: 'Haz clic para subir tu placa de Petri',
+    uploadSubtitle: 'Sube una foto de tu placa y empieza a contar colonias',
+    currentModeLabel: 'Modo Actual',
+    typeA: 'Tipo A',
+    typeB: 'Tipo B',
+    colonyType: 'Tipo de Colonia',
+    counting: 'Conteo',
+    totalCFU: 'Total UFC',
+    undo: 'Deshacer Último',
+    clearAll: 'Limpiar Todo',
+    infoClick: 'Haz clic en la placa para marcar colonias',
+    infoChange: 'Cambia el tipo antes de marcar',
+    confirmClear: '¿Seguro que quieres borrar todas las colonias marcadas?',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'Microbiología Digital: Conteo Preciso de Colonias',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El conteo de colonias bacterianas en placas de Petri es una técnica fundamental en microbiología. Tradicionalmente se realiza con un contador manual de mano y un marcador, pero es fácil perder la cuenta o marcar dos veces la misma colonia. Esta herramienta digital elimina esos errores y permite diferenciar visualmente entre tipos de colonias.',
+    },
+    {
+      type: 'title',
+      text: 'Por Qué Importa el Conteo',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'El número de colonias en una placa es directamente proporcional a la concentración de microorganismos viables en la muestra original. Este dato es crítico en:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Control de calidad alimentaria:</strong> Detectar contaminación bacteriana.',
+        '<strong>Investigación farmacéutica:</strong> Evaluar eficacia de antibióticos.',
+        '<strong>Diagnóstico clínico:</strong> Cuantificar infecciones en muestras de pacientes.',
+        '<strong>Biotecnología:</strong> Optimizar cultivos de producción de proteínas recombinantes.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Unidades Formadoras de Colonias (UFC)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Cada colonia visible en la placa se asume que proviene de una única célula viable. Por eso se llaman <strong>UFC</strong> (Unidades Formadoras de Colonias) o <strong>CFU</strong> en inglés (Colony Forming Units).',
+    },
+    {
+      type: 'paragraph',
+      html: '<strong>Fórmula de Concentración:</strong><br><code>UFC/mL = (Colonias contadas × Factor de dilución) / Volumen sembrado</code>',
+    },
+    {
+      type: 'title',
+      text: 'Buenas Prácticas de Conteo',
+      level: 3,
+    },
+    {
+      type: 'title',
+      text: 'Rango Contable',
+      level: 4,
+    },
+    {
+      type: 'paragraph',
+      html: 'El rango ideal para conteo manual es de <strong>30 a 300 colonias</strong> por placa. Por debajo de 30, el error estadístico es demasiado alto. Por encima de 300, las colonias empiezan a fusionarse y es imposible distinguirlas individualmente.',
+    },
+    {
+      type: 'title',
+      text: 'Tipos de Colonias',
+      level: 4,
+    },
+    {
+      type: 'paragraph',
+      html: 'En medios selectivos o diferenciales, es común ver múltiples morfologías de colonias:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Tipo A (Teal/Verde):</strong> Colonias grandes, mucoides, típicas de bacterias Gram negativas fermentadoras de lactosa.',
+        '<strong>Tipo B (Rosa/Púrpura):</strong> Colonias pequeñas, translúcidas, no fermentadoras.',
+      ],
+    },
+    {
+      type: 'paragraph',
+      html: 'Nuestra herramienta permite diferenciar hasta dos tipos de colonias con colores distintos, facilitando el conteo diferencial sin necesidad de marcadores físicos.',
+    },
+  ],
+  faq: [
+    {
+      question: '¿Qué es el conteo de UFC?',
+      answer: 'Las Unidades Formadoras de Colonias (UFC) es una unidad de medida que estima el número de bacterias o células fúngicas viables en una muestra. Se asume que cada colonia visible se originó a partir de una única célula o un grupo de ellas.',
+    },
+    {
+      question: '¿Por qué es mejor un contador digital que uno manual?',
+      answer: 'El conteo digital evita el error humano de "perder la cuenta" al marcar visualmente cada colonia. Nuestra herramienta permite además diferenciar tipos de colonias por colores, facilitando el análisis de placas mixtas.',
+    },
+    {
+      question: '¿Cómo se calculan las UFC por mililitro?',
+      answer: 'Se multiplica el número de colonias contadas por el factor de dilución invertido. Por ejemplo, si cuentas 30 colonias en una dilución 1:100, la muestra original tiene 3000 UFC/ml.',
+    },
+    {
+      question: '¿Cuándo se considera una placa "uncountable"?',
+      answer: 'En microbiología estándar, si hay más de 250-300 colonias, la placa se considera demasiado poblada (Too Numerous To Count, TNTC) y los datos no son fiables debido a la competencia entre colonias.',
+    },
+  ],
+  bibliography: [
+    {
+      name: 'FDA - Bacteriological Analytical Manual',
+      url: 'https://www.fda.gov/food/laboratory-methods-food/bacteriological-analytical-manual-bam',
+    },
+    {
+      name: 'ISO 4833 - Colony Count Technique',
+      url: 'https://www.iso.org/standard/53728.html',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Preparar la imagen de la placa',
+      text: 'Coloca tu placa de Petri sobre un fondo oscuro o utiliza un transiluminador para que las colonias contrasten claramente.',
+    },
+    {
+      name: 'Identificar tipos de colonias',
+      text: 'Utiliza diferentes colores de marca para agrupar colonias según su morfología, color o tamaño.',
+    },
+    {
+      name: 'Marcar cada colonia',
+      text: 'Haz clic sobre cada colonia visible. La herramienta numerará cada impacto automáticamente para no repetir ni olvidar ninguna.',
+    },
+    {
+      name: 'Calcular concentración final',
+      text: 'Introduce el volumen sembrado y el factor de dilución para obtener el resultado final en UFC/ml o UFC/g.',
+    },
+  ],
+  schemas: [],
+};