Profile Comparison Library

Angular library that renders a side-by-side profile comparison (two profile images, a central draggable shape, and semantically aligned interest lists). It is a thin client — the library sends user config to a backend and displays the payload it returns. No API keys or key-entry modals live in the library.

You need a backend that implements the profile comparison API (e.g. the profile-comparison-server repo). By default the component points at the real deployed backend. Set [backendMode]="BackendMode.Mock" to use localhost:3000 during development.

Quick start (copy-paste)

1. Install

npm install @naniteninja/profile-comparison-lib

2. Wire up the module

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';

@NgModule({
  imports: [HttpClientModule, ProfileComparisonLibModule],
})
export class AppModule {}

3. Add the component to a template

Minimal — uses the real deployed backend with all edges faded:

<lib-profile-comparison [config]="profileConfig"></lib-profile-comparison>

During development, point at a local backend:

<lib-profile-comparison
  [config]="profileConfig"
  [backendMode]="BackendMode.Mock"
></lib-profile-comparison>

Or supply a fully custom URL (overrides backendMode):

<lib-profile-comparison
  [config]="profileConfig"
  [backendUrl]="'https://my-custom-api.example.com/api'"
></lib-profile-comparison>

Full example with all inputs and outputs:

<lib-profile-comparison
  [config]="profileConfig"
  [backendMode]="backendMode"
  [backendUrl]="customUrl"
  [fadeAllEdges]="true"
  (matrixDataChange)="onMatrixData($event)"
  (rawLLMOutputChange)="onRawLLM($event)"
  (viewProfileClick)="onViewProfile($event)"
></lib-profile-comparison>

4. Component class

import { Component } from '@angular/core';
import { IProfileConfig, IMatrixData, BackendMode } from '@naniteninja/profile-comparison-lib';

@Component({ /* ... */ })
export class AppComponent {
  readonly BackendMode = BackendMode; // expose enum to template

  backendMode = BackendMode.Real;
  customUrl: string | null = null;

  profileConfig: IProfileConfig = {
    person1Interests: [
      'Gaming', 'Programming', 'AI/ML', 'Startups',
      'Blockchain', 'Cybersecurity', 'Web Development', 'Data Science',
    ],
    person2Interests: [
      'AI machine learning', 'Mobile Games', 'Hardware',
      'Data Science', 'Entrepreneurship', 'Design Thinking', 'Blockchain',
    ],
    person3Interests: ['Board Games', 'Machine Learning'],
    user1Image: './assets/user1.jpg',   // data-URL or asset path
    user2Image: './assets/user2.jpg',
  };

  onMatrixData(data: IMatrixData) { console.log('Matrix:', data); }
  onRawLLM(raw: string)          { console.log('LLM:', raw); }
  onViewProfile(e: { side: 'left' | 'right' }) {
    console.log('View profile:', e.side);
  }
}

5. Run

ng serve

If using BackendMode.Mock, start the local backend first:

cd ../profile-comparison-server && npm install && npm start   # listens on :3000

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | config | IProfileConfig | required | Profile data (interests, images) for the comparison. | | backendMode | BackendMode | BackendMode.Real (0) | Real = deployed backend, Mock = localhost:3000. | | backendUrl | string \| null | null | When non-empty, overrides backendMode entirely. | | fadeAllEdges | boolean | true | Fade the outer edges of the profile area. |

Outputs

All outputs are optional — bind only what you need.

| Output | Type | Description | |--------|------|-------------| | matrixDataChange | IMatrixData | Legend, headers, and rows for the similarity matrix. | | rawLLMOutputChange | string | Raw LLM output from the backend (if any). | | viewProfileClick | { side: 'left' \| 'right' } | Emitted when the user clicks "View Profile". |

BackendMode enum

import { BackendMode } from '@naniteninja/profile-comparison-lib';

BackendMode.Real  // 0 — deployed backend (default)
BackendMode.Mock  // 1 — localhost:3000

URL resolution priority

1. backendUrl input (if non-empty)
2. backendMode enum mapping
3. Legacy PROFILE_COMPARISON_API_BASE_URL injection token (backward compatible)

Backend API contract

The library calls POST {baseUrl}/profile/compare-full with body { config: IProfileConfig }. The backend returns a display payload (face results, aligned lists, center item, matrix data, raw LLM output). See the profile-comparison-server repo and the IComparisonPayload interface for the response shape.

Building the library

ng build profile-comparison-lib

Output is in dist/profile-comparison-lib/ (FESM bundles, typings, package.json). Peer dependencies: Angular ^20.0.0.