From f1b350cbe67420dedb0d248d6f8cdd9124057794 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 17 Jun 2024 01:55:06 -0700
Subject: [PATCH] enh: use model profile image in call

---
 .../chat/MessageInput/CallOverlay.svelte      | 22 ++++++++++++++++---
 .../workspace/models/create/+page.svelte      | 16 +++++++-------
 .../(app)/workspace/models/edit/+page.svelte  | 16 +++++++-------
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/CallOverlay.svelte b/src/lib/components/chat/MessageInput/CallOverlay.svelte
index 67f80a34c..a9e96783b 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { config, settings, showCallOverlay } from '$lib/stores';
+	import { config, models, settings, showCallOverlay } from '$lib/stores';
 	import { onMount, tick, getContext } from 'svelte';
 
 	import {
@@ -28,6 +28,8 @@
 	export let chatId;
 	export let modelId;
 
+	let model = null;
+
 	let loading = false;
 	let confirmed = false;
 	let interrupted = false;
@@ -507,6 +509,8 @@
 	};
 
 	onMount(async () => {
+		model = $models.find((m) => m.id === modelId);
+
 		startRecording();
 
 		const chatStartHandler = async (e) => {
@@ -657,7 +661,13 @@
 									? ' size-16'
 									: rmsLevel * 100 > 1
 									? 'size-14'
-									: 'size-12'}  transition-all bg-black dark:bg-white rounded-full"
+									: 'size-12'}  transition-all rounded-full {(model?.info?.meta
+									?.profile_image_url ?? '/favicon.png') !== '/favicon.png'
+									? ' bg-cover bg-center bg-no-repeat'
+									: 'bg-black dark:bg-white'}  bg-black dark:bg-white"
+								style={(model?.info?.meta?.profile_image_url ?? '/favicon.png') !== '/favicon.png'
+									? `background-image: url('${model?.info?.meta?.profile_image_url}');`
+									: ''}
 							/>
 						{/if}
 						<!-- navbar -->
@@ -732,7 +742,13 @@
 										? 'size-48'
 										: rmsLevel * 100 > 1
 										? 'size-[11.5rem]'
-										: 'size-44'}  transition-all bg-black dark:bg-white rounded-full"
+										: 'size-44'}  transition-all rounded-full {(model?.info?.meta
+										?.profile_image_url ?? '/favicon.png') !== '/favicon.png'
+										? ' bg-cover bg-center bg-no-repeat'
+										: 'bg-black dark:bg-white'} "
+									style={(model?.info?.meta?.profile_image_url ?? '/favicon.png') !== '/favicon.png'
+										? `background-image: url('${model?.info?.meta?.profile_image_url}');`
+										: ''}
 								/>
 							{/if}
 						</button>
diff --git a/src/routes/(app)/workspace/models/create/+page.svelte b/src/routes/(app)/workspace/models/create/+page.svelte
index 130818c6a..2b1330542 100644
--- a/src/routes/(app)/workspace/models/create/+page.svelte
+++ b/src/routes/(app)/workspace/models/create/+page.svelte
@@ -229,20 +229,20 @@
 					// Calculate the new width and height to fit within 100x100
 					let newWidth, newHeight;
 					if (aspectRatio > 1) {
-						newWidth = 100 * aspectRatio;
-						newHeight = 100;
+						newWidth = 250 * aspectRatio;
+						newHeight = 250;
 					} else {
-						newWidth = 100;
-						newHeight = 100 / aspectRatio;
+						newWidth = 250;
+						newHeight = 250 / aspectRatio;
 					}
 
 					// Set the canvas size
-					canvas.width = 100;
-					canvas.height = 100;
+					canvas.width = 250;
+					canvas.height = 250;
 
 					// Calculate the position to center the image
-					const offsetX = (100 - newWidth) / 2;
-					const offsetY = (100 - newHeight) / 2;
+					const offsetX = (250 - newWidth) / 2;
+					const offsetY = (250 - newHeight) / 2;
 
 					// Draw the image on the canvas
 					ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);
diff --git a/src/routes/(app)/workspace/models/edit/+page.svelte b/src/routes/(app)/workspace/models/edit/+page.svelte
index 95505d3ee..947f2f3df 100644
--- a/src/routes/(app)/workspace/models/edit/+page.svelte
+++ b/src/routes/(app)/workspace/models/edit/+page.svelte
@@ -190,20 +190,20 @@
 					// Calculate the new width and height to fit within 100x100
 					let newWidth, newHeight;
 					if (aspectRatio > 1) {
-						newWidth = 100 * aspectRatio;
-						newHeight = 100;
+						newWidth = 250 * aspectRatio;
+						newHeight = 250;
 					} else {
-						newWidth = 100;
-						newHeight = 100 / aspectRatio;
+						newWidth = 250;
+						newHeight = 250 / aspectRatio;
 					}
 
 					// Set the canvas size
-					canvas.width = 100;
-					canvas.height = 100;
+					canvas.width = 250;
+					canvas.height = 250;
 
 					// Calculate the position to center the image
-					const offsetX = (100 - newWidth) / 2;
-					const offsetY = (100 - newHeight) / 2;
+					const offsetX = (250 - newWidth) / 2;
+					const offsetY = (250 - newHeight) / 2;
 
 					// Draw the image on the canvas
 					ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);