tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: default profile image with user initials

Browse source
This commit is contained in:
Danny Liu 2024-04-01 16:11:28 -07:00
parent 653a0ff02f
commit 40e1e212d4
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/lib/components/chat/Settings/Account.svelte
View file

@ -19,6 +19,25 @@
let JWTTokenCopied = false;
let profileImageInputElement: HTMLInputElement;
const generateInitialsImage = (name) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
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 initials = name.split(' ').map(word => word[0]).join('');
ctx.fillText(initials.toUpperCase(), canvas.width / 2, canvas.height / 2);
return canvas.toDataURL();
};
const submitHandler = async () => {
const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
(error) => {
@ -116,7 +135,7 @@
}}
>
<img
src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
src={profileImageUrl !== '' ? profileImageUrl : generateInitialsImage(name)}
alt="profile"
class=" rounded-full w-16 h-16 object-cover"
/>
@ -142,9 +161,7 @@
<button
class=" text-xs text-gray-600"
on:click={async () => {
const url = await getGravatarUrl($user.email);
profileImageUrl = url;
profileImageUrl = generateInitialsImage(name);
}}>{$i18n.t('Use Gravatar')}</button
>
</div>