{ let reader = new FileReader(); reader.onload = (event) => { let originalImageUrl = `${event.target?.result}`; // For animated formats (gif, webp), skip resizing to preserve animation const fileType = (inputFiles[0] as any)?.['type']; if (fileType === 'image/gif' || fileType === 'image/webp') { info.meta.profile_image_url = originalImageUrl; inputFiles = null; filesInputElement.value = ''; return; } 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('image/webp', 0.8); // Display the compressed image info.meta.profile_image_url = compressedSrc; inputFiles = null; filesInputElement.value = ''; }; }; if ( inputFiles && inputFiles.length > 0 && ['image/gif', 'image/webp', 'image/jpeg', 'image/png', 'image/svg+xml'].includes( (inputFiles[0] as any)?.['type'] ) ) { reader.readAsDataURL(inputFiles[0]); } else { console.log(`Unsupported File Type '${(inputFiles[0] as any)?.['type']}'.`); inputFiles = null; } }} /> {#if !edit || (edit && model)}

{ submitHandler(); }} >

{ filesInputElement.click(); }} > {#if info.meta.profile_image_url} {:else} {/if}

{ info.meta.profile_image_url = `${WEBUI_BASE_URL}/static/favicon.png`; }} type="button" > {$i18n.t('Reset Image')}

{ showAccessControlModal = true; }} >

{$i18n.t('Access')}

{#if preset}

{$i18n.t('Base Model (From)')}

{$i18n.t('Select a base model')} {#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena' && !(m?.direct ?? false)) as model} {model.name} {/each}

{/if}

{$i18n.t('Description')}

{ enableDescription = !enableDescription; }} > {#if !enableDescription} {$i18n.t('Default')} {:else} {$i18n.t('Custom')} {/if}

{#if enableDescription} {/if} </div> <div class="w-full mb-1 max-w-full"> <div class=""> <Tags tags={info?.meta?.tags ?? []} on:delete={(e) => { const tagName = e.detail; info.meta.tags = info.meta.tags.filter((tag) => tag.name !== tagName); }} on:add={(e) => { const tagName = e.detail; if (!(info?.meta?.tags ?? null)) { info.meta.tags = [{ name: tagName }]; } else { info.meta.tags = [...info.meta.tags, { name: tagName }]; } }} /> </div> </div> </div> </div> <div class="my-2"> <div class="flex w-full justify-between"> <div class=" self-center text-xs font-medium text-gray-500"> {$i18n.t('Model Params')} </div> </div> <div class="mt-2"> <div class="my-1"> <div class=" text-xs font-medium mb-2">{$i18n.t('System Prompt')}</div> <div> <Textarea className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden " placeholder={$i18n.t( 'Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.' )} rows={4} bind:value={system} /> </div> </div> <div class="flex w-full justify-between"> <div class=" self-center text-xs font-medium"> {$i18n.t('Advanced Params')} </div> <button class="p-1 px-3 text-xs flex rounded-sm transition" type="button" on:click={() => { showAdvanced = !showAdvanced; }} > {#if showAdvanced} <span class="ml-2 self-center">{$i18n.t('Hide')}</span> {:else} <span class="ml-2 self-center">{$i18n.t('Show')}</span> {/if} </button> </div> {#if showAdvanced} <div class="my-2"> <AdvancedParams admin={true} custom={true} bind:params /> </div> {/if} </div> </div> <hr class=" border-gray-100/30 dark:border-gray-850/30 my-2" /> <div class="my-2"> <div class="flex w-full justify-between items-center"> <div class="flex w-full justify-between items-center"> <div class=" self-center text-xs font-medium text-gray-500"> {$i18n.t('Prompts')} </div> <button class="p-1 text-xs flex rounded-sm transition" type="button" on:click={() => { if ((info?.meta?.suggestion_prompts ?? null) === null) { info.meta.suggestion_prompts = [{ content: '', title: ['', ''] }]; } else { info.meta.suggestion_prompts = null; } }} > {#if (info?.meta?.suggestion_prompts ?? null) === null} <span class="ml-2 self-center">{$i18n.t('Default')}</span> {:else} <span class="ml-2 self-center">{$i18n.t('Custom')}</span> {/if} </button> </div> </div> {#if info?.meta?.suggestion_prompts} <PromptSuggestions bind:promptSuggestions={info.meta.suggestion_prompts} /> {/if} </div> <div class="my-4"> <Knowledge bind:selectedItems={knowledge} /> </div> <div class="my-4"> <ToolsSelector bind:selectedToolIds={toolIds} tools={$tools ?? []} /> </div> <div class="my-4"> <SkillsSelector bind:selectedSkillIds={skillIds} /> </div> {#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0 || ($functions ?? []).filter((func) => func.type === 'action').length > 0} <hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" /> {#if ($functions ?? []).filter((func) => func.type === 'filter').length > 0} <div class="my-4"> <FiltersSelector bind:selectedFilterIds={filterIds} filters={($functions ?? []).filter((func) => func.type === 'filter')} /> </div> {@const toggleableFilters = $functions.filter( (func) => func.type === 'filter' && (filterIds.includes(func.id) || func?.is_global) && func?.meta?.toggle )} {#if toggleableFilters.length > 0} <div class="my-4"> <DefaultFiltersSelector bind:selectedFilterIds={defaultFilterIds} filters={toggleableFilters} /> </div> {/if} {/if} {#if ($functions ?? []).filter((func) => func.type === 'action').length > 0} <div class="my-4"> <ActionsSelector bind:selectedActionIds={actionIds} actions={($functions ?? []).filter((func) => func.type === 'action')} /> </div> {/if} {/if} <hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" /> <div class="my-4"> <Capabilities bind:capabilities /> </div> {#if Object.keys(capabilities).filter((key) => capabilities[key]).length > 0} {@const availableFeatures = Object.entries(capabilities) .filter( ([key, value]) => value && ['web_search', 'code_interpreter', 'image_generation'].includes(key) ) .map(([key, value]) => key)} {#if availableFeatures.length > 0} <div class="my-4"> <DefaultFeatures {availableFeatures} bind:featureIds={defaultFeatureIds} /> </div> {/if} {/if} {#if capabilities.builtin_tools} <div class="my-4"> <BuiltinTools bind:builtinTools /> </div> {/if} <div class="my-4"> <div class="flex w-full justify-between mb-1"> <div class="self-center text-xs font-medium text-gray-500"> {$i18n.t('TTS Voice')} </div> </div> <input class="w-full text-sm bg-transparent outline-hidden" type="text" bind:value={tts.voice} placeholder={$i18n.t('e.g. alloy, echo, shimmer')} /> </div> <hr class=" border-gray-100/30 dark:border-gray-850/30 my-4" /> <div class="my-2 flex justify-end"> <button class=" text-sm px-3 py-2 transition rounded-lg {loading ? ' cursor-not-allowed bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black' : 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex w-full justify-center" type="submit" disabled={loading} > <div class=" self-center font-medium"> {#if edit} {$i18n.t('Save & Update')} {:else} {$i18n.t('Save & Create')} {/if} </div> {#if loading} <div class="ml-1.5 self-center"> <Spinner /> </div> {/if} </button> </div> <div class="my-2 text-gray-300 dark:text-gray-700 pb-20"> <div class="flex w-full justify-between mb-2"> <div class=" self-center text-sm font-medium">{$i18n.t('JSON Preview')}</div> <button class="p-1 px-3 text-xs flex rounded-sm transition" type="button" on:click={() => { showPreview = !showPreview; }} > {#if showPreview} <span class="ml-2 self-center">{$i18n.t('Hide')}</span> {:else} <span class="ml-2 self-center">{$i18n.t('Show')}</span> {/if} </button> </div> {#if showPreview} <div> <textarea class="text-sm w-full bg-transparent outline-hidden resize-none" rows="10" value={JSON.stringify(info, null, 2)} disabled readonly /> </div> {/if} </div> </div> </form> {/if} </div> {/if}