feat: add customizable tag styles (#2312)

* feat: add customizable tag styles

* add tag lang setting

* ui settings cleanup

* fix migration

* change look of the field

* more fixes

* fix tests

1 files changed, 32 insertions, 5 deletions

diff --git a/packages/shared/prompts.ts b/packages/shared/prompts.ts
index 5a6a705e..af2f07f1 100644
--- a/packages/shared/prompts.ts
+++ b/packages/shared/prompts.ts
@@ -1,5 +1,8 @@
 import type { Tiktoken } from "js-tiktoken";
 
+import type { ZTagStyle } from "./types/users";
+import { getTagStylePrompt } from "./utils/tag";
+
 let encoding: Tiktoken | null = null;
 
 /**
@@ -40,15 +43,22 @@ async function truncateContent(
   return enc.decode(truncatedTokens);
 }
 
-export function buildImagePrompt(lang: string, customPrompts: string[]) {
+export function buildImagePrompt(
+  lang: string,
+  customPrompts: string[],
+  tagStyle: ZTagStyle,
+) {
+  const tagStyleInstruction = getTagStylePrompt(tagStyle);
+
   return `
-You are an expert whose responsibility is to help with automatic text tagging for a read-it-later app.
+You are an expert whose responsibility is to help with automatic text tagging for a read-it-later/bookmarking app.
 Please analyze the attached image and suggest relevant tags that describe its key themes, topics, and main ideas. The rules are:
 - Aim for a variety of tags, including broad categories, specific keywords, and potential sub-genres.
 - The tags must be in ${lang}.
 - If the tag is not generic enough, don't include it.
 - Aim for 10-15 tags.
 - If there are no good tags, don't emit any.
+${tagStyleInstruction}
 ${customPrompts && customPrompts.map((p) => `- ${p}`).join("\n")}
 You must respond in valid JSON with the key "tags" and the value is list of tags. Don't wrap the response in a markdown code.`;
 }
@@ -60,9 +70,12 @@ function constructTextTaggingPrompt(
   lang: string,
   customPrompts: string[],
   content: string,
+  tagStyle: ZTagStyle,
 ): string {
+  const tagStyleInstruction = getTagStylePrompt(tagStyle);
+
   return `
-You are an expert whose responsibility is to help with automatic tagging for a read-it-later app.
+You are an expert whose responsibility is to help with automatic tagging for a read-it-later/bookmarking app.
 Please analyze the TEXT_CONTENT below and suggest relevant tags that describe its key themes, topics, and main ideas. The rules are:
 - Aim for a variety of tags, including broad categories, specific keywords, and potential sub-genres.
 - The tags must be in ${lang}.
@@ -70,6 +83,7 @@ Please analyze the TEXT_CONTENT below and suggest relevant tags that describe it
 - The content can include text for cookie consent and privacy policy, ignore those while tagging.
 - Aim for 3-5 tags.
 - If there are no good tags, leave the array empty.
+${tagStyleInstruction}
 ${customPrompts && customPrompts.map((p) => `- ${p}`).join("\n")}
 
 <TEXT_CONTENT>
@@ -101,11 +115,13 @@ export function buildTextPromptUntruncated(
   lang: string,
   customPrompts: string[],
   content: string,
+  tagStyle: ZTagStyle,
 ): string {
   return constructTextTaggingPrompt(
     lang,
     customPrompts,
     preprocessContent(content),
+    tagStyle,
   );
 }
 
@@ -114,15 +130,26 @@ export async function buildTextPrompt(
   customPrompts: string[],
   content: string,
   contextLength: number,
+  tagStyle: ZTagStyle,
 ): Promise<string> {
   content = preprocessContent(content);
-  const promptTemplate = constructTextTaggingPrompt(lang, customPrompts, "");
+  const promptTemplate = constructTextTaggingPrompt(
+    lang,
+    customPrompts,
+    "",
+    tagStyle,
+  );
   const promptSize = await calculateNumTokens(promptTemplate);
   const truncatedContent = await truncateContent(
     content,
     contextLength - promptSize,
   );
-  return constructTextTaggingPrompt(lang, customPrompts, truncatedContent);
+  return constructTextTaggingPrompt(
+    lang,
+    customPrompts,
+    truncatedContent,
+    tagStyle,
+  );
 }
 
 export async function buildSummaryPrompt(