{ 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 = 100 * aspectRatio; newHeight = 100; } else { newWidth = 100; newHeight = 100 / aspectRatio; } // Set the canvas size canvas.width = 100; canvas.height = 100; // Calculate the position to center the image const offsetX = (100 - newWidth) / 2; const offsetY = (100 - 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/jpeg'); // 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'].includes(inputFiles[0]['type']) ) { reader.readAsDataURL(inputFiles[0]); } else { console.log(`Unsupported File Type '${inputFiles[0]['type']}'.`); inputFiles = null; } }} /> { history.back(); }} >

{$i18n.t('Back')}

{#if model}

{ updateHandler(); }} >

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

{$i18n.t('Name')}*

{$i18n.t('Model ID')}*

{#if model.preset}

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

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

{/if}

{$i18n.t('Description')}*

{$i18n.t('Model Params')}

{$i18n.t('System Prompt')}

</div> </div> <div class="flex w-full justify-between"> <div class=" self-center text-sm font-semibold"> {$i18n.t('Advanced Params')} </div> <button class="p-1 px-3 text-xs flex rounded 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 bind:params on:change={(e) => { info.params = { ...info.params, ...params }; }} /> </div> {/if} </div> </div> <div class="my-2"> <div class="flex w-full justify-between mb-2"> <div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div> <button class="p-1 px-3 text-xs flex rounded transition" type="button" on:click={() => { if ( info.meta.suggestion_prompts.length === 0 || info.meta.suggestion_prompts.at(-1).content !== '' ) { info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }]; } }} > <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> </div> <div class="flex flex-col space-y-1"> {#each info.meta.suggestion_prompts as prompt, promptIdx} <div class=" flex border dark:border-gray-600 rounded-lg"> <input class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600" placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')} bind:value={prompt.content} /> <button class="px-2" type="button" on:click={() => { info.meta.suggestion_prompts.splice(promptIdx, 1); info.meta.suggestion_prompts = info.meta.suggestion_prompts; }} > <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} </div> </div> <div class="my-2 text-gray-500"> <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 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="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg" rows="10" value={JSON.stringify(info, null, 2)} disabled readonly /> </div> {/if} </div> <div class="my-2 flex justify-end mb-20"> <button class=" text-sm px-3 py-2 transition rounded-xl {loading ? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800' : ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex" type="submit" disabled={loading} > <div class=" self-center font-medium">{$i18n.t('Save & Update')}</div> {#if loading} <div class="ml-1.5 self-center"> <svg class=" w-4 h-4" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><style> .spinner_ajPY { transform-origin: center; animation: spinner_AtaB 0.75s infinite linear; } @keyframes spinner_AtaB { 100% { transform: rotate(360deg); } } </style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" /><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY" /></svg > </div> {/if} </button> </div> </form> {/if} </div>