{ 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')}*
{$i18n.t('description')}*
{$i18n.t('Model')}
{$i18n.t('Params')}*
{$i18n.t('Prompt suggestions')}
{ if ( info.meta.suggestion_prompts.length === 0 || info.meta.suggestion_prompts.at(-1).content !== '' ) { info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }]; } }} >
{#each info.meta.suggestion_prompts as prompt, promptIdx}
{ info.meta.suggestion_prompts.splice(promptIdx, 1); info.meta.suggestion_prompts = info.meta.suggestion_prompts; }} >
{/each}
{#if pullProgress !== null}
{$i18n.t('Pull Progress')}
{pullProgress ?? 0}%
{digest}
{/if}
{$i18n.t('Save & Update')}
{#if loading}
{/if}
{/if}