enh: use model profile image in call

This commit is contained in:
Timothy J. Baek 2024-06-17 01:55:06 -07:00
parent 9023a60d0d
commit f1b350cbe6
3 changed files with 35 additions and 19 deletions

View File

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

View File

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

View File

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