Merge pull request #837 from open-webui/title-generation

feat: enable title generation prompt edit

src/lib/apis/ollama/index.ts

@@ -133,9 +133,19 @@ export const getOllamaModels = async (token: string = '') => {
 	});
 };
 
-export const generateTitle = async (token: string = '', model: string, prompt: string) => {
+// TODO: migrate to backend
+export const generateTitle = async (
+	token: string = '',
+	template: string,
+	model: string,
+	prompt: string
+) => {
 	let error = null;
 
+	template = template.replace(/{{prompt}}/g, prompt);
+
+	console.log(template);
+
 	const res = await fetch(`${OLLAMA_API_BASE_URL}/generate`, {
 		method: 'POST',
 		headers: {
@@ -144,7 +154,7 @@ export const generateTitle = async (token: string = '', model: string, prompt: s
 		},
 		body: JSON.stringify({
 			model: model,
-			prompt: `Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': ${prompt}`,
+			prompt: template,
 			stream: false
 		})
 	})

src/lib/components/chat/Settings/Interface.svelte

@@ -13,6 +13,7 @@
 	let responseAutoCopy = false;
 	let titleAutoGenerateModel = '';
 	let fullScreenMode = false;
+	let titleGenerationPrompt = '';
 
 	// Interface
 	let promptSuggestions = [];
@@ -56,8 +57,14 @@
 	};
 
 	const updateInterfaceHandler = async () => {
+		if ($user.role === 'admin') {
 			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
 			await config.set(await getBackendConfig());
+		}
+
+		saveSettings({
+			titleGenerationPrompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
+		});
 	};
 
 	onMount(async () => {
@@ -72,6 +79,9 @@
 		showUsername = settings.showUsername ?? false;
 		fullScreenMode = settings.fullScreenMode ?? false;
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
+		titleGenerationPrompt =
+			settings.titleGenerationPrompt ??
+			`Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}`;
 	});
 </script>
 
@@ -212,6 +222,14 @@
 					</svg>
 				</button>
 			</div>
+			<div class="mt-3">
+				<div class=" mb-2.5 text-sm font-medium">Title Generation Prompt</div>
+				<textarea
+					bind:value={titleGenerationPrompt}
+					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+					rows="3"
+				/>
+			</div>
 		</div>
 
 		{#if $user.role === 'admin'}

src/routes/(app)/+page.svelte

@@ -742,6 +742,8 @@
 		if ($settings.titleAutoGenerate ?? true) {
 			const title = await generateTitle(
 				localStorage.token,
+				$settings?.titleGenerationPrompt ??
+					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
 				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);

src/routes/(app)/c/[id]/+page.svelte

@@ -755,7 +755,13 @@
 
 	const generateChatTitle = async (_chatId, userPrompt) => {
 		if ($settings.titleAutoGenerate ?? true) {
-			const title = await generateTitle(localStorage.token, selectedModels[0], userPrompt);
+			const title = await generateTitle(
+				localStorage.token,
+				$settings?.titleGenerationPrompt ??
+					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
+				$settings?.titleAutoGenerateModel ?? selectedModels[0],
+				userPrompt
+			);
 
 			if (title) {
 				await setChatTitle(_chatId, title);