diff --git a/src/lib/components/workspace/Functions.svelte b/src/lib/components/workspace/Functions.svelte index f3381a1d0..1d630e5a9 100644 --- a/src/lib/components/workspace/Functions.svelte +++ b/src/lib/components/workspace/Functions.svelte @@ -216,7 +216,7 @@ -
+
{#each filteredItems as func}
+ import { v4 as uuidv4 } from 'uuid'; + import { toast } from 'svelte-sonner'; + import { goto } from '$app/navigation'; + + import { onMount, getContext, tick } from 'svelte'; + import { models, tools, functions, knowledge as knowledgeCollections } from '$lib/stores'; + + import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte'; + import Tags from '$lib/components/common/Tags.svelte'; + import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte'; + import ToolsSelector from '$lib/components/workspace/Models/ToolsSelector.svelte'; + import FiltersSelector from '$lib/components/workspace/Models/FiltersSelector.svelte'; + import ActionsSelector from '$lib/components/workspace/Models/ActionsSelector.svelte'; + import Capabilities from '$lib/components/workspace/Models/Capabilities.svelte'; + import Textarea from '$lib/components/common/Textarea.svelte'; + + const i18n = getContext('i18n'); + + export let onSubmit: Function; + export let model = null; + export let edit = false; + + let loading = false; + let success = false; + + let filesInputElement; + let inputFiles; + + let showAdvanced = false; + let showPreview = false; + + // /////////// + // model + // /////////// + + let id = ''; + let name = ''; + + $: if (!edit) { + if (name) { + id = name + .replace(/\s+/g, '-') + .replace(/[^a-zA-Z0-9-]/g, '') + .toLowerCase(); + } + } + + let info = { + id: '', + base_model_id: null, + name: '', + meta: { + profile_image_url: '/static/favicon.png', + description: '', + suggestion_prompts: null, + tags: [] + }, + params: { + system: '' + } + }; + + let params = {}; + let capabilities = { + vision: true, + usage: undefined + }; + + let knowledge = []; + let toolIds = []; + let filterIds = []; + let actionIds = []; + + const addUsage = (base_model_id) => { + const baseModel = $models.find((m) => m.id === base_model_id); + + if (baseModel) { + if (baseModel.owned_by === 'openai') { + capabilities.usage = baseModel.info?.meta?.capabilities?.usage ?? false; + } else { + delete capabilities.usage; + } + capabilities = capabilities; + } + }; + + const submitHandler = async () => { + loading = true; + + info.id = id; + info.name = name; + info.meta.capabilities = capabilities; + + if (knowledge.length > 0) { + info.meta.knowledge = knowledge; + } else { + if (info.meta.knowledge) { + delete info.meta.knowledge; + } + } + + if (toolIds.length > 0) { + info.meta.toolIds = toolIds; + } else { + if (info.meta.toolIds) { + delete info.meta.toolIds; + } + } + + if (filterIds.length > 0) { + info.meta.filterIds = filterIds; + } else { + if (info.meta.filterIds) { + delete info.meta.filterIds; + } + } + + if (actionIds.length > 0) { + info.meta.actionIds = actionIds; + } else { + if (info.meta.actionIds) { + delete info.meta.actionIds; + } + } + + info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null; + Object.keys(info.params).forEach((key) => { + if (info.params[key] === '' || info.params[key] === null) { + delete info.params[key]; + } + }); + + await onSubmit(info); + + loading = false; + success = false; + }; + + onMount(async () => { + // Scroll to top 'workspace-container' element + const workspaceContainer = document.getElementById('workspace-container'); + if (workspaceContainer) { + workspaceContainer.scrollTop = 0; + } + + if (model) { + name = model.name; + await tick(); + + id = model.id; + info = { + ...info, + ...JSON.parse( + JSON.stringify( + model?.info + ? model?.info + : { + id: model.id, + name: model.name + } + ) + ) + }; + + if (model.info.base_model_id) { + const base_model = $models + .filter((m) => !m?.preset && m?.owned_by !== 'arena') + .find((m) => + [model.info.base_model_id, `${model.info.base_model_id}:latest`].includes(m.id) + ); + + console.log('base_model', base_model); + + if (base_model) { + model.info.base_model_id = base_model.id; + } else { + model.info.base_model_id = null; + } + } + + params = { ...params, ...model?.info?.params }; + params.stop = params?.stop + ? (typeof params.stop === 'string' ? params.stop.split(',') : (params?.stop ?? [])).join( + ',' + ) + : null; + + toolIds = model?.info?.meta?.toolIds ?? []; + filterIds = model?.info?.meta?.filterIds ?? []; + actionIds = model?.info?.meta?.actionIds ?? []; + knowledge = (model?.info?.meta?.knowledge ?? []).map((item) => { + if (item?.collection_name) { + return { + id: item.collection_name, + name: item.name, + legacy: true + }; + } else if (item?.collection_names) { + return { + name: item.name, + type: 'collection', + collection_names: item.collection_names, + legacy: true + }; + } else { + return item; + } + }); + capabilities = { ...capabilities, ...(model?.info?.meta?.capabilities ?? {}) }; + if (model?.owned_by === 'openai') { + capabilities.usage = false; + } + + info = { + ...info, + ...model.info + }; + + console.log(model); + } + }); + + +
+ { + let reader = new FileReader(); + reader.onload = (event) => { + let originalImageUrl = `${event.target.result}`; + + const img = new Image(); + img.src = originalImageUrl; + + img.onload = function () { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + // Calculate the aspect ratio of the image + const aspectRatio = img.width / img.height; + + // Calculate the new width and height to fit within 100x100 + let newWidth, newHeight; + if (aspectRatio > 1) { + newWidth = 250 * aspectRatio; + newHeight = 250; + } else { + newWidth = 250; + newHeight = 250 / aspectRatio; + } + + // Set the canvas size + canvas.width = 250; + canvas.height = 250; + + // Calculate the position to center the image + const offsetX = (250 - newWidth) / 2; + const offsetY = (250 - newHeight) / 2; + + // Draw the image on the canvas + ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight); + + // Get the base64 representation of the compressed image + const compressedSrc = canvas.toDataURL(); + + // Display the compressed image + info.meta.profile_image_url = compressedSrc; + + inputFiles = null; + }; + }; + + if ( + inputFiles && + inputFiles.length > 0 && + ['image/gif', 'image/webp', 'image/jpeg', 'image/png', 'image/svg+xml'].includes( + inputFiles[0]['type'] + ) + ) { + reader.readAsDataURL(inputFiles[0]); + } else { + console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`); + inputFiles = null; + } + }} + /> + + + + {#if !edit || model} +
{ + submitHandler(); + }} + > +
+
+ +
+
+ +
+
+
{$i18n.t('Name')}*
+ +
+ +
+
+ +
+
{$i18n.t('Model ID')}*
+ +
+ +
+
+
+ + {#if !edit || model.preset} +
+
{$i18n.t('Base Model (From)')}
+ +
+ +
+
+ {/if} + +
+
+
{$i18n.t('Description')}
+ + +
+ + {#if info.meta.description !== null} +