feat: use local profile image by default

backend/apps/web/models/users.py

@@ -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()),
             }
         )

backend/apps/web/routers/utils.py

@@ -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)

src/lib/apis/utils/index.ts

@@ -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;
+};

src/lib/components/chat/Settings/Account.svelte

@@ -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">
+			<div class="flex flex-col">
-				<button
+				<div class="self-center">
-					class="relative rounded-full dark:bg-gray-700"
+					<button
-					type="button"
+						class="relative rounded-full dark:bg-gray-700"
-					on:click={() => {
+						type="button"
-						document.getElementById('profile-image-input')?.click();
+						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="my-auto text-gray-100">
+						<img
-							<svg
+							src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
-								xmlns="http://www.w3.org/2000/svg"
+							alt="profile"
-								viewBox="0 0 20 20"
+							class=" rounded-full w-16 h-16 object-cover"
-								fill="currentColor"
+						/>
-								class="w-5 h-5"
+
-							>
+						<div
-								<path
+							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"
-									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"
+						>
-								/>
+							<div class="my-auto text-gray-100">
-							</svg>
+								<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">