|
@@ -1,7 +1,7 @@
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
import { toast } from 'svelte-sonner';
|
|
import { toast } from 'svelte-sonner';
|
|
import { onMount, tick, getContext } from 'svelte';
|
|
import { onMount, tick, getContext } from 'svelte';
|
|
- import { type Model, mobile, modelfiles, settings, showSidebar } from '$lib/stores';
|
|
|
|
|
|
+ import { type Model, mobile, modelfiles, settings, showSidebar, models } from '$lib/stores';
|
|
import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
|
|
import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
|
|
|
|
|
|
import {
|
|
import {
|
|
@@ -27,7 +27,8 @@
|
|
export let stopResponse: Function;
|
|
export let stopResponse: Function;
|
|
|
|
|
|
export let autoScroll = true;
|
|
export let autoScroll = true;
|
|
- export let selectedModel: Model | undefined;
|
|
|
|
|
|
+ export let selectedAtModel: Model | undefined;
|
|
|
|
+ export let selectedModels: [''];
|
|
|
|
|
|
let chatTextAreaElement: HTMLTextAreaElement;
|
|
let chatTextAreaElement: HTMLTextAreaElement;
|
|
let filesInputElement;
|
|
let filesInputElement;
|
|
@@ -52,6 +53,8 @@
|
|
|
|
|
|
let speechRecognition;
|
|
let speechRecognition;
|
|
|
|
|
|
|
|
+ let visionCapableState = 'all';
|
|
|
|
+
|
|
$: if (prompt) {
|
|
$: if (prompt) {
|
|
if (chatTextAreaElement) {
|
|
if (chatTextAreaElement) {
|
|
chatTextAreaElement.style.height = '';
|
|
chatTextAreaElement.style.height = '';
|
|
@@ -59,6 +62,20 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ $: {
|
|
|
|
+ if (selectedAtModel || selectedModels) {
|
|
|
|
+ visionCapableState = checkModelsAreVisionCapable();
|
|
|
|
+ if (visionCapableState === 'none') {
|
|
|
|
+ // Remove all image files
|
|
|
|
+ const fileCount = files.length;
|
|
|
|
+ files = files.filter((file) => file.type != 'image');
|
|
|
|
+ if (files.length < fileCount) {
|
|
|
|
+ toast.warning($i18n.t('All selected models do not support image input, removed images'));
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
let mediaRecorder;
|
|
let mediaRecorder;
|
|
let audioChunks = [];
|
|
let audioChunks = [];
|
|
let isRecording = false;
|
|
let isRecording = false;
|
|
@@ -326,6 +343,35 @@
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ const checkModelsAreVisionCapable = () => {
|
|
|
|
+ let modelsToCheck = [];
|
|
|
|
+ if (selectedAtModel !== undefined) {
|
|
|
|
+ modelsToCheck = [selectedAtModel.id];
|
|
|
|
+ } else {
|
|
|
|
+ modelsToCheck = selectedModels;
|
|
|
|
+ }
|
|
|
|
+ if (modelsToCheck.length == 0 || modelsToCheck[0] == '') {
|
|
|
|
+ return 'all';
|
|
|
|
+ }
|
|
|
|
+ let visionCapableCount = 0;
|
|
|
|
+ for (const modelName of modelsToCheck) {
|
|
|
|
+ const model = $models.find((m) => m.id === modelName);
|
|
|
|
+ if (!model) {
|
|
|
|
+ continue;
|
|
|
|
+ }
|
|
|
|
+ if (model.custom_info?.params.vision_capable ?? true) {
|
|
|
|
+ visionCapableCount++;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (visionCapableCount == modelsToCheck.length) {
|
|
|
|
+ return 'all';
|
|
|
|
+ } else if (visionCapableCount == 0) {
|
|
|
|
+ return 'none';
|
|
|
|
+ } else {
|
|
|
|
+ return 'some';
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
onMount(() => {
|
|
onMount(() => {
|
|
window.setTimeout(() => chatTextAreaElement?.focus(), 0);
|
|
window.setTimeout(() => chatTextAreaElement?.focus(), 0);
|
|
|
|
|
|
@@ -358,11 +404,9 @@
|
|
inputFiles.forEach((file) => {
|
|
inputFiles.forEach((file) => {
|
|
console.log(file, file.name.split('.').at(-1));
|
|
console.log(file, file.name.split('.').at(-1));
|
|
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
|
|
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
|
|
- if (selectedModel !== undefined) {
|
|
|
|
- if (!(selectedModel.custom_info?.vision_capable ?? true)) {
|
|
|
|
- toast.error($i18n.t('Selected model does not support image inputs.'));
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ if (visionCapableState == 'none') {
|
|
|
|
+ toast.error($i18n.t('Selected models do not support image inputs'));
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
let reader = new FileReader();
|
|
let reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
reader.onload = (event) => {
|
|
@@ -500,12 +544,12 @@
|
|
bind:chatInputPlaceholder
|
|
bind:chatInputPlaceholder
|
|
{messages}
|
|
{messages}
|
|
on:select={(e) => {
|
|
on:select={(e) => {
|
|
- selectedModel = e.detail;
|
|
|
|
|
|
+ selectedAtModel = e.detail;
|
|
chatTextAreaElement?.focus();
|
|
chatTextAreaElement?.focus();
|
|
}}
|
|
}}
|
|
/>
|
|
/>
|
|
|
|
|
|
- {#if selectedModel !== undefined}
|
|
|
|
|
|
+ {#if selectedAtModel !== undefined}
|
|
<div
|
|
<div
|
|
class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900"
|
|
class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900"
|
|
>
|
|
>
|
|
@@ -514,7 +558,7 @@
|
|
crossorigin="anonymous"
|
|
crossorigin="anonymous"
|
|
alt="model profile"
|
|
alt="model profile"
|
|
class="size-5 max-w-[28px] object-cover rounded-full"
|
|
class="size-5 max-w-[28px] object-cover rounded-full"
|
|
- src={$modelfiles.find((modelfile) => modelfile.tagName === selectedModel.id)
|
|
|
|
|
|
+ src={$modelfiles.find((modelfile) => modelfile.tagName === selectedAtModel.id)
|
|
?.imageUrl ??
|
|
?.imageUrl ??
|
|
($i18n.language === 'dg-DG'
|
|
($i18n.language === 'dg-DG'
|
|
? `/doge.png`
|
|
? `/doge.png`
|
|
@@ -522,7 +566,7 @@
|
|
/>
|
|
/>
|
|
<div>
|
|
<div>
|
|
Talking to <span class=" font-medium"
|
|
Talking to <span class=" font-medium"
|
|
- >{selectedModel.custom_info?.name ?? selectedModel.name}
|
|
|
|
|
|
+ >{selectedAtModel.custom_info?.name ?? selectedAtModel.name}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -530,7 +574,7 @@
|
|
<button
|
|
<button
|
|
class="flex items-center"
|
|
class="flex items-center"
|
|
on:click={() => {
|
|
on:click={() => {
|
|
- selectedModel = undefined;
|
|
|
|
|
|
+ selectedAtModel = undefined;
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
<XMark />
|
|
<XMark />
|
|
@@ -556,13 +600,11 @@
|
|
const _inputFiles = Array.from(inputFiles);
|
|
const _inputFiles = Array.from(inputFiles);
|
|
_inputFiles.forEach((file) => {
|
|
_inputFiles.forEach((file) => {
|
|
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
|
|
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
|
|
- if (selectedModel !== undefined) {
|
|
|
|
- if (!(selectedModel.custom_info?.vision_capable ?? true)) {
|
|
|
|
- toast.error($i18n.t('Selected model does not support image inputs.'));
|
|
|
|
- inputFiles = null;
|
|
|
|
- filesInputElement.value = '';
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ if (visionCapableState === 'none') {
|
|
|
|
+ toast.error($i18n.t('Selected models do not support image inputs'));
|
|
|
|
+ inputFiles = null;
|
|
|
|
+ filesInputElement.value = '';
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
let reader = new FileReader();
|
|
let reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
reader.onload = (event) => {
|
|
@@ -897,7 +939,7 @@
|
|
|
|
|
|
if (e.key === 'Escape') {
|
|
if (e.key === 'Escape') {
|
|
console.log('Escape');
|
|
console.log('Escape');
|
|
- selectedModel = undefined;
|
|
|
|
|
|
+ selectedAtModel = undefined;
|
|
}
|
|
}
|
|
}}
|
|
}}
|
|
rows="1"
|
|
rows="1"
|