aws-amplify / aws-amplify/amplify-ui

[FR] Liveness - FaceLivenessDetector component to support Theme Object and Color Mode

Open
#5,103 1 comment 0 reactions 0 assignees View on GitHub
feature-request Liveness
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### On which framework/platform would you like to see this feature implemented?

React

### Which UI component is this feature-request for?

Liveness

### Please describe your feature-request in detail.

Hi, `FaceLivenessDectector` component does not follow the colors from `ThemeObject` and `ColorMode`.

Affected Version:
- 3.0.13/14/15 (versions I have tried)
- examples from amplify-ui repo

**Example Code**
```typescript
const theme: Theme = {
name: 'liveness-theme',
overrides: [defaultDarkModeOverride],
};
...
return (



);
```

**Expected Result**
-----------------
![Screenshot 2024-03-26 at 13 06 13](https://github.com/aws-amplify/amplify-ui/assets/147362763/d380cadf-6b4f-4e47-a597-36dd217157de)

**Actual Result**
-----------------
![Screenshot 2024-03-26 at 13 05 22](https://github.com/aws-amplify/amplify-ui/assets/147362763/818a172f-1172-4da6-9f17-56495f2671c6)

### Please describe a solution you'd like.

I have noticed that liveness oval canvas `fillStyle` has been [hard-coded](https://github.com/aws-amplify/amplify-ui/blob/main/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts#L208) and set to white color (`#fff`) during `detectInitialFaceAndDrawOval`.
```typescript
// packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts
ctx.fillStyle = isStartScreen
? getComputedStyle(canvas).getPropertyValue(
'--amplify-colors-background-primary'
)
: '#fff';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
```

Tbh, I don't have enough knowledge on image recognition subject so I am not really whether it was by design or not.
If it's not by design, it would be nice if users could modify the `canvas fillStyle` via `ThemeObject` so that it will align with the App theme.

### We love contributors! Is this something you'd be interested in working on?

- [X] 👋 I may be able to implement this feature request.
- [ ] ⚠️ This feature might incur a breaking change.

Contributor guide

Open the contributing guide

Research direction

Start in packages/react-liveness/src/components/FaceLivenessDetector/service/utils/liveness.ts at detectInitialFaceAndDrawOval and inspect how the canvas fillStyle is selected. Reproduce the provided ThemeProvider colorMode="dark" example, then verify that the FaceLivenessDetector canvas follows the ThemeObject and ColorMode instead of using a fixed color.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.