@naniteninja/profile-comparison-lib 0.0.1 → 1.0.0

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

@@ -1,17 +1,184 @@
 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 { InjectionToken, Injectable, Optional, Inject, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { switchMap, map, catchError, shareReplay, tap as tap$1 } from 'rxjs/operators';
+import { from, throwError, of, forkJoin, defer, switchMap as switchMap$1, map as map$1, Observable, BehaviorSubject, tap, retryWhen, concatMap, timer, catchError as catchError$1 } from 'rxjs';
 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';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+/**
+ * When provided, ProfileService and OpenAIEmbeddingService call this backend base URL
+ * (e.g. 'http://localhost:3000/api') for all profile/embedding endpoints instead of
+ * calling external APIs directly with keys. Can be a string or a getter function for runtime toggle.
+ * When not provided or getter returns null, the lib uses the direct path with keys.
+ */
+const PROFILE_COMPARISON_API_BASE_URL = new InjectionToken('PROFILE_COMPARISON_API_BASE_URL');
+/** Optional getter: when true, lib and backend service log steps to console for diagnosis. */
+const PROFILE_COMPARISON_VERBOSE_LOGGING = new InjectionToken('PROFILE_COMPARISON_VERBOSE_LOGGING');
+
+const DB_NAME = 'profile-comparison-cache';
+const DB_VERSION = 1;
+const STORE_OPENAI_SPACER = 'openai-spacer';
+const STORE_OPENAI_ALIGNMENT = 'openai-alignment';
+const STORE_OPENAI_SIMILARITY = 'openai-similarity';
+const STORE_OPENAI_EMBEDDINGS = 'openai-embeddings';
+const STORE_PROFILE_FACE = 'profile-face';
+const STORE_PROFILE_COMPARE = 'profile-compare';
+const STORE_NAMES = [
+    STORE_OPENAI_SPACER,
+    STORE_OPENAI_ALIGNMENT,
+    STORE_OPENAI_SIMILARITY,
+    STORE_OPENAI_EMBEDDINGS,
+    STORE_PROFILE_FACE,
+    STORE_PROFILE_COMPARE
+];
+/**
+ * Persists cache entries to IndexedDB per device (mobile-friendly).
+ * No-op when IndexedDB is unavailable (e.g. SSR, private mode on some browsers).
+ */
+class CachePersistenceService {
+    db = null;
+    openPromise = null;
+    openDb() {
+        if (typeof indexedDB === 'undefined')
+            return Promise.resolve(null);
+        if (this.db)
+            return Promise.resolve(this.db);
+        if (this.openPromise)
+            return this.openPromise;
+        this.openPromise = new Promise((resolve) => {
+            try {
+                const req = indexedDB.open(DB_NAME, DB_VERSION);
+                req.onerror = () => resolve(null);
+                req.onsuccess = () => {
+                    this.db = req.result;
+                    resolve(this.db);
+                };
+                req.onupgradeneeded = (e) => {
+                    const db = e.target.result;
+                    STORE_NAMES.forEach((name) => {
+                        if (!db.objectStoreNames.contains(name))
+                            db.createObjectStore(name);
+                    });
+                };
+            }
+            catch {
+                resolve(null);
+            }
+        });
+        return this.openPromise;
+    }
+    getStore(storeName, mode = 'readonly') {
+        return this.openDb().then((db) => {
+            if (!db)
+                return null;
+            try {
+                return db.transaction(storeName, mode).objectStore(storeName);
+            }
+            catch {
+                return null;
+            }
+        });
+    }
+    get(storeName, key) {
+        return this.openDb().then((db) => {
+            if (!db)
+                return undefined;
+            return new Promise((resolve) => {
+                try {
+                    const tx = db.transaction(storeName, 'readonly');
+                    const store = tx.objectStore(storeName);
+                    const req = store.get(key);
+                    req.onsuccess = () => resolve(req.result ?? undefined);
+                    req.onerror = () => resolve(undefined);
+                }
+                catch {
+                    resolve(undefined);
+                }
+            });
+        });
+    }
+    set(storeName, key, value) {
+        return this.openDb().then((db) => {
+            if (!db)
+                return;
+            return new Promise((resolve) => {
+                try {
+                    const tx = db.transaction(storeName, 'readwrite');
+                    const store = tx.objectStore(storeName);
+                    store.put(value, key);
+                    tx.oncomplete = () => resolve();
+                    tx.onerror = () => resolve();
+                }
+                catch {
+                    resolve();
+                }
+            });
+        });
+    }
+    getAll(storeName) {
+        return this.openDb().then((db) => {
+            if (!db)
+                return [];
+            return new Promise((resolve) => {
+                try {
+                    const tx = db.transaction(storeName, 'readonly');
+                    const store = tx.objectStore(storeName);
+                    const req = store.openCursor();
+                    const entries = [];
+                    req.onsuccess = () => {
+                        const cursor = req.result;
+                        if (cursor) {
+                            entries.push([cursor.key, cursor.value]);
+                            cursor.continue();
+                        }
+                        else {
+                            resolve(entries);
+                        }
+                    };
+                    req.onerror = () => resolve([]);
+                }
+                catch {
+                    resolve([]);
+                }
+            });
+        });
+    }
+    clear(storeName) {
+        return this.openDb().then((db) => {
+            if (!db)
+                return;
+            const stores = storeName ? [storeName] : [...STORE_NAMES];
+            return Promise.all(stores.map((s) => new Promise((resolve) => {
+                try {
+                    const tx = db.transaction(s, 'readwrite');
+                    tx.objectStore(s).clear();
+                    tx.oncomplete = () => resolve();
+                    tx.onerror = () => resolve();
+                }
+                catch {
+                    resolve();
+                }
+            }))).then(() => undefined);
+        });
+    }
+    static STORE_OPENAI_SPACER = STORE_OPENAI_SPACER;
+    static STORE_OPENAI_ALIGNMENT = STORE_OPENAI_ALIGNMENT;
+    static STORE_OPENAI_SIMILARITY = STORE_OPENAI_SIMILARITY;
+    static STORE_OPENAI_EMBEDDINGS = STORE_OPENAI_EMBEDDINGS;
+    static STORE_PROFILE_FACE = STORE_PROFILE_FACE;
+    static STORE_PROFILE_COMPARE = STORE_PROFILE_COMPARE;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CachePersistenceService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class EmbeddingService {
     model$ = null;
@@ -964,6 +1131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 class OpenAIEmbeddingService {
     http;
+    apiBaseUrl;
+    persistence;
     static API_URL = 'https://api.openai.com/v1/chat/completions';
     static MODEL = 'gpt-4o';
     static HEADER_CONTENT_TYPE = 'Content-Type';
@@ -981,8 +1150,73 @@ class OpenAIEmbeddingService {
     alignmentCache = new Map();
     // Cache for new spacer-based alignment
     spacerAlignmentCache = new Map();
-    constructor(http) {
+    // Cache for similarity (textA, textB) -> score
+    similarityCache = new Map();
+    // Cache for embeddings: JSON.stringify(texts) -> number[][]
+    embeddingsCache = new Map();
+    spacerLoaded = false;
+    alignmentLoaded = false;
+    similarityLoaded = false;
+    embeddingsLoaded = false;
+    spacerLoadPromise = null;
+    alignmentLoadPromise = null;
+    similarityLoadPromise = null;
+    embeddingsLoadPromise = null;
+    rawResponse$ = new BehaviorSubject('');
+    constructor(http, apiBaseUrl, persistence) {
         this.http = http;
+        this.apiBaseUrl = apiBaseUrl;
+        this.persistence = persistence;
+    }
+    loadSpacerCache() {
+        if (this.spacerLoaded)
+            return Promise.resolve();
+        if (!this.spacerLoadPromise) {
+            this.spacerLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_OPENAI_SPACER).then((entries) => {
+                entries.forEach(([k, v]) => this.spacerAlignmentCache.set(k, v));
+                this.spacerLoaded = true;
+            });
+        }
+        return this.spacerLoadPromise;
+    }
+    loadAlignmentCache() {
+        if (this.alignmentLoaded)
+            return Promise.resolve();
+        if (!this.alignmentLoadPromise) {
+            this.alignmentLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_OPENAI_ALIGNMENT).then((entries) => {
+                entries.forEach(([k, v]) => this.alignmentCache.set(k, v));
+                this.alignmentLoaded = true;
+            });
+        }
+        return this.alignmentLoadPromise;
+    }
+    loadSimilarityCache() {
+        if (this.similarityLoaded)
+            return Promise.resolve();
+        if (!this.similarityLoadPromise) {
+            this.similarityLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_OPENAI_SIMILARITY).then((entries) => {
+                entries.forEach(([k, v]) => this.similarityCache.set(k, v));
+                this.similarityLoaded = true;
+            });
+        }
+        return this.similarityLoadPromise;
+    }
+    loadEmbeddingsCache() {
+        if (this.embeddingsLoaded)
+            return Promise.resolve();
+        if (!this.embeddingsLoadPromise) {
+            this.embeddingsLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_OPENAI_EMBEDDINGS).then((entries) => {
+                entries.forEach(([k, v]) => this.embeddingsCache.set(k, v));
+                this.embeddingsLoaded = true;
+            });
+        }
+        return this.embeddingsLoadPromise;
+    }
+    getBaseUrl() {
+        const u = this.apiBaseUrl;
+        if (u == null)
+            return null;
+        return typeof u === 'function' ? u() : u;
     }
     /**
      * Get aligned lists with spacers.
@@ -993,127 +1227,130 @@ class OpenAIEmbeddingService {
         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));
-        }
+        return from(this.loadSpacerCache()).pipe(switchMap(() => {
+            if (this.spacerAlignmentCache.has(key)) {
+                console.log('Alignment cache hit');
+                return of(this.spacerAlignmentCache.get(key));
+            }
+            const base = this.getBaseUrl();
+            if (base) {
+                const url = `${base.replace(/\/$/, '')}/profile/align-lists`;
+                return this.http
+                    .post(url, { listA: validA, listB: validB }, {
+                    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                })
+                    .pipe(map((result) => {
+                    const finalResult = { listA: result.listA || [], listB: result.listB || [] };
+                    this.spacerAlignmentCache.set(key, finalResult);
+                    this.persistence.set(CachePersistenceService.STORE_OPENAI_SPACER, key, finalResult);
+                    if (result.listA?.length && result.listB?.length) {
+                        this.rawResponse$.next(JSON.stringify(result));
+                    }
+                    return finalResult;
+                }), catchError((error) => {
+                    console.error('Backend align-lists error:', error);
+                    return of({ listA: [], listB: [] });
+                }));
+            }
+            return this.requestAlignedListsDirect(validA, validB, key, apiKey);
+        }));
+    }
+    requestAlignedListsDirect(validA, validB, key, apiKey) {
         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 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.
+        - **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!
+    16. Do not insert any new, inferred, or related words. Each pair must be created strictly from the existing list items only.
+
+    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,
@@ -1128,6 +1365,10 @@ class OpenAIEmbeddingService {
         return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
             try {
                 const content = response.choices[0].message.content;
+                console.log('OpenAI LLM Output (getAlignedLists):', content);
+                if (content) {
+                    this.rawResponse$.next(content);
+                }
                 const result = JSON.parse(content);
                 // Handle both "listA/listB" format and "alignment" array format
                 if (result.alignment && Array.isArray(result.alignment)) {
@@ -1164,6 +1405,7 @@ class OpenAIEmbeddingService {
                 const sanitized = this.sanitizeResponse(result.listA, result.listB, validA, validB);
                 const finalResult = { listA: sanitized.listA, listB: sanitized.listB };
                 this.spacerAlignmentCache.set(key, finalResult);
+                this.persistence.set(CachePersistenceService.STORE_OPENAI_SPACER, key, finalResult);
                 return finalResult;
             }
             catch (e) {
@@ -1276,67 +1518,66 @@ class OpenAIEmbeddingService {
         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
+        return from(this.loadAlignmentCache()).pipe(switchMap(() => {
+            if (this.alignmentCache.has(keyDirect)) {
+                console.log('Alignment cache hit (Direct)');
+                return of(this.alignmentCache.get(keyDirect).rows);
+            }
+            if (this.alignmentCache.has(keyReverse)) {
+                console.log('Alignment cache hit (Reverse) - Swapping results');
+                const cached = this.alignmentCache.get(keyReverse);
+                const swappedRows = cached.rows.map(row => ({
+                    left: row.right,
+                    right: row.left,
+                    score: row.score
+                }));
+                return of(swappedRows);
+            }
+            return this.requestGroupAlignLists(validA, validB, listA, listB, keyDirect, apiKey);
+        }));
+    }
+    requestGroupAlignLists(validA, validB, listA, listB, keyDirect, apiKey) {
         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 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,
@@ -1351,6 +1592,10 @@ class OpenAIEmbeddingService {
         return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
             try {
                 const content = response.choices[0].message.content;
+                console.log('OpenAI LLM Output (groupAlignLists):', content);
+                if (content) {
+                    this.rawResponse$.next(content);
+                }
                 const result = JSON.parse(content);
                 if (!result.alignment || !Array.isArray(result.alignment)) {
                     throw new Error('Invalid JSON structure from OpenAI');
@@ -1497,11 +1742,9 @@ class OpenAIEmbeddingService {
                     }
                     finalRowsClean.push(row);
                 });
-                this.alignmentCache.set(cacheKey, {
-                    originalA: validA,
-                    originalB: validB,
-                    rows: finalRowsClean
-                });
+                const cacheEntry = { originalA: validA, originalB: validB, rows: finalRowsClean };
+                this.alignmentCache.set(cacheKey, cacheEntry);
+                this.persistence.set(CachePersistenceService.STORE_OPENAI_ALIGNMENT, cacheKey, cacheEntry);
                 return finalRowsClean;
             }
             catch (e) {
@@ -1523,29 +1766,55 @@ class OpenAIEmbeddingService {
         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 simKey = [a, b].sort().join('\0');
+        return from(this.loadSimilarityCache()).pipe(switchMap(() => {
+            if (this.similarityCache.has(simKey)) {
+                return of(this.similarityCache.get(simKey));
             }
-            const v1 = data[0]?.embedding;
-            const v2 = data[1]?.embedding;
-            if (!v1 || !v2) {
-                throw new Error('Embeddings not present in OpenAI response');
+            const base = this.getBaseUrl();
+            if (base) {
+                const url = `${base.replace(/\/$/, '')}/profile/calculate-similarity`;
+                return this.http
+                    .post(url, { textA: a, textB: b }, {
+                    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                })
+                    .pipe(map((res) => {
+                    const similarity = res.similarity ?? 0;
+                    this.similarityCache.set(simKey, similarity);
+                    this.persistence.set(CachePersistenceService.STORE_OPENAI_SIMILARITY, simKey, similarity);
+                    return similarity;
+                }), catchError((error) => {
+                    const msg = (error?.error && (error.error.error?.message || error.error.message)) || error?.message || 'Backend calculate-similarity failed';
+                    return throwError(() => new Error(msg));
+                }));
             }
-            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));
+            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');
+                }
+                const similarity = this.cosineSimilarityVectors(v1, v2);
+                this.similarityCache.set(simKey, similarity);
+                this.persistence.set(CachePersistenceService.STORE_OPENAI_SIMILARITY, simKey, similarity);
+                return similarity;
+            }), catchError((error) => {
+                const msg = (error?.error && (error.error.error?.message || error.error.message)) || error?.message || 'OpenAI embeddings request failed';
+                return throwError(() => new Error(msg));
+            }));
         }));
     }
     /**
@@ -1554,24 +1823,50 @@ class OpenAIEmbeddingService {
     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');
+        const embKey = JSON.stringify(texts);
+        return from(this.loadEmbeddingsCache()).pipe(switchMap(() => {
+            if (this.embeddingsCache.has(embKey)) {
+                return of(this.embeddingsCache.get(embKey));
             }
-            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));
+            const base = this.getBaseUrl();
+            if (base) {
+                const url = `${base.replace(/\/$/, '')}/profile/embeddings`;
+                return this.http
+                    .post(url, { input: texts }, {
+                    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                })
+                    .pipe(map((res) => {
+                    const result = (res.data || []).map((item) => item.embedding || []);
+                    this.embeddingsCache.set(embKey, result);
+                    this.persistence.set(CachePersistenceService.STORE_OPENAI_EMBEDDINGS, embKey, result);
+                    return result;
+                }), catchError((error) => {
+                    const msg = (error?.error && (error.error.error?.message || error.error.message)) || error?.message || 'Backend embeddings failed';
+                    return throwError(() => new Error(msg));
+                }));
+            }
+            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');
+                }
+                const result = data.map((item) => item.embedding);
+                this.embeddingsCache.set(embKey, result);
+                this.persistence.set(CachePersistenceService.STORE_OPENAI_EMBEDDINGS, embKey, result);
+                return result;
+            }), 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
@@ -1594,8 +1889,14 @@ class OpenAIEmbeddingService {
     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 });
+        this.similarityCache.clear();
+        this.embeddingsCache.clear();
+        this.persistence.clear(CachePersistenceService.STORE_OPENAI_SPACER);
+        this.persistence.clear(CachePersistenceService.STORE_OPENAI_ALIGNMENT);
+        this.persistence.clear(CachePersistenceService.STORE_OPENAI_SIMILARITY);
+        this.persistence.clear(CachePersistenceService.STORE_OPENAI_EMBEDDINGS);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], 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: [{
@@ -1603,7 +1904,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROFILE_COMPARISON_API_BASE_URL]
+                }] }, { type: CachePersistenceService }] });
 
 class ProfileComparisonLibService {
     constructor() { }
@@ -1635,7 +1941,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], 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";
@@ -1653,28 +1958,154 @@ var FacePlusPlusErrorTypes;
 })(FacePlusPlusErrorTypes || (FacePlusPlusErrorTypes = {}));
 class ProfileService {
     http;
+    apiBaseUrl;
+    persistence;
     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) {
+    faceCache = new Map();
+    compareInterestsCache = new Map();
+    faceLoaded = false;
+    compareLoaded = false;
+    faceLoadPromise = null;
+    compareLoadPromise = null;
+    /** Content-based cache key: hash long strings/data URLs so same content yields same key and we avoid huge keys. */
+    static faceCacheKey(key) {
+        if (key == null || key === '')
+            return undefined;
+        const toHash = key.startsWith('data:') && key.includes(',')
+            ? (key.split(',')[1] ?? key)
+            : key;
+        if (toHash.length > 500 || key.length > 2000) {
+            let h = 5381;
+            for (let i = 0; i < toHash.length; i++) {
+                h = ((h << 5) + h + toHash.charCodeAt(i)) | 0;
+            }
+            return `face:${h}`;
+        }
+        return key;
+    }
+    constructor(http, apiBaseUrl, persistence) {
         this.http = http;
+        this.apiBaseUrl = apiBaseUrl;
+        this.persistence = persistence;
+    }
+    loadFaceCache() {
+        if (this.faceLoaded)
+            return Promise.resolve();
+        if (!this.faceLoadPromise) {
+            this.faceLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_PROFILE_FACE).then((entries) => {
+                entries.forEach(([k, v]) => this.faceCache.set(k, v));
+                this.faceLoaded = true;
+            });
+        }
+        return this.faceLoadPromise;
+    }
+    loadCompareCache() {
+        if (this.compareLoaded)
+            return Promise.resolve();
+        if (!this.compareLoadPromise) {
+            this.compareLoadPromise = this.persistence.getAll(CachePersistenceService.STORE_PROFILE_COMPARE).then((entries) => {
+                entries.forEach(([k, v]) => this.compareInterestsCache.set(k, v));
+                this.compareLoaded = true;
+            });
+        }
+        return this.compareLoadPromise;
+    }
+    getBaseUrl() {
+        const u = this.apiBaseUrl;
+        if (u == null)
+            return null;
+        return typeof u === 'function' ? u() : u;
     }
     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 });
+        const a = (text_1 ?? '').trim();
+        const b = (text_2 ?? '').trim();
+        const cacheKey = a && b ? [a, b].sort().join('\0') : '';
+        return from(this.loadCompareCache()).pipe(switchMap(() => {
+            if (cacheKey && this.compareInterestsCache.has(cacheKey)) {
+                return of(this.compareInterestsCache.get(cacheKey));
+            }
+            const base = this.getBaseUrl();
+            if (base) {
+                const url = `${base.replace(/\/$/, '')}/profile/compare-interests`;
+                return this.http.post(url, { text_1: a || text_1, text_2: b || text_2 }, {
+                    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                }).pipe(tap((res) => {
+                    if (cacheKey) {
+                        this.compareInterestsCache.set(cacheKey, res);
+                        this.persistence.set(CachePersistenceService.STORE_PROFILE_COMPARE, cacheKey, res);
+                    }
+                }));
+            }
+            const headers = new HttpHeaders({
+                'X-Api-Key': apiKey,
+                'Content-Type': 'application/json',
+            });
+            return this.http.post(`${this.baseUrl}textsimilarity`, { text_1: a || text_1, text_2: b || text_2 }, { headers }).pipe(tap((res) => {
+                if (cacheKey) {
+                    this.compareInterestsCache.set(cacheKey, res);
+                    this.persistence.set(CachePersistenceService.STORE_PROFILE_COMPARE, cacheKey, res);
+                }
+            }));
+        }));
+    }
+    detectFace(image, creds, options) {
+        const rawKey = options?.cacheKey ?? (typeof image === 'string' ? image : undefined);
+        const cacheKey = ProfileService.faceCacheKey(rawKey);
+        return from(this.loadFaceCache()).pipe(switchMap(() => {
+            if (cacheKey && this.faceCache.has(cacheKey)) {
+                console.log('Face detection cache hit');
+                return of(this.faceCache.get(cacheKey));
+            }
+            const base = this.getBaseUrl();
+            if (base) {
+                const url = `${base.replace(/\/$/, '')}/profile/detect-face`;
+                let body;
+                if (typeof image === 'string') {
+                    const isDataUrl = image.startsWith('data:');
+                    const base64 = isDataUrl ? (image.split(',')[1] || '') : image;
+                    body = { image_base64: base64 };
+                    return this.http.post(url, body, {
+                        headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                    }).pipe(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)
+                            return timer(3000);
+                        return throwError(() => error);
+                    }))), tap((res) => {
+                        if (cacheKey) {
+                            this.faceCache.set(cacheKey, res);
+                            this.persistence.set(CachePersistenceService.STORE_PROFILE_FACE, cacheKey, res);
+                        }
+                    }));
+                }
+                const formData = new FormData();
+                formData.append('image_file', image, image.name);
+                return this.http.post(url, formData).pipe(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)
+                        return timer(3000);
+                    return throwError(() => error);
+                }))), tap((res) => {
+                    if (cacheKey) {
+                        this.faceCache.set(cacheKey, res);
+                        this.persistence.set(CachePersistenceService.STORE_PROFILE_FACE, cacheKey, res);
+                    }
+                }));
+            }
+            return this.detectFaceDirect(image, creds, cacheKey);
+        }));
     }
-    detectFace(image, creds) {
+    detectFaceDirect(image, creds, cacheKey) {
         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;
@@ -1683,9 +2114,7 @@ class ProfileService {
         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) => {
@@ -1744,23 +2173,100 @@ class ProfileService {
                 : [];
             const imageUrl = typeof image === 'string' && image.startsWith('http') ? image : '';
             const result = { imageUrl, faces };
+            if (cacheKey) {
+                this.faceCache.set(cacheKey, result);
+                this.persistence.set(CachePersistenceService.STORE_PROFILE_FACE, cacheKey, result);
+            }
             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 });
+    clearFaceCache() {
+        this.faceCache.clear();
+        this.persistence.clear(CachePersistenceService.STORE_PROFILE_FACE);
+    }
+    clearCompareInterestsCache() {
+        this.compareInterestsCache.clear();
+        this.persistence.clear(CachePersistenceService.STORE_PROFILE_COMPARE);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], 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 }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROFILE_COMPARISON_API_BASE_URL]
+                }] }, { type: CachePersistenceService }] });
+
+/**
+ * Thin-client service: sends config to the backend and returns the display payload.
+ * The lib does not call third-party APIs; the backend does.
+ */
+class ProfileComparisonBackendService {
+    http;
+    apiBaseUrl;
+    getVerboseLogging;
+    constructor(http, apiBaseUrl, getVerboseLogging) {
+        this.http = http;
+        this.apiBaseUrl = apiBaseUrl;
+        this.getVerboseLogging = getVerboseLogging;
+    }
+    log(...args) {
+        if (this.getVerboseLogging?.() === true) {
+            console.log('[ProfileComparisonBackend]', ...args);
+        }
+    }
+    getBaseUrl() {
+        const u = this.apiBaseUrl;
+        if (u == null)
+            return null;
+        return typeof u === 'function' ? u() : u;
+    }
+    getComparison(config) {
+        const base = this.getBaseUrl();
+        this.log('getComparison', 'baseUrl', base ?? '(null)');
+        if (!base || !base.trim()) {
+            this.log('getComparison', 'returning error: backend not configured');
+            return throwError(() => new Error('Backend not configured'));
+        }
+        const url = `${base.replace(/\/$/, '')}/profile/compare-full`;
+        this.log('getComparison', 'POST', url);
+        return this.http.post(url, { config }).pipe(tap$1(() => this.log('getComparison', 'POST success')), catchError((err) => {
+            this.log('getComparison', 'POST error', err);
+            const msg = err?.error?.message ?? err?.message ?? err?.statusText ?? String(err);
+            const status = err?.status ?? err?.statusCode;
+            console.error('[ProfileComparisonBackend] getComparison failed', status, msg);
+            return throwError(() => err);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROFILE_COMPARISON_API_BASE_URL]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROFILE_COMPARISON_VERBOSE_LOGGING]
+                }] }] });
 
 class ProfileComparisonLibComponent {
-    profileService;
-    openaiEmbeddingService;
+    backendService;
     renderer;
     fileConversionService;
     imageCompressionService;
+    cdr;
+    getVerboseLogging;
     static DEFAULT_OBJECT_POSITION = '50% 50%';
     static DEFAULT_EYE_ALIGNMENT_BIAS_PX = 50;
     static DEFAULT_IMAGE_FORMAT = 'image/jpeg';
@@ -1779,6 +2285,20 @@ class ProfileComparisonLibComponent {
     static CONSOLIDATION_SEPARATOR_SLASH = '/';
     static FACEPP_RATE_LIMIT_DELAY_MS = 5000;
     static DEFAULT_PROFILE_IMAGE_NAME = 'ProfilePg1.png';
+    // Drag and shape constants
+    static SHAPE_BG_HEIGHT = '350px';
+    static SHAPE_BG_OBJECT_FIT = 'cover';
+    static SHAPE_BG1_OBJECT_POSITION = 'right';
+    static SHAPE_BG2_OBJECT_POSITION = 'left';
+    static DRAG_MIN_WIDTH = 200;
+    static DRAG_MAX_WIDTH = 400;
+    static MAX_DRAG_DISTANCE = 100;
+    static CENTER_MOVE_MULTIPLIER = 0.5;
+    static TEXT_MOVE_MULTIPLIER = 0.3;
+    static TRANSITION_WIDTH = 'width 0.3s ease';
+    static TRANSITION_TRANSFORM = 'transform 0.3s ease';
+    static TRANSFORM_RESET = 'translateX(0px)';
+    static TRANSITION_RESET_DELAY_MS = 300;
     config = {
         person1Interests: [],
         person2Interests: [],
@@ -1786,20 +2306,19 @@ class ProfileComparisonLibComponent {
         user1Image: '',
         user2Image: '',
     };
-    apiNinjasKey = '';
-    faceplusKey = '';
-    faceplusSecret = '';
-    openaiApiKey = '';
     fadeAllEdges = false;
     matrixDataChange = new EventEmitter();
+    rawLLMOutputChange = new EventEmitter();
+    viewProfileClick = new EventEmitter();
     selectedFile = null;
-    result;
     firstImageData = null;
     secondImageData = null;
     user1Transform = '';
     user2Transform = '';
     alignmentCalculated = false;
     isAligning = false;
+    /** Set when backend returns an error (e.g. 503 API keys not configured). */
+    backendError = null;
     user1ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
     user2ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
     user1NaturalWidth = 0;
@@ -1837,20 +2356,8 @@ class ProfileComparisonLibComponent {
     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;
+    /** When false, backend URL is not provided — show "Configure backend". */
+    backendConfigured = false;
     compressionConfig = {
         maxWidth: ProfileComparisonLibComponent.DEFAULT_MAX_WIDTH,
         maxHeight: ProfileComparisonLibComponent.DEFAULT_MAX_HEIGHT,
@@ -1864,50 +2371,199 @@ class ProfileComparisonLibComponent {
         minHeight: ProfileComparisonLibComponent.DEFAULT_MIN_HEIGHT,
     };
     computeSub;
-    detectFaceSub1;
-    detectFaceSub2;
-    activeRequestEpoch = 0;
-    form = new FormGroup({
-        interest1: new FormControl(''),
-        interest2: new FormControl(''),
-    });
+    /** Incremented on each fetchComparison(); used to ignore stale success/error from an older request. */
+    fetchRequestId = 0;
     leftContainer;
     rightContainer;
-    constructor(profileService, openaiEmbeddingService, renderer, fileConversionService, imageCompressionService) {
-        this.profileService = profileService;
-        this.openaiEmbeddingService = openaiEmbeddingService;
+    profileFlex;
+    profileImgLeft;
+    profileImgRight;
+    shapeContainer;
+    shapeBg;
+    shapeBg1;
+    shapeBg2;
+    shapeTextLeft;
+    shapeTextRight;
+    shapeTextCenter;
+    constructor(backendService, renderer, fileConversionService, imageCompressionService, cdr, getVerboseLogging) {
+        this.backendService = backendService;
         this.renderer = renderer;
         this.fileConversionService = fileConversionService;
         this.imageCompressionService = imageCompressionService;
+        this.cdr = cdr;
+        this.getVerboseLogging = getVerboseLogging;
+    }
+    log(...args) {
+        if (this.getVerboseLogging?.() === true) {
+            console.log('[ProfileComparisonLib]', ...args);
+        }
     }
     anchorSide = 'left';
+    rawLLMOutput = '';
     ngOnInit() {
+        if (this.getVerboseLogging?.())
+            console.log('[ProfileComparisonLib] verbose logging ON');
+        this.log('ngOnInit', 'config received', {
+            person1Len: this.config?.person1Interests?.length,
+            person2Len: this.config?.person2Interests?.length,
+            hasUser1Image: !!this.config?.user1Image?.length,
+            hasUser2Image: !!this.config?.user2Image?.length,
+        });
         this.baseConfig = JSON.parse(JSON.stringify(this.config));
-        this.loadCustomConfig();
         this.updateConfigProperties();
-        this.loadApiKeyFromStorage();
-        this.loadFaceppCredsFromStorage();
-        this.loadOpenAIKeyFromStorage();
-        this.compute();
+        const base = this.backendService.getBaseUrl();
+        this.backendConfigured = !!(base && base.trim());
+        this.log('ngOnInit', 'backendConfigured', this.backendConfigured, 'base', base ?? '(null)');
+        if (!this.backendConfigured) {
+            this.log('ngOnInit', 'exiting early: backend not configured');
+            this.user1Transform = 'translateY(0px)';
+            this.user2Transform = 'translateY(0px)';
+            this.alignmentCalculated = false;
+            return;
+        }
+        this.user1Transform = 'translateY(0px)';
+        this.user2Transform = 'translateY(0px)';
+        this.alignmentCalculated = false;
+        this.log('ngOnInit', 'starting compressConfigImagesIfNeeded then fetchComparison');
         this.compressConfigImagesIfNeeded().subscribe({
-            next: () => this.initializeFaceDetection(),
+            next: () => {
+                this.log('ngOnInit', 'compressConfigImagesIfNeeded done, calling fetchComparison');
+                this.fetchComparison();
+            },
             error: (e) => {
                 console.warn('Config image compression failed, continuing:', e);
-                this.initializeFaceDetection();
+                this.log('ngOnInit', 'compressConfigImagesIfNeeded error, calling fetchComparison anyway');
+                this.fetchComparison();
             }
         });
-        this.user1Transform = 'translateY(0px)';
-        this.user2Transform = 'translateY(0px)';
-        this.alignmentCalculated = false;
     }
     ngAfterViewInit() {
         this.waitForImagesAndInitDrag();
     }
     ngOnChanges(changes) {
         if (changes['config']) {
+            const first = changes['config'].firstChange;
+            this.log('ngOnChanges', 'config changed', 'firstChange', first, 'backendConfigured', this.backendConfigured);
             this.updateConfigProperties();
+            if (!this.backendConfigured) {
+                this.log('ngOnChanges', 'skipping fetch: backend not configured');
+                return;
+            }
+            if (!first) {
+                this.log('ngOnChanges', 'running compressConfigImagesIfNeeded then fetchComparison');
+                this.compressConfigImagesIfNeeded().subscribe({
+                    next: () => {
+                        this.log('ngOnChanges', 'compress done, calling fetchComparison');
+                        this.fetchComparison();
+                    },
+                    error: (e) => {
+                        console.warn('Config image compression failed, continuing:', e);
+                        this.log('ngOnChanges', 'compress error, calling fetchComparison anyway');
+                        this.fetchComparison();
+                    }
+                });
+            }
+            else {
+                this.log('ngOnChanges', 'skipping fetch: firstChange (ngOnInit will run)');
+            }
         }
     }
+    /** Use for template: hide left/right item when it's a shared (center) item. Compares case-insensitively. */
+    isInCenter(interest) {
+        if (!interest || !this.centerItem?.length)
+            return false;
+        const n = String(interest).trim().toLowerCase();
+        return this.centerItem.some((c) => String(c).trim().toLowerCase() === n);
+    }
+    fetchComparison() {
+        this.log('fetchComparison', 'start');
+        if (this.isAligning) {
+            this.log('fetchComparison', 'skipped: already aligning (single-flight)');
+            return;
+        }
+        if (this.computeSub) {
+            this.computeSub.unsubscribe();
+            this.computeSub = undefined;
+        }
+        const requestId = ++this.fetchRequestId;
+        this.isAligning = true;
+        this.backendError = null;
+        const normalized = this.buildConfigWithDefaults(this.config, this.baseConfig);
+        const configToSend = {
+            person1Interests: normalized.person1Interests,
+            person2Interests: normalized.person2Interests,
+            person3Interests: normalized.person3Interests,
+            user1Image: this.user1Image,
+            user2Image: this.user2Image,
+        };
+        this.log('fetchComparison', 'calling backend getComparison', {
+            person1Len: configToSend.person1Interests.length,
+            person2Len: configToSend.person2Interests.length,
+            user1ImageLen: (configToSend.user1Image || '').length,
+            user2ImageLen: (configToSend.user2Image || '').length,
+        });
+        this.computeSub = this.backendService.getComparison(configToSend).subscribe({
+            next: (payload) => {
+                if (requestId !== this.fetchRequestId) {
+                    this.log('fetchComparison', 'ignoring stale success', { requestId, current: this.fetchRequestId });
+                    return;
+                }
+                this.log('fetchComparison', 'backend response received', { aligned1: payload?.alignedPerson1Interests?.length, aligned2: payload?.alignedPerson2Interests?.length });
+                this.isAligning = false;
+                this.backendError = null;
+                const a1 = payload.alignedPerson1Interests ?? [];
+                const a2 = payload.alignedPerson2Interests ?? [];
+                const sameLists = a1.length === a2.length && a1.every((v, i) => String(v).trim().toLowerCase() === String(a2[i]).trim().toLowerCase());
+                if (sameLists && a1.length > 0) {
+                    this.log('fetchComparison', 'backend returned identical aligned lists; using raw lists to keep sides distinct', { len: a1.length });
+                    this.alignedPerson1Interests = [];
+                    this.alignedPerson2Interests = [];
+                    this.displayPerson1Interests = this.person1Interests;
+                    this.displayPerson2Interests = this.person2Interests;
+                    this.centerItem = payload.centerItem ?? [];
+                }
+                else {
+                    this.alignedPerson1Interests = a1;
+                    this.alignedPerson2Interests = a2;
+                    this.centerItem = payload.centerItem ?? [];
+                    this.displayPerson1Interests = a1.length ? a1 : this.person1Interests;
+                    this.displayPerson2Interests = a2.length ? a2 : this.person2Interests;
+                }
+                this.matrixData = payload.matrixData ?? null;
+                if (this.matrixData)
+                    this.matrixDataChange.emit(this.matrixData);
+                if (payload.rawLLMOutput != null) {
+                    this.rawLLMOutput = payload.rawLLMOutput;
+                    this.rawLLMOutputChange.emit(payload.rawLLMOutput);
+                }
+                this.firstImageData = payload.face1 ?? null;
+                this.secondImageData = payload.face2 ?? null;
+                const faces1 = (this.firstImageData && typeof this.firstImageData === 'object' && 'faces' in this.firstImageData && Array.isArray(this.firstImageData.faces)) ? this.firstImageData.faces : [];
+                const faces2 = (this.secondImageData && typeof this.secondImageData === 'object' && 'faces' in this.secondImageData && Array.isArray(this.secondImageData.faces)) ? this.secondImageData.faces : [];
+                this.user1FaceRaw = faces1.length ? faces1[0] : null;
+                this.user2FaceRaw = faces2.length ? faces2[0] : null;
+                if (this.user1NaturalWidth && this.user1NaturalHeight)
+                    this.updateObjectPositionForFace(1);
+                if (this.user2NaturalWidth && this.user2NaturalHeight)
+                    this.updateObjectPositionForFace(2);
+                if (this.firstImageData && this.secondImageData)
+                    this.calculateFaceAlignment(this.firstImageData, this.secondImageData);
+                this.cdr.detectChanges();
+            },
+            error: (err) => {
+                if (requestId !== this.fetchRequestId) {
+                    this.log('fetchComparison', 'ignoring stale error', { requestId, current: this.fetchRequestId, status: err?.status });
+                    return;
+                }
+                this.log('fetchComparison', 'backend error', err);
+                const msg = err?.error?.message ?? err?.message ?? err?.statusText ?? (typeof err?.error === 'string' ? err.error : null) ?? 'Request failed';
+                this.backendError = msg;
+                console.error('[ProfileComparisonLib] fetchComparison error', err?.status ?? '', msg);
+                this.isAligning = false;
+                this.cdr.detectChanges();
+            }
+        });
+    }
     updateConfigProperties() {
         const normalized = this.buildConfigWithDefaults(this.config, this.baseConfig);
         this.config = normalized;
@@ -2065,8 +2721,7 @@ class ProfileComparisonLibComponent {
     }
     getProfileContainerSize(which) {
         try {
-            const selector = which === 1 ? '.profile-img.left' : '.profile-img.right';
-            const el = document.querySelector(selector);
+            const el = (which === 1 ? this.profileImgLeft : this.profileImgRight)?.nativeElement || null;
             if (!el)
                 return { width: 0, height: 0 };
             const rect = el.getBoundingClientRect();
@@ -2078,7 +2733,7 @@ class ProfileComparisonLibComponent {
     }
     getOverlapSizeCssPx() {
         try {
-            const root = document.querySelector('.profile-flex');
+            const root = this.profileFlex?.nativeElement || null;
             const fallback = 40;
             if (!root)
                 return fallback;
@@ -2092,7 +2747,7 @@ class ProfileComparisonLibComponent {
     }
     setOverlapSizeCssPx(px) {
         try {
-            const root = document.querySelector('.profile-flex');
+            const root = this.profileFlex?.nativeElement || null;
             if (!root)
                 return;
             const clamped = Math.max(8, Math.min(80, Math.round(px)));
@@ -2101,15 +2756,16 @@ class ProfileComparisonLibComponent {
         catch { }
     }
     waitForImagesAndInitDrag() {
-        const shapeBg1 = document.querySelector('img.shape-bg1');
-        const shapeBg2 = document.querySelector('img.shape-bg2');
+        const shapeBg1 = this.shapeBg1?.nativeElement;
+        const shapeBg2 = this.shapeBg2?.nativeElement;
         if (!shapeBg1 || !shapeBg2) {
             setTimeout(() => this.waitForImagesAndInitDrag(), 100);
             return;
         }
         const checkImagesLoaded = () => {
-            const img1Loaded = shapeBg1.complete && shapeBg1.naturalWidth > 0;
-            const img2Loaded = shapeBg2.complete && shapeBg2.naturalWidth > 0;
+            // For SVG elements, check if they're rendered instead of naturalWidth
+            const img1Loaded = shapeBg1 && shapeBg1.getBoundingClientRect().width > 0;
+            const img2Loaded = shapeBg2 && shapeBg2.getBoundingClientRect().width > 0;
             if (img1Loaded && img2Loaded) {
                 setTimeout(() => this.initDrag(), 50);
             }
@@ -2120,34 +2776,37 @@ class ProfileComparisonLibComponent {
         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');
+        const shapeBg1 = this.shapeBg1?.nativeElement;
+        const shapeBg2 = this.shapeBg2?.nativeElement;
+        const shapeTextLeft = this.shapeTextLeft?.nativeElement || null;
+        const shapeTextRight = this.shapeTextRight?.nativeElement || null;
         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;
+        // Cast to HTMLElement to access style properties conveniently, as SVGElement style handling can be similar in this context
+        const shapeBg1El = shapeBg1;
+        const shapeBg2El = shapeBg2;
+        shapeBg1El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+        // shapeBg1El.style.objectFit = ProfileComparisonLibComponent.SHAPE_BG_OBJECT_FIT;
+        // shapeBg1El.style.objectPosition = ProfileComparisonLibComponent.SHAPE_BG1_OBJECT_POSITION;
+        shapeBg2El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+        // shapeBg2El.style.objectFit = ProfileComparisonLibComponent.SHAPE_BG_OBJECT_FIT;
+        // shapeBg2El.style.objectPosition = ProfileComparisonLibComponent.SHAPE_BG2_OBJECT_POSITION;
+        const originalWidth1 = shapeBg1.getBoundingClientRect().width;
+        const originalWidth2 = shapeBg2.getBoundingClientRect().width;
+        const minWidth = ProfileComparisonLibComponent.DRAG_MIN_WIDTH;
+        const maxWidth = ProfileComparisonLibComponent.DRAG_MAX_WIDTH;
         let isDragging = false;
         let dragStartX = 0;
         let initialWidth1 = 0;
         let initialWidth2 = 0;
         let activeImg = null;
-        const shapeTextCenter = document.querySelector('.shape-text-center');
+        // Use ViewChild for center text
+        const shapeTextCenter = this.shapeTextCenter?.nativeElement || null;
         const onMouseMove = (e) => {
             if (!isDragging || !activeImg)
                 return;
             const deltaX = e.clientX - dragStartX;
-            const containerWidth = document.querySelector('.shape')?.clientWidth || 0;
-            const centerPosition = containerWidth / 2;
+            const containerWidth = this.shapeContainer?.nativeElement?.clientWidth || 0;
             let newWidth1 = initialWidth1;
             let newWidth2 = initialWidth2;
             if (activeImg === shapeBg1) {
@@ -2160,43 +2819,51 @@ class ProfileComparisonLibComponent {
             }
             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';
+            shapeBg1El.style.width = newWidth1 + 'px';
+            shapeBg1El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+            shapeBg2El.style.width = newWidth2 + 'px';
+            shapeBg2El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
             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 maxDragDistance = ProfileComparisonLibComponent.MAX_DRAG_DISTANCE;
+            const centerMoveDistance = Math.min(dragDistance, maxDragDistance) * dragDirection * ProfileComparisonLibComponent.CENTER_MOVE_MULTIPLIER;
+            shapeTextLeft.style.transform = `translateX(${widthChange1 * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
+            shapeTextRight.style.transform = `translateX(${-widthChange2 * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transform = `translateX(${centerMoveDistance * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}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)';
+            shapeBg1El.style.transition = ProfileComparisonLibComponent.TRANSITION_WIDTH;
+            shapeBg2El.style.transition = ProfileComparisonLibComponent.TRANSITION_WIDTH;
+            shapeTextLeft.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            shapeTextRight.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            }
+            shapeBg1El.style.width = originalWidth1 + 'px';
+            shapeBg2El.style.width = originalWidth2 + 'px';
+            shapeTextLeft.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            shapeTextRight.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            }
             document.removeEventListener('mousemove', onMouseMove);
             document.removeEventListener('mouseup', resetWidths);
             document.removeEventListener('mouseleave', resetWidths);
             setTimeout(() => {
-                shapeBg1.style.transition = '';
-                shapeBg2.style.transition = '';
+                shapeBg1El.style.transition = '';
+                shapeBg2El.style.transition = '';
                 shapeTextLeft.style.transition = '';
                 shapeTextRight.style.transition = '';
-                shapeTextCenter.style.transition = '';
-            }, 300);
+                if (shapeTextCenter) {
+                    shapeTextCenter.style.transition = '';
+                }
+            }, ProfileComparisonLibComponent.TRANSITION_RESET_DELAY_MS);
         };
         [shapeBg1, shapeBg2].forEach((img) => {
             img.addEventListener('mousedown', (e) => {
@@ -2204,243 +2871,31 @@ class ProfileComparisonLibComponent {
                 isDragging = true;
                 activeImg = img;
                 dragStartX = e.clientX;
-                initialWidth1 = shapeBg1.offsetWidth;
-                initialWidth2 = shapeBg2.offsetWidth;
+                initialWidth1 = shapeBg1.getBoundingClientRect().width;
+                initialWidth2 = shapeBg2.getBoundingClientRect().width;
                 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);
+    onViewProfile(side) {
+        this.viewProfileClick.emit({ side });
     }
-    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);
-                }
-            });
+    compressConfigImagesIfNeeded() {
+        const tasks = [];
+        if (this.user1Image) {
+            tasks.push(this.compressImageStringToDataUrl(this.user1Image, 'ConfigUser1').pipe(tap$1((dataUrl) => { if (dataUrl)
+                this.user1Image = dataUrl; }), map$1(() => void 0)));
         }
-        catch (error) {
-            // Catch block for baseLeft/baseRight filtering errors
-            this.createSemanticAlignment(person1Results, person2Results);
+        if (this.user2Image) {
+            tasks.push(this.compressImageStringToDataUrl(this.user2Image, 'ConfigUser2').pipe(tap$1((dataUrl) => { if (dataUrl)
+                this.user2Image = dataUrl; }), map$1(() => void 0)));
         }
+        return tasks.length > 0 ? forkJoin(tasks).pipe(map$1(() => void 0)) : of(void 0);
     }
-    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;
-        }
+    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)));
     }
     getEyeCoordinatesFromBBox(bbox) {
         const eyeY = bbox.y + bbox.height * 0.38;
@@ -2498,60 +2953,6 @@ class ProfileComparisonLibComponent {
             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 = [];
@@ -2578,8 +2979,8 @@ class ProfileComparisonLibComponent {
         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 leftContainerEl = this.profileImgLeft?.nativeElement || null;
+        const rightContainerEl = this.profileImgRight?.nativeElement || null;
         const containerWidth1 = leftContainerEl?.clientWidth || 160;
         const containerHeight1 = leftContainerEl?.clientHeight || 550;
         const containerWidth2 = rightContainerEl?.clientWidth || 160;
@@ -2616,646 +3017,63 @@ class ProfileComparisonLibComponent {
     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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], 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", fadeAllEdges: "fadeAllEdges" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n      <!-- [style.object-fit]=\"'cover'\" -->\n    </div>\n  </div>\n\n  <div #shapeContainer class=\"shape\">\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\n<g filter=\"url(#filter0_i_4_4137)\">\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4137)\">\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\n<g filter=\"url(#filter0_i_4_4141)\">\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4141)\">\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n    </div>\n\n    <div class=\"shape-text\">\n      <div #shapeTextLeft class=\"shape-text-left\">\n        <div class=\"scroll-container\" #leftContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\n      </div>\n\n      <div #shapeTextCenter class=\"shape-text-center\">\n        <ng-container *ngFor=\"let item of centerItem\">\n          <p class=\"shape-p-center\">{{ item }}</p>\n        </ng-container>\n      </div>\n      <div #shapeTextRight class=\"shape-text-right\">\n        <div class=\"scroll-container\" #rightContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p-right\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\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%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.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}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.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.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg: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"] }] });
 }
 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: [{
+            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n      <!-- [style.object-fit]=\"'cover'\" -->\n    </div>\n  </div>\n\n  <div #shapeContainer class=\"shape\">\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\n<g filter=\"url(#filter0_i_4_4137)\">\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4137)\">\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\n<g filter=\"url(#filter0_i_4_4141)\">\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4141)\">\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n    </div>\n\n    <div class=\"shape-text\">\n      <div #shapeTextLeft class=\"shape-text-left\">\n        <div class=\"scroll-container\" #leftContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\n      </div>\n\n      <div #shapeTextCenter class=\"shape-text-center\">\n        <ng-container *ngFor=\"let item of centerItem\">\n          <p class=\"shape-p-center\">{{ item }}</p>\n        </ng-container>\n      </div>\n      <div #shapeTextRight class=\"shape-text-right\">\n        <div class=\"scroll-container\" #rightContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p-right\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\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%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.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}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.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.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg: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: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROFILE_COMPARISON_VERBOSE_LOGGING]
+                }] }], propDecorators: { config: [{
                 type: Input
             }], fadeAllEdges: [{
                 type: Input
             }], matrixDataChange: [{
                 type: Output
+            }], rawLLMOutputChange: [{
+                type: Output
+            }], viewProfileClick: [{
+                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
+            }], profileFlex: [{
+                type: ViewChild,
+                args: ['profileFlex']
+            }], profileImgLeft: [{
+                type: ViewChild,
+                args: ['profileImgLeft']
+            }], profileImgRight: [{
+                type: ViewChild,
+                args: ['profileImgRight']
+            }], shapeContainer: [{
+                type: ViewChild,
+                args: ['shapeContainer']
+            }], shapeBg: [{
+                type: ViewChild,
+                args: ['shapeBg']
+            }], shapeBg1: [{
+                type: ViewChild,
+                args: ['shapeBg1']
+            }], shapeBg2: [{
+                type: ViewChild,
+                args: ['shapeBg2']
+            }], shapeTextLeft: [{
+                type: ViewChild,
+                args: ['shapeTextLeft']
+            }], shapeTextRight: [{
+                type: ViewChild,
+                args: ['shapeTextRight']
+            }], shapeTextCenter: [{
+                type: ViewChild,
+                args: ['shapeTextCenter']
             }] } });
 
 class ProfileComparisonLibModule {
@@ -3263,23 +3081,15 @@ class ProfileComparisonLibModule {
     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] });
+            ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, providers: [
-            ProfileService,
+            ProfileComparisonBackendService,
             EmbeddingService,
             OpenAIEmbeddingService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
-            ReactiveFormsModule,
-            CustomInputComponent,
-            DocumentationComponent,
-            RouterModule] });
+            ReactiveFormsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
             type: NgModule,
@@ -3291,18 +3101,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         HttpClientModule,
                         FormsModule,
-                        ReactiveFormsModule,
-                        CustomInputComponent,
-                        DocumentationComponent,
-                        RouterModule
+                        ReactiveFormsModule
                     ],
                     exports: [
-                        ProfileComparisonLibComponent,
-                        CustomInputComponent,
-                        DocumentationComponent
+                        ProfileComparisonLibComponent
                     ],
                     providers: [
-                        ProfileService,
+                        ProfileComparisonBackendService,
                         EmbeddingService,
                         OpenAIEmbeddingService
                     ]
@@ -3317,5 +3122,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CustomInputComponent, DocumentationComponent, EmbeddingService, FileConversionService, ImageCompressionService, OpenAIEmbeddingService, ProfileComparisonLibComponent, ProfileComparisonLibModule, ProfileComparisonLibService, ProfileService };
+export { CachePersistenceService, EmbeddingService, FileConversionService, ImageCompressionService, OpenAIEmbeddingService, PROFILE_COMPARISON_API_BASE_URL, PROFILE_COMPARISON_VERBOSE_LOGGING, ProfileComparisonBackendService, ProfileComparisonLibComponent, ProfileComparisonLibModule, ProfileComparisonLibService, ProfileService };
 //# sourceMappingURL=naniteninja-profile-comparison-lib.mjs.map