fix: eliminate redundancy in system prompt

The old prompt had two problems:
1. {style} placeholder was filled with the full promptModifier sentence,
   producing gibberish like "rewrite strongly in a Rewrite in a
   sarcastic... style"
2. The promptModifier was then repeated as its own line

New design separates concerns cleanly:
- intensityMap no longer uses {style} placeholder — instructions are
  pure intensity adverbs ("strongly", "subtly, with a light touch", etc.)
- buildSystemPrompt strips the leading "Rewrite" verb from the style
  modifier and combines both into one non-redundant instruction:
  "Rewrite the text strongly: in a sarcastic, snarky tone with biting wit"

Example outputs by intensity:
  1: Rewrite the text subtly, with a light touch: in a sarcastic...
  3: Rewrite the text strongly: in a sarcastic...
  5: Rewrite the text with absolute maximum intensity, no restraint: ...
This commit is contained in:
2026-04-12 23:23:58 -04:00
parent cb8755f59e
commit 90bb701068
5 changed files with 344 additions and 250 deletions

View File

@@ -1,75 +1,164 @@
<script lang="ts"> <script lang="ts">
const loadingWords = [ const loadingWords = [
'Bamboozling', "Spellweaving",
'Razzmatazzing', "Illusionizing",
'Transmogrifying', "Phantasmagorizing",
'Alakazamming', "Hoodwinking",
'Prestidigitating', "Flummoxing",
'Metamorphosizing', "Discombobulating",
'Enchanting', "Befuddling",
'Voodooing', "Mystifying",
'Witchcrafting', "Bedazzling",
'Sorcerizing', "Beguiling",
'Spellcasting', "Bewitchifying",
'Hocus-pocusing', "Enshrouding",
'Incantating', "Glamourizing",
'Conjurating', "Hexifying",
'Charmweaving' "Jinxifying",
"Curseweaving",
"Wardweaving",
"Shieldmagicking",
"Summonifying",
"Obliteratizing",
"Exorcisizing",
"Manifestating",
"Disintegratizing",
"Teleportatizing",
"Apparating",
"Disapparating",
"Levitatizing",
"Hovermancing",
"Broomsticking",
"Cauldronbubbling",
"Potionizing",
"Wandwaving",
"Chantweaving",
"Murmurizing",
"Invocatizing",
"Evocatizing",
"Abjurating",
"Abracadabrazing",
"Shazammerizing",
"Simsalabimming",
"Prestochangoing",
"Wizbanging",
"Whammifying",
"Zappifying",
"Sparklerizing",
"Ensparklifying",
"Glitterifying",
"Shimmerizing",
"Glimmerizing",
"Twinklifying",
"Bewilderizing",
"Confoundizing",
"Flabbergastifying",
"Dumbfoundering",
"Astoundifying",
"Marvelizing",
"Wonderizing",
"Enchantifying",
"Wizardifying",
"Magickifying",
"Spellbinding",
"Charmsmithing",
"Amuletizing",
"Talismanizing",
"Banefying",
"Boonifying",
"Blessweaving",
"Smitifying",
"Transmutatizing",
"Divinizing",
"Necromancizing",
"Pyromancizing",
"Illusionifying",
"Specterizing",
"Ghostweaving",
"Spiritbinding",
"Phantasmifying",
"Shapeshiftizing",
"Polymorphizing",
"Morphinating",
"Transfiguratizing",
"Staffslinging",
"Orbulating",
"Scryifying",
"Cartomancizing",
"Runeweaving",
"Sigilcrafting",
"Spectercalling",
"Mediumizing",
"Possessifying",
"Hoodooing",
"Mojoizing",
"Grisgrisifying",
"Jujufying",
"Mumbojumboing",
"Legerdemaining",
"Mountebanking",
"Hornswoggling",
"Razzledazzling",
"Shenaniganizing",
]; ];
const colors = [ const colors = [
'coral', "coral",
'teal', "teal",
'violet', "violet",
'amber', "amber",
'emerald', "emerald",
'rose', "rose",
'skyblue', "skyblue",
'fuchsia', "fuchsia",
'orange', "orange",
'indigo' "indigo",
]; ];
const colorValues: Record<string, string> = { const colorValues: Record<string, string> = {
coral: '#FF6B6B', coral: "#FF6B6B",
teal: '#2EC4B6', teal: "#2EC4B6",
violet: '#9B5DE5', violet: "#9B5DE5",
amber: '#F5B041', amber: "#F5B041",
emerald: '#2ECC71', emerald: "#2ECC71",
rose: '#E74C6F', rose: "#E74C6F",
skyblue: '#5DADE2', skyblue: "#5DADE2",
fuchsia: '#D63384', fuchsia: "#D63384",
orange: '#F39C12', orange: "#F39C12",
indigo: '#5B2C6F' indigo: "#5B2C6F",
}; };
const animationStyles = [ const animationStyles = [
'slide-up', "slide-up",
'bounce-in', "bounce-in",
'drop-in', "drop-in",
'scale-up', "scale-up",
'fade-rotate', "fade-rotate",
'spring-left' "spring-left",
]; ];
let currentWordIndex = $state(0); let currentWordIndex = $state(0);
let currentColor = $state(colors[0]); let currentColor = $state(colors[0]);
let currentAnimation = $state('slide-up'); let currentAnimation = $state("slide-up");
let letters = $state<string[]>([]); let letters = $state<string[]>([]);
$effect(() => { $effect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
currentWordIndex = Math.floor(Math.random() * loadingWords.length); currentWordIndex = Math.floor(Math.random() * loadingWords.length);
currentColor = colors[Math.floor(Math.random() * colors.length)]; currentColor = colors[Math.floor(Math.random() * colors.length)];
currentAnimation = animationStyles[Math.floor(Math.random() * animationStyles.length)]; currentAnimation =
letters = loadingWords[currentWordIndex].split(''); animationStyles[
Math.floor(Math.random() * animationStyles.length)
];
letters = loadingWords[currentWordIndex].split("");
}, 2000); }, 2000);
// Initialize immediately // Initialize immediately
currentWordIndex = Math.floor(Math.random() * loadingWords.length); currentWordIndex = Math.floor(Math.random() * loadingWords.length);
currentColor = colors[Math.floor(Math.random() * colors.length)]; currentColor = colors[Math.floor(Math.random() * colors.length)];
currentAnimation = animationStyles[Math.floor(Math.random() * animationStyles.length)]; currentAnimation =
letters = loadingWords[currentWordIndex].split(''); animationStyles[Math.floor(Math.random() * animationStyles.length)];
letters = loadingWords[currentWordIndex].split("");
return () => clearInterval(interval); return () => clearInterval(interval);
}); });
@@ -81,7 +170,9 @@
{#each letters as letter, i} {#each letters as letter, i}
<span <span
class="letter {currentAnimation}" class="letter {currentAnimation}"
style="--delay: {i * 60}ms; --color: {colorValues[currentColor]}" style="--delay: {i * 60}ms; --color: {colorValues[
currentColor
]}"
> >
{letter} {letter}
</span> </span>

View File

@@ -2,25 +2,33 @@ import { describe, it, expect } from 'vitest';
import { buildSystemPrompt, buildUserMessage } from '$lib/llm'; import { buildSystemPrompt, buildUserMessage } from '$lib/llm';
describe('buildSystemPrompt', () => { describe('buildSystemPrompt', () => {
it('fills in {style} placeholder from intensity instruction', () => { it('combines intensity and style detail without redundancy', () => {
const result = buildSystemPrompt( const result = buildSystemPrompt(
'Rewrite in a sarcastic, snarky tone with biting wit', 'Rewrite in a sarcastic, snarky tone with biting wit',
'rewrite strongly in a {style} style' 'strongly'
); );
expect(result).toContain('rewrite strongly in a Rewrite in a sarcastic, snarky tone with biting wit style'); expect(result).toContain('Rewrite the text strongly: in a sarcastic, snarky tone with biting wit');
expect(result).not.toContain('{style}');
}); });
it('includes the style modifier on its own line', () => { it('strips leading "Rewrite " verb from style modifier to avoid duplication', () => {
const result = buildSystemPrompt('some modifier', 'lightly hint at a {style} tone'); const result = buildSystemPrompt(
expect(result).toContain('some modifier'); 'Rewrite like a pirate with arrrs and nautical terms',
'completely, fully committing to the voice'
);
expect(result).toContain('like a pirate with arrrs and nautical terms');
expect(result).not.toMatch(/Rewrite.*Rewrite/i);
}); });
it('includes the core instruction text', () => { it('includes the core instruction text', () => {
const result = buildSystemPrompt('test', 'rewrite with a {style} tone'); const result = buildSystemPrompt('test modifier', 'with moderate intensity');
expect(result).toContain('You are an expert English style converter'); expect(result).toContain('You are an expert English style converter');
expect(result).toContain('Output ONLY the converted text'); expect(result).toContain('Output ONLY the converted text');
}); });
it('does not contain {style} placeholder', () => {
const result = buildSystemPrompt('test modifier', 'strongly');
expect(result).not.toContain('{style}');
});
}); });
describe('buildUserMessage', () => { describe('buildUserMessage', () => {

View File

@@ -22,10 +22,11 @@ export interface ConvertResult {
} }
export function buildSystemPrompt(styleModifier: string, intensityInstruction: string): string { export function buildSystemPrompt(styleModifier: string, intensityInstruction: string): string {
const intensityFilled = intensityInstruction.replace('{style}', styleModifier); // Strip the leading verb ("Rewrite ") from the style modifier since
// it's redundant with the "Rewrite the text" line already in the prompt.
const styleDetail = styleModifier.replace(/^Rewrite\s+/i, '');
return `You are an expert English style converter. return `You are an expert English style converter.
${intensityFilled}. Rewrite the text ${intensityInstruction}: ${styleDetail}
${styleModifier}
Preserve the core meaning but fully transform the voice and tone. Preserve the core meaning but fully transform the voice and tone.
Output ONLY the converted text — no explanations, no labels, no quotes.`; Output ONLY the converted text — no explanations, no labels, no quotes.`;
} }

View File

@@ -91,7 +91,7 @@ describe('getIntensityConfig', () => {
const config = getIntensityConfig(i); const config = getIntensityConfig(i);
expect(config).toBeDefined(); expect(config).toBeDefined();
expect(config!.label).toBeTruthy(); expect(config!.label).toBeTruthy();
expect(config!.instruction).toContain('{style}'); expect(config!.instruction).toBeTruthy();
} }
}); });
@@ -103,10 +103,10 @@ describe('getIntensityConfig', () => {
expect(getIntensityConfig(6)).toBeUndefined(); expect(getIntensityConfig(6)).toBeUndefined();
}); });
it('all intensity instructions contain {style} placeholder', () => { it('intensity instructions do not contain {style} placeholder', () => {
for (let i = 1; i <= 5; i++) { for (let i = 1; i <= 5; i++) {
const config = getIntensityConfig(i); const config = getIntensityConfig(i);
expect(config!.instruction).toContain('{style}'); expect(config!.instruction).not.toContain('{style}');
} }
}); });
}); });

View File

@@ -195,17 +195,11 @@ export const intensityMap: Record<
number, number,
{ label: string; instruction: string } { label: string; instruction: string }
> = { > = {
1: { label: "Subtle", instruction: "lightly hint at a {style} tone" }, 1: { label: "Subtle", instruction: "subtly, with a light touch" },
2: { label: "Moderate", instruction: "rewrite with a {style} tone" }, 2: { label: "Moderate", instruction: "with moderate intensity" },
3: { label: "Strong", instruction: "rewrite strongly in a {style} style" }, 3: { label: "Strong", instruction: "strongly" },
4: { 4: { label: "Heavy", instruction: "completely, fully committing to the voice" },
label: "Heavy", 5: { label: "Maximum", instruction: "with absolute maximum intensity, no restraint" },
instruction: "rewrite completely in {style} — fully commit to the voice",
},
5: {
label: "Maximum",
instruction: "go absolutely all-out {style} — no restraint",
},
}; };
export function getStylesByCategory(categoryId: string): Style[] { export function getStylesByCategory(categoryId: string): Style[] {