feat: use local profile image by default

This commit is contained in:
Timothy J. Baek 2024-01-26 21:38:33 -08:00
parent 3ce8f3e8fb
commit 0c322063b5
4 changed files with 72 additions and 31 deletions

View file

@ -65,7 +65,7 @@ class UsersTable:
"name": name,
"email": email,
"role": role,
"profile_image_url": get_gravatar_url(email),
"profile_image_url": "/user.png",
"timestamp": int(time.time()),
}
)

View file

@ -9,7 +9,7 @@ import os
import aiohttp
import json
from utils.misc import calculate_sha256
from utils.misc import calculate_sha256, get_gravatar_url
from config import OLLAMA_API_BASE_URL, DATA_DIR, UPLOAD_DIR
from constants import ERROR_MESSAGES
@ -165,3 +165,10 @@ def upload(file: UploadFile = File(...)):
yield f"data: {json.dumps(res)}\n\n"
return StreamingResponse(file_process_stream(), media_type="text/event-stream")
@router.get("/gravatar")
async def get_gravatar(
email: str,
):
return get_gravatar_url(email)

View file

@ -0,0 +1,23 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
export const getGravatarUrl = async (email: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/utils/gravatar?email=${email}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
error = err;
return null;
});
return res;
};

View file

@ -6,6 +6,7 @@
import { updateUserProfile } from '$lib/apis/auths';
import UpdatePassword from './Account/UpdatePassword.svelte';
import { getGravatarUrl } from '$lib/apis/utils';
export let saveHandler: Function;
@ -98,37 +99,47 @@
<div class=" mb-2.5 font-medium">Profile</div>
<div class="flex space-x-5">
<div class="self-center">
<button
class="relative rounded-full dark:bg-gray-700"
type="button"
on:click={() => {
document.getElementById('profile-image-input')?.click();
}}
>
<img
src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
alt="profile"
class=" rounded-full w-16 h-16 object-cover"
/>
<div
class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
<div class="flex flex-col">
<div class="self-center">
<button
class="relative rounded-full dark:bg-gray-700"
type="button"
on:click={() => {
document.getElementById('profile-image-input')?.click();
}}
>
<div class="my-auto text-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
<img
src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
alt="profile"
class=" rounded-full w-16 h-16 object-cover"
/>
<div
class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
>
<div class="my-auto text-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</div>
</div>
</div>
</button>
</button>
</div>
<button
class=" text-xs text-gray-600"
on:click={async () => {
const url = await getGravatarUrl($user.email);
profileImageUrl = url;
}}>Use Gravatar</button
>
</div>
<div class="flex-1">