From 0c322063b590a8ba7d0540e6cfaaa6631cd4a13b Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 26 Jan 2024 21:38:33 -0800
Subject: [PATCH] feat: use local profile image by default

---
 backend/apps/web/models/users.py              |  2 +-
 backend/apps/web/routers/utils.py             |  9 ++-
 src/lib/apis/utils/index.ts                   | 23 +++++++
 .../components/chat/Settings/Account.svelte   | 69 +++++++++++--------
 4 files changed, 72 insertions(+), 31 deletions(-)
 create mode 100644 src/lib/apis/utils/index.ts

diff --git a/backend/apps/web/models/users.py b/backend/apps/web/models/users.py
index d387c8b5..c6d8b38d 100644
--- a/backend/apps/web/models/users.py
+++ b/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()),
             }
         )
diff --git a/backend/apps/web/routers/utils.py b/backend/apps/web/routers/utils.py
index 9adf2801..86e1a9e5 100644
--- a/backend/apps/web/routers/utils.py
+++ b/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)
diff --git a/src/lib/apis/utils/index.ts b/src/lib/apis/utils/index.ts
new file mode 100644
index 00000000..ed4d4e02
--- /dev/null
+++ b/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;
+};
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index e9196a1f..58af63cf 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/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">
-				<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">