@naniteninja/profile-comparison-lib 0.0.1

package/fesm2022/naniteninja-profile-comparison-lib.mjs

@@ -0,0 +1,3321 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { switchMap, map, catchError, shareReplay, tap } from 'rxjs/operators';
+import { from, throwError, of, forkJoin, defer, switchMap as switchMap$1, map as map$1, Observable, retryWhen, concatMap, timer, mergeMap, catchError as catchError$1, toArray, firstValueFrom } from 'rxjs';
+import * as i3 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as use from '@tensorflow-models/universal-sentence-encoder';
+import '@tensorflow/tfjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+class EmbeddingService {
+    model$ = null;
+    // Get embedding for a single text (returns Observable)
+    getEmbedding(text) {
+        return this.loadModel().pipe(switchMap((model) => from(model.embed([text]))), switchMap((embeddings) => {
+            const t2d = embeddings;
+            return from(t2d.array()).pipe(map((arr) => {
+                t2d.dispose();
+                return Float32Array.from(arr[0]);
+            }));
+        }), catchError((err) => throwError(() => new Error('Model failed to load or embed: ' + err))));
+    }
+    /**
+     * Group-align two lists based on semantic similarity, allowing one-to-many relationships.
+     *
+     * Design goals:
+     * - Semantic relevance takes priority over original order or spacing.
+     * - Each term in listB is assigned to the single most similar anchor in listA (if above threshold).
+     * - For an anchor in listA with multiple highly related listB terms, they are emitted as consecutive rows:
+     *   [A, B1], ['-', B2], ['-', B3], ... so they render adjacently and remain visually connected.
+     * - Low-similarity/unassigned terms from either side are appended at the end and never break groups.
+     */
+    groupAlignLists(listA, listB, threshold = 0.25, preserveLeftOrder = true, exclusivityMargin = 0.06, leftCohesion = 0.23) {
+        // Short-circuit simple cases
+        if ((!listA || listA.length === 0) && (!listB || listB.length === 0)) {
+            return of([]);
+        }
+        if (!listA || listA.length === 0) {
+            return of(listB.map((b) => ({ left: '-', right: b, score: 0 })));
+        }
+        if (!listB || listB.length === 0) {
+            return of(listA.map((a) => ({ left: a, right: '-', score: 0 })));
+        }
+        return this.loadModel().pipe(switchMap((model) => forkJoin([
+            from(model.embed(listA)),
+            from(model.embed(listB))
+        ]).pipe(switchMap(([tA, tB]) => {
+            return forkJoin([from(tA.array()), from(tB.array())]).pipe(map((tensorArrays) => {
+                const [arrA, arrB] = tensorArrays;
+                // Dispose tensors to avoid memory leaks
+                tA.dispose();
+                tB.dispose();
+                const aCount = listA.length;
+                const bCount = listB.length;
+                // Pre-convert to Float32Array for faster cosine computations
+                const vecA = new Array(aCount);
+                const vecB = new Array(bCount);
+                for (let i = 0; i < aCount; i++)
+                    vecA[i] = Float32Array.from(arrA[i]);
+                for (let j = 0; j < bCount; j++)
+                    vecB[j] = Float32Array.from(arrB[j]);
+                // Build full cross-list similarity matrix S[i][j] = sim(A_i, B_j)
+                const S = new Array(aCount);
+                for (let i = 0; i < aCount; i++) {
+                    const row = new Array(bCount);
+                    for (let j = 0; j < bCount; j++) {
+                        const emb = this.cosineSimilarity(vecA[i], vecB[j]);
+                        const lex = this.computeLexicalBoost(listA[i], listB[j]);
+                        // Apply domain gating to prevent mismatched category-vs-activity alignments
+                        const cap = this.domainCompatibilityCap(listA[i], listB[j]);
+                        row[j] = Math.min(Math.max(emb, lex), cap);
+                    }
+                    S[i] = row;
+                }
+                // Build within-list similarity for A (A↔A) to allow left-side extras to attach to cohesive anchors.
+                // We use the same hybrid semantic/lexical metric.
+                const SAA = new Array(aCount);
+                for (let i = 0; i < aCount; i++) {
+                    const rowAA = new Array(aCount);
+                    for (let k = 0; k < aCount; k++) {
+                        if (i === k) {
+                            rowAA[k] = 1; // self
+                        }
+                        else {
+                            const embAA = this.cosineSimilarity(vecA[i], vecA[k]);
+                            const lexAA = this.computeLexicalBoost(listA[i], listA[k]);
+                            rowAA[k] = Math.max(embAA, lexAA);
+                        }
+                    }
+                    SAA[i] = rowAA;
+                }
+                // Build thresholded neighborhoods
+                const neighborsA = new Map();
+                const neighborsB = new Map();
+                for (let i = 0; i < aCount; i++) {
+                    const row = [];
+                    for (let j = 0; j < bCount; j++) {
+                        const s = S[i][j];
+                        if (s >= threshold) {
+                            row.push({ j, score: s });
+                            const rev = neighborsB.get(j) || [];
+                            rev.push({ i, score: s });
+                            neighborsB.set(j, rev);
+                        }
+                    }
+                    // sort descending for deterministic preference lists
+                    row.sort((a, b) => b.score - a.score);
+                    if (row.length)
+                        neighborsA.set(i, row);
+                }
+                // Identify exclusive vs ambiguous B nodes
+                const exclusiveForA = new Map();
+                const ambiguousB = [];
+                const unassignedB = [];
+                for (let j = 0; j < bCount; j++) {
+                    const list = (neighborsB.get(j) || []).sort((a, b) => b.score - a.score);
+                    if (list.length === 0) {
+                        unassignedB.push(j);
+                    }
+                    else if (list.length === 1) {
+                        const i = list[0].i;
+                        const arr = exclusiveForA.get(i) || [];
+                        arr.push({ j, score: list[0].score });
+                        exclusiveForA.set(i, arr);
+                    }
+                    else {
+                        // If best is significantly better than second-best, treat as exclusive to best
+                        const best = list[0];
+                        const second = list[1];
+                        if (best.score - second.score >= exclusivityMargin) {
+                            const arr = exclusiveForA.get(best.i) || [];
+                            arr.push({ j, score: best.score });
+                            exclusiveForA.set(best.i, arr);
+                        }
+                        else {
+                            ambiguousB.push(j);
+                        }
+                    }
+                }
+                // A-side exclusivity: if an anchor A has a clearly dominant best B, prefer that exclusive pairing.
+                const bOwner = new Map();
+                for (const [i, arr] of exclusiveForA.entries()) {
+                    for (const x of arr) {
+                        const ex = bOwner.get(x.j);
+                        if (!ex || x.score > ex.score)
+                            bOwner.set(x.j, { i, score: x.score });
+                    }
+                }
+                const ambSetForA = new Set(ambiguousB);
+                for (let i = 0; i < aCount; i++) {
+                    const list = (neighborsA.get(i) || [])
+                        .slice()
+                        .sort((a, b) => b.score - a.score);
+                    if (!list.length)
+                        continue;
+                    const top = list[0];
+                    const second = list[1];
+                    const hasClearLead = !second || top.score - second.score >= exclusivityMargin;
+                    if (top.score >= threshold && hasClearLead) {
+                        const current = bOwner.get(top.j);
+                        if (!current || top.score > current.score + 1e-6) {
+                            // Reassign this B exclusively to A=i
+                            // Remove from any previous exclusiveForA groups
+                            for (const [ai, arr] of exclusiveForA.entries()) {
+                                exclusiveForA.set(ai, arr.filter((x) => x.j !== top.j));
+                            }
+                            const arr = exclusiveForA.get(i) || [];
+                            if (!arr.some((x) => x.j === top.j))
+                                arr.push({ j: top.j, score: top.score });
+                            arr.sort((u, v) => v.score - u.score);
+                            exclusiveForA.set(i, arr);
+                            bOwner.set(top.j, { i, score: top.score });
+                            ambSetForA.delete(top.j);
+                        }
+                    }
+                }
+                ambiguousB.splice(0, ambiguousB.length, ...Array.from(ambSetForA.values()));
+                // Mutual-best pairing stage (within small tolerance) to prioritize exclusive high-similarity pairs
+                const mutualTolerance = 0.03;
+                const bestBForA = new Array(aCount);
+                for (let i = 0; i < aCount; i++) {
+                    let bBest = -1;
+                    let bBestScore = -Infinity;
+                    for (let j = 0; j < bCount; j++) {
+                        const s = S[i][j];
+                        if (s > bBestScore) {
+                            bBestScore = s;
+                            bBest = j;
+                        }
+                    }
+                    bestBForA[i] = { j: bBest, score: bBestScore };
+                }
+                const bestAForB = new Array(bCount);
+                for (let j = 0; j < bCount; j++) {
+                    let aBest = -1;
+                    let aBestScore = -Infinity;
+                    for (let i = 0; i < aCount; i++) {
+                        const s = S[i][j];
+                        if (s > aBestScore) {
+                            aBestScore = s;
+                            aBest = i;
+                        }
+                    }
+                    bestAForB[j] = { i: aBest, score: aBestScore };
+                }
+                // Promote mutual-best pairs to exclusive, removing from ambiguous list if present
+                const ambSet = new Set(ambiguousB);
+                for (let i = 0; i < aCount; i++) {
+                    const b = bestBForA[i].j;
+                    if (b >= 0 && S[i][b] >= threshold) {
+                        const a = bestAForB[b].i;
+                        const score = S[i][b];
+                        // within tolerance of best on both sides
+                        const isWithinA = score >= bestBForA[i].score - mutualTolerance;
+                        const isWithinB = score >= bestAForB[b].score - mutualTolerance;
+                        if (a === i && isWithinA && isWithinB) {
+                            // Remove from any previous exclusive lists under other anchors
+                            for (const [ai, arr] of exclusiveForA.entries()) {
+                                exclusiveForA.set(ai, arr.filter((x) => x.j !== b));
+                            }
+                            // Add as exclusive to this anchor
+                            const arr = exclusiveForA.get(i) || [];
+                            // Avoid duplicate insert
+                            if (!arr.some((x) => x.j === b)) {
+                                arr.push({ j: b, score });
+                                arr.sort((u, v) => v.score - u.score);
+                                exclusiveForA.set(i, arr);
+                            }
+                            // Remove from ambiguous set
+                            ambSet.delete(b);
+                        }
+                    }
+                }
+                ambiguousB.splice(0, ambiguousB.length, ...Array.from(ambSet.values()));
+                // Build symmetric anchor heads from mutual-best pairs (above threshold)
+                const anchorHeads = new Map(); // A_i -> head B_j
+                for (let i = 0; i < aCount; i++) {
+                    const b = bestBForA[i].j;
+                    if (b >= 0) {
+                        const score = S[i][b];
+                        const isWithinA = score >= bestBForA[i].score - mutualTolerance;
+                        const isWithinB = score >= bestAForB[b].score - mutualTolerance;
+                        if (bestAForB[b].i === i &&
+                            score >= threshold &&
+                            isWithinA &&
+                            isWithinB) {
+                            anchorHeads.set(i, b);
+                        }
+                    }
+                }
+                // Resolve ambiguous many-to-many by B-centric greedy assignment:
+                // each ambiguous B chooses its single most similar A (enables one-to-many on A side).
+                const matchedAmbigForA = new Map();
+                for (const j of ambiguousB) {
+                    let bestI = -1;
+                    let bestScore = -Infinity;
+                    for (let i = 0; i < aCount; i++) {
+                        const s = S[i][j];
+                        if (s > bestScore) {
+                            bestScore = s;
+                            bestI = i;
+                        }
+                    }
+                    if (bestI >= 0 && bestScore >= threshold) {
+                        const arr = matchedAmbigForA.get(bestI) || [];
+                        arr.push({ j, score: bestScore });
+                        matchedAmbigForA.set(bestI, arr);
+                    }
+                }
+                // Merge exclusive and matched ambiguous into final assignments per A
+                const assignedToA = new Map();
+                for (let i = 0; i < aCount; i++) {
+                    const list = [];
+                    const ex = exclusiveForA.get(i) || [];
+                    for (const x of ex)
+                        list.push(x);
+                    const amb = matchedAmbigForA.get(i) || [];
+                    for (const x of amb)
+                        list.push(x);
+                    if (list.length) {
+                        list.sort((a, b) => b.score - a.score);
+                        assignedToA.set(i, list);
+                    }
+                }
+                // Promote anchors for left items that have strong assigned matches even if
+                // they were not mutual-best. This guarantees group creation around
+                // semantically coherent anchors such as Fish, so items like Clams attach there.
+                for (const [i, lst] of assignedToA.entries()) {
+                    if (!anchorHeads.has(i) && lst.length) {
+                        anchorHeads.set(i, lst[0].j); // head = top assigned right item
+                    }
+                }
+                // Track which B have been assigned (exclusive or ambiguous)
+                const assignedBSet = new Set();
+                for (const arr of assignedToA.values()) {
+                    for (const x of arr)
+                        assignedBSet.add(x.j);
+                }
+                // Also mark mutual-best anchor head B's as assigned so they are not appended as leftovers
+                // even if they weren't already in assignedToA for their group.
+                for (const [ai, headJ] of anchorHeads.entries()) {
+                    assignedBSet.add(headJ);
+                }
+                // Any B not assigned (and not a head) goes to the bottom unassigned list
+                const leftoverB = [];
+                for (let j = 0; j < bCount; j++) {
+                    if (!assignedBSet.has(j))
+                        leftoverB.push(j);
+                }
+                // Determine ranking for each A_i.
+                // Priority 1: anchors with at least one assigned B (highly related) go to the TOP.
+                // Priority 2: among them, sort by descending top assigned similarity.
+                // Anchors with NO assignment are pushed to the BOTTOM and sorted by their best potential similarity.
+                const rankA = [];
+                for (let i = 0; i < aCount; i++) {
+                    const assigned = assignedToA.get(i) || [];
+                    let top = 0;
+                    if (assigned.length > 0) {
+                        top = assigned.reduce((m, x) => x.score > m ? x.score : m, 0);
+                    }
+                    else {
+                        // If nothing assigned, consider the best potential similarity (even if below threshold)
+                        let best = 0;
+                        for (let j = 0; j < bCount; j++)
+                            best = Math.max(best, S[i][j]);
+                        top = best;
+                    }
+                    rankA.push({
+                        i,
+                        score: top,
+                        hasAssignment: assigned.length > 0,
+                    });
+                }
+                rankA.sort((x, y) => Number(y.hasAssignment) - Number(x.hasAssignment) ||
+                    y.score - x.score);
+                // Within each group, sort assigned B by descending similarity to the anchor
+                for (const [i, list] of assignedToA.entries()) {
+                    list.sort((a, b) => b.score - a.score);
+                    assignedToA.set(i, list);
+                }
+                // Determine anchor groups strictly from symmetric mutual-best pairs
+                const anchorSet = new Set(anchorHeads.keys());
+                // Early-out: if no anchors (no cross-list matches above threshold),
+                // fall back to simple left-only rows followed by right-only rows
+                if (anchorSet.size === 0) {
+                    const rowsNoAnchors = [];
+                    for (let i = 0; i < aCount; i++)
+                        rowsNoAnchors.push({
+                            left: listA[i],
+                            right: '-',
+                            score: 0,
+                        });
+                    for (const j of leftoverB)
+                        rowsNoAnchors.push({
+                            left: '-',
+                            right: listB[j],
+                            score: 0,
+                        });
+                    return rowsNoAnchors;
+                }
+                // Map each B to its owning anchor A for quick lookup (based on assignedToA)
+                const ownerOfB = new Array(bCount).fill(-1);
+                for (const [ai, lst] of assignedToA.entries()) {
+                    for (const x of lst)
+                        ownerOfB[x.j] = ai;
+                }
+                const leftUsed = new Set();
+                // Mark anchors as used so they won't be re-assigned as extras
+                for (const ai of anchorSet.values())
+                    leftUsed.add(ai);
+                // Pre-bucket extras: group -> (right j within that group) -> extras[]
+                const extrasByGroup = new Map();
+                for (let k = 0; k < aCount; k++) {
+                    if (leftUsed.has(k))
+                        continue; // skip anchors
+                    let bestGroup = -1;
+                    let bestRightJ = -1;
+                    let bestScore = -Infinity;
+                    // Evaluate affinity against each anchor group
+                    for (const ai of anchorSet.values()) {
+                        const groupList = assignedToA.get(ai) || [];
+                        // Ensure the head B is present in the consideration list
+                        const headJ = anchorHeads.get(ai);
+                        const listWithHead = groupList.some((x) => x.j === headJ)
+                            ? groupList
+                            : [{ j: headJ, score: S[ai][headJ] }, ...groupList];
+                        // Best cross-list similarity to any right item under this anchor
+                        let localBestJ = -1;
+                        let localBestCross = -Infinity;
+                        for (const x of listWithHead) {
+                            const s = S[k][x.j];
+                            if (s > localBestCross) {
+                                localBestCross = s;
+                                localBestJ = x.j;
+                            }
+                        }
+                        // Within-list cohesion to the anchor left word
+                        const withinAA = SAA[k][ai];
+                        const combined = Math.max(localBestCross, withinAA);
+                        if (combined > bestScore) {
+                            bestScore = combined;
+                            bestGroup = ai;
+                            // Prefer the concrete right target when cross-list is stronger;
+                            // otherwise fall back to the group's top right assignment.
+                            bestRightJ =
+                                localBestCross >= withinAA ? localBestJ : headJ;
+                        }
+                    }
+                    // Attach as extra if cohesive enough to some group
+                    if (bestGroup >= 0 &&
+                        bestRightJ >= 0 &&
+                        bestScore >= leftCohesion) {
+                        let byRight = extrasByGroup.get(bestGroup);
+                        if (!byRight) {
+                            byRight = new Map();
+                            extrasByGroup.set(bestGroup, byRight);
+                        }
+                        const arr = byRight.get(bestRightJ) || [];
+                        arr.push({ k, jPref: bestRightJ, score: bestScore });
+                        byRight.set(bestRightJ, arr);
+                        leftUsed.add(k);
+                    }
+                }
+                // Build grouped rows with left extras rendered directly under the specific right item
+                // they most strongly match. This ensures highly related words appear exactly below their
+                // most similar counterpart on the other side.
+                const rows = [];
+                const anchorIndices = Array.from(anchorSet.values());
+                const orderIndices = preserveLeftOrder
+                    ? anchorIndices.sort((x, y) => x - y)
+                    : anchorIndices.sort((i1, i2) => {
+                        const j1 = anchorHeads.get(i1);
+                        const j2 = anchorHeads.get(i2);
+                        const diff = S[i2][j2] - S[i1][j1];
+                        if (Math.abs(diff) > 1e-9)
+                            return diff;
+                        // Side-invariant tie-breaker using symmetric pair key
+                        const key1 = [
+                            listA[i1].toLowerCase(),
+                            listB[j1].toLowerCase(),
+                        ]
+                            .sort()
+                            .join('|');
+                        const key2 = [
+                            listA[i2].toLowerCase(),
+                            listB[j2].toLowerCase(),
+                        ]
+                            .sort()
+                            .join('|');
+                        return key1.localeCompare(key2);
+                    });
+                for (const i of orderIndices) {
+                    const groupOrig = assignedToA.get(i) || [];
+                    const headJ = anchorHeads.get(i);
+                    // Build group with head first, then others by score
+                    const others = groupOrig
+                        .filter((x) => x.j !== headJ)
+                        .sort((a, b) => {
+                        const d = b.score - a.score;
+                        if (Math.abs(d) > 1e-9)
+                            return d;
+                        return listB[a.j]
+                            .toLowerCase()
+                            .localeCompare(listB[b.j].toLowerCase());
+                    });
+                    const group = [{ j: headJ, score: S[i][headJ] }, ...others];
+                    // First row uses the anchor head pair
+                    const first = group[0];
+                    rows.push({
+                        left: listA[i],
+                        right: listB[first.j],
+                        score: first.score,
+                    });
+                    // Render left extras that prefer this first right item
+                    const byRight = extrasByGroup.get(i);
+                    const extrasForFirst = (byRight && byRight.get(first.j)) || [];
+                    if (extrasForFirst.length) {
+                        extrasForFirst.sort((e1, e2) => {
+                            const s1 = Math.max(S[e1.k][first.j], SAA[e1.k][i]);
+                            const s2 = Math.max(S[e2.k][first.j], SAA[e2.k][i]);
+                            const d = s2 - s1;
+                            if (Math.abs(d) > 1e-9)
+                                return d;
+                            return listA[e1.k]
+                                .toLowerCase()
+                                .localeCompare(listA[e2.k].toLowerCase());
+                        });
+                        for (const ex of extrasForFirst) {
+                            rows.push({
+                                left: listA[ex.k],
+                                right: '-',
+                                score: Math.max(S[ex.k][first.j], SAA[ex.k][i]),
+                            });
+                        }
+                    }
+                    // Render remaining right items with their own left extras directly beneath
+                    for (let idx = 1; idx < group.length; idx++) {
+                        const g = group[idx];
+                        rows.push({ left: '-', right: listB[g.j], score: g.score });
+                        const extrasForJ = (byRight && byRight.get(g.j)) || [];
+                        if (extrasForJ.length) {
+                            extrasForJ.sort((e1, e2) => {
+                                const s1 = Math.max(S[e1.k][g.j], SAA[e1.k][i]);
+                                const s2 = Math.max(S[e2.k][g.j], SAA[e2.k][i]);
+                                const d = s2 - s1;
+                                if (Math.abs(d) > 1e-9)
+                                    return d;
+                                return listA[e1.k]
+                                    .toLowerCase()
+                                    .localeCompare(listA[e2.k].toLowerCase());
+                            });
+                            for (const ex of extrasForJ) {
+                                rows.push({
+                                    left: listA[ex.k],
+                                    right: '-',
+                                    score: Math.max(S[ex.k][g.j], SAA[ex.k][i]),
+                                });
+                            }
+                        }
+                    }
+                }
+                // Append leftover left items (not anchors and not attached as extras)
+                for (let i = 0; i < aCount; i++) {
+                    if (!anchorSet.has(i) && !leftUsed.has(i)) {
+                        rows.push({ left: listA[i], right: '-', score: 0 });
+                    }
+                }
+                // Append unassigned B at the end so they do not disrupt highly related groups
+                for (const j of leftoverB) {
+                    rows.push({ left: '-', right: listB[j], score: 0 });
+                }
+                return rows;
+            }));
+        }))), catchError((err) => throwError(() => new Error('Failed to create grouped alignment: ' + err))));
+    }
+    // Cosine similarity between two vectors
+    cosineSimilarity(a, b) {
+        let dot = 0, na = 0, nb = 0;
+        for (let i = 0; i < a.length; i++) {
+            dot += a[i] * b[i];
+            na += a[i] * a[i];
+            nb += b[i] * b[i];
+        }
+        return dot / (Math.sqrt(na) * Math.sqrt(nb) + 1e-12);
+    }
+    /**
+     * Align words in listA with their most semantically similar words in listB
+     *
+     * Algorithm:
+     * 1. Generate embeddings for all words in both lists using Universal Sentence Encoder
+     * 2. For each word in listA, compare its embedding with all words in listB
+     * 3. Find the word in listB with highest cosine similarity score
+     * 4. Return alignment results with similarity scores
+     *
+     * @param listA - Source list of words to align
+     * @param listB - Target list of words to find matches in
+     * @returns Observable of alignment results with word, alignedWith, score, and index
+     */
+    alignLists(listA, listB) {
+        return this.loadModel().pipe(
+        // Step 1: Generate embeddings for both word lists simultaneously
+        switchMap((model) => forkJoin([
+            from(model.embed(listA)),
+            from(model.embed(listB))
+        ]).pipe(
+        // Step 2: Convert tensor embeddings to JavaScript arrays
+        switchMap(([tA, tB]) => {
+            return forkJoin([from(tA.array()), from(tB.array())]).pipe(map((tensorArrays) => {
+                const [arrA, arrB] = tensorArrays;
+                // Clean up TensorFlow tensors to prevent memory leaks
+                tA.dispose();
+                tB.dispose();
+                // For each word in listA, find its best match in listB
+                const results = listA.map((wordA, i) => {
+                    // Get the embedding vector for current word from listA
+                    const vecA = Float32Array.from(arrA[i]);
+                    // Initialize variables to track the best match
+                    let bestScore = -Infinity;
+                    let bestMatch = null;
+                    let bestIndex = -1;
+                    // Compare current word from listA with all words in listB
+                    for (let j = 0; j < listB.length; j++) {
+                        // Get the embedding vector for current word from listB
+                        const vecB = Float32Array.from(arrB[j]);
+                        // Calculate semantic similarity using cosine similarity
+                        const score = this.cosineSimilarity(vecA, vecB);
+                        // Update best match if this similarity is higher
+                        if (score > bestScore) {
+                            bestScore = score;
+                            bestMatch = listB[j];
+                            bestIndex = j;
+                        }
+                    }
+                    // Return alignment result for this word
+                    return {
+                        word: wordA, // Original word from listA
+                        alignedWith: bestMatch, // Best matching word from listB
+                        score: bestScore, // Similarity score (0-1, higher is better)
+                        index: bestIndex, // Index of best match in listB
+                    };
+                });
+                // Return all alignment results
+                return results;
+            }));
+        }))), catchError((err) => throwError(() => new Error('Model not loaded or embedding failed: ' + err))));
+    }
+    /**
+     * Find best matching pairs between two lists above a similarity threshold
+     *
+     * @param listA - Source list of words
+     * @param listB - Target list of words to match against
+     * @param threshold - Minimum similarity score (0-1, default: 0.15)
+     * @returns Observable of word pairs with similarity scores
+     */
+    findBestMatchingPairs(listA, listB, threshold = 0.15) {
+        return this.alignLists(listA, listB).pipe(map((alignments) => {
+            const usedB = new Set();
+            const pairs = [];
+            // Sort by similarity score (highest first)
+            alignments.sort((a, b) => b.score - a.score);
+            // Debug logging for travel/journey matching
+            console.log('Embedding Service - All alignments:', alignments.map((alignment) => ({
+                word: alignment.word,
+                alignedWith: alignment.alignedWith,
+                score: alignment.score.toFixed(3),
+            })));
+            for (const alignment of alignments) {
+                if (alignment.score >= threshold && !usedB.has(alignment.index)) {
+                    pairs.push({
+                        wordA: alignment.word,
+                        wordB: alignment.alignedWith,
+                        score: alignment.score,
+                    });
+                    usedB.add(alignment.index);
+                    // Special logging for travel-related matches
+                    if (alignment.word.toLowerCase().includes('travel') ||
+                        alignment.word.toLowerCase().includes('journey') ||
+                        alignment.alignedWith.toLowerCase().includes('travel') ||
+                        alignment.alignedWith.toLowerCase().includes('journey')) {
+                        console.log('🎯 Travel/Journey Match Found:', {
+                            wordA: alignment.word,
+                            wordB: alignment.alignedWith,
+                            score: alignment.score.toFixed(3),
+                            threshold: threshold,
+                        });
+                    }
+                }
+            }
+            return pairs;
+        }), catchError((err) => throwError(() => new Error('Failed to find best matching pairs: ' + err))));
+    }
+    // Calculate similarity between two texts (returns Observable)
+    calculateSimilarity(primaryText, comparisonText) {
+        return this.getEmbedding(primaryText).pipe(switchMap((emb1) => this.getEmbedding(comparisonText).pipe(map((emb2) => {
+            const similarity = this.cosineSimilarity(emb1, emb2);
+            // Debug logging for travel/journey similarity
+            if (primaryText.toLowerCase().includes('travel') ||
+                primaryText.toLowerCase().includes('journey') ||
+                comparisonText.toLowerCase().includes('travel') ||
+                comparisonText.toLowerCase().includes('journey')) {
+                console.log('🔍 Travel/Journey Similarity:', {
+                    primaryText,
+                    comparisonText,
+                    similarity: similarity.toFixed(3),
+                });
+            }
+            return similarity;
+        }))), catchError((err) => throwError(() => new Error('Failed to calculate similarity: ' + err))));
+    }
+    // Test method to check specific word similarities (Observable only)
+    testWordSimilarity(word1, word2) {
+        return this.calculateSimilarity(word1, word2).pipe(map((similarity) => {
+            console.log(`📊 Similarity between "${word1}" and "${word2}": ${(similarity * 100).toFixed(1)}%`);
+        }), catchError((error) => {
+            console.error('Error testing word similarity:', error);
+            return of();
+        }));
+    }
+    // Private methods
+    // Domain compatibility cap to avoid mismatched category-versus-activity pairings.
+    // Example: "Fish" (food/animal noun) vs "Bird watching" (activity) should not align.
+    // Returns a cap in [0,1] representing the maximum allowed similarity for the pair.
+    // Values below the groupAlignLists() threshold (default 0.25) effectively block alignment.
+    domainCompatibilityCap(a, b) {
+        const norm = (s) => s
+            .toLowerCase()
+            .replace(/[_-]+/g, ' ')
+            .replace(/[^a-z\s]/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+        const A = norm(a);
+        const B = norm(b);
+        const watching = /\b[a-z]+\s*watching\b|\bbirdwatching\b/;
+        const genericActivities = /\b(hiking|reading|painting|photography|gardening|blogging|writing|gaming|chess|puzzles|travel(?:ing|ling)?|programming|coding|language learning|pottery|clay\s*model(?:ing|ling))\b/;
+        const isActivity = (s) => watching.test(s) || genericActivities.test(s);
+        const foodAnimal = /\b(fish|sea\s*food|seafood|shell\s*fish|shellfish|clam|clams|mussel|mussels|oyster|oysters|scallop|scallops|shrimp|prawn|prawns|lobster|crab|meat|beef|pork|chicken|egg|eggs)\b/;
+        const isFoodAnimal = (s) => foodAnimal.test(s);
+        const aAct = isActivity(A);
+        const bAct = isActivity(B);
+        const aFood = isFoodAnimal(A);
+        const bFood = isFoodAnimal(B);
+        if ((aAct && bFood) || (bAct && aFood)) {
+            // Cap below default threshold so these pairs never form groups
+            return 0.2;
+        }
+        return 1.0;
+    }
+    // Lightweight lexical similarity booster to catch cases like "AI/ML" ↔ "AI machine learning"
+    // Uses token normalization + targeted synonym/expansion rules and token Jaccard.
+    computeLexicalBoost(a, b) {
+        const expand = (s) => {
+            let x = s.toLowerCase();
+            // Normalize separators
+            x = x.replace(/[_-]+/g, ' ');
+            // Targeted expansions
+            x = x.replace(/ai\s*\/\s*ml|ai\s*[- ]?ml/g, 'ai machine learning');
+            x = x.replace(/\bml\b/g, 'machine learning');
+            x = x.replace(/web\s*dev(elopment)?/g, 'web development');
+            // Domain expansions – culinary/food categories (to help cases like Fish ↔ Clams)
+            x = x.replace(/\bsea\s*food\b/g, 'seafood fish shellfish');
+            x = x.replace(/\bshell\s*fish\b/g, 'shellfish clams mussels oysters scallops seafood');
+            x = x.replace(/\bfish(es)?\b/g, 'fish seafood');
+            x = x.replace(/\bclam(s)?\b/g, 'clams shellfish seafood');
+            x = x.replace(/\bmussel(s)?\b/g, 'mussels shellfish seafood');
+            x = x.replace(/\boyster(s)?\b/g, 'oysters shellfish seafood');
+            x = x.replace(/\bscallop(s)?\b/g, 'scallops shellfish seafood');
+            x = x.replace(/\bshrimp(s)?\b/g, 'shrimp seafood');
+            x = x.replace(/\bprawn(s)?\b/g, 'prawns shrimp seafood');
+            x = x.replace(/\blobster(s)?\b/g, 'lobster seafood');
+            x = x.replace(/\bcrab(s)?\b/g, 'crab seafood');
+            x = x.replace(/ui\s*\/\s*ux|ui\s*[- ]?ux/g, 'ui ux design');
+            return x;
+        };
+        const normalize = (s) => {
+            const x = expand(s)
+                .replace(/[^a-z0-9\s]/g, ' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+            return x;
+        };
+        const A = normalize(a);
+        const B = normalize(b);
+        if (!A || !B)
+            return 0;
+        // Strong containment boost (e.g., "ai machine learning" contains "machine learning")
+        if (A.includes(B) || B.includes(A)) {
+            return Math.max(0.75, Math.min(0.95, Math.max(A.length, B.length) > 12 ? 0.85 : 0.78));
+        }
+        const toTokens = (s) => s.split(' ').filter(Boolean);
+        const setFrom = (arr) => new Set(arr);
+        const tA = toTokens(A);
+        const tB = toTokens(B);
+        if (!tA.length || !tB.length)
+            return 0;
+        const sA = setFrom(tA);
+        const sB = setFrom(tB);
+        let inter = 0;
+        for (const t of sA)
+            if (sB.has(t))
+                inter++;
+        const union = sA.size + sB.size - inter;
+        const jaccard = union > 0 ? inter / union : 0;
+        // Small extra for sharing big tokens like "learning"/"development" with qualifiers
+        const longTokenBonus = Math.min(0.1, [...sA].filter((t) => t.length >= 6 && sB.has(t)).length * 0.03);
+        const score = Math.min(0.95, jaccard + longTokenBonus);
+        return score;
+    }
+    // Lazy load the model only once, as observable
+    loadModel() {
+        if (!this.model$) {
+            this.model$ = defer(() => from(use.load())).pipe(shareReplay(1));
+        }
+        return this.model$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FileConversionService {
+    static MIME_TYPE_JPEG = 'image/jpeg';
+    static MIME_TYPE_PNG = 'image/png';
+    static MIME_TYPE_WEBP = 'image/webp';
+    static FILE_EXTENSION_JPG = '.jpg';
+    static FILE_EXTENSION_JPEG = '.jpeg';
+    static FILE_EXTENSION_PNG = '.png';
+    static FILE_EXTENSION_WEBP = '.webp';
+    urlToFile(url, fileName, mimeType) {
+        return from(fetch(url)).pipe(switchMap$1(response => from(response.blob())), map$1(blob => new File([blob], fileName, { type: mimeType })));
+    }
+    isDataUrl(str) {
+        return typeof str === 'string' && str.startsWith('data:');
+    }
+    dataUrlToFile(dataUrl, fileName) {
+        const [header, data] = dataUrl.split(',');
+        const mimeMatch = header.match(/data:(.*?);/);
+        const mime = mimeMatch ? mimeMatch[1] : FileConversionService.MIME_TYPE_PNG;
+        const binary = atob(data || '');
+        const len = binary.length;
+        const u8 = new Uint8Array(len);
+        for (let i = 0; i < len; i++)
+            u8[i] = binary.charCodeAt(i);
+        return new File([u8], fileName, { type: mime });
+    }
+    getMimeFromFilename(fileName) {
+        const lower = (fileName || '').toLowerCase();
+        if (lower.endsWith(FileConversionService.FILE_EXTENSION_JPG) || lower.endsWith(FileConversionService.FILE_EXTENSION_JPEG))
+            return FileConversionService.MIME_TYPE_JPEG;
+        if (lower.endsWith(FileConversionService.FILE_EXTENSION_PNG))
+            return FileConversionService.MIME_TYPE_PNG;
+        if (lower.endsWith(FileConversionService.FILE_EXTENSION_WEBP))
+            return FileConversionService.MIME_TYPE_WEBP;
+        return FileConversionService.MIME_TYPE_PNG;
+    }
+    getFileForImageString(imageStr, fileBaseName) {
+        if (this.isDataUrl(imageStr))
+            return of(this.dataUrlToFile(imageStr, fileBaseName));
+        const mime = this.getMimeFromFilename(imageStr);
+        return this.urlToFile(imageStr, fileBaseName, mime);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileConversionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileConversionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ImageCompressionService {
+    compressImageFile(file, config, overrides = {}) {
+        const cfg = { ...config, ...overrides };
+        return this.loadImageFromFile(file).pipe(switchMap$1((img) => {
+            let width = img.naturalWidth || img.width;
+            let height = img.naturalHeight || img.height;
+            const scale = Math.min(cfg.maxWidth / width, cfg.maxHeight / height, 1);
+            width = Math.max(1, Math.round(width * scale));
+            height = Math.max(1, Math.round(height * scale));
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const render = (w, h) => {
+                canvas.width = w;
+                canvas.height = h;
+                ctx.clearRect(0, 0, w, h);
+                ctx.drawImage(img, 0, 0, w, h);
+            };
+            const process = (w, h, q, attempts) => {
+                render(w, h);
+                return this.canvasToBlob(canvas, cfg.format, q).pipe(switchMap$1((blob) => {
+                    if (blob.size > cfg.maxBytes && attempts < 25) {
+                        if (q > cfg.qualityMin + 0.005) {
+                            return process(w, h, Math.max(cfg.qualityMin, q - cfg.qualityStep), attempts + 1);
+                        }
+                        else {
+                            const nextW = Math.max(Math.round(w * cfg.downscaleStep), cfg.minWidth);
+                            const nextH = Math.max(Math.round(h * cfg.downscaleStep), cfg.minHeight);
+                            if (nextW === w && nextH === h)
+                                return of(blob);
+                            return process(nextW, nextH, cfg.qualityStart, attempts + 1);
+                        }
+                    }
+                    return of(blob);
+                }));
+            };
+            return process(width, height, cfg.qualityStart, 0).pipe(switchMap$1((finalBlob) => {
+                const newName = this.renameFileForFormat(file.name, cfg.format);
+                const compressedFile = new File([finalBlob], newName, { type: cfg.format, lastModified: Date.now() });
+                return this.blobToDataURL(finalBlob).pipe(map$1((dataUrl) => ({ file: compressedFile, dataUrl })));
+            }));
+        }));
+    }
+    loadImageFromFile(file) {
+        return new Observable(observer => {
+            const url = URL.createObjectURL(file);
+            const img = new Image();
+            img.onload = () => {
+                URL.revokeObjectURL(url);
+                observer.next(img);
+                observer.complete();
+            };
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                observer.error(new Error('Failed to load image'));
+            };
+            img.src = url;
+        });
+    }
+    canvasToBlob(canvas, type, quality) {
+        return new Observable(observer => {
+            if (canvas.toBlob) {
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        observer.next(blob);
+                        observer.complete();
+                    }
+                    else {
+                        observer.error(new Error('toBlob null'));
+                    }
+                }, type, quality);
+            }
+            else {
+                try {
+                    const dataUrl = canvas.toDataURL(type, quality);
+                    const base64 = dataUrl.split(',')[1] || '';
+                    const binary = atob(base64);
+                    const u8 = new Uint8Array(binary.length);
+                    for (let i = 0; i < binary.length; i++)
+                        u8[i] = binary.charCodeAt(i);
+                    observer.next(new Blob([u8], { type }));
+                    observer.complete();
+                }
+                catch (e) {
+                    observer.error(e);
+                }
+            }
+        });
+    }
+    blobToDataURL(blob) {
+        return new Observable(observer => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                observer.next(String(reader.result));
+                observer.complete();
+            };
+            reader.onerror = (err) => observer.error(err);
+            reader.readAsDataURL(blob);
+        });
+    }
+    renameFileForFormat(name, mime) {
+        const base = name.substring(0, name.lastIndexOf('.')) || name;
+        if (mime === 'image/jpeg')
+            return `${base}.jpg`;
+        if (mime === 'image/png')
+            return `${base}.png`;
+        if (mime === 'image/webp')
+            return `${base}.webp`;
+        return `${base}.jpg`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * OpenAI Alignment Service
+ * Uses OpenAI Chat Completions API to align two lists of text in a single request.
+ * This replaces the previous embedding-based approach to avoid rate limits and reduce complexity.
+ */
+class OpenAIEmbeddingService {
+    http;
+    static API_URL = 'https://api.openai.com/v1/chat/completions';
+    static MODEL = 'gpt-4o';
+    static HEADER_CONTENT_TYPE = 'Content-Type';
+    static HEADER_AUTHORIZATION = 'Authorization';
+    static CONTENT_TYPE_JSON = 'application/json';
+    static BEARER_PREFIX = 'Bearer ';
+    static SPACER_SMALL = '-';
+    static SPACER_LARGE = '----';
+    API_URL = OpenAIEmbeddingService.API_URL;
+    // Using gpt-4o for maximum intelligence and adherence to complex instructions
+    MODEL = OpenAIEmbeddingService.MODEL;
+    // Cache for alignment results
+    // Key: Canonical hash of two lists
+    // Value: { originalA: string[], originalB: string[], rows: IAlignmentRow[] }
+    alignmentCache = new Map();
+    // Cache for new spacer-based alignment
+    spacerAlignmentCache = new Map();
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * Get aligned lists with spacers.
+     * Now uses a direct LLM call with a specific prompt to generate the aligned lists.
+     */
+    getAlignedLists(listA, listB, apiKey) {
+        const validA = listA.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL);
+        const validB = listB.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL);
+        if (validA.length === 0 && validB.length === 0)
+            return of({ listA: [], listB: [] });
+        // Cache key
+        const key = JSON.stringify({ a: validA, b: validB, v: 'spacer-v35' });
+        if (this.spacerAlignmentCache.has(key)) {
+            console.log('Alignment cache hit');
+            return of(this.spacerAlignmentCache.get(key));
+        }
+        const headers = new HttpHeaders({
+            [OpenAIEmbeddingService.HEADER_CONTENT_TYPE]: OpenAIEmbeddingService.CONTENT_TYPE_JSON,
+            [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
+        });
+        const prompt = `
+    You are an expert semantic alignment engine.
+    Task: Align the items from List A to List B based on semantic similarity.
+    Context: This is a heuristic, human-semantic alignment (use embeddings later if you want it algorithmically strict).
+    
+    List A: ${JSON.stringify(validA)}
+    List B: ${JSON.stringify(validB)}
+
+    SEMANTIC STRATEGY (3-PASS PROCESS):
+    1. **Pass 1: Exact & Strong Matches**: First, lock in all exact synonyms (e.g., "Dog" vs "Puppy") and strong category matches (e.g., "Tennis" vs "Badminton"). These are your anchors.
+    2. **Pass 2: Thematic Clustering**: Next, group remaining items by sub-theme (e.g., "Water Sports", "Asian Cuisine"). Align items within these themes even if they aren't perfect pairs.
+    3. **Pass 3: Contextual & Loose Matches**: Look for looser associations (e.g., "Reading" vs "Library").
+    4. **Isolation**: If an item truly has NO relation to anything remaining in the other list, ISOLATE it using "----". Do NOT force a bad match.
+
+    Rules:
+    1. Align items into clusters with variable dash-gaps to show semantic distance.
+    2. Use "-" for a small hop (related but distinct).
+    3. Use "----" for a hard theme switch (different category).
+    4. You MUST reorder items to create the best semantic clusters.
+    5. Ensure the output arrays "listA" and "listB" have the SAME length.
+    6. If an item has no match, align it with "-" or "----" as appropriate, or just a gap.
+    7. Output MUST be a JSON object with "listA" and "listB".
+    8. **COMPLETENESS**: You MUST include EVERY item from the input List A and List B in the output. Do not omit any items.
+    9. **Handling Leftovers**: If you have items left over at the end that don't match well, still include them in the list, aligned with "-" if necessary, or grouped together if they are somewhat related.
+    10. **Spacer Alignment**: You MUST align "----" with "----" in both lists. Do NOT align a hard switch "----" with a word. If you need a switch on one side, put it on the other side too.
+    11. **Strict Side Adherence**: Items from Input List A MUST ONLY appear in Output List A. Items from Input List B MUST ONLY appear in Output List B. Do not mix them up.
+    12. **Mandatory Spacers**: You MUST insert a spacer ("-" or "----") between clusters of related items. Avoid putting "----" between every single item; use it only when the topic truly shifts.
+    13. **NO TRAILING SPACER**: The last item in both lists MUST be a word. Do NOT put a spacer at the very end.
+    14. **Length Mismatch Handling**: If one list is shorter than the other, you MUST fill the empty slots in the shorter list with spacers ("-") ONLY. DO NOT invent words or reuse words to fill the space.
+    15. **HIGH SIMILARITY CONSOLIDATION (>= 0.8)**: This is CRITICAL for center display:
+        - When you find a pair with VERY HIGH semantic similarity (>= 0.8), you MUST output the SAME TEXT in both listA and listB at that position.
+        - Format the combined text as: "word1 × word2" OR "word1 / word2" OR just use one of the words.
+        - **Examples of HIGH similarity (>= 0.8) - MUST consolidate**:
+          * "AI/ML" and "AI machine learning" -> Output "AI/ML × AI machine learning" in BOTH lists
+          * "Programming" and "software" -> Output "Programming × software" in BOTH lists
+          * "Web Development" and "Development" -> Output "Web Development × Development" in BOTH lists
+          * "Gaming" and "Mobile Games" -> Output "Gaming × Mobile Games" in BOTH lists
+          * "graphics design" and "Design" -> Output "graphics design × Design" in BOTH lists
+          * "Startups" and "Entrepreneurship" -> Output "Startups × Entrepreneurship" in BOTH lists
+          * "Jogging" and "Running" -> Output "Jogging × Running" in BOTH lists (GOLD STANDARD)
+          * "Hiking" and "Trail hikes" -> Output "Hiking × Trail hikes" in BOTH lists
+          * "Coffee" and "Cafes" -> Output "Coffee × Cafes" in BOTH lists
+          * "Gym / lifting" and "Working out" -> Output "Gym / lifting × Working out" in BOTH lists
+          * "Board games" and "Gaming" -> Output "Board games × Gaming" in BOTH lists
+          * "Live music" and "Live music" -> Already exact match, keep as is
+          * "Innovation" and "Innovation" -> Already exact match, keep as is
+        - **Examples of LOWER similarity (< 0.8) - Do NOT consolidate**:
+          * "Data Science" and "Blockchain" -> Keep separate (different fields)
+          * "graphics card" and "Hardware" -> Keep separate (component vs category)
+          * "figma" and "Design Thinking" -> Keep separate (tool vs methodology)
+          * "Cybersecurity" and "Privacy" -> Keep separate (related but distinct)
+          * "Cooking" and "Photography" -> Keep separate (unrelated)
+          * "Traveling" and "Reading" -> Keep separate (different activities)
+        - **Key principle**: If the items are synonyms, very similar activities, or one is a specific type of the other, consolidate them!
+        - **STRICT CONSTRAINT**: You can ONLY consolidate if BOTH items actually exist in the input lists and are semantically related.
+        - **NEVER** invent an item for List B just to make a pair with List A. If List A has "figma" and List B has NOTHING related, output "figma" in List A and "-" in List B. DO NOT put "figma" in List B.
+        - **STRICT SYMMETRY**: If you use the "×" symbol to consolidate, you MUST output the EXACT SAME string in BOTH "listA" and "listB" at that index.
+        - This allows the system to automatically move these items to the center display!
+        - **NEVER** use "×" on one side and a spacer on the other. That is a critical failure.
+        - **NEVER** include similarity scores or any other numbers in the output strings unless they are part of the original item text.
+        - **ONLY** use "×" as the separator for consolidated items. Do not use "/", "&", or other symbols for this purpose.
+        - Example: "Jogging" (List A) + "Running" (List B) -> "Jogging × Running" in BOTH listA and listB.
+        - **NEVER DROP CONSOLIDATED ITEMS**: If you consolidate "Jogging" and "Running" into "Jogging × Running", you MUST put this string in **BOTH** List A and List B. Do NOT put it in List A and a spacer in List B. That would delete "Running" from the output.
+        - **CRITICAL ERROR PREVENTION**: Do NOT drop items from List B. If "Running" is in Input List B, it MUST appear in Output List B (either as "Running" or "Jogging × Running"). If you output "Jogging × Running" in List A but "-" in List B, you have FAILED.
+        - **COMPLETENESS CHECK**: You MUST verify that EVERY item from the input lists is present in the output. If "Running" is in Input List B, it MUST be in Output List B (or consolidated). DO NOT DROP ITEMS.
+        - **DETERMINISM**: Process the list from top to bottom. Do not change your output between runs.
+        - This allows the system to automatically move these items to the center display!
+
+    NEGATIVE CONSTRAINTS:
+    - NEVER put an item from List A into List B.
+    - NEVER put an item from List B into List A.
+    - NEVER invent new items. Only use items from the input lists.
+    - **NEVER DUPLICATE ITEMS**. Each item from the input list must appear EXACTLY ONCE in the output.
+
+    VERIFICATION STEP:
+    Before outputting, verify every single item:
+    - "Is this item in Input List A?" -> If yes, put it in Output List A.
+    - "Is this item in Input List B?" -> If yes, put it in Output List B.
+    - "Is this item in neither?" -> It is a hallucination. DELETE IT.
+
+    CRITICAL: OUTPUT MUST CONTAIN EXACTLY THE SAME ITEMS AS INPUT. NO DELETIONS ALLOWED.
+
+    FINAL SANITY CHECK:
+    - **HALLUCINATION CHECK**: Go through every word in your Output List A. Is it EXACTLY present in Input List A? If not, DELETE IT. Do the same for List B.
+    - **DUPLICATION CHECK**: Scan List A and List B. Does ANY word appear more than once? If so, DELETE the extra occurrences immediately. Each item must appear EXACTLY ONCE.
+    - **COUNT CHECK**: Count the number of non-spacer items in your Output List A. Does it match the number of items in Input List A? If not, you are missing items. FIND THEM AND ADD THEM.
+    - **COUNT CHECK**: Do the same for List B.
+    - Look at your generated "listA". Are there any items that belong to Input List B? REMOVE THEM immediately.
+    - Look at your generated "listB". Are there any items that belong to Input List A? REMOVE THEM immediately.
+    - **Did you miss any items from Input List A? ADD THEM NOW.**
+    - **Did you miss any items from Input List B? ADD THEM NOW.**
+    - If you are unsure where an item belongs, check the Input Lists provided above. Do NOT guess.
+
+    Example of Desired Output Logic:
+    - "Volunteering at animal shelter" vs "Dog training" -> Related? Yes. Similarity >= 0.8? No (different activities)
+    - NEXT PAIR: "Trail biking" vs "Rock climbing" -> Is this related to Animals? No. -> INSERT "----"
+    - "Trail biking" vs "Rock climbing" -> Related? Yes (Outdoors).
+    - NEXT PAIR: "Jogging" vs "Running" -> Similarity >= 0.8? YES! -> Output "Jogging × Running" in BOTH lists
+    - "Jogging" vs "Running" -> Related? Yes (Exercise).
+    - NEXT PAIR: "Beach volleyball" vs "Salsa dancing" -> Is this related to Exercise? Yes. -> INSERT "-" (Small hop)
+    - "Beach volleyball" vs "Salsa dancing" -> Related? Yes (Hobbies). Similarity >= 0.8? No (different hobbies)
+    - NEXT PAIR: "Fermenting kimchi" vs "Korean cooking" -> Is this related to Hobbies? No. -> INSERT "----"
+
+    JSON Output Structure:
+    {
+      "listA": ["Consolidated Item × Match", "----", "Unique Item A", "-" , "Unique Item A1" , "-" , "Unique Item A2" ,"----" , "Unique Item A3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item A5, "----" , Uniue Item A6   ],
+      "listB": ["Consolidated Item × Match", "----", "Unique Item B", "-" , "Unique Item B1" , "-" , "Unique Item B2" ,"----" , "Unique Item B3", "-" , "Unique Item A4 × Unique Item B4" , "----" , Unique Item B5, "----" , - ]
+    }
+    Note: In this case, List A has more items, so the last remaining item is displayed as a single card.In other cases, List B may have more words, and in that situation, the extra word from List B is shown as a single card.
+    Each unique item in List A has a corresponding unique item in List B that is highly similar in meaning or related in terms of concept.
+    VARIATION & SIMILARITY CONTROL: Maintain strict consistency. If the same semantic relationship appears multiple times, align it identically every time.
+    `;
+        const body = {
+            model: this.MODEL,
+            messages: [
+                { role: 'system', content: 'You are a helpful assistant that outputs strictly JSON.' },
+                { role: 'user', content: prompt }
+            ],
+            response_format: { type: 'json_object' },
+            temperature: 0.0, // Zero temperature for maximum determinism
+            seed: 42 // Fixed seed for reproducibility
+        };
+        return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
+            try {
+                const content = response.choices[0].message.content;
+                const result = JSON.parse(content);
+                // Handle both "listA/listB" format and "alignment" array format
+                if (result.alignment && Array.isArray(result.alignment)) {
+                    result.listA = result.alignment.map((row) => row.left || row.itemA || '');
+                    result.listB = result.alignment.map((row) => row.right || row.itemB || '');
+                }
+                if (!result.listA || !result.listB || !Array.isArray(result.listA) || !Array.isArray(result.listB)) {
+                    console.error('Invalid JSON structure from OpenAI:', result);
+                    throw new Error('Invalid JSON structure from OpenAI');
+                }
+                // Just ensure equal length for safety in UI rendering
+                const maxLen = Math.max(result.listA.length, result.listB.length);
+                while (result.listA.length < maxLen)
+                    result.listA.push(OpenAIEmbeddingService.SPACER_SMALL);
+                while (result.listB.length < maxLen)
+                    result.listB.push(OpenAIEmbeddingService.SPACER_SMALL);
+                // Post-process to ensure consolidated items are in both lists
+                // If one side has "A × B" and the other is a spacer, sync them to ensure center display
+                for (let i = 0; i < result.listA.length; i++) {
+                    const a = result.listA[i];
+                    const b = result.listB[i];
+                    const isConsolidatedA = a && a.includes(' × ');
+                    const isConsolidatedB = b && b.includes(' × ');
+                    const isSpacerA = !a || a === OpenAIEmbeddingService.SPACER_SMALL || a === OpenAIEmbeddingService.SPACER_LARGE;
+                    const isSpacerB = !b || b === OpenAIEmbeddingService.SPACER_SMALL || b === OpenAIEmbeddingService.SPACER_LARGE;
+                    if (isConsolidatedA && isSpacerB) {
+                        result.listB[i] = a;
+                    }
+                    else if (isConsolidatedB && isSpacerA) {
+                        result.listA[i] = b;
+                    }
+                }
+                // SANITIZATION: Strictly enforce that items belong to their respective lists
+                const sanitized = this.sanitizeResponse(result.listA, result.listB, validA, validB);
+                const finalResult = { listA: sanitized.listA, listB: sanitized.listB };
+                this.spacerAlignmentCache.set(key, finalResult);
+                return finalResult;
+            }
+            catch (e) {
+                console.error('Failed to parse OpenAI response', e);
+                throw new Error('Failed to parse alignment result');
+            }
+        }), catchError((error) => {
+            console.error('OpenAI API Error:', error);
+            return of({ listA: [], listB: [] });
+        }));
+    }
+    sanitizeResponse(outA, outB, inA, inB) {
+        const cleanA = [];
+        const cleanB = [];
+        // Track used items to identify missing ones later
+        const usedA = new Set();
+        const usedB = new Set();
+        // Helper to check if a string contains an item (exact or consolidated)
+        const containsItem = (str, item) => {
+            const s = str.toLowerCase();
+            const i = item.toLowerCase();
+            return s === i || s.includes(`× ${i}`) || s.includes(`${i} ×`) || s.includes(`/ ${i}`) || s.includes(`${i} /`);
+        };
+        for (let i = 0; i < outA.length; i++) {
+            let itemA = outA[i];
+            let itemB = outB[i];
+            const isSpacerA = !itemA || itemA === OpenAIEmbeddingService.SPACER_SMALL || itemA === OpenAIEmbeddingService.SPACER_LARGE;
+            const isSpacerB = !itemB || itemB === OpenAIEmbeddingService.SPACER_SMALL || itemB === OpenAIEmbeddingService.SPACER_LARGE;
+            // Validate Item A
+            let validItemA = itemA;
+            if (!isSpacerA) {
+                // Check if it belongs to Input A
+                const originalA = inA.find(a => containsItem(itemA, a));
+                if (originalA) {
+                    usedA.add(originalA);
+                }
+                else {
+                    // It's not in Input A. Is it in Input B?
+                    if (inB.some(b => containsItem(itemA, b))) {
+                        // Hallucination! It belongs to B but is in A.
+                        validItemA = OpenAIEmbeddingService.SPACER_SMALL; // Remove it
+                    }
+                    else {
+                        // Unknown item (maybe consolidated hallucination). Keep if it looks like a consolidated string, else remove
+                        if (!itemA.includes('×') && !itemA.includes('/')) {
+                            validItemA = OpenAIEmbeddingService.SPACER_SMALL;
+                        }
+                    }
+                }
+            }
+            // Validate Item B
+            let validItemB = itemB;
+            if (!isSpacerB) {
+                // Check if it belongs to Input B
+                const originalB = inB.find(b => containsItem(itemB, b));
+                if (originalB) {
+                    usedB.add(originalB);
+                }
+                else {
+                    // It's not in Input B. Is it in Input A?
+                    if (inA.some(a => containsItem(itemB, a))) {
+                        // Hallucination! It belongs to A but is in B.
+                        validItemB = OpenAIEmbeddingService.SPACER_SMALL; // Remove it
+                    }
+                    else {
+                        // Unknown item.
+                        if (!itemB.includes('×') && !itemB.includes('/')) {
+                            validItemB = OpenAIEmbeddingService.SPACER_SMALL;
+                        }
+                    }
+                }
+            }
+            cleanA.push(validItemA);
+            cleanB.push(validItemB);
+        }
+        // Restore Missing Items
+        const missingA = inA.filter(a => !usedA.has(a));
+        const missingB = inB.filter(b => !usedB.has(b));
+        if (missingA.length > 0 || missingB.length > 0) {
+            console.warn('Restoring missing items:', { missingA, missingB });
+            // Add spacer to separate restored items
+            if (cleanA.length > 0) {
+                cleanA.push(OpenAIEmbeddingService.SPACER_LARGE);
+                cleanB.push(OpenAIEmbeddingService.SPACER_LARGE);
+            }
+            // Append missing A items
+            for (const a of missingA) {
+                cleanA.push(a);
+                cleanB.push(OpenAIEmbeddingService.SPACER_SMALL);
+                cleanA.push(OpenAIEmbeddingService.SPACER_SMALL); // Spacer
+                cleanB.push(OpenAIEmbeddingService.SPACER_SMALL);
+            }
+            // Append missing B items
+            for (const b of missingB) {
+                cleanA.push(OpenAIEmbeddingService.SPACER_SMALL);
+                cleanB.push(b);
+                cleanA.push(OpenAIEmbeddingService.SPACER_SMALL); // Spacer
+                cleanB.push(OpenAIEmbeddingService.SPACER_SMALL);
+            }
+        }
+        return { listA: cleanA, listB: cleanB };
+    }
+    /**
+     * Get alignment between two lists using a single OpenAI Chat Completion request.
+     * Uses canonical caching to ensure A->B and B->A use the same API response.
+     */
+    groupAlignLists(listA, listB, threshold = 0.25, preserveLeftOrder = true, exclusivityMargin = 0.06, leftCohesion = 0.23, apiKey) {
+        // Filter valid items
+        const validA = listA.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL);
+        const validB = listB.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL);
+        if (validA.length === 0 && validB.length === 0)
+            return of([]);
+        // Key for (A, B)
+        const keyDirect = JSON.stringify({ a: validA, b: validB });
+        // Key for (B, A) - assuming validB passed as first arg
+        const keyReverse = JSON.stringify({ a: validB, b: validA });
+        // Check direct match
+        if (this.alignmentCache.has(keyDirect)) {
+            console.log('Alignment cache hit (Direct)');
+            return of(this.alignmentCache.get(keyDirect).rows);
+        }
+        // Check reverse match
+        if (this.alignmentCache.has(keyReverse)) {
+            console.log('Alignment cache hit (Reverse) - Swapping results');
+            const cached = this.alignmentCache.get(keyReverse);
+            // Swap left/right to match current request (A, B)
+            const swappedRows = cached.rows.map(row => ({
+                left: row.right,
+                right: row.left,
+                score: row.score
+            }));
+            return of(swappedRows);
+        }
+        // No cache hit - Make API Call
+        const headers = new HttpHeaders({
+            [OpenAIEmbeddingService.HEADER_CONTENT_TYPE]: OpenAIEmbeddingService.CONTENT_TYPE_JSON,
+            [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
+        });
+        // Construct the prompt
+        const prompt = `
+    You are an expert semantic alignment engine.
+    Task: Align the items from List A to List B based on semantic similarity.
+    
+    List A: ${JSON.stringify(validA)}
+    List B: ${JSON.stringify(validB)}
+
+    Rules:
+    1. Match items that are semantically similar.
+    2. Support One-to-One, One-to-Many, and Many-to-Many matches.
+    3. **CRITICAL**: Avoid duplicate alignments. If multiple items in List B are highly similar to a single item in List A, group them ALL under that single List A item.
+    4. **CONSISTENCY**: The alignment must be symmetric. If "Mutton" matches "Chicken" when "Mutton" is on the left, it MUST also match "Chicken" when "Mutton" is on the right.
+    5. **ORDER**: You MUST reorder the items from BOTH lists to create the best semantic clusters. Place related groups next to each other (e.g., put all food items together, all tech items together).
+    6. If an item in List A has no match in List B, map it to "-".
+    7. If an item in List B is not matched to anything in List A, add a row with "-" on the left.
+    8. Output MUST be a JSON object with a single key "alignment" containing an array of objects.
+    9. Each object in the array must have:
+       - "left": string (item from List A or "-")
+       - "right": string (item from List B or "-")
+       - "score": number (similarity score between 0 and 1)
+
+    Example Output Format:
+    {
+      "alignment": [
+        { "left": "Seafood", "right": "Fish", "score": 0.9 },
+        { "left": "Seafood", "right": "Clams", "score": 0.85 },
+        { "left": "Seafood", "right": "Crab", "score": 0.88 },
+        { "left": "Chicken", "right": "Meat", "score": 0.8 },
+        { "left": "Chicken", "right": "Poultry", "score": 0.9 },
+        { "left": "Chicken", "right": "Mutton", "score": 0.85 },
+        { "left": "Coffee", "right": "Cafés", "score": 0.9 },
+        { "left": "Coding", "right": "-", "score": 0 }
+      ]
+    }
+    `;
+        const body = {
+            model: this.MODEL,
+            messages: [
+                { role: 'system', content: 'You are a helpful assistant that outputs strictly JSON.' },
+                { role: 'user', content: prompt }
+            ],
+            response_format: { type: 'json_object' },
+            temperature: 0.2
+        };
+        console.log('Sending single alignment request to OpenAI...');
+        return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
+            try {
+                const content = response.choices[0].message.content;
+                const result = JSON.parse(content);
+                if (!result.alignment || !Array.isArray(result.alignment)) {
+                    throw new Error('Invalid JSON structure from OpenAI');
+                }
+                const rows = result.alignment;
+                // --- Post-Processing for Uniqueness, Grouping, Completeness, Reordering, and Validity ---
+                // 0. Pre-process Input Lists: Deduplicate and Trim
+                const validA = Array.from(new Set(listA.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL).map(i => i.trim())));
+                const validB = Array.from(new Set(listB.filter(i => i && i.trim() && i.trim() !== OpenAIEmbeddingService.SPACER_SMALL).map(i => i.trim())));
+                const validASet = new Set(validA);
+                const validBSet = new Set(validB);
+                // 0.1 Normalize Rows: Trim whitespace from AI response
+                rows.forEach(row => {
+                    if (row.left)
+                        row.left = row.left.trim();
+                    if (row.right)
+                        row.right = row.right.trim();
+                });
+                // 0.2 Deduplicate Rows: Remove exact duplicate objects from AI response
+                const uniqueRows = new Map();
+                rows.forEach(row => {
+                    const key = `${row.left}|${row.right}`;
+                    if (!uniqueRows.has(key)) {
+                        uniqueRows.set(key, row);
+                    }
+                    else {
+                        // If duplicate exists, keep the one with higher score
+                        if (row.score > uniqueRows.get(key).score) {
+                            uniqueRows.set(key, row);
+                        }
+                    }
+                });
+                const dedupedRows = Array.from(uniqueRows.values());
+                // 0.3 Hallucination Guard: Ensure all returned items actually exist in the input lists
+                dedupedRows.forEach(row => {
+                    if (row.left !== '-' && !validASet.has(row.left)) {
+                        console.warn(`Hallucination detected: Left item '${row.left}' not in input list. Removing.`);
+                        row.left = '-';
+                    }
+                    if (row.right !== '-' && !validBSet.has(row.right)) {
+                        console.warn(`Hallucination detected: Right item '${row.right}' not in input list. Removing.`);
+                        row.right = '-';
+                    }
+                });
+                // 0.5 Exact Match Enforcer: If item exists in BOTH lists, force them to align
+                const commonItems = validA.filter(a => validBSet.has(a));
+                commonItems.forEach(item => {
+                    const exactRow = dedupedRows.find(r => r.left === item && r.right === item);
+                    if (exactRow) {
+                        exactRow.score = 1.0;
+                    }
+                    else {
+                        dedupedRows.forEach(r => {
+                            if (r.left === item)
+                                r.left = '-';
+                            if (r.right === item)
+                                r.right = '-';
+                        });
+                        dedupedRows.push({ left: item, right: item, score: 1.0 });
+                    }
+                });
+                // 1. Enforce Right-Side Uniqueness
+                const rightItemBestMatch = new Map();
+                dedupedRows.forEach((row, index) => {
+                    if (row.right && row.right !== '-') {
+                        if (!rightItemBestMatch.has(row.right)) {
+                            rightItemBestMatch.set(row.right, { row, index });
+                        }
+                        else {
+                            const currentBest = rightItemBestMatch.get(row.right);
+                            if (row.score > currentBest.row.score) {
+                                currentBest.row.right = '-';
+                                currentBest.row.score = 0;
+                                rightItemBestMatch.set(row.right, { row, index });
+                            }
+                            else {
+                                row.right = '-';
+                                row.score = 0;
+                            }
+                        }
+                    }
+                });
+                // 2. Group rows by their 'left' value
+                const groups = new Map();
+                const unmatchedRightRows = [];
+                dedupedRows.forEach(row => {
+                    if (row.left === '-') {
+                        unmatchedRightRows.push(row);
+                    }
+                    else {
+                        if (!groups.has(row.left)) {
+                            groups.set(row.left, []);
+                        }
+                        groups.get(row.left).push(row);
+                    }
+                });
+                // 3. Reconstruct the list respecting AI ORDER
+                const processedRows = [];
+                const processedLeftItems = new Set();
+                dedupedRows.forEach(row => {
+                    if (row.left !== '-' && !processedLeftItems.has(row.left)) {
+                        const itemRows = groups.get(row.left);
+                        itemRows.sort((a, b) => b.score - a.score);
+                        itemRows.forEach((r, idx) => {
+                            if (idx > 0)
+                                r.left = '-';
+                            processedRows.push(r);
+                        });
+                        processedLeftItems.add(row.left);
+                    }
+                });
+                // 4. Add missing Left items
+                validA.forEach(item => {
+                    if (!processedLeftItems.has(item)) {
+                        processedRows.push({ left: item, right: '-', score: 0 });
+                    }
+                });
+                // 5. Add unmatched right rows and missing Right items
+                const validUnmatched = unmatchedRightRows.filter(r => r.right !== '-');
+                processedRows.push(...validUnmatched);
+                const usedB = new Set(processedRows.map(r => r.right).filter(x => x !== '-'));
+                validB.forEach(bItem => {
+                    if (!usedB.has(bItem)) {
+                        processedRows.push({ left: '-', right: bItem, score: 0 });
+                    }
+                });
+                const finalRows = processedRows.filter(r => r.left !== '-' || r.right !== '-');
+                const cacheKey = `${keyDirect}_v2`;
+                const uniqueFinalRows = new Map();
+                const finalRowsClean = [];
+                const seenLeftGroups = new Set();
+                finalRows.forEach(row => {
+                    const key = `${row.left}|${row.right}`;
+                    if (uniqueFinalRows.has(key))
+                        return;
+                    uniqueFinalRows.set(key, row);
+                    if (row.left !== '-') {
+                        if (seenLeftGroups.has(row.left)) {
+                            row.left = '-';
+                        }
+                        else {
+                            seenLeftGroups.add(row.left);
+                        }
+                    }
+                    finalRowsClean.push(row);
+                });
+                this.alignmentCache.set(cacheKey, {
+                    originalA: validA,
+                    originalB: validB,
+                    rows: finalRowsClean
+                });
+                return finalRowsClean;
+            }
+            catch (e) {
+                console.error('Failed to parse OpenAI response', e);
+                throw new Error('Failed to parse alignment result');
+            }
+        }), catchError((error) => {
+            console.error('OpenAI API Error:', error);
+            return throwError(() => error);
+        }));
+    }
+    /**
+     * Calculate semantic similarity between two texts using OpenAI Embeddings API.
+     * Returns a cosine similarity score in [0, 1] (0 for empty/invalid inputs).
+     */
+    calculateSimilarity(textA, textB, apiKey) {
+        const a = (textA || '').trim();
+        const b = (textB || '').trim();
+        if (!a.length || !b.length) {
+            return of(0);
+        }
+        const headers = new HttpHeaders({
+            [OpenAIEmbeddingService.HEADER_CONTENT_TYPE]: OpenAIEmbeddingService.CONTENT_TYPE_JSON,
+            [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
+        });
+        const EMBEDDINGS_URL = 'https://api.openai.com/v1/embeddings';
+        const body = {
+            model: 'text-embedding-3-small',
+            input: [a, b]
+        };
+        return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map(res => {
+            const data = res?.data;
+            if (!Array.isArray(data) || data.length < 2) {
+                throw new Error('Invalid embeddings response from OpenAI');
+            }
+            const v1 = data[0]?.embedding;
+            const v2 = data[1]?.embedding;
+            if (!v1 || !v2) {
+                throw new Error('Embeddings not present in OpenAI response');
+            }
+            return this.cosineSimilarityVectors(v1, v2);
+        }), catchError((error) => {
+            const msg = (error?.error && (error.error.error?.message || error.error.message)) || error?.message || 'OpenAI embeddings request failed';
+            return throwError(() => new Error(msg));
+        }));
+    }
+    /**
+     * Fetch embeddings for multiple texts in a single request.
+     */
+    getEmbeddings(texts, apiKey) {
+        if (!texts || texts.length === 0)
+            return of([]);
+        const headers = new HttpHeaders({
+            [OpenAIEmbeddingService.HEADER_CONTENT_TYPE]: OpenAIEmbeddingService.CONTENT_TYPE_JSON,
+            [OpenAIEmbeddingService.HEADER_AUTHORIZATION]: `${OpenAIEmbeddingService.BEARER_PREFIX}${apiKey}`
+        });
+        const EMBEDDINGS_URL = 'https://api.openai.com/v1/embeddings';
+        const body = {
+            model: 'text-embedding-3-small',
+            input: texts
+        };
+        return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map(res => {
+            const data = res?.data;
+            if (!Array.isArray(data)) {
+                throw new Error('Invalid embeddings response from OpenAI');
+            }
+            return data.map((item) => item.embedding);
+        }), catchError((error) => {
+            const msg = (error?.error && (error.error.error?.message || error.error.message)) || error?.message || 'OpenAI embeddings request failed';
+            return throwError(() => new Error(msg));
+        }));
+    }
+    // Private helpers
+    cosineSimilarityVectors(a, b) {
+        let dot = 0;
+        let na = 0;
+        let nb = 0;
+        const n = Math.min(a.length, b.length);
+        for (let i = 0; i < n; i++) {
+            const ai = a[i];
+            const bi = b[i];
+            dot += ai * bi;
+            na += ai * ai;
+            nb += bi * bi;
+        }
+        if (na === 0 || nb === 0)
+            return 0;
+        return dot / (Math.sqrt(na) * Math.sqrt(nb));
+    }
+    clearCache() {
+        this.alignmentCache.clear();
+        this.spacerAlignmentCache.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class ProfileComparisonLibService {
+    constructor() { }
+    /**
+     * Main service for profile comparison functionality
+     */
+    compareProfiles(profile1, profile2) {
+        // Placeholder implementation
+        console.log('Comparing profiles:', profile1, profile2);
+        return {
+            similarity: 0.5,
+            differences: [],
+            timestamp: new Date()
+        };
+    }
+    /**
+     * Get library version
+     */
+    getVersion() {
+        return '0.0.0';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+// Face++ credentials must be provided by the caller (do not import consumer app environments from the library).
+var FacePlusPlusFormFields;
+(function (FacePlusPlusFormFields) {
+    FacePlusPlusFormFields["API_KEY"] = "api_key";
+    FacePlusPlusFormFields["API_SECRET"] = "api_secret";
+    FacePlusPlusFormFields["IMAGE_BASE64"] = "image_base64";
+    FacePlusPlusFormFields["IMAGE_FILE"] = "image_file";
+    FacePlusPlusFormFields["RETURN_LANDMARK"] = "return_landmark";
+})(FacePlusPlusFormFields || (FacePlusPlusFormFields = {}));
+var FacePlusPlusErrorTypes;
+(function (FacePlusPlusErrorTypes) {
+    FacePlusPlusErrorTypes["AUTHENTICATION_ERROR"] = "authentication_error";
+    FacePlusPlusErrorTypes["AUTHORIZATION_ERROR"] = "authorization_error";
+    FacePlusPlusErrorTypes["CONCURRENCY_LIMIT_EXCEEDED"] = "concurrency_limit_exceeded";
+    FacePlusPlusErrorTypes["RATE"] = "rate";
+})(FacePlusPlusErrorTypes || (FacePlusPlusErrorTypes = {}));
+class ProfileService {
+    http;
+    static BASE_URL = 'https://api.api-ninjas.com/v1/';
+    static FACE_PLUS_PLUS_URL = 'https://api-us.faceplusplus.com/facepp/v3/detect';
+    baseUrl = ProfileService.BASE_URL;
+    baseUrlf = ProfileService.FACE_PLUS_PLUS_URL;
+    constructor(http) {
+        this.http = http;
+    }
+    compareInterests(text_1, text_2, apiKey) {
+        const headers = new HttpHeaders({
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json',
+        });
+        return this.http.post(`${this.baseUrl}textsimilarity`, { text_1, text_2 }, { headers });
+    }
+    detectFace(image, creds) {
+        const formData = new FormData();
+        // Use Face++ credentials from caller; the library must not depend on consumer application environments
+        const apiKey = creds?.apiKey ?? '';
+        const apiSecret = creds?.apiSecret ?? '';
+        formData.append(FacePlusPlusFormFields.API_KEY, apiKey);
+        formData.append(FacePlusPlusFormFields.API_SECRET, apiSecret);
+        // Provide either image_file (binary) or image_base64
+        if (typeof image === 'string') {
+            const isDataUrl = image.startsWith('data:');
+            const base64 = isDataUrl ? (image.split(',')[1] || '') : image;
+            formData.append(FacePlusPlusFormFields.IMAGE_BASE64, base64);
+        }
+        else {
+            formData.append(FacePlusPlusFormFields.IMAGE_FILE, image, image.name);
+        }
+        // Ask Face++ to return facial landmarks so eyes and nose can be positioned accurately
+        formData.append(FacePlusPlusFormFields.RETURN_LANDMARK, '1');
+        // Map Face++ response to IFaceDetectionResult shape
+        return this.http.post(`${this.baseUrlf}`, formData).pipe(
+        // Retry once after a short delay on Face++ rate-limit/security responses
+        retryWhen((errors) => errors.pipe(concatMap((error, i) => {
+            const status = error?.status;
+            const shouldRetry = (status === 403 || status === 429 || status === 503 || status === 401) && i < 1;
+            if (shouldRetry) {
+                // Wait 3 seconds before a single retry
+                return timer(3000);
+            }
+            // Propagate other errors (or second failure) to the caller
+            return throwError(() => error);
+        }))), map$1((raw) => {
+            // Face++ sometimes returns HTTP 200 with an error payload containing `error_message`
+            // e.g. "AUTHENTICATION_ERROR: api_key and api_secret does not match." or
+            //      "AUTHORIZATION_ERROR:<reason>" or "CONCURRENCY_LIMIT_EXCEEDED".
+            const errorMessage = raw?.error_message;
+            if (errorMessage && typeof errorMessage === 'string' && errorMessage.trim().length > 0) {
+                const lower = errorMessage.toLowerCase();
+                let status = 400;
+                if (lower.includes(FacePlusPlusErrorTypes.AUTHENTICATION_ERROR))
+                    status = 401;
+                else if (lower.includes(FacePlusPlusErrorTypes.AUTHORIZATION_ERROR))
+                    status = 403;
+                else if (lower.includes(FacePlusPlusErrorTypes.CONCURRENCY_LIMIT_EXCEEDED) || lower.includes(FacePlusPlusErrorTypes.RATE))
+                    status = 429;
+                // Throw an error-like object so subscribers hit the error path and can show a modal
+                throw { status, error: { message: errorMessage } };
+            }
+            const faces = Array.isArray(raw?.faces)
+                ? raw.faces
+                    .map((f) => {
+                    const rect = f?.face_rectangle || f?.faceRect || f?.rect;
+                    if (!rect || typeof rect.left !== 'number' || typeof rect.top !== 'number') {
+                        return null;
+                    }
+                    let landmarks = undefined;
+                    const lm = f?.landmark;
+                    if (lm && typeof lm === 'object') {
+                        landmarks = {};
+                        for (const key of Object.keys(lm)) {
+                            const pt = lm[key];
+                            if (pt && typeof pt.x === 'number' && typeof pt.y === 'number') {
+                                landmarks[key] = { x: pt.x, y: pt.y };
+                            }
+                        }
+                    }
+                    return {
+                        x: rect.left,
+                        y: rect.top,
+                        width: rect.width,
+                        height: rect.height,
+                        landmarks,
+                    };
+                })
+                    .filter((v) => !!v)
+                : [];
+            const imageUrl = typeof image === 'string' && image.startsWith('http') ? image : '';
+            const result = { imageUrl, faces };
+            return result;
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class ProfileComparisonLibComponent {
+    profileService;
+    openaiEmbeddingService;
+    renderer;
+    fileConversionService;
+    imageCompressionService;
+    static DEFAULT_OBJECT_POSITION = '50% 50%';
+    static DEFAULT_EYE_ALIGNMENT_BIAS_PX = 50;
+    static DEFAULT_IMAGE_FORMAT = 'image/jpeg';
+    static DEFAULT_IMAGE_QUALITY_START = 0.85;
+    static DEFAULT_IMAGE_QUALITY_MIN = 0.5;
+    static DEFAULT_IMAGE_QUALITY_STEP = 0.05;
+    static DEFAULT_MAX_BYTES = 2 * 1024 * 1024;
+    static DEFAULT_DOWNSCALE_STEP = 0.9;
+    static DEFAULT_MIN_WIDTH = 400;
+    static DEFAULT_MIN_HEIGHT = 400;
+    static DEFAULT_MAX_WIDTH = 1600;
+    static DEFAULT_MAX_HEIGHT = 1600;
+    static SPACER_SMALL = '-';
+    static SPACER_LARGE = '----';
+    static CONSOLIDATION_SEPARATOR_X = '×';
+    static CONSOLIDATION_SEPARATOR_SLASH = '/';
+    static FACEPP_RATE_LIMIT_DELAY_MS = 5000;
+    static DEFAULT_PROFILE_IMAGE_NAME = 'ProfilePg1.png';
+    config = {
+        person1Interests: [],
+        person2Interests: [],
+        person3Interests: [],
+        user1Image: '',
+        user2Image: '',
+    };
+    apiNinjasKey = '';
+    faceplusKey = '';
+    faceplusSecret = '';
+    openaiApiKey = '';
+    fadeAllEdges = false;
+    matrixDataChange = new EventEmitter();
+    selectedFile = null;
+    result;
+    firstImageData = null;
+    secondImageData = null;
+    user1Transform = '';
+    user2Transform = '';
+    alignmentCalculated = false;
+    isAligning = false;
+    user1ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
+    user2ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
+    user1NaturalWidth = 0;
+    user1NaturalHeight = 0;
+    user2NaturalWidth = 0;
+    user2NaturalHeight = 0;
+    user1FaceRaw = null;
+    user2FaceRaw = null;
+    eyeAlignmentBiasPx = ProfileComparisonLibComponent.DEFAULT_EYE_ALIGNMENT_BIAS_PX;
+    firstPersonInterests = [];
+    secondPersonInterests = [];
+    thirdPersonInterests = [];
+    centerItem = [];
+    person1Interests = [];
+    person2Interests = [];
+    person3Interests = [];
+    user1Image = '';
+    user2Image = '';
+    baseConfig = {
+        person1Interests: [],
+        person2Interests: [],
+        person3Interests: [],
+        user1Image: '',
+        user2Image: '',
+    };
+    displayPerson1Interests = [];
+    displayPerson2Interests = [];
+    alignedPerson1Interests = [];
+    alignedPerson2Interests = [];
+    leftProfileClicked = false;
+    rightProfileClicked = false;
+    sortedA = [];
+    sortedB = [];
+    sortedC = [];
+    similarity = 0;
+    similarityMatrixCsv = '';
+    matrixData = null;
+    customApiKey = '';
+    showApiKeyModal = false;
+    apiKeyInputValue = '';
+    quotaExhausted = false;
+    customFaceppKey = '';
+    customFaceppSecret = '';
+    showFaceppKeyModal = false;
+    faceppKeyInputValue = '';
+    faceppSecretInputValue = '';
+    faceppQuotaExhausted = false;
+    customOpenAIKey = '';
+    showOpenAIKeyModal = false;
+    openaiKeyInputValue = '';
+    openaiQuotaExhausted = false;
+    compressionConfig = {
+        maxWidth: ProfileComparisonLibComponent.DEFAULT_MAX_WIDTH,
+        maxHeight: ProfileComparisonLibComponent.DEFAULT_MAX_HEIGHT,
+        format: ProfileComparisonLibComponent.DEFAULT_IMAGE_FORMAT,
+        qualityStart: ProfileComparisonLibComponent.DEFAULT_IMAGE_QUALITY_START,
+        qualityMin: ProfileComparisonLibComponent.DEFAULT_IMAGE_QUALITY_MIN,
+        qualityStep: ProfileComparisonLibComponent.DEFAULT_IMAGE_QUALITY_STEP,
+        maxBytes: ProfileComparisonLibComponent.DEFAULT_MAX_BYTES,
+        downscaleStep: ProfileComparisonLibComponent.DEFAULT_DOWNSCALE_STEP,
+        minWidth: ProfileComparisonLibComponent.DEFAULT_MIN_WIDTH,
+        minHeight: ProfileComparisonLibComponent.DEFAULT_MIN_HEIGHT,
+    };
+    computeSub;
+    detectFaceSub1;
+    detectFaceSub2;
+    activeRequestEpoch = 0;
+    form = new FormGroup({
+        interest1: new FormControl(''),
+        interest2: new FormControl(''),
+    });
+    leftContainer;
+    rightContainer;
+    constructor(profileService, openaiEmbeddingService, renderer, fileConversionService, imageCompressionService) {
+        this.profileService = profileService;
+        this.openaiEmbeddingService = openaiEmbeddingService;
+        this.renderer = renderer;
+        this.fileConversionService = fileConversionService;
+        this.imageCompressionService = imageCompressionService;
+    }
+    anchorSide = 'left';
+    ngOnInit() {
+        this.baseConfig = JSON.parse(JSON.stringify(this.config));
+        this.loadCustomConfig();
+        this.updateConfigProperties();
+        this.loadApiKeyFromStorage();
+        this.loadFaceppCredsFromStorage();
+        this.loadOpenAIKeyFromStorage();
+        this.compute();
+        this.compressConfigImagesIfNeeded().subscribe({
+            next: () => this.initializeFaceDetection(),
+            error: (e) => {
+                console.warn('Config image compression failed, continuing:', e);
+                this.initializeFaceDetection();
+            }
+        });
+        this.user1Transform = 'translateY(0px)';
+        this.user2Transform = 'translateY(0px)';
+        this.alignmentCalculated = false;
+    }
+    ngAfterViewInit() {
+        this.waitForImagesAndInitDrag();
+    }
+    ngOnChanges(changes) {
+        if (changes['config']) {
+            this.updateConfigProperties();
+        }
+    }
+    updateConfigProperties() {
+        const normalized = this.buildConfigWithDefaults(this.config, this.baseConfig);
+        this.config = normalized;
+        this.person1Interests = [...normalized.person1Interests];
+        this.person2Interests = [...normalized.person2Interests];
+        this.user1Image = normalized.user1Image;
+        this.user2Image = normalized.user2Image;
+    }
+    buildConfigWithDefaults(cfg, base) {
+        const list = (val, fb) => {
+            if (Array.isArray(val)) {
+                const cleaned = val
+                    .filter((s) => typeof s === 'string')
+                    .map((s) => s.trim())
+                    .filter((s) => s.length > 0 && s !== ProfileComparisonLibComponent.SPACER_SMALL);
+                if (cleaned.length > 0)
+                    return cleaned;
+            }
+            return [...fb];
+        };
+        const str = (val, fb) => {
+            return typeof val === 'string' && val.trim().length > 0 ? val : fb;
+        };
+        const safe = cfg || {};
+        return {
+            person1Interests: list(safe.person1Interests, base.person1Interests),
+            person2Interests: list(safe.person2Interests, base.person2Interests),
+            person3Interests: list(safe.person3Interests, base.person3Interests),
+            user1Image: str(safe.user1Image, base.user1Image),
+            user2Image: str(safe.user2Image, base.user2Image),
+        };
+    }
+    onUserImageLoad(which, event) {
+        const img = event?.target;
+        if (!img)
+            return;
+        if (which === 1) {
+            this.user1NaturalWidth = img.naturalWidth || 0;
+            this.user1NaturalHeight = img.naturalHeight || 0;
+            this.updateObjectPositionForFace(1);
+            if (this.firstImageData && this.secondImageData) {
+                this.calculateFaceAlignment(this.firstImageData, this.secondImageData);
+            }
+        }
+        else {
+            this.user2NaturalWidth = img.naturalWidth || 0;
+            this.user2NaturalHeight = img.naturalHeight || 0;
+            this.updateObjectPositionForFace(2);
+            if (this.firstImageData && this.secondImageData) {
+                this.calculateFaceAlignment(this.firstImageData, this.secondImageData);
+            }
+        }
+    }
+    updateObjectPositionForFace(which) {
+        const face = which === 1 ? this.user1FaceRaw : this.user2FaceRaw;
+        const natW = which === 1 ? this.user1NaturalWidth : this.user2NaturalWidth;
+        const natH = which === 1 ? this.user1NaturalHeight : this.user2NaturalHeight;
+        if (!face || !natW || !natH) {
+            if (which === 1)
+                this.user1ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
+            else
+                this.user2ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
+            return;
+        }
+        const eyes = this.getEyeCoordinatesFromFace(face);
+        const nose = this.getNoseCoordinateFromFace(face);
+        const minX = Math.min(eyes.leftEye.x, eyes.rightEye.x, nose.x);
+        const maxX = Math.max(eyes.leftEye.x, eyes.rightEye.x, nose.x);
+        const roiCenterX = (minX + maxX) / 2;
+        const { width: cw, height: ch } = this.getProfileContainerSize(which);
+        if (!cw || !ch) {
+            const clamped = Math.max(0, Math.min(natW, roiCenterX));
+            let xPercentFallback = Math.round((clamped / natW) * 10000) / 100;
+            const faceCenterX_fb = face.x + face.width / 2;
+            const ratio_fb = faceCenterX_fb / natW;
+            if (ratio_fb > 0.6) {
+                const over = Math.min(0.4, ratio_fb - 0.6);
+                const shiftPct = 7 + (over / 0.4) * 8;
+                xPercentFallback = Math.max(0, Math.min(100, xPercentFallback + shiftPct));
+            }
+            const posFallback = `${xPercentFallback}% 50%`;
+            if (which === 1)
+                this.user1ObjectPosition = posFallback;
+            else
+                this.user2ObjectPosition = posFallback;
+            return;
+        }
+        const scale = Math.max(cw / natW, ch / natH);
+        const viewW = cw / scale;
+        const paddingCssPx = 12;
+        const overlapCssPx = this.getOverlapSizeCssPx();
+        const fadeSafetyCssPx = 8;
+        const fadeCssPx = overlapCssPx + paddingCssPx + fadeSafetyCssPx;
+        const fadeInImgPx = fadeCssPx / scale;
+        const edgeInImgPx = paddingCssPx / scale;
+        let anchorX = roiCenterX;
+        if (which === 1) {
+            const minAnchorForRightEye = maxX - viewW / 2 + fadeInImgPx;
+            const maxAnchorForLeftEye = minX + viewW / 2 - edgeInImgPx;
+            anchorX = Math.max(anchorX, minAnchorForRightEye);
+            anchorX = Math.min(anchorX, maxAnchorForLeftEye);
+            const faceCenterX = face.x + face.width / 2;
+            const ratio = faceCenterX / natW;
+            if (ratio > 0.6) {
+                const over = Math.min(0.4, ratio - 0.6);
+                const shiftPct = 7 + (over / 0.4) * 8;
+                const shiftPx = (shiftPct / 100) * natW;
+                anchorX += shiftPx;
+                anchorX = Math.min(anchorX, maxAnchorForLeftEye);
+                anchorX = Math.max(anchorX, minAnchorForRightEye);
+            }
+        }
+        else {
+            const maxAnchorForLeftEye = minX + viewW / 2 - fadeInImgPx;
+            const minAnchorForRightEye = maxX - viewW / 2 + edgeInImgPx;
+            anchorX = Math.min(anchorX, maxAnchorForLeftEye);
+            anchorX = Math.max(anchorX, minAnchorForRightEye);
+            const faceCenterX = face.x + face.width / 2;
+            const ratio = faceCenterX / natW;
+            if (ratio > 0.6) {
+                const over = Math.min(0.4, ratio - 0.6);
+                const shiftPct = 7 + (over / 0.4) * 8;
+                const shiftPx = (shiftPct / 100) * natW;
+                anchorX += shiftPx;
+            }
+        }
+        const minAnchor = viewW / 2;
+        const maxAnchor = natW - viewW / 2;
+        anchorX = Math.max(minAnchor, Math.min(maxAnchor, anchorX));
+        const viewLeft = anchorX - viewW / 2;
+        const viewRight = anchorX + viewW / 2;
+        const currentOverlap = this.getOverlapSizeCssPx();
+        let desiredOverlap = currentOverlap;
+        if (which === 1) {
+            const distanceRightImg = Math.max(0, viewRight - maxX);
+            const allowedCss = Math.max(10, distanceRightImg * scale - paddingCssPx);
+            if (allowedCss < desiredOverlap)
+                desiredOverlap = allowedCss;
+        }
+        else {
+            const distanceLeftImg = Math.max(0, minX - viewLeft);
+            const allowedCss = Math.max(10, distanceLeftImg * scale - paddingCssPx);
+            if (allowedCss < desiredOverlap)
+                desiredOverlap = allowedCss;
+        }
+        if (desiredOverlap < currentOverlap - 0.5) {
+            this.setOverlapSizeCssPx(desiredOverlap);
+        }
+        const xPercent = Math.round((anchorX / natW) * 10000) / 100;
+        const pos = `${xPercent}% 50%`;
+        if (which === 1)
+            this.user1ObjectPosition = pos;
+        else
+            this.user2ObjectPosition = pos;
+    }
+    getProfileContainerSize(which) {
+        try {
+            const selector = which === 1 ? '.profile-img.left' : '.profile-img.right';
+            const el = document.querySelector(selector);
+            if (!el)
+                return { width: 0, height: 0 };
+            const rect = el.getBoundingClientRect();
+            return { width: Math.round(rect.width), height: Math.round(rect.height) };
+        }
+        catch {
+            return { width: 0, height: 0 };
+        }
+    }
+    getOverlapSizeCssPx() {
+        try {
+            const root = document.querySelector('.profile-flex');
+            const fallback = 40;
+            if (!root)
+                return fallback;
+            const val = getComputedStyle(root).getPropertyValue('--overlap-size').trim();
+            const parsed = parseFloat(val);
+            return isNaN(parsed) ? fallback : parsed;
+        }
+        catch {
+            return 40;
+        }
+    }
+    setOverlapSizeCssPx(px) {
+        try {
+            const root = document.querySelector('.profile-flex');
+            if (!root)
+                return;
+            const clamped = Math.max(8, Math.min(80, Math.round(px)));
+            root.style.setProperty('--overlap-size', `${clamped}px`);
+        }
+        catch { }
+    }
+    waitForImagesAndInitDrag() {
+        const shapeBg1 = document.querySelector('img.shape-bg1');
+        const shapeBg2 = document.querySelector('img.shape-bg2');
+        if (!shapeBg1 || !shapeBg2) {
+            setTimeout(() => this.waitForImagesAndInitDrag(), 100);
+            return;
+        }
+        const checkImagesLoaded = () => {
+            const img1Loaded = shapeBg1.complete && shapeBg1.naturalWidth > 0;
+            const img2Loaded = shapeBg2.complete && shapeBg2.naturalWidth > 0;
+            if (img1Loaded && img2Loaded) {
+                setTimeout(() => this.initDrag(), 50);
+            }
+            else {
+                setTimeout(checkImagesLoaded, 100);
+            }
+        };
+        checkImagesLoaded();
+    }
+    initDrag() {
+        const shapeBg1 = document.querySelector('img.shape-bg1');
+        const shapeBg2 = document.querySelector('img.shape-bg2');
+        const shapeTextLeft = document.querySelector('.shape-text-left');
+        const shapeTextRight = document.querySelector('.shape-text-right');
+        if (!shapeBg1 || !shapeBg2 || !shapeTextLeft || !shapeTextRight)
+            return;
+        shapeBg1.style.height = '350px';
+        shapeBg1.style.objectFit = 'cover';
+        shapeBg1.style.objectPosition = 'right';
+        shapeBg2.style.height = '350px';
+        shapeBg2.style.objectFit = 'cover';
+        shapeBg2.style.objectPosition = 'left';
+        const originalWidth1 = shapeBg1.offsetWidth;
+        const originalWidth2 = shapeBg2.offsetWidth;
+        const minWidth = 200;
+        const maxWidth = 400;
+        let isDragging = false;
+        let dragStartX = 0;
+        let initialWidth1 = 0;
+        let initialWidth2 = 0;
+        let activeImg = null;
+        const shapeTextCenter = document.querySelector('.shape-text-center');
+        const onMouseMove = (e) => {
+            if (!isDragging || !activeImg)
+                return;
+            const deltaX = e.clientX - dragStartX;
+            const containerWidth = document.querySelector('.shape')?.clientWidth || 0;
+            const centerPosition = containerWidth / 2;
+            let newWidth1 = initialWidth1;
+            let newWidth2 = initialWidth2;
+            if (activeImg === shapeBg1) {
+                newWidth1 = initialWidth1 + deltaX;
+                newWidth2 = initialWidth2 - deltaX;
+            }
+            else if (activeImg === shapeBg2) {
+                newWidth1 = initialWidth1 - deltaX;
+                newWidth2 = initialWidth2 + deltaX;
+            }
+            newWidth1 = Math.max(minWidth, Math.min(maxWidth, newWidth1));
+            newWidth2 = Math.max(minWidth, Math.min(maxWidth, newWidth2));
+            shapeBg1.style.width = newWidth1 + 'px';
+            shapeBg1.style.height = '350px';
+            shapeBg2.style.width = newWidth2 + 'px';
+            shapeBg2.style.height = '350px';
+            const widthChange1 = newWidth1 - originalWidth1;
+            const widthChange2 = newWidth2 - originalWidth2;
+            const dragDirection = deltaX > 0 ? 1 : -1;
+            const dragDistance = Math.abs(deltaX);
+            const maxDragDistance = 100;
+            const centerMoveDistance = Math.min(dragDistance, maxDragDistance) * dragDirection * 0.5;
+            shapeTextLeft.style.transform = `translateX(${widthChange1 * 0.3}px)`;
+            shapeTextRight.style.transform = `translateX(${-widthChange2 * 0.3}px)`;
+            shapeTextCenter.style.transform = `translateX(${centerMoveDistance * 0.3}px)`;
+        };
+        const resetWidths = () => {
+            isDragging = false;
+            activeImg = null;
+            shapeBg1.style.transition = 'width 0.3s ease';
+            shapeBg2.style.transition = 'width 0.3s ease';
+            shapeTextLeft.style.transition = 'transform 0.3s ease';
+            shapeTextRight.style.transition = 'transform 0.3s ease';
+            shapeTextCenter.style.transition = 'transform 0.3s ease';
+            shapeBg1.style.width = originalWidth1 + 'px';
+            shapeBg2.style.width = originalWidth2 + 'px';
+            shapeTextLeft.style.transform = 'translateX(0px)';
+            shapeTextRight.style.transform = 'translateX(0px)';
+            shapeTextCenter.style.transform = 'translateX(0px)';
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', resetWidths);
+            document.removeEventListener('mouseleave', resetWidths);
+            setTimeout(() => {
+                shapeBg1.style.transition = '';
+                shapeBg2.style.transition = '';
+                shapeTextLeft.style.transition = '';
+                shapeTextRight.style.transition = '';
+                shapeTextCenter.style.transition = '';
+            }, 300);
+        };
+        [shapeBg1, shapeBg2].forEach((img) => {
+            img.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                isDragging = true;
+                activeImg = img;
+                dragStartX = e.clientX;
+                initialWidth1 = shapeBg1.offsetWidth;
+                initialWidth2 = shapeBg2.offsetWidth;
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', resetWidths);
+                document.addEventListener('mouseleave', resetWidths);
+            });
+        });
+    }
+    compute() {
+        if (this.computeSub) {
+            this.computeSub.unsubscribe();
+            this.computeSub = undefined;
+        }
+        const requestEpoch = this.activeRequestEpoch;
+        this.centerItem = [];
+        this.computeSub = forkJoin({
+            a: this.sortByMaxSimilarity(this.person1Interests, [this.person2Interests, this.person3Interests]),
+            b: this.sortByMaxSimilarity(this.person2Interests, [this.person1Interests, this.person3Interests]),
+            c: this.sortByMaxSimilarity(this.person3Interests, [this.person1Interests, this.person2Interests]),
+        }).subscribe((result) => {
+            this.sortedA = result.a;
+            this.sortedB = result.b;
+            this.sortedC = result.c;
+            this.displayPerson1Interests = result.a.map((item) => item.item);
+            this.displayPerson2Interests = result.b.map((item) => item.item);
+            this.isAligning = true;
+            this.createEmbeddingBasedAlignment(result.a, result.b)
+                .then(() => {
+                this.isAligning = false;
+                this.generateSimilarityMatrix();
+            })
+                .catch((error) => {
+                console.warn('Embedding alignment failed, falling back to semantic:', error);
+                this.createSemanticAlignment(result.a, result.b).then(() => {
+                    this.isAligning = false;
+                    this.generateSimilarityMatrix();
+                });
+            });
+        });
+    }
+    async createSemanticAlignment(person1Results, person2Results) {
+        this.alignedPerson1Interests = person1Results.map((item) => item.item);
+        this.alignedPerson2Interests = person2Results.map((item) => item.item);
+        const maxLength = Math.max(this.alignedPerson1Interests.length, this.alignedPerson2Interests.length);
+        while (this.alignedPerson1Interests.length < maxLength)
+            this.alignedPerson1Interests.push(ProfileComparisonLibComponent.SPACER_SMALL);
+        while (this.alignedPerson2Interests.length < maxLength)
+            this.alignedPerson2Interests.push(ProfileComparisonLibComponent.SPACER_SMALL);
+    }
+    async createEmbeddingBasedAlignment(person1Results, person2Results) {
+        try {
+            const baseLeft = this.person1Interests.filter(i => !!i && i.trim() !== ProfileComparisonLibComponent.SPACER_SMALL && i.trim().length > 0 && !this.centerItem.includes(i));
+            const baseRight = this.person2Interests.filter(i => !!i && i.trim() !== ProfileComparisonLibComponent.SPACER_SMALL && i.trim().length > 0 && !this.centerItem.includes(i));
+            this.openaiEmbeddingService
+                .getAlignedLists(baseLeft, baseRight, this.getActiveOpenAIKey())
+                .subscribe({
+                next: (result) => {
+                    if (result) {
+                        let listA = result.listA;
+                        let listB = result.listB;
+                        const minLength = Math.min(listA.length, listB.length);
+                        for (let i = 0; i < minLength; i++) {
+                            const itemA = listA[i];
+                            const itemB = listB[i];
+                            if (!itemA || !itemB || itemA === ProfileComparisonLibComponent.SPACER_SMALL || itemA === ProfileComparisonLibComponent.SPACER_LARGE || itemB === ProfileComparisonLibComponent.SPACER_SMALL || itemB === ProfileComparisonLibComponent.SPACER_LARGE)
+                                continue;
+                            const normA = itemA.trim().toLowerCase();
+                            const normB = itemB.trim().toLowerCase();
+                            let isMatch = normA === normB;
+                            if (!isMatch && (normA.includes(ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_X) || normA.includes(ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_SLASH)) && (normB.includes(ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_X) || normB.includes(ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_SLASH))) {
+                                const separatorRegex = new RegExp(`[${ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_X}${ProfileComparisonLibComponent.CONSOLIDATION_SEPARATOR_SLASH}]`);
+                                const partsA = normA.split(separatorRegex).map(p => p.trim()).sort();
+                                const partsB = normB.split(separatorRegex).map(p => p.trim()).sort();
+                                if (partsA.length === partsB.length && partsA.every((val, index) => val === partsB[index]))
+                                    isMatch = true;
+                            }
+                            if (isMatch) {
+                                const existing = this.centerItem.find(item => item.trim().toLowerCase() === normA);
+                                if (!existing)
+                                    this.centerItem.push(itemA);
+                                listA[i] = ProfileComparisonLibComponent.SPACER_SMALL;
+                                listB[i] = ProfileComparisonLibComponent.SPACER_SMALL;
+                            }
+                        }
+                        const cleanListA = [];
+                        const cleanListB = [];
+                        for (let i = 0; i < listA.length; i++) {
+                            const itemA = listA[i];
+                            const itemB = listB[i];
+                            const isSpacerRow = (!itemA || itemA === ProfileComparisonLibComponent.SPACER_SMALL || itemA === ProfileComparisonLibComponent.SPACER_LARGE) && (!itemB || itemB === ProfileComparisonLibComponent.SPACER_SMALL || itemB === ProfileComparisonLibComponent.SPACER_LARGE);
+                            if (isSpacerRow) {
+                                const lastIndex = cleanListA.length - 1;
+                                if (lastIndex >= 0) {
+                                    const lastA = cleanListA[lastIndex];
+                                    const lastB = cleanListB[lastIndex];
+                                    const lastWasSpacer = (!lastA || lastA === ProfileComparisonLibComponent.SPACER_SMALL || lastA === ProfileComparisonLibComponent.SPACER_LARGE) && (!lastB || lastB === ProfileComparisonLibComponent.SPACER_SMALL || lastB === ProfileComparisonLibComponent.SPACER_LARGE);
+                                    if (lastWasSpacer) {
+                                        if (itemA === ProfileComparisonLibComponent.SPACER_LARGE || itemB === ProfileComparisonLibComponent.SPACER_LARGE || lastA === ProfileComparisonLibComponent.SPACER_LARGE || lastB === ProfileComparisonLibComponent.SPACER_LARGE) {
+                                            cleanListA[lastIndex] = ProfileComparisonLibComponent.SPACER_LARGE;
+                                            cleanListB[lastIndex] = ProfileComparisonLibComponent.SPACER_LARGE;
+                                        }
+                                        continue;
+                                    }
+                                }
+                            }
+                            cleanListA.push(itemA);
+                            cleanListB.push(itemB);
+                        }
+                        if (cleanListA.length > 0) {
+                            const firstA = cleanListA[0];
+                            const firstB = cleanListB[0];
+                            if ((!firstA || firstA === ProfileComparisonLibComponent.SPACER_SMALL || firstA === ProfileComparisonLibComponent.SPACER_LARGE) && (!firstB || firstB === ProfileComparisonLibComponent.SPACER_SMALL || firstB === ProfileComparisonLibComponent.SPACER_LARGE)) {
+                                cleanListA.shift();
+                                cleanListB.shift();
+                            }
+                        }
+                        if (cleanListA.length > 0) {
+                            const lastIndex = cleanListA.length - 1;
+                            const lastA = cleanListA[lastIndex];
+                            const lastB = cleanListB[lastIndex];
+                            if ((!lastA || lastA === ProfileComparisonLibComponent.SPACER_SMALL || lastA === ProfileComparisonLibComponent.SPACER_LARGE) && (!lastB || lastB === ProfileComparisonLibComponent.SPACER_SMALL || lastB === ProfileComparisonLibComponent.SPACER_LARGE)) {
+                                cleanListA.pop();
+                                cleanListB.pop();
+                            }
+                        }
+                        this.alignedPerson1Interests = cleanListA;
+                        this.alignedPerson2Interests = cleanListB;
+                    }
+                    else {
+                        this.createSemanticAlignment(person1Results, person2Results);
+                    }
+                },
+                error: (error) => {
+                    this.createSemanticAlignment(person1Results, person2Results);
+                }
+            });
+        }
+        catch (error) {
+            // Catch block for baseLeft/baseRight filtering errors
+            this.createSemanticAlignment(person1Results, person2Results);
+        }
+    }
+    sortByMaxSimilarity(personList, otherLists) {
+        const requestEpoch = this.activeRequestEpoch;
+        const others = otherLists.flat().filter(o => !!o && o.trim() !== ProfileComparisonLibComponent.SPACER_SMALL && o.trim().length > 0);
+        const validPersonList = personList.filter(i => !!i && i.trim() !== ProfileComparisonLibComponent.SPACER_SMALL && i.trim().length > 0);
+        const CONCURRENCY = 4;
+        return from(validPersonList).pipe(concatMap((item) => from(others).pipe(mergeMap((o) => this.profileService.compareInterests(item, o, this.getActiveApiKey()).pipe(map$1((res) => res.similarity), catchError$1((error) => {
+            if (requestEpoch === this.activeRequestEpoch)
+                this.handleApiQuotaError(error);
+            return of(0);
+        })), CONCURRENCY), toArray(), map$1((scores) => {
+            const maxScore = scores.length ? Math.max(...scores) : 0;
+            const itemNorm = item.trim().toLowerCase();
+            const hasExact = others.some(o => o && o.trim().toLowerCase() === itemNorm);
+            if (hasExact) {
+                const existing = this.centerItem.find(i => i.trim().toLowerCase() === itemNorm);
+                if (!existing)
+                    this.centerItem.push(item);
+            }
+            return { item, score: maxScore };
+        }))), toArray(), map$1((results) => results.sort((a, b) => b.score - a.score)));
+    }
+    onViewProfile() {
+        alert('You have been routed to a profile page ');
+    }
+    getActiveApiKey() {
+        return this.customApiKey || this.apiNinjasKey;
+    }
+    updateApiKey() {
+        if (this.apiKeyInputValue.trim()) {
+            this.customApiKey = this.apiKeyInputValue.trim();
+            this.saveApiKeyToStorage(this.customApiKey);
+            this.showApiKeyModal = false;
+            this.quotaExhausted = false;
+            this.activeRequestEpoch++;
+            this.compute();
+            this.initializeFaceDetection();
+        }
+    }
+    closeApiKeyModal() {
+        this.showApiKeyModal = false;
+    }
+    handleApiQuotaError(error) {
+        if (error?.status === 400 || error?.status === 429 || error?.status === 403 || error?.error?.message?.toLowerCase().includes('quota')) {
+            this.quotaExhausted = true;
+            this.showApiKeyModal = true;
+        }
+    }
+    saveApiKeyToStorage(apiKey) {
+        try {
+            localStorage.setItem('apiNinjasCustomKey', apiKey);
+        }
+        catch { }
+    }
+    loadApiKeyFromStorage() {
+        try {
+            const savedKey = localStorage.getItem('apiNinjasCustomKey');
+            if (savedKey) {
+                this.customApiKey = savedKey;
+                this.apiKeyInputValue = savedKey;
+            }
+        }
+        catch { }
+    }
+    onFileInputChange(event) {
+        const files = event.target.files;
+        this.selectedFile = files && files.length > 0 ? files[0] : null;
+    }
+    compressConfigImagesIfNeeded() {
+        const tasks = [];
+        if (this.user1Image) {
+            tasks.push(this.compressImageStringToDataUrl(this.user1Image, 'ConfigUser1').pipe(tap((dataUrl) => { if (dataUrl)
+                this.user1Image = dataUrl; }), map$1(() => void 0)));
+        }
+        if (this.user2Image) {
+            tasks.push(this.compressImageStringToDataUrl(this.user2Image, 'ConfigUser2').pipe(tap((dataUrl) => { if (dataUrl)
+                this.user2Image = dataUrl; }), map$1(() => void 0)));
+        }
+        return tasks.length > 0 ? forkJoin(tasks).pipe(map$1(() => void 0)) : of(void 0);
+    }
+    compressImageStringToDataUrl(imageStr, baseName) {
+        return this.fileConversionService.getFileForImageString(imageStr, `${baseName}.jpg`).pipe(switchMap$1(file => this.imageCompressionService.compressImageFile(file, this.compressionConfig)), map$1(res => res.dataUrl), catchError$1(() => of(null)));
+    }
+    loadCustomConfig() {
+        try {
+            const raw = localStorage.getItem('customProfileConfig');
+            if (!raw) {
+                this.config = this.baseConfig || this.config;
+                return;
+            }
+            const parsed = JSON.parse(raw);
+            this.config = this.buildConfigWithDefaults(parsed, this.baseConfig);
+        }
+        catch {
+            this.config = this.baseConfig || this.config;
+        }
+    }
+    getEyeCoordinatesFromBBox(bbox) {
+        const eyeY = bbox.y + bbox.height * 0.38;
+        const leftEyeX = bbox.x + bbox.width * 0.32;
+        const rightEyeX = bbox.x + bbox.width * 0.68;
+        return { leftEye: { x: leftEyeX, y: eyeY }, rightEye: { x: rightEyeX, y: eyeY } };
+    }
+    getEyeCoordinatesFromFace(face) {
+        const lm = (face && face.landmarks) || undefined;
+        const pick = (candidates) => {
+            if (!lm)
+                return undefined;
+            for (const key of candidates) {
+                const pt = lm[key];
+                if (pt && typeof pt.x === 'number' && typeof pt.y === 'number')
+                    return this.clampPointToFaceRect({ x: pt.x, y: pt.y }, face);
+            }
+            return undefined;
+        };
+        const left = pick(['left_eye_pupil', 'left_eye_center', 'eye_left_pupil', 'left_eye']) || this.getEyeCoordinatesFromBBox(face).leftEye;
+        const right = pick(['right_eye_pupil', 'right_eye_center', 'eye_right_pupil', 'right_eye']) || this.getEyeCoordinatesFromBBox(face).rightEye;
+        return { leftEye: left, rightEye: right };
+    }
+    getNoseCoordinateFromFace(face) {
+        const lm = (face && face.landmarks) || undefined;
+        const pick = (candidates) => {
+            if (!lm)
+                return undefined;
+            for (const key of candidates) {
+                const pt = lm[key];
+                if (pt && typeof pt.x === 'number' && typeof pt.y === 'number')
+                    return this.clampPointToFaceRect({ x: pt.x, y: pt.y }, face);
+            }
+            return undefined;
+        };
+        const nose = pick(['nose_tip', 'nose', 'nose_middle', 'nose_bridge1']);
+        if (nose)
+            return nose;
+        return this.getNoseCoordinateFromBBox(face);
+    }
+    clampPointToFaceRect(p, box) {
+        const x = Math.max(box.x, Math.min(box.x + box.width, p.x));
+        const y = Math.max(box.y, Math.min(box.y + box.height, p.y));
+        return { x, y };
+    }
+    getNoseCoordinateFromBBox(bbox) {
+        return { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height * 0.58 };
+    }
+    getFaceCoordinatesFromBBox(bbox) {
+        return {
+            faceCenter: { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 },
+            faceTop: { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 4 },
+            faceBottom: { x: bbox.x + bbox.width / 2, y: bbox.y + (3 * bbox.height) / 4 },
+            faceLeft: { x: bbox.x + bbox.width / 4, y: bbox.y + bbox.height / 2 },
+            faceRight: { x: bbox.x + (3 * bbox.width) / 4, y: bbox.y + bbox.height / 2 },
+        };
+    }
+    initializeFaceDetection() {
+        if (this.detectFaceSub1)
+            this.detectFaceSub1.unsubscribe();
+        if (this.detectFaceSub2)
+            this.detectFaceSub2.unsubscribe();
+        let user1FaceData = null;
+        let user2FaceData = null;
+        const shouldDelayUser2 = !!this.user1Image && !!this.user2Image;
+        const FACEPP_RATE_LIMIT_DELAY_MS = ProfileComparisonLibComponent.FACEPP_RATE_LIMIT_DELAY_MS;
+        if (this.user1Image) {
+            this.fileConversionService.getFileForImageString(this.user1Image, ProfileComparisonLibComponent.DEFAULT_PROFILE_IMAGE_NAME).subscribe((file) => {
+                this.detectFaceSub1 = this.profileService.detectFace(file, { apiKey: this.getActiveFaceppKey(), apiSecret: this.getActiveFaceppSecret() }).subscribe({
+                    next: (res) => {
+                        this.firstImageData = res;
+                        user1FaceData = res;
+                        try {
+                            const faces = res?.faces || [];
+                            this.user1FaceRaw = Array.isArray(faces) && faces.length > 0 ? faces[0] : null;
+                            this.updateObjectPositionForFace(1);
+                        }
+                        catch { }
+                        if (user1FaceData && user2FaceData)
+                            this.calculateFaceAlignment(user1FaceData, user2FaceData);
+                    },
+                    error: (err) => this.handleFaceppError(err),
+                });
+            });
+        }
+        if (this.user2Image) {
+            this.fileConversionService.getFileForImageString(this.user2Image, 'ProfilePg2.png').subscribe((file) => {
+                const startUser2Detect = () => {
+                    this.detectFaceSub2 = this.profileService.detectFace(file, { apiKey: this.getActiveFaceppKey(), apiSecret: this.getActiveFaceppSecret() }).subscribe({
+                        next: (res) => {
+                            this.secondImageData = res;
+                            user2FaceData = res;
+                            try {
+                                const faces = res?.faces || [];
+                                this.user2FaceRaw = Array.isArray(faces) && faces.length > 0 ? faces[0] : null;
+                                this.updateObjectPositionForFace(2);
+                            }
+                            catch { }
+                            if (user1FaceData && user2FaceData)
+                                this.calculateFaceAlignment(user1FaceData, user2FaceData);
+                        },
+                        error: (err) => this.handleFaceppError(err),
+                    });
+                };
+                if (shouldDelayUser2)
+                    setTimeout(startUser2Detect, FACEPP_RATE_LIMIT_DELAY_MS);
+                else
+                    startUser2Detect();
+            });
+        }
+    }
+    calculateFaceAlignment(user1Data, user2Data) {
+        let faces1 = [];
+        let faces2 = [];
+        const getFaces = (data) => {
+            if (Array.isArray(data))
+                return data;
+            if (data && typeof data === 'object' && 'faces' in data && Array.isArray(data.faces))
+                return data.faces;
+            return [];
+        };
+        faces1 = getFaces(user1Data);
+        faces2 = getFaces(user2Data);
+        if (!faces1?.length || !faces2?.length) {
+            this.applyDefaultAlignment();
+            return;
+        }
+        const face1 = faces1[0];
+        const face2 = faces2[0];
+        if (!this.isValidFaceData(face1) || !this.isValidFaceData(face2)) {
+            this.applyDefaultAlignment();
+            return;
+        }
+        const user1FaceCoords = this.getFaceCoordinatesFromBBox(face1);
+        const user2FaceCoords = this.getFaceCoordinatesFromBBox(face2);
+        const user1Eyes = this.getEyeCoordinatesFromFace(face1);
+        const user2Eyes = this.getEyeCoordinatesFromFace(face2);
+        const leftContainerEl = document.querySelector('.profile-img.left');
+        const rightContainerEl = document.querySelector('.profile-img.right');
+        const containerWidth1 = leftContainerEl?.clientWidth || 160;
+        const containerHeight1 = leftContainerEl?.clientHeight || 550;
+        const containerWidth2 = rightContainerEl?.clientWidth || 160;
+        const containerHeight2 = rightContainerEl?.clientHeight || 550;
+        const scale1 = this.user1NaturalWidth ? Math.max(containerWidth1 / this.user1NaturalWidth, containerHeight1 / this.user1NaturalHeight) : 1;
+        const scale2 = this.user2NaturalWidth ? Math.max(containerWidth2 / this.user2NaturalWidth, containerHeight2 / this.user2NaturalHeight) : 1;
+        const displayedFaceHeight1 = face1.height * scale1;
+        const displayedFaceHeight2 = face2.height * scale2;
+        const ratio1 = containerHeight1 ? displayedFaceHeight1 / containerHeight1 : 0;
+        const ratio2 = containerHeight2 ? displayedFaceHeight2 / containerHeight2 : 0;
+        let finalScale1 = ratio1 > 0 && ratio1 < 0.22 ? Math.min(3, 0.32 / ratio1) : 1;
+        let finalScale2 = ratio2 > 0 && ratio2 < 0.22 ? Math.min(3, 0.32 / ratio2) : 1;
+        const effRatio1 = ratio1 * finalScale1;
+        const effRatio2 = ratio2 * finalScale2;
+        if (effRatio1 > effRatio2 * 1.35)
+            finalScale1 = Math.max(0.95, finalScale1 * (effRatio2 / effRatio1));
+        else if (effRatio2 > effRatio1 * 1.35)
+            finalScale2 = Math.max(0.95, finalScale2 * (effRatio1 / effRatio2));
+        const nose1 = this.getNoseCoordinateFromFace(face1);
+        const nose2 = this.getNoseCoordinateFromFace(face2);
+        const anchor1Y = (Math.min(user1Eyes.leftEye.y, user1Eyes.rightEye.y) + nose1.y) / 2;
+        const anchor2Y = (Math.min(user2Eyes.leftEye.y, user2Eyes.rightEye.y) + nose2.y) / 2;
+        const tCenter1 = this.user1NaturalHeight ? -((anchor1Y - this.user1NaturalHeight / 2) * scale1 * finalScale1) : 0;
+        const tCenter2 = this.user2NaturalHeight ? -((anchor2Y - this.user2NaturalHeight / 2) * scale2 * finalScale2) : 0;
+        this.user1Transform = `translateY(${tCenter1 - this.eyeAlignmentBiasPx}px) scale(${finalScale1})`;
+        this.user2Transform = `translateY(${tCenter2 - this.eyeAlignmentBiasPx}px) scale(${finalScale2})`;
+        this.alignmentCalculated = true;
+    }
+    applyDefaultAlignment() {
+        this.user1Transform = 'translateY(0px)';
+        this.user2Transform = 'translateY(0px)';
+        this.alignmentCalculated = true;
+    }
+    isValidFaceData(face) {
+        return !!face && typeof face.x === 'number' && face.width > 0 && face.height > 0;
+    }
+    getActiveFaceppKey() { return this.customFaceppKey || this.faceplusKey; }
+    getActiveFaceppSecret() { return this.customFaceppSecret || this.faceplusSecret; }
+    updateFaceppCredentials() {
+        const newKey = (this.faceppKeyInputValue || '').trim();
+        const newSecret = (this.faceppSecretInputValue || '').trim();
+        if (!newKey || !newSecret)
+            return;
+        if (this.detectFaceSub1)
+            this.detectFaceSub1.unsubscribe();
+        if (this.detectFaceSub2)
+            this.detectFaceSub2.unsubscribe();
+        this.customFaceppKey = newKey;
+        this.customFaceppSecret = newSecret;
+        this.saveFaceppCredsToStorage(newKey, newSecret);
+        this.showFaceppKeyModal = false;
+        this.faceppQuotaExhausted = false;
+        this.activeRequestEpoch++;
+        this.initializeFaceDetection();
+    }
+    closeFaceppKeyModal() { this.showFaceppKeyModal = false; }
+    handleFaceppError(error) {
+        this.faceppQuotaExhausted = true;
+        this.showFaceppKeyModal = true;
+    }
+    saveFaceppCredsToStorage(apiKey, apiSecret) {
+        try {
+            localStorage.setItem('faceppApiKey', apiKey);
+            localStorage.setItem('faceppApiSecret', apiSecret);
+        }
+        catch { }
+    }
+    loadFaceppCredsFromStorage() {
+        try {
+            const key = localStorage.getItem('faceppApiKey');
+            const secret = localStorage.getItem('faceppApiSecret');
+            if (key) {
+                this.customFaceppKey = key;
+                this.faceppKeyInputValue = key;
+            }
+            if (secret) {
+                this.customFaceppSecret = secret;
+                this.faceppSecretInputValue = secret;
+            }
+        }
+        catch { }
+    }
+    getActiveOpenAIKey() { return this.customOpenAIKey || this.openaiApiKey; }
+    updateOpenAIKey() {
+        if (this.openaiKeyInputValue.trim()) {
+            this.customOpenAIKey = this.openaiKeyInputValue.trim();
+            this.saveOpenAIKeyToStorage(this.customOpenAIKey);
+            this.showOpenAIKeyModal = false;
+            this.openaiQuotaExhausted = false;
+            this.openaiEmbeddingService.clearCache();
+            this.compute();
+        }
+    }
+    closeOpenAIKeyModal() { this.showOpenAIKeyModal = false; }
+    saveOpenAIKeyToStorage(apiKey) {
+        try {
+            localStorage.setItem('openaiCustomKey', apiKey);
+        }
+        catch { }
+    }
+    loadOpenAIKeyFromStorage() {
+        try {
+            const savedKey = localStorage.getItem('openaiCustomKey');
+            if (savedKey) {
+                this.customOpenAIKey = savedKey;
+                this.openaiKeyInputValue = savedKey;
+            }
+        }
+        catch { }
+    }
+    async generateSimilarityMatrix() {
+        const allInterests = Array.from(new Set([...this.person1Interests, ...this.person2Interests])).filter(i => i && i.trim() && i.trim() !== '-');
+        if (!allInterests.length) {
+            this.matrixData = null;
+            return;
+        }
+        try {
+            const apiKey = this.getActiveOpenAIKey();
+            if (!apiKey)
+                return;
+            this.openaiEmbeddingService.getEmbeddings(allInterests, apiKey).subscribe({
+                next: (embeddings) => {
+                    if (!embeddings?.length)
+                        return;
+                    const abbreviations = {};
+                    allInterests.forEach(interest => {
+                        const words = interest.split(/[\s/-]+/);
+                        let abbr = words.length === 1 ? words[0].substring(0, 3) : words.map(w => w[0]).join('').substring(0, 3);
+                        let finalAbbr = abbr;
+                        let counter = 1;
+                        while (Object.values(abbreviations).includes(finalAbbr))
+                            finalAbbr = abbr + counter++;
+                        abbreviations[interest] = finalAbbr;
+                    });
+                    const legend = Object.entries(abbreviations).map(([full, abbr]) => ({ abbr, full }));
+                    const headers = allInterests.map(i => abbreviations[i]);
+                    const rows = allInterests.map((interest, i) => ({
+                        label: abbreviations[interest],
+                        values: allInterests.map((_, j) => this.cosineSimilarity(embeddings[i], embeddings[j]).toFixed(2))
+                    }));
+                    this.matrixData = { legend, headers, rows };
+                    this.matrixDataChange.emit(this.matrixData);
+                }
+            });
+        }
+        catch { }
+    }
+    cosineSimilarity(a, b) {
+        let dot = 0, na = 0, nb = 0;
+        for (let i = 0; i < a.length; i++) {
+            dot += a[i] * b[i];
+            na += a[i] * a[i];
+            nb += b[i] * b[i];
+        }
+        return (na === 0 || nb === 0) ? 0 : dot / (Math.sqrt(na) * Math.sqrt(nb));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileService }, { token: OpenAIEmbeddingService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", apiNinjasKey: "apiNinjasKey", faceplusKey: "faceplusKey", faceplusSecret: "faceplusSecret", openaiApiKey: "openaiApiKey", fadeAllEdges: "fadeAllEdges" }, outputs: { matrixDataChange: "matrixDataChange" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- API Quota Exhausted Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay\" *ngIf=\"showApiKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>API Quota Limit Exceeded</h2>\r\n      <button class=\"close-btn\" (click)=\"closeApiKeyModal()\" aria-label=\"Close\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <!-- Face++ modal moved outside to top-level sibling overlay -->\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The default API Ninjas key has reached its free monthly quota limit of\r\n        <strong>3,000 API calls</strong>.\r\n      </p>\r\n      <p class=\"modal-instruction\">\r\n        Please enter your own API Ninjas key below to continue using the profile\r\n        comparison features:\r\n      </p>\r\n\r\n      <div class=\"api-key-input-group\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"apiKeyInputValue\"\r\n          placeholder=\"Paste your API Ninjas key here\"\r\n          class=\"api-key-input\"\r\n          autofocus\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateApiKey()\">\r\n          Apply Key\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-hint\">\r\n        <p>\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n          </svg>\r\n          Don't have an API key? Get your free key at\r\n          <a href=\"https://api-ninjas.com/\" target=\"_blank\" rel=\"noopener\"\r\n            >api-ninjas.com</a\r\n          >\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Face++ API Credentials Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay facepp-overlay\" *ngIf=\"showFaceppKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>Face++ Credentials Required</h2>\r\n      <button\r\n        class=\"close-btn\"\r\n        (click)=\"closeFaceppKeyModal()\"\r\n        aria-label=\"Close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The Face++ API returned an authorization or rate-limit error. Please\r\n        enter your Face++ API Key and API Secret.\r\n      </p>\r\n\r\n      <div\r\n        class=\"api-key-input-group\"\r\n        style=\"flex-direction: column; align-items: stretch; gap: 10px\"\r\n      >\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"faceppKeyInputValue\"\r\n          placeholder=\"Face++ API Key\"\r\n          class=\"api-key-input\"\r\n        />\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"faceppSecretInputValue\"\r\n          placeholder=\"Face++ API Secret\"\r\n          class=\"api-key-input\"\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateFaceppCredentials()\">\r\n          Apply Face++ Credentials\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- OpenAI API Key Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay openai-overlay\" *ngIf=\"showOpenAIKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>OpenAI API Key Required</h2>\r\n      <button\r\n        class=\"close-btn\"\r\n        (click)=\"closeOpenAIKeyModal()\"\r\n        aria-label=\"Close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The OpenAI API returned an authorization or rate-limit error. Please\r\n        enter your OpenAI API key to continue using the text similarity features.\r\n      </p>\r\n      <p class=\"modal-instruction\">\r\n        Text matching now uses OpenAI embeddings (text-embedding-3-small) for improved semantic similarity.\r\n      </p>\r\n\r\n      <div class=\"api-key-input-group\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"openaiKeyInputValue\"\r\n          placeholder=\"Paste your OpenAI API key here\"\r\n          class=\"api-key-input\"\r\n          autofocus\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateOpenAIKey()\">\r\n          Apply OpenAI Key\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-hint\">\r\n        <p>\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n          </svg>\r\n          Don't have an API key? Get your free key at\r\n          <a href=\"https://platform.openai.com/api-keys\" target=\"_blank\" rel=\"noopener\"\r\n            >platform.openai.com/api-keys</a\r\n          >\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"blank-box\"></div>\r\n\r\n<div class=\"profile-screen\">\r\n  <div class=\"profile-flex\">\r\n    <div class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"shape\">\r\n    <div class=\"shape-bg\">\r\n      <img src=\"./assets/s1.svg\" alt=\"Shape\" height=\"350\" class=\"shape-bg1\" />\r\n      <img src=\"./assets/s2.svg\" alt=\"Shape\" height=\"350\" class=\"shape-bg2\" />\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!centerItem.includes(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile()\">View Profile</h2>\r\n      </div>\r\n\r\n      <div class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!centerItem.includes(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile()\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.blank-box{background-color:#000;height:20px;width:100%;position:absolute;left:0;top:26%;transform:translateY(-50%);z-index:-5}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:.5;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg img{cursor:grab}.shape-bg img:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.6;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<!-- API Quota Exhausted Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay\" *ngIf=\"showApiKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>API Quota Limit Exceeded</h2>\r\n      <button class=\"close-btn\" (click)=\"closeApiKeyModal()\" aria-label=\"Close\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n    <!-- Face++ modal moved outside to top-level sibling overlay -->\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The default API Ninjas key has reached its free monthly quota limit of\r\n        <strong>3,000 API calls</strong>.\r\n      </p>\r\n      <p class=\"modal-instruction\">\r\n        Please enter your own API Ninjas key below to continue using the profile\r\n        comparison features:\r\n      </p>\r\n\r\n      <div class=\"api-key-input-group\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"apiKeyInputValue\"\r\n          placeholder=\"Paste your API Ninjas key here\"\r\n          class=\"api-key-input\"\r\n          autofocus\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateApiKey()\">\r\n          Apply Key\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-hint\">\r\n        <p>\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n          </svg>\r\n          Don't have an API key? Get your free key at\r\n          <a href=\"https://api-ninjas.com/\" target=\"_blank\" rel=\"noopener\"\r\n            >api-ninjas.com</a\r\n          >\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Face++ API Credentials Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay facepp-overlay\" *ngIf=\"showFaceppKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>Face++ Credentials Required</h2>\r\n      <button\r\n        class=\"close-btn\"\r\n        (click)=\"closeFaceppKeyModal()\"\r\n        aria-label=\"Close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The Face++ API returned an authorization or rate-limit error. Please\r\n        enter your Face++ API Key and API Secret.\r\n      </p>\r\n\r\n      <div\r\n        class=\"api-key-input-group\"\r\n        style=\"flex-direction: column; align-items: stretch; gap: 10px\"\r\n      >\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"faceppKeyInputValue\"\r\n          placeholder=\"Face++ API Key\"\r\n          class=\"api-key-input\"\r\n        />\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"faceppSecretInputValue\"\r\n          placeholder=\"Face++ API Secret\"\r\n          class=\"api-key-input\"\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateFaceppCredentials()\">\r\n          Apply Face++ Credentials\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- OpenAI API Key Modal (Independent) -->\r\n<div class=\"api-key-modal-overlay openai-overlay\" *ngIf=\"showOpenAIKeyModal\">\r\n  <div class=\"api-key-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"api-key-modal-header\">\r\n      <div class=\"warning-icon\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"48\"\r\n          height=\"48\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <path\r\n            d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\r\n          ></path>\r\n          <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\r\n          <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\r\n        </svg>\r\n      </div>\r\n      <h2>OpenAI API Key Required</h2>\r\n      <button\r\n        class=\"close-btn\"\r\n        (click)=\"closeOpenAIKeyModal()\"\r\n        aria-label=\"Close\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        >\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"api-key-modal-body\">\r\n      <p class=\"modal-message\">\r\n        The OpenAI API returned an authorization or rate-limit error. Please\r\n        enter your OpenAI API key to continue using the text similarity features.\r\n      </p>\r\n      <p class=\"modal-instruction\">\r\n        Text matching now uses OpenAI embeddings (text-embedding-3-small) for improved semantic similarity.\r\n      </p>\r\n\r\n      <div class=\"api-key-input-group\">\r\n        <input\r\n          type=\"text\"\r\n          [(ngModel)]=\"openaiKeyInputValue\"\r\n          placeholder=\"Paste your OpenAI API key here\"\r\n          class=\"api-key-input\"\r\n          autofocus\r\n        />\r\n        <button class=\"api-key-load-btn\" (click)=\"updateOpenAIKey()\">\r\n          Apply OpenAI Key\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"modal-hint\">\r\n        <p>\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"16\"\r\n            height=\"16\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\r\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\r\n          </svg>\r\n          Don't have an API key? Get your free key at\r\n          <a href=\"https://platform.openai.com/api-keys\" target=\"_blank\" rel=\"noopener\"\r\n            >platform.openai.com/api-keys</a\r\n          >\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"blank-box\"></div>\r\n\r\n<div class=\"profile-screen\">\r\n  <div class=\"profile-flex\">\r\n    <div class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"shape\">\r\n    <div class=\"shape-bg\">\r\n      <img src=\"./assets/s1.svg\" alt=\"Shape\" height=\"350\" class=\"shape-bg1\" />\r\n      <img src=\"./assets/s2.svg\" alt=\"Shape\" height=\"350\" class=\"shape-bg2\" />\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!centerItem.includes(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile()\">View Profile</h2>\r\n      </div>\r\n\r\n      <div class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!centerItem.includes(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile()\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.blank-box{background-color:#000;height:20px;width:100%;position:absolute;left:0;top:26%;transform:translateY(-50%);z-index:-5}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:.5;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg img{cursor:grab}.shape-bg img:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.6;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"] }]
+        }], ctorParameters: () => [{ type: ProfileService }, { type: OpenAIEmbeddingService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }], propDecorators: { config: [{
+                type: Input
+            }], apiNinjasKey: [{
+                type: Input
+            }], faceplusKey: [{
+                type: Input
+            }], faceplusSecret: [{
+                type: Input
+            }], openaiApiKey: [{
+                type: Input
+            }], fadeAllEdges: [{
+                type: Input
+            }], matrixDataChange: [{
+                type: Output
+            }], leftContainer: [{
+                type: ViewChild,
+                args: ['leftContainer']
+            }], rightContainer: [{
+                type: ViewChild,
+                args: ['rightContainer']
+            }] } });
+
+class CustomInputComponent {
+    router;
+    person1Text = '';
+    person2Text = '';
+    person3Text = '';
+    user1File = null;
+    user2File = null;
+    user1Preview = null;
+    user2Preview = null;
+    saving = false;
+    error = null;
+    static MAX_WIDTH = 1600;
+    static MAX_HEIGHT = 1600;
+    static COMPRESSION_FORMAT = 'image/jpeg';
+    static QUALITY_START = 0.85;
+    static QUALITY_MIN = 0.5;
+    static QUALITY_STEP = 0.05;
+    static MAX_BYTES = 2 * 1024 * 1024;
+    static DOWNSCALE_STEP = 0.9;
+    static MIN_WIDTH = 400;
+    static MIN_HEIGHT = 400;
+    // Image compression settings (configurable)
+    // Note: Images are later stored as Data URLs in localStorage (base64 ~33% larger).
+    // If you plan to store multiple images, consider lowering maxBytes to ~1.6–1.8 MB.
+    compressionConfig = {
+        maxWidth: CustomInputComponent.MAX_WIDTH,
+        maxHeight: CustomInputComponent.MAX_HEIGHT,
+        format: CustomInputComponent.COMPRESSION_FORMAT,
+        qualityStart: CustomInputComponent.QUALITY_START,
+        qualityMin: CustomInputComponent.QUALITY_MIN,
+        qualityStep: CustomInputComponent.QUALITY_STEP,
+        maxBytes: CustomInputComponent.MAX_BYTES,
+        downscaleStep: CustomInputComponent.DOWNSCALE_STEP,
+        minWidth: CustomInputComponent.MIN_WIDTH,
+        minHeight: CustomInputComponent.MIN_HEIGHT,
+    };
+    constructor(router) {
+        this.router = router;
+    }
+    async onUser1FileChange(event) {
+        const input = event.target;
+        const file = input.files && input.files.length ? input.files[0] : null;
+        if (!file) {
+            this.user1File = null;
+            this.user1Preview = null;
+            return;
+        }
+        try {
+            const { file: compressed, dataUrl } = await firstValueFrom(this.compressImageFile(file));
+            this.user1File = compressed;
+            this.user1Preview = dataUrl;
+        }
+        catch (e) {
+            console.error('User1 image compression failed:', e);
+            // Fallback to original if compression fails
+            this.user1File = file;
+            this.previewFile(file, (dataUrl) => (this.user1Preview = dataUrl));
+        }
+    }
+    async onUser2FileChange(event) {
+        const input = event.target;
+        const file = input.files && input.files.length ? input.files[0] : null;
+        if (!file) {
+            this.user2File = null;
+            this.user2Preview = null;
+            return;
+        }
+        try {
+            const { file: compressed, dataUrl } = await firstValueFrom(this.compressImageFile(file));
+            this.user2File = compressed;
+            this.user2Preview = dataUrl;
+        }
+        catch (e) {
+            console.error('User2 image compression failed:', e);
+            // Fallback to original if compression fails
+            this.user2File = file;
+            this.previewFile(file, (dataUrl) => (this.user2Preview = dataUrl));
+        }
+    }
+    async saveAndView() {
+        this.error = null;
+        this.saving = true;
+        try {
+            const img1 = this.user1File
+                ? await firstValueFrom(this.fileToDataURL(this.user1File))
+                : this.user1Preview || '';
+            const img2 = this.user2File
+                ? await firstValueFrom(this.fileToDataURL(this.user2File))
+                : this.user2Preview || '';
+            const cfg = {
+                person1Interests: this.toList(this.person1Text),
+                person2Interests: this.toList(this.person2Text),
+                person3Interests: this.toList(this.person3Text),
+                user1Image: img1,
+                user2Image: img2,
+            };
+            localStorage.setItem('customProfileConfig', JSON.stringify(cfg));
+            // Navigate to home to render with the new config
+            await this.router.navigateByUrl('/');
+            window.location.reload();
+        }
+        catch (e) {
+            this.error = e?.message || 'Failed to save configuration';
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    clearAll() {
+        this.person1Text = '';
+        this.person2Text = '';
+        this.person3Text = '';
+        this.user1File = null;
+        this.user2File = null;
+        this.user1Preview = null;
+        this.user2Preview = null;
+        try {
+            localStorage.removeItem('customProfileConfig');
+            window.location.reload();
+        }
+        catch { }
+    }
+    // Close the overlay and return to the main view
+    close() {
+        this.router.navigateByUrl('/');
+    }
+    toList(block) {
+        return (block || '')
+            .split(/[\n,]+/)
+            .map((s) => s.trim())
+            .filter((s) => !!s);
+    }
+    fileToDataURL(file) {
+        return new Observable(observer => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                observer.next(String(reader.result));
+                observer.complete();
+            };
+            reader.onerror = (err) => observer.error(err);
+            reader.readAsDataURL(file);
+        });
+    }
+    previewFile(file, cb) {
+        if (!file) {
+            cb(null);
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => cb(String(reader.result));
+        reader.readAsDataURL(file);
+    }
+    // Compress an image file according to compressionConfig (or overrides)
+    compressImageFile(file, overrides = {}) {
+        const cfg = { ...this.compressionConfig, ...overrides };
+        return this.loadImageFromFile(file).pipe(switchMap((img) => {
+            let width = img.naturalWidth || img.width;
+            let height = img.naturalHeight || img.height;
+            // Initial fit within max dimensions
+            const scale = Math.min(cfg.maxWidth / width, cfg.maxHeight / height, 1);
+            width = Math.max(1, Math.round(width * scale));
+            height = Math.max(1, Math.round(height * scale));
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const render = (w, h) => {
+                canvas.width = w;
+                canvas.height = h;
+                ctx.clearRect(0, 0, w, h);
+                ctx.drawImage(img, 0, 0, w, h);
+            };
+            const process = (w, h, q, attempts) => {
+                render(w, h);
+                return this.canvasToBlob(canvas, cfg.format, q).pipe(switchMap((blob) => {
+                    if (blob.size > cfg.maxBytes && attempts < 25) {
+                        if (q > cfg.qualityMin + 0.005) {
+                            return process(w, h, Math.max(cfg.qualityMin, q - cfg.qualityStep), attempts + 1);
+                        }
+                        else {
+                            const nextW = Math.max(Math.round(w * cfg.downscaleStep), cfg.minWidth);
+                            const nextH = Math.max(Math.round(h * cfg.downscaleStep), cfg.minHeight);
+                            if (nextW === w && nextH === h) {
+                                return of(blob);
+                            }
+                            return process(nextW, nextH, cfg.qualityStart, attempts + 1);
+                        }
+                    }
+                    return of(blob);
+                }));
+            };
+            return process(width, height, cfg.qualityStart, 0).pipe(switchMap((finalBlob) => {
+                const newName = this.renameFileForFormat(file.name, cfg.format);
+                const compressedFile = new File([finalBlob], newName, {
+                    type: cfg.format,
+                    lastModified: Date.now(),
+                });
+                return this.blobToDataURL(finalBlob).pipe(map((dataUrl) => ({ file: compressedFile, dataUrl })));
+            }));
+        }));
+    }
+    loadImageFromFile(file) {
+        return new Observable(observer => {
+            const url = URL.createObjectURL(file);
+            const img = new Image();
+            img.onload = () => {
+                URL.revokeObjectURL(url);
+                observer.next(img);
+                observer.complete();
+            };
+            img.onerror = () => {
+                URL.revokeObjectURL(url);
+                observer.error(new Error('Failed to load image for compression'));
+            };
+            img.src = url;
+        });
+    }
+    canvasToBlob(canvas, type, quality) {
+        return new Observable(observer => {
+            if (canvas.toBlob) {
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        observer.next(blob);
+                        observer.complete();
+                    }
+                    else {
+                        observer.error(new Error('Canvas.toBlob returned null'));
+                    }
+                }, type, quality);
+            }
+            else {
+                // Fallback via DataURL
+                try {
+                    const dataUrl = canvas.toDataURL(type, quality);
+                    const base64 = dataUrl.split(',')[1] || '';
+                    const binary = atob(base64);
+                    const len = binary.length;
+                    const u8 = new Uint8Array(len);
+                    for (let i = 0; i < len; i++)
+                        u8[i] = binary.charCodeAt(i);
+                    observer.next(new Blob([u8], { type }));
+                    observer.complete();
+                }
+                catch (e) {
+                    observer.error(e);
+                }
+            }
+        });
+    }
+    blobToDataURL(blob) {
+        return new Observable(observer => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                observer.next(String(reader.result));
+                observer.complete();
+            };
+            reader.onerror = (err) => observer.error(err);
+            reader.readAsDataURL(blob);
+        });
+    }
+    renameFileForFormat(name, mime) {
+        const ext = mime === 'image/webp' ? '.webp' : mime === 'image/png' ? '.png' : '.jpg';
+        return name.replace(/\.[^/.]+$/, '') + ext;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomInputComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CustomInputComponent, isStandalone: true, selector: "lib-custom-input", ngImport: i0, template: "<div class=\"try-overlay\">\r\n  <div class=\"try-container\" (click)=\"$event.stopPropagation()\">\r\n    <header class=\"try-header\">\r\n      <h1>Try Your Own Data</h1>\r\n      <a class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\u00D7</a>\r\n    </header>\r\n    <p class=\"lead\">\r\n      Paste interests (one per line) and upload two images. Click \"Save & View\"\r\n      to preview in the main comparison view.\r\n    </p>\r\n\r\n    <section class=\"try-grid\">\r\n      <div class=\"card\">\r\n        <h2>Person 1</h2>\r\n        <div class=\"field\">\r\n          <label>Image</label>\r\n          <input\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            (change)=\"onUser1FileChange($event)\"\r\n          />\r\n          <div class=\"preview\" *ngIf=\"user1Preview\">\r\n            <img [src]=\"user1Preview\" alt=\"User 1 preview\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"field\">\r\n          <label>Interests (one per line)</label>\r\n          <textarea\r\n            [(ngModel)]=\"person1Text\"\r\n            rows=\"10\"\r\n            placeholder=\"e.g.Photography,Travel,Hiking\"\r\n          ></textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card\">\r\n        <h2>Person 2</h2>\r\n        <div class=\"field\">\r\n          <label>Image</label>\r\n          <input\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            (change)=\"onUser2FileChange($event)\"\r\n          />\r\n          <div class=\"preview\" *ngIf=\"user2Preview\">\r\n            <img [src]=\"user2Preview\" alt=\"User 2 preview\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"field\">\r\n          <label>Interests (one per line)</label>\r\n          <textarea\r\n            [(ngModel)]=\"person2Text\"\r\n            rows=\"10\"\r\n            placeholder=\"e.g.Music,Movies,Soccer\"\r\n          ></textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- <div class=\"card\">\r\n      <h2>Person 3 (Optional)</h2>\r\n      <div class=\"field\">\r\n        <label>Interests (one per line)</label>\r\n        <textarea [(ngModel)]=\"person3Text\" rows=\"10\" placeholder=\"Optional third list\"></textarea>\r\n      </div>\r\n      <div class=\"hint\">\r\n        <p>Tip: Leave this empty if you only want to compare two lists.</p>\r\n      </div>\r\n    </div> -->\r\n    </section>\r\n\r\n    <footer class=\"try-actions\">\r\n      <button class=\"btn primary\" (click)=\"saveAndView()\" [disabled]=\"saving\">\r\n        {{ saving ? \"Saving...\" : \"Save & View\" }}\r\n      </button>\r\n      <button class=\"btn\" (click)=\"clearAll()\" [disabled]=\"saving\">\r\n        Clear\r\n      </button>\r\n      <a class=\"btn link\" (click)=\"close()\">Back to Home</a>\r\n    </footer>\r\n\r\n    <p class=\"error\" *ngIf=\"error\">{{ error }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".try-overlay{position:fixed;inset:0;background:#0a0e17bf;z-index:2000;overflow:auto}.try-container{box-sizing:border-box;max-width:900px;margin:40px auto;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:24px 28px;box-shadow:0 12px 40px #00000059}.try-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.try-header h1{margin:0;font-size:22px}.close-btn{color:#94a3b8;text-decoration:none;font-size:24px;line-height:1;border:1px solid #334155;border-radius:8px;padding:2px 10px;background:#0b1220;cursor:pointer}.lead{margin:0 0 12px;color:#cbd5e1}.try-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.card{background:#0b1220;border:1px solid #334155;border-radius:12px;padding:16px;box-shadow:0 4px 12px #0000000a}.field{margin:12px 0}.field label{font-weight:600;display:block;margin-bottom:6px}.field textarea{background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:8px 10px;resize:vertical;min-height:160px}.preview{margin-top:8px}.preview img{width:100%;max-height:220px;object-fit:cover;border-radius:8px;border:1px solid #334155}.try-actions{display:flex;gap:10px;margin-top:18px;align-items:center}.btn{background:#2563eb;color:#fff;padding:8px 14px;border-radius:8px;border:none;cursor:pointer;text-decoration:none}.btn.primary{background:#2563eb;color:#fff;border-color:transparent}.btn[disabled]{opacity:.6;cursor:not-allowed}.error{color:#b91c1c;font-weight:600;margin-top:12px}.hint{color:#6b7280;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-custom-input', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"try-overlay\">\r\n  <div class=\"try-container\" (click)=\"$event.stopPropagation()\">\r\n    <header class=\"try-header\">\r\n      <h1>Try Your Own Data</h1>\r\n      <a class=\"close-btn\" (click)=\"close()\" aria-label=\"Close\">\u00D7</a>\r\n    </header>\r\n    <p class=\"lead\">\r\n      Paste interests (one per line) and upload two images. Click \"Save & View\"\r\n      to preview in the main comparison view.\r\n    </p>\r\n\r\n    <section class=\"try-grid\">\r\n      <div class=\"card\">\r\n        <h2>Person 1</h2>\r\n        <div class=\"field\">\r\n          <label>Image</label>\r\n          <input\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            (change)=\"onUser1FileChange($event)\"\r\n          />\r\n          <div class=\"preview\" *ngIf=\"user1Preview\">\r\n            <img [src]=\"user1Preview\" alt=\"User 1 preview\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"field\">\r\n          <label>Interests (one per line)</label>\r\n          <textarea\r\n            [(ngModel)]=\"person1Text\"\r\n            rows=\"10\"\r\n            placeholder=\"e.g.Photography,Travel,Hiking\"\r\n          ></textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card\">\r\n        <h2>Person 2</h2>\r\n        <div class=\"field\">\r\n          <label>Image</label>\r\n          <input\r\n            type=\"file\"\r\n            accept=\"image/*\"\r\n            (change)=\"onUser2FileChange($event)\"\r\n          />\r\n          <div class=\"preview\" *ngIf=\"user2Preview\">\r\n            <img [src]=\"user2Preview\" alt=\"User 2 preview\" />\r\n          </div>\r\n        </div>\r\n        <div class=\"field\">\r\n          <label>Interests (one per line)</label>\r\n          <textarea\r\n            [(ngModel)]=\"person2Text\"\r\n            rows=\"10\"\r\n            placeholder=\"e.g.Music,Movies,Soccer\"\r\n          ></textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- <div class=\"card\">\r\n      <h2>Person 3 (Optional)</h2>\r\n      <div class=\"field\">\r\n        <label>Interests (one per line)</label>\r\n        <textarea [(ngModel)]=\"person3Text\" rows=\"10\" placeholder=\"Optional third list\"></textarea>\r\n      </div>\r\n      <div class=\"hint\">\r\n        <p>Tip: Leave this empty if you only want to compare two lists.</p>\r\n      </div>\r\n    </div> -->\r\n    </section>\r\n\r\n    <footer class=\"try-actions\">\r\n      <button class=\"btn primary\" (click)=\"saveAndView()\" [disabled]=\"saving\">\r\n        {{ saving ? \"Saving...\" : \"Save & View\" }}\r\n      </button>\r\n      <button class=\"btn\" (click)=\"clearAll()\" [disabled]=\"saving\">\r\n        Clear\r\n      </button>\r\n      <a class=\"btn link\" (click)=\"close()\">Back to Home</a>\r\n    </footer>\r\n\r\n    <p class=\"error\" *ngIf=\"error\">{{ error }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".try-overlay{position:fixed;inset:0;background:#0a0e17bf;z-index:2000;overflow:auto}.try-container{box-sizing:border-box;max-width:900px;margin:40px auto;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:24px 28px;box-shadow:0 12px 40px #00000059}.try-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.try-header h1{margin:0;font-size:22px}.close-btn{color:#94a3b8;text-decoration:none;font-size:24px;line-height:1;border:1px solid #334155;border-radius:8px;padding:2px 10px;background:#0b1220;cursor:pointer}.lead{margin:0 0 12px;color:#cbd5e1}.try-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.card{background:#0b1220;border:1px solid #334155;border-radius:12px;padding:16px;box-shadow:0 4px 12px #0000000a}.field{margin:12px 0}.field label{font-weight:600;display:block;margin-bottom:6px}.field textarea{background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:8px 10px;resize:vertical;min-height:160px}.preview{margin-top:8px}.preview img{width:100%;max-height:220px;object-fit:cover;border-radius:8px;border:1px solid #334155}.try-actions{display:flex;gap:10px;margin-top:18px;align-items:center}.btn{background:#2563eb;color:#fff;padding:8px 14px;border-radius:8px;border:none;cursor:pointer;text-decoration:none}.btn.primary{background:#2563eb;color:#fff;border-color:transparent}.btn[disabled]{opacity:.6;cursor:not-allowed}.error{color:#b91c1c;font-weight:600;margin-top:12px}.hint{color:#6b7280;font-size:13px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }] });
+
+class DocumentationComponent {
+    openaiEmbeddingService;
+    profileService;
+    router;
+    // API key state
+    apiKeyInput = '';
+    // Embedding similarity demo
+    textA = 'football';
+    textB = 'soccer';
+    embeddingScore = null;
+    embeddingLoading = false;
+    embeddingError = null;
+    // Best matching pairs demo
+    listAInput = 'music\nphotography\ntravel\nrock climbing';
+    listBInput = 'hiking\nsoccer\nphotograph\nmovies';
+    matchingPairs = [];
+    pairsLoading = false;
+    pairsError = null;
+    // Face detect demo
+    faceFile = null;
+    faceResult = null;
+    faceLoading = false;
+    faceError = null;
+    // Text similarity via API Ninjas
+    compareA = 'football';
+    compareB = 'soccer';
+    apiSimilarity = null;
+    apiLoading = false;
+    apiError = null;
+    // OpenAI key state
+    openaiKeyInput = '';
+    defaultApiNinjasKey = '';
+    defaultOpenaiApiKey = '';
+    constructor(openaiEmbeddingService, profileService, router) {
+        this.openaiEmbeddingService = openaiEmbeddingService;
+        this.profileService = profileService;
+        this.router = router;
+    }
+    ngOnInit() {
+        // Prefill API key from env or localStorage
+        const saved = this.getStoredKey();
+        if (saved) {
+            this.apiKeyInput = saved;
+        }
+        else {
+            this.apiKeyInput = this.defaultApiNinjasKey || '';
+        }
+    }
+    // --- API Key helpers ---
+    getActiveApiKey() {
+        return this.apiKeyInput?.trim() || this.defaultApiNinjasKey;
+    }
+    saveKey() {
+        try {
+            localStorage.setItem('apiNinjasCustomKey', this.apiKeyInput.trim());
+        }
+        catch (e) {
+            console.warn('Could not persist API key', e);
+        }
+    }
+    getStoredKey() {
+        try {
+            return localStorage.getItem('apiNinjasCustomKey');
+        }
+        catch {
+            return null;
+        }
+    }
+    // --- OpenAI Key helpers ---
+    getActiveOpenAIKey() {
+        return this.openaiKeyInput?.trim() || this.defaultOpenaiApiKey;
+    }
+    saveOpenAIKey() {
+        try {
+            localStorage.setItem('openaiCustomKey', this.openaiKeyInput.trim());
+        }
+        catch (e) {
+            console.warn('Could not persist OpenAI key', e);
+        }
+    }
+    // --- Embedding similarity demo (now uses OpenAI) ---
+    runEmbeddingSimilarity() {
+        this.embeddingLoading = true;
+        this.embeddingError = null;
+        this.embeddingScore = null;
+        this.openaiEmbeddingService
+            .calculateSimilarity(this.textA, this.textB, this.getActiveOpenAIKey())
+            .subscribe({
+            next: (score) => {
+                this.embeddingScore = score;
+                this.embeddingLoading = false;
+            },
+            error: (err) => {
+                this.embeddingError = err?.message || 'Failed to compute similarity';
+                this.embeddingLoading = false;
+            },
+        });
+    }
+    // --- Best matching pairs demo ---
+    runBestPairs() {
+        const listA = this.listAInput
+            .split('\n')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        const listB = this.listBInput
+            .split('\n')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        if (listA.length === 0 || listB.length === 0) {
+            this.pairsError = 'Both lists must contain at least one item.';
+            return;
+        }
+        this.pairsLoading = true;
+        this.pairsError = null;
+        this.matchingPairs = [];
+        // Note: Best matching pairs demo is currently disabled as it's not needed for showcase functionality
+        // The OpenAI service focuses on core text similarity for the main alignment algorithm
+        this.pairsError = 'This demo is currently disabled. The showcase uses OpenAI embeddings for core text similarity.';
+        this.pairsLoading = false;
+        /* Original TensorFlow implementation:
+        this.embeddingService
+          .findBestMatchingPairs(listA, listB, 0.15)
+          .subscribe({
+            next: (pairs: IWordPair[]) => {
+              this.matchingPairs = pairs;
+              this.pairsLoading = false;
+            },
+            error: (err: Error | HttpErrorResponse) => {
+              this.pairsError = (err as Error)?.message || 'Failed to compute pairs';
+              this.pairsLoading = false;
+            },
+          });
+        */
+    }
+    // --- Face detection demo ---
+    onFaceFileChange(event) {
+        const input = event.target;
+        const file = input.files && input.files.length ? input.files[0] : null;
+        this.faceFile = file;
+    }
+    runFaceDetect() {
+        this.faceResult = null;
+        this.faceError = null;
+        if (!this.faceFile) {
+            this.faceError = 'Please choose an image file.';
+            return;
+        }
+        this.faceLoading = true;
+        this.profileService.detectFace(this.faceFile).subscribe({
+            next: (res) => {
+                this.faceResult = res;
+                this.faceLoading = false;
+            },
+            error: (err) => {
+                this.faceError = err?.error?.message || err?.message || 'Face detection failed';
+                this.faceLoading = false;
+            }
+        });
+    }
+    // --- API Ninjas text similarity demo ---
+    runApiSimilarity() {
+        this.apiSimilarity = null;
+        this.apiError = null;
+        this.apiLoading = true;
+        this.profileService
+            .compareInterests(this.compareA, this.compareB, this.getActiveApiKey())
+            .subscribe({
+            next: (res) => {
+                this.apiSimilarity = res.similarity;
+                this.apiLoading = false;
+            },
+            error: (err) => {
+                this.apiError = err?.error?.message || err?.message || 'API call failed';
+                this.apiLoading = false;
+            },
+        });
+    }
+    // --- Helper label/format methods to simplify template expressions ---
+    similarityLabel() {
+        if (this.embeddingScore === null)
+            return '';
+        return `Similarity: ${this.formatNumber(this.embeddingScore, 2, 4)}`;
+    }
+    apiSimilarityLabel() {
+        if (this.apiSimilarity === null)
+            return '';
+        return `Similarity: ${this.formatNumber(this.apiSimilarity, 2, 4)}`;
+    }
+    pairLabel(p) {
+        return `${p.wordA} ⇄ ${p.wordB} — ${this.formatNumber(p.score * 100, 1, 1)}%`;
+    }
+    faceResultJson() {
+        try {
+            return JSON.stringify(this.faceResult, null, 2);
+        }
+        catch {
+            return String(this.faceResult);
+        }
+    }
+    formatNumber(value, min = 2, max = 2) {
+        try {
+            return new Intl.NumberFormat('en-US', { minimumFractionDigits: min, maximumFractionDigits: max }).format(value);
+        }
+        catch {
+            return value.toFixed(max);
+        }
+    }
+    // --- Navigation ---
+    goHome(event) {
+        event.preventDefault();
+        this.router.navigateByUrl('/');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DocumentationComponent, deps: [{ token: OpenAIEmbeddingService }, { token: ProfileService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DocumentationComponent, isStandalone: true, selector: "lib-documentation", inputs: { defaultApiNinjasKey: "defaultApiNinjasKey", defaultOpenaiApiKey: "defaultOpenaiApiKey" }, ngImport: i0, template: "<div class=\"docs-overlay\">\r\n  <div class=\"docs-container\">\r\n    <div class=\"docs-header\">\r\n      <h1>Profile Comparison Library \u2014 Developer Docs</h1>\r\n      <a class=\"close-btn\" href=\"/\" (click)=\"goHome($event)\" aria-label=\"Close\">\u00D7</a>\r\n    </div>\r\n\r\n    <p class=\"lead\">\r\n      This page documents how to use the library services and lets you test them live inside the showcase.\r\n      Existing showcase UI remains unchanged \u2014 this is a standalone docs screen reachable from the \"Docs\" link.\r\n    </p>\r\n\r\n    <section class=\"section\">\r\n      <h2>Quickstart</h2>\r\n      <ol>\r\n        <li><strong>Build the library</strong>: run <code>ng build profile-comparison-lib</code>.</li>\r\n        <li><strong>Import</strong>: <code>import &#123; ProfileComparisonLibModule, EmbeddingService, ProfileService &#125; from 'profile-comparison-lib';</code></li>\r\n        <li><strong>Provide HttpClient</strong>: ensure <code>HttpClientModule</code> is imported in your app module.</li>\r\n        <li><strong>API Key</strong>: for text similarity/face detect APIs, pass an API Ninjas key.</li>\r\n        <li><strong>Run Showcase</strong>: <code>ng serve showcase</code> (or <code>npm run serve:showcase</code>), then open <code>/docs</code>.</li>\r\n      </ol>\r\n      <p>\r\n        Full README is in <code>README.md</code> at the repository root.\r\n      </p>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Set API Key</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"apiKeyInput\" placeholder=\"API Ninjas Key\" />\r\n        <button (click)=\"saveKey()\">Save</button>\r\n      </div>\r\n      <p class=\"hint\">Your key is stored in localStorage. Provide a valid key; rate limits apply.</p>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Embedding Similarity (TensorFlow.js)</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"textA\" placeholder=\"Text A\" />\r\n        <input type=\"text\" [(ngModel)]=\"textB\" placeholder=\"Text B\" />\r\n        <button (click)=\"runEmbeddingSimilarity()\" [disabled]=\"embeddingLoading\">Run</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"embeddingLoading\">Computing\u2026</div>\r\n      <div class=\"result\" *ngIf=\"embeddingError\" [textContent]=\"'Error: ' + embeddingError\"></div>\r\n      <div class=\"result\" *ngIf=\"embeddingScore !== null\" [textContent]=\"similarityLabel()\"></div>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>constructor(private embedding: EmbeddingService) &#123;&#125;\r\nthis.embedding.calculateSimilarity('football','soccer')\r\n  .subscribe(score =&gt; console.log(score));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Best Matching Pairs</h2>\r\n      <div class=\"cols\">\r\n        <textarea [(ngModel)]=\"listAInput\" rows=\"6\" spellcheck=\"false\"></textarea>\r\n        <textarea [(ngModel)]=\"listBInput\" rows=\"6\" spellcheck=\"false\"></textarea>\r\n      </div>\r\n      <button class=\"spaced-btn\" (click)=\"runBestPairs()\" [disabled]=\"pairsLoading\">Find Pairs</button>\r\n      <div class=\"result\" *ngIf=\"pairsLoading\">Processing\u2026</div>\r\n      <div class=\"result\" *ngIf=\"pairsError\" [textContent]=\"'Error: ' + pairsError\"></div>\r\n      <ul class=\"pairs\" *ngIf=\"!pairsLoading && matchingPairs.length\">\r\n        <li *ngFor=\"let p of matchingPairs\" [textContent]=\"pairLabel(p)\"></li>\r\n      </ul>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>this.embedding.findBestMatchingPairs(listA, listB, 0.15)\r\n  .subscribe(pairs =&gt; console.log(pairs));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>API Ninjas: Text Similarity</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"compareA\" placeholder=\"Text A\" />\r\n        <input type=\"text\" [(ngModel)]=\"compareB\" placeholder=\"Text B\" />\r\n        <button (click)=\"runApiSimilarity()\" [disabled]=\"apiLoading\">Compare</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"apiLoading\">Calling API\u2026</div>\r\n      <div class=\"result\" *ngIf=\"apiError\" [textContent]=\"'Error: ' + apiError\"></div>\r\n      <div class=\"result\" *ngIf=\"apiSimilarity !== null\" [textContent]=\"apiSimilarityLabel()\"></div>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre><code>this.profileService.compareInterests(a, b, apiKey)\r\n  .subscribe((res: &#123; similarity: number &#125;) =&gt; console.log(res.similarity));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Face Detection</h2>\r\n      <div class=\"row\">\r\n        <input type=\"file\" (change)=\"onFaceFileChange($event)\" accept=\"image/*\" />\r\n        <button (click)=\"runFaceDetect()\" [disabled]=\"faceLoading\">Detect Face</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"faceLoading\">Calling API\u2026</div>\r\n      <div class=\"result\" *ngIf=\"faceError\" [textContent]=\"'Error: ' + faceError\"></div>\r\n      <pre class=\"result\" *ngIf=\"!faceLoading && faceResult\" [textContent]=\"faceResultJson()\"></pre>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>this.profileService.detectFace(file, apiKey)\r\n  .subscribe(res =&gt; console.log(res));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Module Import</h2>\r\n      <pre ngNonBindable><code>import &#123; HttpClientModule &#125; from '@angular/common/http';\r\nimport &#123; ProfileComparisonLibModule &#125; from 'profile-comparison-lib';\r\n\r\n@NgModule(&#123;\r\n  imports: [HttpClientModule, ProfileComparisonLibModule]\r\n&#125;)\r\nexport class AppModule &#123;&#125;</code></pre>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Services Overview</h2>\r\n      <ul>\r\n        <li><strong>EmbeddingService</strong>: <code>calculateSimilarity(textA, textB)</code>, <code>findBestMatchingPairs(listA, listB, threshold?)</code></li>\r\n        <li><strong>ProfileService</strong>: <code>compareInterests(a, b, apiKey)</code>, <code>detectFace(file, apiKey)</code></li>\r\n      </ul>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Exports</h2>\r\n      <ul>\r\n        <li><code>ProfileComparisonLibModule</code></li>\r\n        <li><code>EmbeddingService</code></li>\r\n        <li><code>ProfileService</code></li>\r\n        <li><code>WordPair</code> (interface)</li>\r\n        <li><code>WordAlignment</code> (interface)</li>\r\n      </ul>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Troubleshooting</h2>\r\n      <ul>\r\n        <li><strong>API key/Quota</strong>: If calls fail, verify the API key and check rate limits.</li>\r\n        <li><strong>Network</strong>: Ensure CORS and network connectivity are OK.</li>\r\n        <li><strong>Build</strong>: Run <code>ng build profile-comparison-lib</code> after library changes.</li>\r\n      </ul>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: [".docs-overlay{position:fixed;inset:0;background:#0a0e17bf;z-index:2000;overflow:auto}.docs-container{box-sizing:border-box;max-width:900px;margin:40px auto;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:24px 28px;box-shadow:0 12px 40px #00000059}.docs-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.docs-header h1{margin:0;font-size:22px}.close-btn{color:#94a3b8;text-decoration:none;font-size:24px;line-height:1;border:1px solid #334155;border-radius:8px;padding:2px 10px;background:#0b1220}.lead{margin:0 0 12px;color:#cbd5e1}.section{border:1px solid #334155;border-radius:10px;padding:16px;margin:14px 0;background:#0b1220}.section h2{margin:0 0 12px;font-size:18px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row input[type=text],.row input[type=file],textarea{flex:1 1 280px;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:8px 10px}textarea{min-height:100px}button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}.result{margin-top:8px;color:#cbd5e1}.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pairs{margin:10px 0 0;padding-left:18px}.hint{color:#94a3b8;margin-top:4px;font-size:12px}.spaced-btn{margin-top:10px;margin-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DocumentationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-documentation', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"docs-overlay\">\r\n  <div class=\"docs-container\">\r\n    <div class=\"docs-header\">\r\n      <h1>Profile Comparison Library \u2014 Developer Docs</h1>\r\n      <a class=\"close-btn\" href=\"/\" (click)=\"goHome($event)\" aria-label=\"Close\">\u00D7</a>\r\n    </div>\r\n\r\n    <p class=\"lead\">\r\n      This page documents how to use the library services and lets you test them live inside the showcase.\r\n      Existing showcase UI remains unchanged \u2014 this is a standalone docs screen reachable from the \"Docs\" link.\r\n    </p>\r\n\r\n    <section class=\"section\">\r\n      <h2>Quickstart</h2>\r\n      <ol>\r\n        <li><strong>Build the library</strong>: run <code>ng build profile-comparison-lib</code>.</li>\r\n        <li><strong>Import</strong>: <code>import &#123; ProfileComparisonLibModule, EmbeddingService, ProfileService &#125; from 'profile-comparison-lib';</code></li>\r\n        <li><strong>Provide HttpClient</strong>: ensure <code>HttpClientModule</code> is imported in your app module.</li>\r\n        <li><strong>API Key</strong>: for text similarity/face detect APIs, pass an API Ninjas key.</li>\r\n        <li><strong>Run Showcase</strong>: <code>ng serve showcase</code> (or <code>npm run serve:showcase</code>), then open <code>/docs</code>.</li>\r\n      </ol>\r\n      <p>\r\n        Full README is in <code>README.md</code> at the repository root.\r\n      </p>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Set API Key</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"apiKeyInput\" placeholder=\"API Ninjas Key\" />\r\n        <button (click)=\"saveKey()\">Save</button>\r\n      </div>\r\n      <p class=\"hint\">Your key is stored in localStorage. Provide a valid key; rate limits apply.</p>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Embedding Similarity (TensorFlow.js)</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"textA\" placeholder=\"Text A\" />\r\n        <input type=\"text\" [(ngModel)]=\"textB\" placeholder=\"Text B\" />\r\n        <button (click)=\"runEmbeddingSimilarity()\" [disabled]=\"embeddingLoading\">Run</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"embeddingLoading\">Computing\u2026</div>\r\n      <div class=\"result\" *ngIf=\"embeddingError\" [textContent]=\"'Error: ' + embeddingError\"></div>\r\n      <div class=\"result\" *ngIf=\"embeddingScore !== null\" [textContent]=\"similarityLabel()\"></div>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>constructor(private embedding: EmbeddingService) &#123;&#125;\r\nthis.embedding.calculateSimilarity('football','soccer')\r\n  .subscribe(score =&gt; console.log(score));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Best Matching Pairs</h2>\r\n      <div class=\"cols\">\r\n        <textarea [(ngModel)]=\"listAInput\" rows=\"6\" spellcheck=\"false\"></textarea>\r\n        <textarea [(ngModel)]=\"listBInput\" rows=\"6\" spellcheck=\"false\"></textarea>\r\n      </div>\r\n      <button class=\"spaced-btn\" (click)=\"runBestPairs()\" [disabled]=\"pairsLoading\">Find Pairs</button>\r\n      <div class=\"result\" *ngIf=\"pairsLoading\">Processing\u2026</div>\r\n      <div class=\"result\" *ngIf=\"pairsError\" [textContent]=\"'Error: ' + pairsError\"></div>\r\n      <ul class=\"pairs\" *ngIf=\"!pairsLoading && matchingPairs.length\">\r\n        <li *ngFor=\"let p of matchingPairs\" [textContent]=\"pairLabel(p)\"></li>\r\n      </ul>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>this.embedding.findBestMatchingPairs(listA, listB, 0.15)\r\n  .subscribe(pairs =&gt; console.log(pairs));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>API Ninjas: Text Similarity</h2>\r\n      <div class=\"row\">\r\n        <input type=\"text\" [(ngModel)]=\"compareA\" placeholder=\"Text A\" />\r\n        <input type=\"text\" [(ngModel)]=\"compareB\" placeholder=\"Text B\" />\r\n        <button (click)=\"runApiSimilarity()\" [disabled]=\"apiLoading\">Compare</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"apiLoading\">Calling API\u2026</div>\r\n      <div class=\"result\" *ngIf=\"apiError\" [textContent]=\"'Error: ' + apiError\"></div>\r\n      <div class=\"result\" *ngIf=\"apiSimilarity !== null\" [textContent]=\"apiSimilarityLabel()\"></div>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre><code>this.profileService.compareInterests(a, b, apiKey)\r\n  .subscribe((res: &#123; similarity: number &#125;) =&gt; console.log(res.similarity));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Face Detection</h2>\r\n      <div class=\"row\">\r\n        <input type=\"file\" (change)=\"onFaceFileChange($event)\" accept=\"image/*\" />\r\n        <button (click)=\"runFaceDetect()\" [disabled]=\"faceLoading\">Detect Face</button>\r\n      </div>\r\n      <div class=\"result\" *ngIf=\"faceLoading\">Calling API\u2026</div>\r\n      <div class=\"result\" *ngIf=\"faceError\" [textContent]=\"'Error: ' + faceError\"></div>\r\n      <pre class=\"result\" *ngIf=\"!faceLoading && faceResult\" [textContent]=\"faceResultJson()\"></pre>\r\n      <details>\r\n        <summary>Usage</summary>\r\n        <pre ngNonBindable><code>this.profileService.detectFace(file, apiKey)\r\n  .subscribe(res =&gt; console.log(res));</code></pre>\r\n      </details>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Module Import</h2>\r\n      <pre ngNonBindable><code>import &#123; HttpClientModule &#125; from '@angular/common/http';\r\nimport &#123; ProfileComparisonLibModule &#125; from 'profile-comparison-lib';\r\n\r\n@NgModule(&#123;\r\n  imports: [HttpClientModule, ProfileComparisonLibModule]\r\n&#125;)\r\nexport class AppModule &#123;&#125;</code></pre>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Services Overview</h2>\r\n      <ul>\r\n        <li><strong>EmbeddingService</strong>: <code>calculateSimilarity(textA, textB)</code>, <code>findBestMatchingPairs(listA, listB, threshold?)</code></li>\r\n        <li><strong>ProfileService</strong>: <code>compareInterests(a, b, apiKey)</code>, <code>detectFace(file, apiKey)</code></li>\r\n      </ul>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Exports</h2>\r\n      <ul>\r\n        <li><code>ProfileComparisonLibModule</code></li>\r\n        <li><code>EmbeddingService</code></li>\r\n        <li><code>ProfileService</code></li>\r\n        <li><code>WordPair</code> (interface)</li>\r\n        <li><code>WordAlignment</code> (interface)</li>\r\n      </ul>\r\n    </section>\r\n\r\n    <section class=\"section\">\r\n      <h2>Troubleshooting</h2>\r\n      <ul>\r\n        <li><strong>API key/Quota</strong>: If calls fail, verify the API key and check rate limits.</li>\r\n        <li><strong>Network</strong>: Ensure CORS and network connectivity are OK.</li>\r\n        <li><strong>Build</strong>: Run <code>ng build profile-comparison-lib</code> after library changes.</li>\r\n      </ul>\r\n    </section>\r\n  </div>\r\n</div>\r\n", styles: [".docs-overlay{position:fixed;inset:0;background:#0a0e17bf;z-index:2000;overflow:auto}.docs-container{box-sizing:border-box;max-width:900px;margin:40px auto;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:24px 28px;box-shadow:0 12px 40px #00000059}.docs-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.docs-header h1{margin:0;font-size:22px}.close-btn{color:#94a3b8;text-decoration:none;font-size:24px;line-height:1;border:1px solid #334155;border-radius:8px;padding:2px 10px;background:#0b1220}.lead{margin:0 0 12px;color:#cbd5e1}.section{border:1px solid #334155;border-radius:10px;padding:16px;margin:14px 0;background:#0b1220}.section h2{margin:0 0 12px;font-size:18px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row input[type=text],.row input[type=file],textarea{flex:1 1 280px;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:8px 10px}textarea{min-height:100px}button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}.result{margin-top:8px;color:#cbd5e1}.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pairs{margin:10px 0 0;padding-left:18px}.hint{color:#94a3b8;margin-top:4px;font-size:12px}.spaced-btn{margin-top:10px;margin-bottom:10px}\n"] }]
+        }], ctorParameters: () => [{ type: OpenAIEmbeddingService }, { type: ProfileService }, { type: i1$1.Router }], propDecorators: { defaultApiNinjasKey: [{
+                type: Input
+            }], defaultOpenaiApiKey: [{
+                type: Input
+            }] } });
+
+class ProfileComparisonLibModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
+            HttpClientModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CustomInputComponent,
+            DocumentationComponent,
+            RouterModule], exports: [ProfileComparisonLibComponent,
+            CustomInputComponent,
+            DocumentationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, providers: [
+            ProfileService,
+            EmbeddingService,
+            OpenAIEmbeddingService
+        ], imports: [CommonModule,
+            HttpClientModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CustomInputComponent,
+            DocumentationComponent,
+            RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProfileComparisonLibComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CustomInputComponent,
+                        DocumentationComponent,
+                        RouterModule
+                    ],
+                    exports: [
+                        ProfileComparisonLibComponent,
+                        CustomInputComponent,
+                        DocumentationComponent
+                    ],
+                    providers: [
+                        ProfileService,
+                        EmbeddingService,
+                        OpenAIEmbeddingService
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of profile-comparison-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomInputComponent, DocumentationComponent, EmbeddingService, FileConversionService, ImageCompressionService, OpenAIEmbeddingService, ProfileComparisonLibComponent, ProfileComparisonLibModule, ProfileComparisonLibService, ProfileService };
+//# sourceMappingURL=naniteninja-profile-comparison-lib.mjs.map