@naniteninja/profile-comparison-lib 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +272 -193
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,193 +1,272 @@
1
- # Profile Comparison Library
2
-
3
- Angular library that renders a side-by-side profile comparison (two profile images, a central draggable shape, and aligned interest lists). It is a **thin client**: you provide a backend URL; the library sends user config to your backend and displays the payload it returns. No API keys or key-entry modals in the library.
4
-
5
- **You need a backend** that implements the profile comparison API (e.g. the reference server in this repo). Provide its base URL via `PROFILE_COMPARISON_API_BASE_URL`. If not provided, the component shows **"Configure backend"**.
6
-
7
- ---
8
-
9
- ## Quickstart
10
-
11
- 1. **Install the package and peer dependencies** (including TensorFlow; required for Vite and other bundlers):
12
-
13
- ```bash
14
- npm install @naniteninja/profile-comparison-lib @angular/core@^20 @angular/common@^20 @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
15
- ```
16
-
17
- 2. **Provide the backend URL**
18
-
19
- In `app.config.ts` (or `AppModule`):
20
-
21
- ```typescript
22
- import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
23
-
24
- providers: [
25
- { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
26
- ]
27
- ```
28
-
29
- Or with a factory (e.g. runtime toggle between backends):
30
-
31
- ```typescript
32
- providers: [{
33
- provide: PROFILE_COMPARISON_API_BASE_URL,
34
- useFactory: (backendUrl: BackendUrlService) => () => backendUrl.getBaseUrl(),
35
- deps: [BackendUrlService],
36
- }]
37
- ```
38
-
39
- 3. **Use the component**
40
-
41
- Import the module and add the component to a template:
42
-
43
- ```typescript
44
- import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';
45
- ```
46
-
47
- ```html
48
- <lib-profile-comparison [config]="config"></lib-profile-comparison>
49
- ```
50
-
51
- ---
52
-
53
- ## What the element looks like
54
-
55
- When you use `<lib-profile-comparison>` in another Angular app you get:
56
-
57
- - **Side-by-side profile comparison**: two profile images (left and right) with a central draggable “shape” and aligned interest lists between them.
58
- - **Main regions**: left image, right image, center shape with text, loading indicator when a request is in progress.
59
- - **Action**: “View Profile” on each side; the component emits `viewProfileClick` with `{ side: 'left' | 'right' }` so the host can route or act.
60
-
61
- No key-entry modals or API key inputs appear in the library; all keys and third-party API calls live on your backend.
62
-
63
- ---
64
-
65
- ## Full setup (copy-paste)
66
-
67
- 1. Create or open an Angular app (Angular ^20.0.0).
68
-
69
- 2. Install the library and peer dependencies (TensorFlow is required for dependency optimization in Vite etc.):
70
-
71
- ```bash
72
- npm install @naniteninja/profile-comparison-lib @angular/core@^20 @angular/common@^20 @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
73
- ```
74
-
75
- 3. Add the backend URL provider in `app.config.ts`:
76
-
77
- ```typescript
78
- import { ApplicationConfig } from '@angular/core';
79
- import { provideHttpClient } from '@angular/common/http';
80
- import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
81
-
82
- export const appConfig: ApplicationConfig = {
83
- providers: [
84
- provideHttpClient(),
85
- { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
86
- ],
87
- };
88
- ```
89
-
90
- Or in `AppModule`:
91
-
92
- ```typescript
93
- import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
94
-
95
- @NgModule({
96
- providers: [
97
- { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
98
- ],
99
- })
100
- export class AppModule {}
101
- ```
102
-
103
- 4. Import the module where you use the component:
104
-
105
- ```typescript
106
- import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';
107
-
108
- @NgModule({
109
- imports: [ProfileComparisonLibModule, ...],
110
- })
111
- export class YourModule {}
112
- ```
113
-
114
- 5. Add the component to a template with required `[config]`:
115
-
116
- ```html
117
- <lib-profile-comparison
118
- [config]="config"
119
- [fadeAllEdges]="fadeAllEdges"
120
- (matrixDataChange)="onMatrixData($event)"
121
- (rawLLMOutputChange)="onRawLLMOutput($event)"
122
- (viewProfileClick)="onViewProfile($event)"
123
- ></lib-profile-comparison>
124
- ```
125
-
126
- 6. Run the app and ensure your backend is reachable at the URL you provided.
127
-
128
- ---
129
-
130
- ## Inputs and outputs
131
-
132
- ### Inputs
133
-
134
- - **`config`** (required) — `IProfileConfig`:
135
-
136
- ```json
137
- {
138
- "person1Interests": ["Gaming", "Programming", "AI/ML"],
139
- "person2Interests": ["AI machine learning", "Mobile Games", "Data Science"],
140
- "person3Interests": ["Board Games", "Machine Learning"],
141
- "user1Image": "data:image/jpeg;base64,...",
142
- "user2Image": "data:image/jpeg;base64,..."
143
- }
144
- ```
145
-
146
- `user1Image` and `user2Image` can be data URLs or URLs; the library sends them to the backend as needed.
147
-
148
- - **`fadeAllEdges`** (optional) — `boolean`, default `false`. When true, fades the outer edges of the profile area.
149
-
150
- ### Outputs
151
-
152
- - **`matrixDataChange`** — `IMatrixData`: legend, headers, and rows for the similarity matrix.
153
-
154
- Example payload:
155
-
156
- ```json
157
- {
158
- "legend": [{ "abbr": "Gam", "full": "Gaming" }, { "abbr": "Pro", "full": "Programming" }],
159
- "headers": ["Gam", "Pro", "AI/ML"],
160
- "rows": [
161
- { "label": "Gam", "values": ["1.00", "0.2", "0.5"] },
162
- { "label": "Pro", "values": ["0.2", "1.00", "0.8"] }
163
- ]
164
- }
165
- ```
166
-
167
- - **`rawLLMOutputChange`** — `string`: raw LLM output from the backend (if any).
168
-
169
- - **`viewProfileClick`** — `{ side: 'left' | 'right' }`: emitted when the user clicks “View Profile” on the left or right side. Use this to navigate or open a profile page.
170
-
171
- Example:
172
-
173
- ```typescript
174
- onViewProfile(payload: { side: 'left' | 'right' }) {
175
- this.router.navigate(['/profile', payload.side]);
176
- }
177
- ```
178
-
179
- ---
180
-
181
- ## Backend API contract
182
-
183
- The library calls your backend at `POST {baseUrl}/profile/compare-full` with body `{ config: IProfileConfig }`. The backend should return a display payload (face results, aligned lists, center item, matrix data, raw LLM output). See the reference server in this repo (`server/`) and the lib interface `IComparisonPayload` for the response shape.
184
-
185
- ---
186
-
187
- ## Building the library
188
-
189
- ```bash
190
- ng build profile-comparison-lib
191
- ```
192
-
193
- Output is in `dist/profile-comparison-lib/` (FESM, typings, package.json). Peer dependencies: Angular `^20.0.0` and TensorFlow (`@tensorflow/tfjs`, `@tensorflow-models/universal-sentence-encoder`).
1
+ # Profile Comparison Library
2
+
3
+ Angular library that renders a side-by-side profile comparison (two profile images, a central draggable shape, and aligned interest lists). It is a **thin client**: you provide a backend URL; the library sends user config to your backend and displays the payload it returns. No API keys or key-entry modals in the library.
4
+
5
+ **You need a backend** that implements the profile comparison API (e.g. the **profile-comparison-server** repo). Provide its base URL via `PROFILE_COMPARISON_API_BASE_URL`. If not provided, the component shows **"Configure backend"**.
6
+
7
+ ---
8
+
9
+ ## Quick start (copy-paste)
10
+
11
+ ### 1. Install
12
+
13
+ ```bash
14
+ npm install @naniteninja/profile-comparison-lib @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
15
+ ```
16
+
17
+ ### 2. Wire up the module and backend URL
18
+
19
+ ```typescript
20
+ import { NgModule } from '@angular/core';
21
+ import { HttpClientModule } from '@angular/common/http';
22
+ import {
23
+ ProfileComparisonLibModule,
24
+ PROFILE_COMPARISON_API_BASE_URL,
25
+ } from '@naniteninja/profile-comparison-lib';
26
+
27
+ @NgModule({
28
+ imports: [HttpClientModule, ProfileComparisonLibModule],
29
+ providers: [
30
+ { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'http://localhost:3000/api' },
31
+ ],
32
+ })
33
+ export class AppModule {}
34
+ ```
35
+
36
+ ### 3. Add the component to a template
37
+
38
+ ```html
39
+ <lib-profile-comparison
40
+ [config]="profileConfig"
41
+ [fadeAllEdges]="false"
42
+ (matrixDataChange)="onMatrixData($event)"
43
+ (rawLLMOutputChange)="onRawLLM($event)"
44
+ (viewProfileClick)="onViewProfile($event)"
45
+ ></lib-profile-comparison>
46
+ ```
47
+
48
+ ### 4. Provide config data in the component
49
+
50
+ ```typescript
51
+ import { IProfileConfig } from '@naniteninja/profile-comparison-lib';
52
+
53
+ profileConfig: IProfileConfig = {
54
+ person1Interests: [
55
+ 'Gaming', 'Programming', 'AI/ML', 'Startups',
56
+ 'Blockchain', 'Cybersecurity', 'Web Development', 'Data Science',
57
+ ],
58
+ person2Interests: [
59
+ 'AI machine learning', 'Mobile Games', 'Hardware',
60
+ 'Data Science', 'Entrepreneurship', 'Design Thinking', 'Blockchain',
61
+ ],
62
+ person3Interests: ['Board Games', 'Machine Learning'],
63
+ user1Image: './assets/user1.jpg', // data URL or asset path
64
+ user2Image: './assets/user2.jpg',
65
+ };
66
+
67
+ onMatrixData(data: any) { console.log('Matrix:', data); }
68
+ onRawLLM(raw: string) { console.log('LLM:', raw); }
69
+ onViewProfile(e: { side: 'left' | 'right' }) {
70
+ console.log('View profile:', e.side);
71
+ }
72
+ ```
73
+
74
+ ### 5. Start the backend and run
75
+
76
+ ```bash
77
+ # Terminal 1 — backend (profile-comparison-server repo)
78
+ cd ../profile-comparison-server && npm install && npm start
79
+
80
+ # Terminal 2 — your app
81
+ ng serve
82
+ ```
83
+
84
+ The component renders two profile images with a draggable center shape, semantically aligned interest lists on each side, and a "View Profile" link per side. If the backend is unreachable, a **"Configure backend"** message appears instead.
85
+
86
+ ---
87
+
88
+ ## Quickstart
89
+
90
+ 1. **Install the package and peer dependencies** (including TensorFlow; required for Vite and other bundlers):
91
+
92
+ ```bash
93
+ npm install @naniteninja/profile-comparison-lib @angular/core@^20 @angular/common@^20 @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
94
+ ```
95
+
96
+ 2. **Provide the backend URL**
97
+
98
+ In `app.config.ts` (or `AppModule`):
99
+
100
+ ```typescript
101
+ import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
102
+
103
+ providers: [
104
+ { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
105
+ ]
106
+ ```
107
+
108
+ Or with a factory (e.g. runtime toggle between backends):
109
+
110
+ ```typescript
111
+ providers: [{
112
+ provide: PROFILE_COMPARISON_API_BASE_URL,
113
+ useFactory: (backendUrl: BackendUrlService) => () => backendUrl.getBaseUrl(),
114
+ deps: [BackendUrlService],
115
+ }]
116
+ ```
117
+
118
+ 3. **Use the component**
119
+
120
+ Import the module and add the component to a template:
121
+
122
+ ```typescript
123
+ import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';
124
+ ```
125
+
126
+ ```html
127
+ <lib-profile-comparison [config]="config"></lib-profile-comparison>
128
+ ```
129
+
130
+ ---
131
+
132
+ ## What the element looks like
133
+
134
+ When you use `<lib-profile-comparison>` in another Angular app you get:
135
+
136
+ - **Side-by-side profile comparison**: two profile images (left and right) with a central draggable “shape” and aligned interest lists between them.
137
+ - **Main regions**: left image, right image, center shape with text, loading indicator when a request is in progress.
138
+ - **Action**: “View Profile” on each side; the component emits `viewProfileClick` with `{ side: 'left' | 'right' }` so the host can route or act.
139
+
140
+ No key-entry modals or API key inputs appear in the library; all keys and third-party API calls live on your backend.
141
+
142
+ ---
143
+
144
+ ## Full setup (copy-paste)
145
+
146
+ 1. Create or open an Angular app (Angular ^20.0.0).
147
+
148
+ 2. Install the library and peer dependencies (TensorFlow is required for dependency optimization in Vite etc.):
149
+
150
+ ```bash
151
+ npm install @naniteninja/profile-comparison-lib @angular/core@^20 @angular/common@^20 @tensorflow/tfjs @tensorflow-models/universal-sentence-encoder
152
+ ```
153
+
154
+ 3. Add the backend URL provider in `app.config.ts`:
155
+
156
+ ```typescript
157
+ import { ApplicationConfig } from '@angular/core';
158
+ import { provideHttpClient } from '@angular/common/http';
159
+ import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
160
+
161
+ export const appConfig: ApplicationConfig = {
162
+ providers: [
163
+ provideHttpClient(),
164
+ { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
165
+ ],
166
+ };
167
+ ```
168
+
169
+ Or in `AppModule`:
170
+
171
+ ```typescript
172
+ import { PROFILE_COMPARISON_API_BASE_URL } from '@naniteninja/profile-comparison-lib';
173
+
174
+ @NgModule({
175
+ providers: [
176
+ { provide: PROFILE_COMPARISON_API_BASE_URL, useValue: 'https://your-backend.com/api' },
177
+ ],
178
+ })
179
+ export class AppModule {}
180
+ ```
181
+
182
+ 4. Import the module where you use the component:
183
+
184
+ ```typescript
185
+ import { ProfileComparisonLibModule } from '@naniteninja/profile-comparison-lib';
186
+
187
+ @NgModule({
188
+ imports: [ProfileComparisonLibModule, ...],
189
+ })
190
+ export class YourModule {}
191
+ ```
192
+
193
+ 5. Add the component to a template with required `[config]`:
194
+
195
+ ```html
196
+ <lib-profile-comparison
197
+ [config]="config"
198
+ [fadeAllEdges]="fadeAllEdges"
199
+ (matrixDataChange)="onMatrixData($event)"
200
+ (rawLLMOutputChange)="onRawLLMOutput($event)"
201
+ (viewProfileClick)="onViewProfile($event)"
202
+ ></lib-profile-comparison>
203
+ ```
204
+
205
+ 6. Run the app and ensure your backend is reachable at the URL you provided.
206
+
207
+ ---
208
+
209
+ ## Inputs and outputs
210
+
211
+ ### Inputs
212
+
213
+ - **`config`** (required) — `IProfileConfig`:
214
+
215
+ ```json
216
+ {
217
+ "person1Interests": ["Gaming", "Programming", "AI/ML"],
218
+ "person2Interests": ["AI machine learning", "Mobile Games", "Data Science"],
219
+ "person3Interests": ["Board Games", "Machine Learning"],
220
+ "user1Image": "data:image/jpeg;base64,...",
221
+ "user2Image": "data:image/jpeg;base64,..."
222
+ }
223
+ ```
224
+
225
+ `user1Image` and `user2Image` can be data URLs or URLs; the library sends them to the backend as needed.
226
+
227
+ - **`fadeAllEdges`** (optional) — `boolean`, default `false`. When true, fades the outer edges of the profile area.
228
+
229
+ ### Outputs
230
+
231
+ - **`matrixDataChange`** — `IMatrixData`: legend, headers, and rows for the similarity matrix.
232
+
233
+ Example payload:
234
+
235
+ ```json
236
+ {
237
+ "legend": [{ "abbr": "Gam", "full": "Gaming" }, { "abbr": "Pro", "full": "Programming" }],
238
+ "headers": ["Gam", "Pro", "AI/ML"],
239
+ "rows": [
240
+ { "label": "Gam", "values": ["1.00", "0.2", "0.5"] },
241
+ { "label": "Pro", "values": ["0.2", "1.00", "0.8"] }
242
+ ]
243
+ }
244
+ ```
245
+
246
+ - **`rawLLMOutputChange`** — `string`: raw LLM output from the backend (if any).
247
+
248
+ - **`viewProfileClick`** — `{ side: 'left' | 'right' }`: emitted when the user clicks “View Profile” on the left or right side. Use this to navigate or open a profile page.
249
+
250
+ Example:
251
+
252
+ ```typescript
253
+ onViewProfile(payload: { side: 'left' | 'right' }) {
254
+ this.router.navigate(['/profile', payload.side]);
255
+ }
256
+ ```
257
+
258
+ ---
259
+
260
+ ## Backend API contract
261
+
262
+ The library calls your backend at `POST {baseUrl}/profile/compare-full` with body `{ config: IProfileConfig }`. The backend should return a display payload (face results, aligned lists, center item, matrix data, raw LLM output). See the **profile-comparison-server** repo and the lib interface `IComparisonPayload` for the response shape.
263
+
264
+ ---
265
+
266
+ ## Building the library
267
+
268
+ ```bash
269
+ ng build profile-comparison-lib
270
+ ```
271
+
272
+ Output is in `dist/profile-comparison-lib/` (FESM, typings, package.json). Peer dependencies: Angular `^20.0.0` and TensorFlow (`@tensorflow/tfjs`, `@tensorflow-models/universal-sentence-encoder`).
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@naniteninja/profile-comparison-lib",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.0.0",
6
- "@angular/core": "^20.0.0",
7
- "@tensorflow-models/universal-sentence-encoder": "^1.3.3",
8
- "@tensorflow/tfjs": "^4.22.0"
6
+ "@angular/core": "^20.0.0"
9
7
  },
10
8
  "dependencies": {
11
- "tslib": "^2.3.0"
9
+ "tslib": "^2.3.0",
10
+ "@tensorflow-models/universal-sentence-encoder": "^1.3.3",
11
+ "@tensorflow/tfjs": "^4.22.0"
12
12
  },
13
13
  "module": "fesm2022/naniteninja-profile-comparison-lib.mjs",
14
14
  "typings": "index.d.ts",