{ 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; filesInputElement.value = ''; }; }; 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 || (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')}

{#if titleTranslations[langCode]} (showTitleModal = true)}>

{/if}

{#if preset}

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

{ addUsage(e.target.value); }} required > {$i18n.t('Select a base model')} {#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena') 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=" mt-2 my-1"> <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 class="my-2"> <div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <AccessControl bind:accessControl accessRoles={['read', 'write']} allowPublic={$user?.permissions?.sharing?.public_models || $user?.role === 'admin'} /> </div> </div> <hr class=" border-gray-100 dark:border-gray-850 my-1.5" /> <div class="my-2"> <div class="flex w-full justify-between"> <div class=" self-center text-sm font-semibold">{$i18n.t('Model Params')}</div> </div> <div class="mt-2"> <div class="my-1"> <div class=" text-xs font-semibold 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> <!-- MODAL: Full translation editor --> {#if showTitleModal} <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"> <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md"> <div class="flex justify-between dark:text-gray-300 pt-4 pb-1 s--7fsHGLC475o"> <h2 class="text-sm font-bold mb-2">{$i18n.t('Edit Title Translations')}</h2> <button class="text-xs px-2 py-1" on:click={() => (showTitleModal = false)}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"> <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> </svg> </button> </div> {#each LANGS as lang} <div class="mb-2"> <label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label> <input class="w-full text-sm p-1 border border-gray-300 dark:border-gray-700 rounded" bind:value={titleTranslations[lang]} placeholder={`Enter ${lang.toUpperCase()} title`} /> </div> {/each} <div class="flex justify-end space-x-2 mt-3"> <button class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full" on:click={() => (showTitleModal = false)} > Save </button> </div> </div> </div> {/if} {#if preset} <div class="my-1"> <div class=" text-sm font-semibold mb-1">{$i18n.t('Base Model (From)')}</div> <div> <select class="text-sm w-full bg-transparent outline-hidden" placeholder="Select a base model (e.g. llama3, gpt-4o)" bind:value={info.base_model_id} on:change={(e) => { addUsage(e.target.value); }} required > <option value={null} class=" text-gray-900" >{$i18n.t('Select a base model')}</option > {#each $models.filter((m) => (model ? m.id !== model.id : true) && !m?.preset && m?.owned_by !== 'arena') as model} <option value={model.id} class=" text-gray-900">{model.name}</option> {/each} </select> </div> </div> {/if} <div class="my-1"> <div class="mb-1 flex w-full justify-between items-center"> <div class=" self-center text-sm font-semibold">{$i18n.t('Description')}</div> <button class="p-1 text-xs flex rounded-sm transition" type="button" aria-pressed={enableDescription ? 'true' : 'false'} aria-label={enableDescription ? $i18n.t('Custom description enabled') : $i18n.t('Default description enabled')} on:click={() => { enableDescription = !enableDescription; }} > {#if !enableDescription} <span class="ml-2 self-center">{$i18n.t('Default')}</span> {:else} <span class="ml-2 self-center">{$i18n.t('Custom')}</span> {/if} </button> </div> {#if enableDescription} <Textarea className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden " placeholder={$i18n.t('Add a short description about what this model does')} bind:value={info.meta.description} /> {/if} </div> <div class=" mt-2 my-1"> <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 class="my-2"> <div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <AccessControl bind:accessControl accessRoles={['read', 'write']} allowPublic={$user?.permissions?.sharing?.public_models || $user?.role === 'admin'} /> </div> </div> <hr class=" border-gray-100 dark:border-gray-850 my-1.5" /> <div class="my-2"> <div class="flex w-full justify-between"> <div class=" self-center text-sm font-semibold">{$i18n.t('Model Params')}</div> </div> <div class="mt-2"> <div class="my-1"> <div class=" text-xs font-semibold mb-2">{$i18n.t('System Prompt')}</div> <div> <Textarea className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden " placeholder={`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-semibold"> {$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 dark:border-gray-850 my-1" /> <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-sm font-semibold"> {$i18n.t('Prompt suggestions')} </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 = []; } 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> {#if (info?.meta?.suggestion_prompts ?? null) !== null} <button class="p-1 px-2 text-xs flex rounded-sm transition" type="button" on:click={() => { editingIndex = null; newPrompt = createEmptyTranslations(); // Changed: use dynamic function showPromptModal = true; }} > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"> <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" /> </svg> </button> {/if} </div> {#if info?.meta?.suggestion_prompts} <div class="flex flex-col space-y-1 mt-1 mb-3"> {#if info.meta.suggestion_prompts.length > 0} {#each info.meta.suggestion_prompts as prompt, promptIdx} <div class="flex items-center space-x-2"> <input class="text-sm w-full bg-transparent outline-none border border-gray-200 dark:border-gray-800 rounded px-2 py-1" readonly value={prompt.content?.[langCode] || prompt.content?.[LANGS[0]] || ''} /> <button class="p-1 text-gray-500 hover:text-yellow-600" type="button" on:click={() => { editingIndex = promptIdx; newPrompt = parseContentToObj(prompt.content); // Changed: use parseContentToObj showPromptModal = true; }} title="Edit" > <div class=" self-center mr-2"> <PencilSolid /> </div> </button> <button class="text-xs px-2 py-1 bg-red-200 hover:bg-red-300 rounded" type="button" on:click={() => { info.meta.suggestion_prompts.splice(promptIdx, 1); info.meta.suggestion_prompts = [...info.meta.suggestion_prompts]; }} > <XMark class="size-4" /> </button> </div> {/each} {:else} <div class="text-xs text-center">No suggestion prompts</div> {/if} </div> {/if} </div> <!-- MODAL for adding/editing prompt translations --> {#if showPromptModal} <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"> <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md"> <div class="flex justify-between dark:text-gray-300 pt-4 pb-1 s--7fsHGLC475o"> <h2 class="text-sm font-bold mb-2"> {editingIndex === null ? $i18n.t('Add Translations') : $i18n.t('Edit Translations')} </h2> <button class="text-xs px-2 py-1" on:click={() => { showPromptModal = false; editingIndex = null; newPrompt = createEmptyTranslations(); // Changed: use dynamic function }} > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"> <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /> </svg> </button> </div> {#each LANGS as lang} <div class="mb-2"> <label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label> <input class="w-full text-sm p-1 border border-gray-300 dark:border-gray-700 rounded" value={newPrompt[lang] || ''} on:input={(e) => (newPrompt[lang] = e.target.value)} placeholder={`Enter ${lang.toUpperCase()} translation`} /> </div> {/each} <div class="flex justify-end space-x-2 mt-3"> <button class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full" on:click={() => { const firstLang = LANGS[0] || 'de'; if (newPrompt[firstLang]?.trim()) { if (editingIndex === null) { info.meta.suggestion_prompts = [ ...(info.meta.suggestion_prompts ?? []), { content: { ...newPrompt } } ]; } else { info.meta.suggestion_prompts[editingIndex].content = { ...newPrompt }; info.meta.suggestion_prompts = [...info.meta.suggestion_prompts]; } showPromptModal = false; newPrompt = createEmptyTranslations(); // Changed: use dynamic function editingIndex = null; } else { alert(`${firstLang.toUpperCase()} translation is required.`); // Changed: dynamic language } }}>{editingIndex === null ? 'Add' : 'Save'}</button> </div> </div> </div> {/if} <hr class=" border-gray-100 dark:border-gray-850 my-1.5" /> <div class="my-2"> <Knowledge bind:selectedItems={knowledge} /> </div> <div class="my-2"> <ToolsSelector bind:selectedToolIds={toolIds} tools={$tools} /> </div> <div class="my-2"> <FiltersSelector bind:selectedFilterIds={filterIds} filters={$functions.filter((func) => func.type === 'filter')} /> </div> <div class="my-2"> <ActionsSelector bind:selectedActionIds={actionIds} actions={$functions.filter((func) => func.type === 'action')} /> </div> <div class="my-2"> <Capabilities bind:capabilities /> </div> <div class="my-2 text-gray-300 dark:text-gray-700"> <div class="flex w-full justify-between mb-2"> <div class=" self-center text-sm font-semibold">{$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 class="my-2 flex justify-end pb-20"> <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> </div> </form> {/if} </div> {/if}