+
+
+
+
+
+
+
+
+
+
+
{$i18n.t('Profile Image')}
+
+
+
+
+
+
+
+
+
+
{$i18n.t('Name')}
+
+
+
+
+
+
diff --git a/src/lib/i18n/locales/en-US/translation.json b/src/lib/i18n/locales/en-US/translation.json
index 8c8e5dd2..e11ef013 100644
--- a/src/lib/i18n/locales/en-US/translation.json
+++ b/src/lib/i18n/locales/en-US/translation.json
@@ -150,6 +150,7 @@
"Failed to read clipboard contents": "",
"File Mode": "",
"File not found.": "",
+ "Fingerprint spoofing detected: Unable to use initials as avatar. Defaulting to default profile image.": "",
"Focus chat input": "",
"Format your variables using square brackets like this:": "",
"From (Base Model)": "",
@@ -340,6 +341,7 @@
"URL Mode": "",
"Use '#' in the prompt input to load and select your documents.": "",
"Use Gravatar": "",
+ "Use Initials": "",
"user": "",
"User Permissions": "",
"Users": "",
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 9ee8b6fc..e9a4e229 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -111,6 +111,82 @@ export const getGravatarURL = (email) => {
return `https://www.gravatar.com/avatar/${hash}`;
};
+export const canvasPixelTest = () => {
+ // Test a 1x1 pixel to potentially identify browser/plugin fingerprint blocking or spoofing
+ // Inspiration: https://github.com/kkapsner/CanvasBlocker/blob/master/test/detectionTest.js
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.height = 1;
+ canvas.width = 1;
+ const imageData = new ImageData(canvas.width, canvas.height);
+ const pixelValues = imageData.data;
+
+ // Generate RGB test data
+ for (let i = 0; i < imageData.data.length; i += 1) {
+ if (i % 4 !== 3) {
+ pixelValues[i] = Math.floor(256 * Math.random());
+ } else {
+ pixelValues[i] = 255;
+ }
+ }
+
+ ctx.putImageData(imageData, 0, 0);
+ const p = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+ // Read RGB data and fail if unmatched
+ for (let i = 0; i < p.length; i += 1) {
+ if (p[i] !== pixelValues[i]) {
+ console.log(
+ 'canvasPixelTest: Wrong canvas pixel RGB value detected:',
+ p[i],
+ 'at:',
+ i,
+ 'expected:',
+ pixelValues[i]
+ );
+ console.log('canvasPixelTest: Canvas blocking or spoofing is likely');
+ return false;
+ }
+ }
+
+ return true;
+};
+
+export const generateInitialsImage = (name) => {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = 100;
+ canvas.height = 100;
+
+ if (!canvasPixelTest()) {
+ console.log(
+ 'generateInitialsImage: failed pixel test, fingerprint evasion is likely. Using default image.'
+ );
+ return '/user.png';
+ }
+
+ ctx.fillStyle = '#F39C12';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.fillStyle = '#FFFFFF';
+ ctx.font = '40px Helvetica';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+
+ const sanitizedName = name.trim();
+ const initials =
+ sanitizedName.length > 0
+ ? sanitizedName[0] +
+ (sanitizedName.split(' ').length > 1
+ ? sanitizedName[sanitizedName.lastIndexOf(' ') + 1]
+ : '')
+ : '';
+
+ ctx.fillText(initials.toUpperCase(), canvas.width / 2, canvas.height / 2);
+
+ return canvas.toDataURL();
+};
+
export const copyToClipboard = (text) => {
if (!navigator.clipboard) {
const textArea = document.createElement('textarea');
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 2dc2a92b..c7eab0db 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -6,6 +6,7 @@
import { WEBUI_NAME, config, user } from '$lib/stores';
import { onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
+ import { generateInitialsImage, canvasPixelTest } from '$lib/utils';
const i18n = getContext('i18n');
@@ -36,10 +37,12 @@
};
const signUpHandler = async () => {
- const sessionUser = await userSignUp(name, email, password).catch((error) => {
- toast.error(error);
- return null;
- });
+ const sessionUser = await userSignUp(name, email, password, generateInitialsImage(name)).catch(
+ (error) => {
+ toast.error(error);
+ return null;
+ }
+ );
await setSessionUser(sessionUser);
};