OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-25 17:57:20 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

enh: use model profile image in call

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/components/chat/MessageInput/CallOverlay.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <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 { onMount, tick, getContext } from 'svelte';
import { import {
@ -28,6 +28,8 @@
export let chatId; export let chatId;
export let modelId; export let modelId;
let model = null;
let loading = false; let loading = false;
let confirmed = false; let confirmed = false;
let interrupted = false; let interrupted = false;
@ -507,6 +509,8 @@
}; };
onMount(async () => { onMount(async () => {
model = $models.find((m) => m.id === modelId);
startRecording(); startRecording();
const chatStartHandler = async (e) => { const chatStartHandler = async (e) => {
@ -657,7 +661,13 @@
? ' size-16' ? ' size-16'
: rmsLevel * 100 > 1 : rmsLevel * 100 > 1
? 'size-14' ? '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} {/if}
<!-- navbar --> <!-- navbar -->
@ -732,7 +742,13 @@
? 'size-48' ? 'size-48'
: rmsLevel * 100 > 1 : rmsLevel * 100 > 1
? 'size-[11.5rem]' ? '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} {/if}
</button> </button>

16
src/routes/(app)/workspace/models/create/+page.svelte
View File

@ -229,20 +229,20 @@
// Calculate the new width and height to fit within 100x100 // Calculate the new width and height to fit within 100x100
let newWidth, newHeight; let newWidth, newHeight;
if (aspectRatio > 1) { if (aspectRatio > 1) {
newWidth = 100 * aspectRatio; newWidth = 250 * aspectRatio;
newHeight = 100; newHeight = 250;
} else { } else {
newWidth = 100; newWidth = 250;
newHeight = 100 / aspectRatio; newHeight = 250 / aspectRatio;
} }
// Set the canvas size // Set the canvas size
canvas.width = 100; canvas.width = 250;
canvas.height = 100; canvas.height = 250;
// Calculate the position to center the image // Calculate the position to center the image
const offsetX = (100 - newWidth) / 2; const offsetX = (250 - newWidth) / 2;
const offsetY = (100 - newHeight) / 2; const offsetY = (250 - newHeight) / 2;
// Draw the image on the canvas // Draw the image on the canvas
ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);

16
src/routes/(app)/workspace/models/edit/+page.svelte
View File

@ -190,20 +190,20 @@
// Calculate the new width and height to fit within 100x100 // Calculate the new width and height to fit within 100x100
let newWidth, newHeight; let newWidth, newHeight;
if (aspectRatio > 1) { if (aspectRatio > 1) {
newWidth = 100 * aspectRatio; newWidth = 250 * aspectRatio;
newHeight = 100; newHeight = 250;
} else { } else {
newWidth = 100; newWidth = 250;
newHeight = 100 / aspectRatio; newHeight = 250 / aspectRatio;
} }
// Set the canvas size // Set the canvas size
canvas.width = 100; canvas.width = 250;
canvas.height = 100; canvas.height = 250;
// Calculate the position to center the image // Calculate the position to center the image
const offsetX = (100 - newWidth) / 2; const offsetX = (250 - newWidth) / 2;
const offsetY = (100 - newHeight) / 2; const offsetY = (250 - newHeight) / 2;
// Draw the image on the canvas // Draw the image on the canvas
ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);