{#if onBack} {/if} {#if edit && model?.version_id && !readOnly} {/if} {#if !historical && !readOnly}

{#if $user?.permissions?.sharing?.models || $user?.role === 'admin'} (showAccessControlModal = true)} /> {/if}

{/if}

{#if selectingVersion}

{:else if selectedVersion}

{#key selectedVersion.id} {/key}

{/if}

{ 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(); }} >

{#if backgroundPreview || info.meta.background_image_url} {$i18n.t('Background

{:else} {/if}

{#if info.meta.profile_image_url && info.meta.profile_image_url !== `${WEBUI_BASE_URL}/static/favicon.png`} {/if}

{#if editingLocale} setLocalizedField( 'name', (e.currentTarget as HTMLInputElement).value )} /> {:else} {/if} {#if !readOnly}

{#if loading}{/if} {#if backgroundPreview || info.meta.background_image_url} {:else} {/if}

{/if}

{#if editingLocale}

{#if localizedField('name')} {/if}

{/if}

{#if editingLocale}

{$i18n.t('Description ({{language}})', { language: editingLocaleLabel || editingLocale })}

{#if localizedField('description')} {/if}

{:else} {/if}

{#if editingLocale}

setLocalizedField(
													'description',
													(e.currentTarget as HTMLTextAreaElement).value
												)}
										/>
									{:else if enableDescription}
										<Textarea
											className="w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
											placeholder={$i18n.t('Add a short description about what this model does')}
											minSize={32}
											bind:value={info.meta.description}
										/>
									{/if}
								</div>

<div class="flex min-w-0 flex-col gap-2">
									{#if preset}
										<div
											class="grid min-w-0 grid-cols-[7rem_minmax(0,1fr)] items-center gap-2 sm:grid-cols-[8rem_minmax(0,1fr)]"
										>
											<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
												<ModelSettingsLabel
													label={$i18n.t('Base Model (From)')}
													description={$i18n.t(
														'Choose the underlying model that generates responses for this custom model.'
													)}
												/>
											</div>

<div class="min-w-0">
												<ModelSelector
													id="workspace-base-model"
													placeholder={$i18n.t('Select a base model')}
													searchPlaceholder={$i18n.t('Search a model')}
													items={getBaseModelItems($models)}
													triggerClassName="text-xs font-normal text-gray-900 dark:text-gray-100"
													selectionOnly
													{includeHidden}
													bind:value={info.base_model_id}
												/>
											</div>
										</div>
									{/if}

<div
										class="grid min-w-0 grid-cols-[7rem_minmax(0,1fr)] items-start gap-2 sm:grid-cols-[8rem_minmax(0,1fr)]"
									>
										<div class="pt-1 text-xs font-normal text-gray-600 dark:text-gray-400">
											<ModelSettingsLabel
												label={$i18n.t('Tags')}
												description={$i18n.t(
													'Add tags to organize models and make them easier to find.'
												)}
											/>
										</div>
										<div class="min-w-0">
											<Tags
												tags={info?.meta?.tags ?? []}
												{suggestionTags}
												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>
						</fieldset>

<div class="px-2.5 md:px-4">
							<section class="mt-4">
								<div class="space-y-2 px-1">
									<div
										class="flex items-center justify-between gap-2 text-xs font-normal text-gray-600 dark:text-gray-400"
									>
										<ModelSettingsLabel
											label={$i18n.t('System Prompt')}
											description={$i18n.t(
												'Set instructions that guide how this model behaves throughout a chat.'
											)}
										/>
										{#if !readOnly && !historical}
											<button
												type="button"
												class="shrink-0 rounded-md px-2 py-1 text-gray-500 hover:text-gray-900 disabled:opacity-50 dark:hover:text-gray-100"
												disabled={loading || promotingVersion}
												on:click={compareRevision}>{$i18n.t('Compare revision')}</button
											>
										{/if}
									</div>

{#if showSystemPrompt || !system.trim()}
										<fieldset disabled={readOnly} class="min-w-0">
											<div>
												<Textarea
													ariaLabel={$i18n.t('System Prompt')}
													className="min-h-12 w-full resize-none overflow-y-hidden bg-transparent py-1 text-[0.8125rem] outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700 font-normal text-gray-900 dark:text-gray-100"
													placeholder={$i18n.t(
														'Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.'
													)}
													rows={2}
													minSize={48}
													bind:value={system}
												/>
											</div>
											{#if chatVariablesPreview.fields.length > 0 || chatVariablesPreview.userFields.length > 0 || chatVariablesPreview.warnings.length > 0}
												<div class="mt-2 border-t border-gray-100/60 pt-2 dark:border-gray-850/60">
													<div class="mb-1.5 flex items-center justify-between gap-2">
														<div class="text-xs font-normal text-gray-600 dark:text-gray-400">
															{$i18n.t('Detected Variables')}
														</div>
														{#if chatVariablesPreview.fields.length + chatVariablesPreview.userFields.length > 0}
															<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
																{chatVariablesPreview.fields.length +
																	chatVariablesPreview.userFields.length}
															</div>
														{/if}
													</div>

{#if chatVariablesPreview.fields.length > 0}
														<div
															class="mb-1 text-[0.6875rem] font-normal text-gray-600 dark:text-gray-400"
														>
															{$i18n.t('Chat Variables')}
														</div>
														<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
															{#each chatVariablesPreview.fields as field}
																<div
																	class="flex items-center gap-1 font-normal text-gray-900 dark:text-gray-100"
																>
																	<span class="font-medium">{field.key}</span>
																	<span class="text-gray-400 dark:text-gray-600">{field.type}</span>
																	{#if field.required}
																		<span class="text-amber-600 dark:text-amber-400">required</span>
																	{/if}
																</div>
															{/each}
														</div>
													{/if}

{#if chatVariablesPreview.userFields.length > 0}
														<div
															class="mb-1 mt-2 text-[0.6875rem] font-normal text-gray-600 dark:text-gray-400"
														>
															{$i18n.t('User Variables')}
														</div>
														<div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
															{#each chatVariablesPreview.userFields as field}
																<div
																	class="flex items-center gap-1 font-normal text-gray-900 dark:text-gray-100"
																>
																	<span class="font-medium">{field.key}</span>
																</div>
															{/each}
														</div>
													{/if}

{#if chatVariablesPreview.warnings.length > 0}
														<div
															class="mt-2 flex flex-col gap-1 text-xs text-amber-600 dark:text-amber-400"
														>
															{#each chatVariablesPreview.warnings as warning}
																<div>{warning}</div>
															{/each}
														</div>
													{/if}
												</div>
											{/if}
										</fieldset>
									{:else}
										<button
											type="button"
											aria-label={$i18n.t('System Prompt')}
											aria-expanded={false}
											on:click={() => {
												showSystemPrompt = true;
											}}
											class="w-full cursor-text text-start line-clamp-5 whitespace-pre-wrap break-words text-[0.8125rem] font-normal text-gray-900 dark:text-gray-100"
										>
											{system}
										</button>
									{/if}
									{#if system.trim()}
										<button
											class="block text-xs text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
											type="button"
											aria-expanded={showSystemPrompt}
											on:click={() => {
												showSystemPrompt = !showSystemPrompt;
											}}
										>
											{showSystemPrompt ? $i18n.t('Show less') : $i18n.t('Show more')}
										</button>
									{/if}
								</div>
								
								<div class="mt-2 space-y-0.5">
									<button
										type="button"
										class="grid w-full grid-cols-[7rem_minmax(0,1fr)_auto] items-center gap-2 rounded-md px-1 py-1.5 text-start text-xs font-normal focus-visible:outline focus-visible:outline-2 sm:grid-cols-[8rem_minmax(0,1fr)_auto]"
										aria-expanded={showAdvanced}
										on:click={() => (showAdvanced = !showAdvanced)}
									>
										<span class="font-normal text-gray-600 dark:text-gray-400"
											><ModelSettingsLabel
												label={$i18n.t('Advanced Params')}
												description={$i18n.t(
													'Override generation settings such as temperature, token limits, and sampling. Unmodified settings use the provider defaults.'
												)}
											/></span
										>
										<span class="text-gray-900 dark:text-gray-100">
											
											{modifiedParamCount
												? $i18n.t('{{count}} modified', { count: modifiedParamCount })
												: $i18n.t('Default')}
										</span>
										<ChevronRight
											className={`size-3 text-gray-400 transition-transform ${showAdvanced ? 'rotate-90' : ''}`}
										/>
									</button>

{#if showAdvanced}
										<fieldset disabled={readOnly} class="min-w-0 my-2 pl-3">
											<AdvancedParams admin={true} custom={true} layout="grid" bind:params />
										</fieldset>
									{/if}
									<fieldset disabled={readOnly} class="min-w-0">
										{#if !editingLocale}
											<ModelControls bind:controls={params.model_controls} />
										{:else if Object.keys(params.model_controls ?? {}).length}
											{@const fields = modelControlTranslationSource(params.model_controls ?? {})}
											{@const customized = Object.keys(fields).some((key) =>
												info.meta.i18n?.[editingLocale]?.[key]?.trim()
											)}
											<ModelSettingsSection
												label={$i18n.t('Model controls')}
												description={$i18n.t(
													'Let people choose approved parameter presets in chat.'
												)}
												summary={customized ? $i18n.t('Custom') : $i18n.t('Default')}
											>
												{#each Object.entries(fields) as [key, original] (key)}
													<div
														class="rounded-xl px-2 py-1.5 focus-within:bg-gray-50 dark:focus-within:bg-gray-850 {info.meta.i18n?.[
															editingLocale
														]?.[key]?.trim()
															? ''
															: 'opacity-60 focus-within:opacity-100'}"
													>
														<Textarea
															className="min-h-5 w-full min-w-0 resize-none overflow-hidden bg-transparent text-[0.8125rem] font-normal leading-5 text-gray-900 outline-hidden placeholder:text-gray-500 dark:text-gray-100 dark:placeholder:text-gray-400"
															placeholder={original}
															value={info.meta.i18n?.[editingLocale]?.[key] ?? ''}
															onInput={(event) =>
																setLocalizedField(
																	key,
																	(event.currentTarget as HTMLTextAreaElement).value
																)}
														/>
													</div>
												{/each}
												{#if customized}
													<div
														class="flex justify-end px-2 py-1 text-xs text-gray-500 dark:text-gray-400"
													>
														<button
															type="button"
															class="hover:text-gray-900 disabled:opacity-40 dark:hover:text-gray-100"
															on:click={() => Object.keys(fields).forEach(clearLocalizedField)}
															>{$i18n.t('Use default')}</button
														>
													</div>
												{/if}
											</ModelSettingsSection>
										{/if}
									</fieldset>
								</div>
							</section>

<fieldset disabled={readOnly} class="min-w-0">
								<section class="mt-0.5">
									<ModelSettingsSection
										label={$i18n.t('Prompts')}
										description={$i18n.t(
											'Set the starter suggestions people see when opening a new chat with this model.'
										)}
										summary={editingLocale
											? Array.isArray(info.meta.i18n?.[editingLocale]?.suggestion_prompts)
												? $i18n.t('Custom')
												: $i18n.t('Default')
											: info.meta.suggestion_prompts == null
												? $i18n.t('Default')
												: `${$i18n.t('Custom')} · ${info.meta.suggestion_prompts.length}`}
									>
										{#if editingLocale}
											<LocalizedPromptSuggestions
												promptSuggestions={info.meta.suggestion_prompts ??
													resolveLocalizedPromptSuggestions(
														$config?.default_prompt_suggestions,
														$config?.default_prompt_suggestions_i18n ?? {},
														editingLocale,
														(key) => $i18n.t(key)
													)}
												bind:localizedPromptSuggestions={info.meta.i18n}
												locale={editingLocale}
												localeLabel={editingLocaleLabel}
												disabled={readOnly}
											/>
										{:else if info.meta.suggestion_prompts != null}
											<PromptSuggestions
												bind:promptSuggestions={info.meta.suggestion_prompts}
												disabled={readOnly}
											>
												<button
													slot="label"
													disabled={readOnly}
													type="button"
													class="hover:text-gray-900 disabled:opacity-40 dark:hover:text-gray-100"
													on:click={() => {
														customPromptDraft = structuredClone(info.meta.suggestion_prompts);
														info.meta.suggestion_prompts = null;
													}}>{$i18n.t('Use default')}</button
												>
											</PromptSuggestions>
										{:else}
											<div
												class="flex items-center justify-between gap-3 px-1 py-1 text-xs text-gray-500 dark:text-gray-400"
											>
												<span>{$i18n.t('Using default prompt suggestions')}</span>
												<button
													type="button"
													class="shrink-0 hover:text-gray-900 dark:hover:text-gray-100"
													on:click={() => {
														info.meta.suggestion_prompts = customPromptDraft ?? [
															{ content: '', title: ['', ''] }
														];
													}}>{$i18n.t('Customize')}</button
												>
											</div>
										{/if}
									</ModelSettingsSection>
								</section>

<div class="my-3 space-y-0.5">
									<Knowledge bind:selectedItems={knowledge} disabled={readOnly} />
									<ToolsSelector
										bind:selectedToolIds={toolIds}
										tools={$tools ?? []}
										disabled={readOnly}
									/>
									<SkillsSelector
										bind:selectedSkillIds={skillIds}
										skills={skillsList}
										disabled={readOnly}
									/>
									{#if ($functions ?? []).some((func) => func.type === 'filter')}
										<FiltersSelector
											bind:selectedFilterIds={filterIds}
											bind:defaultFilterIds
											filters={($functions ?? []).filter((func) => func.type === 'filter')}
											disabled={readOnly}
										/>
									{/if}
									{#if ($functions ?? []).some((func) => func.type === 'action')}
										<ActionsSelector
											bind:selectedActionIds={actionIds}
											actions={($functions ?? []).filter((func) => func.type === 'action')}
											disabled={readOnly}
										/>
									{/if}
								</div>
								<div class="space-y-0.5">
									<Capabilities
										bind:capabilities
										bind:defaultFeatureIds
										bind:builtinTools
										disabled={readOnly}
									/>
									<ModelSettingsSection
										label={$i18n.t('Voice')}
										description={$i18n.t(
											'Configure the realtime voice, voice avatar, and text-to-speech voice for this model.'
										)}
										summary={[
											$config?.audio?.realtime?.enabled
												? voice.voice || $i18n.t('Admin default')
												: null,
											voiceAvatar
												? $i18n.t('Custom avatar')
												: $config?.audio?.realtime?.enabled
													? $i18n.t('Default orb')
													: null,
											tts.voice
										]
											.filter(Boolean)
											.join(' · ') || $i18n.t('Default')}
									>
										{#if $config?.audio?.realtime?.enabled}
											<div
												class="grid min-h-8 grid-cols-[7rem_minmax(0,1fr)] items-center gap-2 px-1 text-xs sm:grid-cols-[8rem_minmax(0,1fr)]"
											>
												<div class="flex min-w-0 items-center">
													<label
														for="realtime-voice-input"
														class="self-center text-xs font-normal text-gray-600 dark:text-gray-400"
													>
														{$i18n.t('Realtime Voice')}
													</label>
												</div>
												<TTSVoiceInput
													className="w-full font-normal text-gray-900 dark:text-gray-100"
													id="realtime-voice"
													bind:value={voice.voice}
													placeholder={$i18n.t('Admin default')}
												/>
											</div>
										{/if}
										<VoiceAvatarSettings
											bind:value={voiceAvatar}
											bind:file={avatarFile}
											bind:animationFiles
											disabled={loading || readOnly}
										/>
										<div
											class="grid min-h-8 grid-cols-[7rem_minmax(0,1fr)] items-center gap-2 px-1 text-xs sm:grid-cols-[8rem_minmax(0,1fr)]"
										>
											<div class="flex min-w-0 items-center">
												<div
													class="self-center text-xs font-normal text-gray-600 dark:text-gray-400"
												>
													{$i18n.t('TTS Voice')}
												</div>
											</div>
											<TTSVoiceInput
												className="w-full font-normal text-gray-900 dark:text-gray-100"
												bind:value={tts.voice}
												{voices}
												placeholder={$i18n.t('e.g. alloy, echo, shimmer')}
											/>
										</div>
									</ModelSettingsSection>
									{#if capabilities.terminal && hasTerminal}
										<TerminalSelector bind:terminalId />
									{/if}
								</div>
							</fieldset>

<div class="my-2 text-xs text-gray-400 dark:text-gray-500">
								<div
									class="flex w-full items-center gap-2 {($settings?.highContrastMode ?? false)
										? ''
										: 'opacity-30 transition-opacity hover:opacity-60 focus-within:opacity-60'}"
								>
									<button
										type="button"
										class="flex h-7 min-w-0 flex-1 items-center justify-between gap-3 rounded-sm text-start text-xs focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
										aria-expanded={showPreview}
										on:click={() => (showPreview = !showPreview)}
									>
										<span class="font-normal">{$i18n.t('JSON Preview')}</span>
										<span aria-hidden="true">{showPreview ? $i18n.t('Hide') : $i18n.t('Show')}</span
										>
									</button>
									<button
										class="px-1.5 py-0.5 text-xs flex rounded-sm"
										type="button"
										on:click={async () => {
											const copied = await copyToClipboard(
												JSON.stringify(readOnly ? model : modelInfo, null, 2)
											);
											if (copied) {
												toast.success($i18n.t('Copied to clipboard'));
											}
										}}
									>
										{$i18n.t('Copy')}
									</button>
								</div>
								{#if showPreview}
									<div class="pt-2">
										<textarea
											class="w-full bg-transparent text-xs leading-5 outline-hidden resize-none font-normal text-gray-900 dark:text-gray-100"
											rows="8"
											value={JSON.stringify(readOnly ? model : modelInfo, null, 2)}
											disabled
											readonly
										/>
									</div>
								{/if}
							</div>
						</div>
					</div>
				</form>
			{/if}
		</div>
		{#if !readOnly && !historical && (!edit || model)}
			<div
				class="flex shrink-0 items-center justify-end gap-2 py-2"
				class:px-1={admin}
				class:px-3={!admin}
			>
				{#if edit}
					<input
						form={formId}
						type="text"
						aria-label={$i18n.t('Commit message')}
						placeholder={$i18n.t('Describe this change')}
						class="min-w-0 flex-1 border-0 bg-transparent px-1 text-xs outline-hidden focus:ring-0"
						bind:value={commitMessage}
					/>
				{/if}
				<button
					form={formId}
					class="flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg bg-gray-900 px-2.5 text-xs font-normal text-white transition hover:bg-black disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
					type="submit"
					disabled={loading || (edit && !configurationChanged)}
				>
					{edit ? $i18n.t('Save & Update') : $i18n.t('Save & Create')}
					{#if loading}<Spinner className="size-3" />{/if}
				</button>
			</div>
		{/if}
	</div>
{:else}
	<div class="flex h-full w-full items-center justify-center" role="status">
		<Spinner className="size-5" />
		<span class="sr-only">{$i18n.t('Loading...')}</span>
	</div>
{/if}