Skip to content

feat: add sepia filter #62

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

Draft
serendipty01 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: add sepia filter #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .devops/migrator/src/scripts/api-server-pg/2026.02.12T17.20.25.add_sepia.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
ALTER TABLE user_management_service.user_interface_settings
ADD COLUMN moderator_safety_sepia boolean;

ALTER TABLE user_management_service.org_default_user_interface_settings
ADD COLUMN moderator_safety_sepia boolean NOT NULL DEFAULT false;
8 changes: 8 additions & 0 deletions client/src/graphql/generated.ts
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 23 additions & 1 deletion client/src/webpages/dashboard/mrt/ManualReviewSafetySettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ gql`
moderatorSafetyMuteVideo
moderatorSafetyGrayscale
moderatorSafetyBlurLevel
moderatorSafetySepia
}
}
}
Expand All @@ -47,10 +48,12 @@ export default function ManualReviewSafetySettings() {
moderatorSafetyBlurLevel: BlurStrength;
moderatorSafetyGrayscale: boolean;
moderatorSafetyMuteVideo: boolean;
moderatorSafetySepia: boolean;
}>({
moderatorSafetyBlurLevel: 2,
moderatorSafetyGrayscale: true,
moderatorSafetyMuteVideo: true,
moderatorSafetySepia: true,
});
const [notificationApi, notificationContextHolder] =
notification.useNotification();
Expand All @@ -76,11 +79,13 @@ export default function ManualReviewSafetySettings() {
moderatorSafetyMuteVideo,
moderatorSafetyGrayscale,
moderatorSafetyBlurLevel,
moderatorSafetySepia,
} = data.me.interfacePreferences;
setSettings({
moderatorSafetyMuteVideo,
moderatorSafetyGrayscale,
moderatorSafetyBlurLevel: moderatorSafetyBlurLevel as BlurStrength,
moderatorSafetySepia
});
}, [data?.me?.interfacePreferences]);

Expand Down Expand Up @@ -139,6 +144,23 @@ export default function ManualReviewSafetySettings() {
<Label htmlFor="grayscale">Grayscale</Label>
</div>
</div>
<div className="flex items-center h-10">
<div className="flex items-center space-x-2">
<Switch
id="sepia"
defaultChecked
onCheckedChange={(value) =>
setSettings({
...settings,
moderatorSafetySepia: value,
})
}
checked={settings.moderatorSafetySepia}
/>
<Label htmlFor="sepia">Sepia</Label>
</div>
</div>

<div className="flex items-center h-10">
<div className="flex items-center space-x-2">
<Switch
Expand All @@ -161,7 +183,7 @@ export default function ManualReviewSafetySettings() {
settings.moderatorSafetyBlurLevel != null
? BLUR_LEVELS[settings.moderatorSafetyBlurLevel]
: 'blur-sm'
} ${settings.moderatorSafetyGrayscale ? 'grayscale' : ''}`}
} ${settings.moderatorSafetyGrayscale ? 'grayscale' : ''} ${settings.moderatorSafetySepia ? 'sepia' : ''} `}
alt="puppies"
src={GoldenRetrieverPuppies}
/>
Expand Down
11 changes: 9 additions & 2 deletions client/src/webpages/dashboard/mrt/manual_review_job/IframeContentDisplayComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,31 @@ export default function IframeContentDisplayComponent(props: {
blur: boolean;
grayscale: boolean;
shouldTranslate: boolean;
sepia: boolean;
}>({
blur: true,
grayscale: false,
shouldTranslate: false,
sepia: false,
});

const { blur, grayscale, shouldTranslate } = state;
const { blur, grayscale, shouldTranslate, sepia } = state;

const { loading, data } = useGQLPersonalSafetySettingsQuery();
const {
moderatorSafetyBlurLevel = 2 as BlurStrength,
moderatorSafetyGrayscale = true,
moderatorSafetySepia = true,
} = data?.me?.interfacePreferences ?? {};

useEffect(() => {
setState({
blur: moderatorSafetyBlurLevel !== 0,
grayscale: moderatorSafetyGrayscale,
shouldTranslate: false,
sepia: moderatorSafetySepia,
});
}, [moderatorSafetyBlurLevel, moderatorSafetyGrayscale]);
}, [moderatorSafetyBlurLevel, moderatorSafetyGrayscale, moderatorSafetySepia]);

useEffect(() => {
const handleMessage = (event: MessageEvent) => {
Expand All @@ -75,6 +79,7 @@ export default function IframeContentDisplayComponent(props: {
blur: blur ? moderatorSafetyBlurLevel : 0,
grayscale,
shouldTranslate,
sepia,
},
contentProxyUrl,
);
Expand All @@ -91,6 +96,7 @@ export default function IframeContentDisplayComponent(props: {
blur: blur ? moderatorSafetyBlurLevel : 0,
grayscale,
shouldTranslate,
sepia,
},
contentProxyUrl,
);
Expand All @@ -114,6 +120,7 @@ export default function IframeContentDisplayComponent(props: {
shouldTranslate,
contentProxyUrl,
isIframeLoading,
sepia,
],
);

Expand Down
4 changes: 3 additions & 1 deletion client/src/webpages/dashboard/mrt/manual_review_job/ManualReviewJobContentBlurableImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default function ManualReviewJobContentBlurableImage(props: {
blurStrength?: BlurStrength;
grayscale?: boolean;
disableZoom?: boolean;
sepia?: boolean
};
onError?: () => void;
}) {
Expand All @@ -25,6 +26,7 @@ export default function ManualReviewJobContentBlurableImage(props: {
blurStrength = 0,
grayscale = false,
disableZoom = false,
sepia = false,
} = options ?? {};

const [clicked, setClicked] = useState<boolean>(false);
Expand All @@ -49,7 +51,7 @@ export default function ManualReviewJobContentBlurableImage(props: {
<img
className={`w-full rounded-lg hover:blur-none ${
shouldBlur ? BLUR_LEVELS[blurStrength] : 'blur-0'
} ${grayscale ? 'grayscale' : ''}`}
} ${grayscale ? 'grayscale' : ''} ${sepia ? 'sepia': ''} `}
alt=""
src={url}
onClick={() => setClicked(true)}
Expand Down
1 change: 1 addition & 0 deletions client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ function TableRowComponent(props: {
? (safetySettings.moderatorSafetyBlurLevel as BlurStrength)
: (2 as const),
grayscale: safetySettings?.moderatorSafetyGrayscale ?? false,
sepia: safetySettings?.moderatorSafetySepia ?? false,
}}
/>
{label ? <div className="font-bold">{label}</div> : null}
Expand Down
23 changes: 21 additions & 2 deletions client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECMediaViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,12 @@ export default function NCMECMediaViewer(props: {
moderatorSafetyBlurLevel: BlurStrength;
moderatorSafetyGrayscale: boolean;
moderatorSafetyMuteVideo: boolean;
moderatorSafetySepia: boolean;
Copy link
Copy Markdown

@evank28 evank28 Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing to consider -- the approach open sourced by Meta suggests letting users have different preference settings for different types of content (https://github.com/facebook/content-review-filters/blob/main/packages/content-review-components/ContentReviewFilterGlobalPreferenceContext.tsx#L37). So, a user could have Sepia enabled for animal abuse, for example, but not for graphic violence. At some point it may make sense to refactor the data model to take this into account.

You might also want to adopt a React Context approach like shown in that link, rather than having to pass the state down via props.

}>({
moderatorSafetyBlurLevel: 2,
moderatorSafetyGrayscale: true,
moderatorSafetyMuteVideo: true,
moderatorSafetySepia: true,
});

const { loading, error, data } = useGQLPersonalSafetySettingsQuery();
Expand Down Expand Up @@ -170,7 +172,8 @@ export default function NCMECMediaViewer(props: {
shouldBlur
? BLUR_LEVELS[safetySettings.moderatorSafetyBlurLevel]
: 0
} ${safetySettings.moderatorSafetyGrayscale ? 'grayscale' : ''}`}
} ${safetySettings.moderatorSafetyGrayscale ? 'grayscale' : ''}
${safetySettings.moderatorSafetySepia ? 'sepia' : ''} `}
alt=""
src={mediaId.urlInfo.url}
onError={(img) => {
Expand All @@ -190,7 +193,9 @@ export default function NCMECMediaViewer(props: {
isInInspectedView
? 'w-auto'
: 'object-scale-down grow max-w-64 max-h-48'
} ${safetySettings.moderatorSafetyGrayscale ? 'grayscale' : ''}`}
} ${safetySettings.moderatorSafetyGrayscale ? 'grayscale' : ''} ${
safetySettings.moderatorSafetySepia ? 'sepia' : ''
Copy link
Copy Markdown

@evank28 evank28 Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess in the future you would look at parameterizing the intensity?

} `}
url={mediaId.urlInfo.url}
options={{
shouldBlur:
Expand Down Expand Up @@ -267,6 +272,20 @@ export default function NCMECMediaViewer(props: {
/>
<Label htmlFor="grayscale">Grayscale</Label>
</div>
<div className="flex items-center space-x-2">
<Switch
id="sepia"
defaultChecked
onCheckedChange={(isSepia) =>
setSafetySettings({
...safetySettings,
moderatorSafetySepia: isSepia,
})
}
checked={safetySettings.moderatorSafetySepia}
/>
<Label htmlFor="sepia">Sepia</Label>
</div>
</div>
)}
{grayOutThumbnail || isInInspectedView ? null : (
Expand Down
15 changes: 11 additions & 4 deletions client/src/webpages/dashboard/mrt/manual_review_job/v2/ncmec/NCMECReviewUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,9 @@ export function getMatchedBanksForMediaUrl(
| { value: { url?: string; matchedBanks?: string[] }; type: string }[]
| undefined;
if (valueOrValues === undefined) continue;
const values = Array.isArray(valueOrValues) ? valueOrValues : [valueOrValues];
const values = Array.isArray(valueOrValues)
? valueOrValues
: [valueOrValues];
for (const tagged of values) {
const v = tagged.value;
if (v?.url === mediaUrl) {
Expand Down Expand Up @@ -397,6 +399,7 @@ export default function NCMECReviewUser(
moderatorSafetyBlurLevel,
moderatorSafetyGrayscale,
moderatorSafetyMuteVideo,
moderatorSafetySepia,
} = data?.me?.interfacePreferences ?? {};

// Compares two pieces of media to determine whether they're the same, based
Expand Down Expand Up @@ -582,14 +585,17 @@ export default function NCMECReviewUser(
<div className="overflow-hidden shadow-lg rounded-2xl w-fit">
{!loading &&
moderatorSafetyBlurLevel != null &&
moderatorSafetyGrayscale != null ? (
moderatorSafetyGrayscale != null &&
moderatorSafetySepia != null ? (
media.urlInfo.mediaType === 'IMAGE' ? (
<img
className={`object-scale-down w-64 h-48 rounded-2xl ${
unblurAllMediaInConfirmation
? 'blur-0'
: BLUR_LEVELS[moderatorSafetyBlurLevel as BlurStrength]
} ${moderatorSafetyGrayscale ? 'grayscale' : ''}`}
} ${moderatorSafetyGrayscale ? 'grayscale' : ''} ${
moderatorSafetySepia ? 'sepia' : ''
} `}
alt=""
src={media.urlInfo.url}
/>
Expand All @@ -598,7 +604,8 @@ export default function NCMECReviewUser(
url={media.urlInfo.url}
className={`object-scale-down w-64 h-48 rounded-2xl ${
moderatorSafetyGrayscale ? 'grayscale' : ''
}`}
}
${moderatorSafetySepia ? 'sepia' : ''} `}
options={{
shouldBlur:
!unblurAllMediaInConfirmation &&
Expand Down
Loading