{ 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; } }} /> {#if model}

{ updateHandler(); }} >

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

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

{#if model.preset}

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

{/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-xs 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 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 transition"
							type="button"
							on:click={() => {
								if (info.meta.suggestion_prompts === null) {
									info.meta.suggestion_prompts = [{ content: '' }];
								} else {
									info.meta.suggestion_prompts = null;
								}
							}}
						>
							{#if info.meta.suggestion_prompts === 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}
						<button
							class="p-1 px-2 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>
					{/if}
				</div>

{#if info.meta.suggestion_prompts}
					<div class="flex flex-col space-y-1 mt-2">
						{#if info.meta.suggestion_prompts.length > 0}
							{#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}
						{:else}
							<div class="text-xs text-center">No suggestion prompts</div>
						{/if}
					</div>
				{/if}
			</div>

<div class="my-2">
				<div class="flex w-full justify-between">
					<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
				</div>
				<div class="flex flex-col">
					{#each Object.keys(capabilities) as capability}
						<div class=" flex items-center gap-2">
							<Checkbox
								state={capabilities[capability] ? 'checked' : 'unchecked'}
								on:change={(e) => {
									capabilities[capability] = e.detail === 'checked';
								}}
							/>

<div class=" py-1.5 text-sm w-full capitalize">
								{$i18n.t(capability)}
							</div>
						</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>