Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added DamageDisclosure feature #898

Merged
merged 12 commits into from
Jan 13, 2025
Merged

Added DamageDisclosure feature #898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6162f20
Added new images post options: PART_SELECT && TWO_SHOT
dlymonkai Jan 2, 2025
505bc44
Added 'VehicleDynamicWireframe' component
dlymonkai Jan 2, 2025
e585c7d
Added 'VehiclePartSelection' component
dlymonkai Jan 2, 2025
a905b6d
Added 'CaptureSelection' component
dlymonkai Jan 7, 2025
866af56
Enabled gallery to hide Sight pictures
dlymonkai Jan 2, 2025
af35c72
Shared components between `PhotoCapture' and 'DamageDisclosure'
dlymonkai Jan 2, 2025
7165396
Shared hooks logic between 'PhotoCapture' and 'DamageDisclosure'
dlymonkai Jan 2, 2025
18f47e4
Added 'part_select' addDamage feature + fixed import from common hook…
dlymonkai Jan 2, 2025
250b836
Added 'DamageDisclosure' component
dlymonkai Jan 2, 2025
d68f662
Added CaptureSelectionPage & DamageDisclosure in `demo-app`
dlymonkai Jan 7, 2025
cc09ab8
Docs + improve function/const naming
dlymonkai Jan 9, 2025
1328989
Fixed conflits with VideoCapture feature
dlymonkai Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions apps/demo-app/src/components/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
VehicleTypeSelectionPage,
} from '../pages';
import { App } from './App';
import { CaptureSelectionPage } from '../pages/CaptureSelectionPage';
import { DamageDisclosurePage } from '../pages/DamageDisclosurePage';

export function AppRouter() {
return (
Expand All @@ -34,6 +36,15 @@ export function AppRouter() {
}
index
/>
<Route
path={Page.CAPTURE_SELECTION}
element={
<AuthGuard redirectTo={Page.LOG_IN}>
<CaptureSelectionPage />
</AuthGuard>
}
index
/>
<Route
path={Page.PHOTO_CAPTURE}
element={
Expand All @@ -43,6 +54,15 @@ export function AppRouter() {
}
index
/>
<Route
path={Page.DAMAGE_DISCLOSURE}
element={
<AuthGuard redirectTo={Page.LOG_IN}>
<DamageDisclosurePage />
</AuthGuard>
}
index
/>
<Route path='*' element={<Navigate to={Page.CREATE_INSPECTION} />} />
</Route>
</Routes>
Expand Down
3 changes: 2 additions & 1 deletion apps/demo-app/src/local-config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "Config for the local Demo App.",
"workflow": "photo",
"allowSkipRetake": true,
"enableAddDamage": true,
"addDamage": "part_select",
"enableSightGuidelines": true,
"allowVehicleTypeSelection": true,
"allowManualLogin": true,
Expand All @@ -15,6 +15,7 @@
"apiDomain": "api.preview.monk.ai/v1",
"thumbnailDomain": "europe-west1-monk-preview-321715.cloudfunctions.net/image_resize",
"enableSightTutorial": false,
"enableTutorial": "first_time_only",
"startTasksOnComplete": true,
"showCloseButton": false,
"enforceOrientation": "landscape",
Expand Down
Empty file added apps/demo-app/src/pages/CaptureSelectionPage/CaptureSelectionPage.module.css
View file
Open in desktop
Empty file.
17 changes: 17 additions & 0 deletions apps/demo-app/src/pages/CaptureSelectionPage/CaptureSelectionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { CaptureSelection } from '@monkvision/common-ui-web';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Page } from '../pages';

export function CaptureSelectionPage() {
const navigate = useNavigate();
const { i18n } = useTranslation();

return (
<CaptureSelection
lang={i18n.language}
onCapture={() => navigate(Page.PHOTO_CAPTURE)}
onAddDamage={() => navigate(Page.DAMAGE_DISCLOSURE)}
/>
);
}
1 change: 1 addition & 0 deletions apps/demo-app/src/pages/CaptureSelectionPage/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CaptureSelectionPage';
7 changes: 7 additions & 0 deletions apps/demo-app/src/pages/DamageDisclosurePage/DamageDisclosurePage.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
33 changes: 33 additions & 0 deletions apps/demo-app/src/pages/DamageDisclosurePage/DamageDisclosurePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useTranslation } from 'react-i18next';
import { useMonkAppState } from '@monkvision/common';
import { DamageDisclosure } from '@monkvision/inspection-capture-web';
import { useNavigate } from 'react-router-dom';
import { CaptureWorkflow, VehicleType } from '@monkvision/types';
import styles from './DamageDisclosurePage.module.css';
import { Page } from '../pages';

export function DamageDisclosurePage() {
const navigate = useNavigate();
const { i18n } = useTranslation();
const { config, authToken, inspectionId, vehicleType } = useMonkAppState({
requireInspection: true,
requireWorkflow: CaptureWorkflow.PHOTO,
});

return (
<div className={styles['container']}>
<DamageDisclosure
{...config}
apiConfig={{
authToken,
apiDomain: config.apiDomain,
thumbnailDomain: config.thumbnailDomain,
}}
inspectionId={inspectionId}
onComplete={() => navigate(Page.PHOTO_CAPTURE)}
lang={i18n.language}
vehicleType={vehicleType ?? VehicleType.SEDAN}
/>
</div>
);
}
1 change: 1 addition & 0 deletions apps/demo-app/src/pages/DamageDisclosurePage/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './DamageDisclosurePage';
3 changes: 2 additions & 1 deletion apps/demo-app/src/pages/PhotoCapturePage/PhotoCapturePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useMonkAppState } from '@monkvision/common';
import { PhotoCapture } from '@monkvision/inspection-capture-web';
import { CaptureWorkflow } from '@monkvision/types';
import { CaptureWorkflow, VehicleType } from '@monkvision/types';
import styles from './PhotoCapturePage.module.css';
import { createInspectionReportLink } from './inspectionReport';

Expand Down Expand Up @@ -36,6 +36,7 @@ export function PhotoCapturePage() {
sights={currentSights}
onComplete={handleComplete}
lang={i18n.language}
vehicleType={vehicleType ?? VehicleType.SEDAN}
/>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/demo-app/src/pages/VehicleTypeSelectionPage/VehicleTypeSelectionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function VehicleTypeSelectionPage() {
const { i18n } = useTranslation();

if (vehicleType || !config.allowVehicleTypeSelection) {
return <Navigate to={Page.PHOTO_CAPTURE} replace />;
return <Navigate to={Page.CAPTURE_SELECTION} replace />;
}

return (
Expand Down
2 changes: 2 additions & 0 deletions apps/demo-app/src/pages/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,7 @@ export enum Page {
LOG_IN = '/log-in',
CREATE_INSPECTION = '/create-inspection',
PHOTO_CAPTURE = '/photo-capture',
DAMAGE_DISCLOSURE = '/damage-disclosure',
VEHICLE_TYPE_SELECTION = '/vehicle-type-selection',
CAPTURE_SELECTION = '/capture-selection',
}
4 changes: 2 additions & 2 deletions apps/demo-app/test/pages/PhotoCapturePage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const appState = {
enforceOrientation: 'test-enforceOrientation-test',
maxUploadDurationWarning: 'test-maxUploadDurationWarning-test',
allowSkipRetake: 'test-allowSkipRetake-test',
enableAddDamage: 'test-enableAddDamage-test',
addDamage: 'test-addDamage-test',
enableCompliance: 'test-enableCompliance-test',
enableCompliancePerSight: 'test-enableCompliancePerSight-test',
complianceIssues: 'test-complianceIssues-test',
Expand Down Expand Up @@ -53,7 +53,7 @@ describe('PhotoCapture page', () => {
enforceOrientation: appState.config.enforceOrientation,
maxUploadDurationWarning: appState.config.maxUploadDurationWarning,
allowSkipRetake: appState.config.allowSkipRetake,
enableAddDamage: appState.config.enableAddDamage,
addDamage: appState.config.addDamage,
enableCompliance: appState.config.enableCompliance,
enableCompliancePerSight: appState.config.enableCompliancePerSight,
complianceIssues: appState.config.complianceIssues,
Expand Down
4 changes: 4 additions & 0 deletions configs/test-utils/src/__mocks__/@monkvision/common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ const {
mergeValidationFunctions,
required,
email,
getVehicleModel,
getAspectRatio,
} = jest.requireActual('@monkvision/common');

export = {
Expand Down Expand Up @@ -67,6 +69,8 @@ export = {
mergeValidationFunctions,
required,
email,
getVehicleModel,
getAspectRatio,

/* Mocks */
useMonkTheme: jest.fn(() => createTheme()),
Expand Down
6 changes: 6 additions & 0 deletions configs/test-utils/src/__mocks__/@monkvision/sights.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ const vehicles = {
model: 'F-150 Super Cab XL 2014',
type: VehicleType.PICKUP,
},
[VehicleModel.AUDIA7]: {
id: VehicleModel.AUDIA7,
make: 'Audi',
model: 'A7',
type: VehicleType.HATCHBACK,
},
};

const labels = {
Expand Down
38 changes: 38 additions & 0 deletions documentation/docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,44 @@ export const MonkJsConfig: PhotoCaptureAppConfig = {

This configuration object can then be passed to components like `<MonkAppStateProvider>` or `<PhotoCapture>`.

## Available Configuration Options
The following table lists the available configuration options in the `CaptureAppConfig` interface :

| Name | Type | Description | Required | Default Value |
|------------------------------------|----------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|-----------------------------|
| allowManualLogin | `boolean` | Indicates if manual login and logout should be enabled or not. | ✔️ | |
| fetchFromSearchParams | `boolean` | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | |
| allowVehicleTypeSelection | `boolean` | Indicates if manual vehicle type selection should be enabled if the vehicle type is not defined. | ✔️ | |
| enableSteeringWheelPosition | `boolean` | Indicates if the capture Sights should vary based on the steering wheel position (right or left). | ✔️ | |
| defaultVehicleType | `VehicleType` | Default vehicle type to use if no vehicle type has been specified. | ✔️ | |
| defaultSteeringWheelPosition | `SteeringWheelPosition` | Default steering wheel position to use if no steering wheel position has been specified. | if `enableSteeringWheelPosition` is set to `true` | |
| sights | `Record<..., string[]>` | A map associating each vehicle type supported by the app to a list of sight IDs. If `enableSteeringWheelPosition` is set to `true`, it's a map associating each steering wheel position to this map. | ✔️ | |
| allowCreateInspection | `boolean` | Indicates if automatic inspection creation should be enabled in the app. | ✔️ | |
| createInspectionOptions | `CreateInspectionOptions` | Options used when automatically creating an inspection. | if `allowCreateInspection` is set to `true` | |
| apiDomain | `string` | The API domain used to communicate with the API. | ✔️ | |
| requiredApiPermissions | `MonkApiPermission[]` | Required API permission that the user must have to use the current app. | | |
| palette | `Partial<MonkPalette>` | Custom color palette to use in the app. | | |
| enforceOrientation | `DeviceOrientation` | Use this prop to enforce a specific device orientation for the Camera screen. | | |
| maxUploadDurationWarning | `number` | Max upload duration in milliseconds before showing a bad connection warning to the user. Use `-1` to never display the warning. | | `15000` |
| useAdaptiveImageQuality | `boolean` | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | | `true` |
| showCloseButton | `boolean` | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | | `false` |
| startTasksOnComplete | `<code>boolean &#124; TaskName[]</code>` | Value indicating if tasks should be started at the end of the inspection. See the `inspection-capture-web` package doc for more info. | | `true` |
| additionalTasks | `TaskName[]` | An optional list of additional tasks to run on every Sight of the inspection. | | |
| tasksBySight | `Record<string, TaskName[]>` | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used. | | |
| resolution | `CameraResolution` | Indicates the resolution of the pictures taken by the Camera. | | `CameraResolution.UHD_4K` |
| allowImageUpscaling | `boolean` | Allow images to be scaled up if the device does not support the specified resolution in the `resolution` prop. | | `false` |
| format | `CompressionFormat` | The output format of the compression. | | `CompressionFormat.JPEG` |
| quality | `number` | Value indicating image quality for the compression output. | | `0.6` |
| addDamage | `AddDamage` | Options for Add Damage, If disabled, the `Add Damage` button will be hidden. | | `AddDamage.PART_SELECT` |
| allowSkipRetake | `boolean` | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant. | | `false` |
| enableCompliance | `boolean` | Indicates if compliance checks should be enabled or not. | | `true` |
| enableCompliancePerSight | `string[]` | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled. | | |
| complianceIssues | `ComplianceIssue[]` | If compliance checks are enabled, this property can be used to select a list of compliance issues to check. | | `DEFAULT_COMPLIANCE_ISSUES` |
| complianceIssuesPerSight | `Record<string, ComplianceIssue[]>` | A map associating Sight IDs to a list of compliance issues to check. | | |
| useLiveCompliance | `boolean` | Indicates if live compliance should be enabled or not. | | `false` |
| customComplianceThresholds | `CustomComplianceThresholds` | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues. | | |
| customComplianceThresholdsPerSight | `Record<string, CustomComplianceThresholds>` | A map associating Sight IDs to custom compliance thresholds. | | |

## Live Configs
MonkJs now also offers a way to configure Live Configurations for your web applications. This allows MonkJs apps to
fetch their configurations (`PhotoCaptureAppConfig` or `VideoCaptureAppConfig`) from a GCP Bucket on startup. By doing
Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/photo-capture-workflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ increase the detection rate. This feature is called `Add Damage`, and there two
take a close-up picture of the damage.

For now, only the 2-shot workflow is implemented in the PhotoCapture workflow. This feature is enabled by default in the
`PhotoCapture` component. To disable it, pass the `enableAddDamage` prop to `false`.
`PhotoCapture` component. To disable it, pass the `addDamage` prop to `AddDamage.DISABLED`.

## Using Compliance
The compliance is a feature that allows our AI models to analyze the quality of the pictures taken by the user, and if
Expand Down
Loading
Loading