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:
@@ -1,256 +1,347 @@
|
||||
<script lang="ts">
|
||||
const loadingWords = [
|
||||
'Bamboozling',
|
||||
'Razzmatazzing',
|
||||
'Transmogrifying',
|
||||
'Alakazamming',
|
||||
'Prestidigitating',
|
||||
'Metamorphosizing',
|
||||
'Enchanting',
|
||||
'Voodooing',
|
||||
'Witchcrafting',
|
||||
'Sorcerizing',
|
||||
'Spellcasting',
|
||||
'Hocus-pocusing',
|
||||
'Incantating',
|
||||
'Conjurating',
|
||||
'Charmweaving'
|
||||
];
|
||||
const loadingWords = [
|
||||
"Spellweaving",
|
||||
"Illusionizing",
|
||||
"Phantasmagorizing",
|
||||
"Hoodwinking",
|
||||
"Flummoxing",
|
||||
"Discombobulating",
|
||||
"Befuddling",
|
||||
"Mystifying",
|
||||
"Bedazzling",
|
||||
"Beguiling",
|
||||
"Bewitchifying",
|
||||
"Enshrouding",
|
||||
"Glamourizing",
|
||||
"Hexifying",
|
||||
"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 = [
|
||||
'coral',
|
||||
'teal',
|
||||
'violet',
|
||||
'amber',
|
||||
'emerald',
|
||||
'rose',
|
||||
'skyblue',
|
||||
'fuchsia',
|
||||
'orange',
|
||||
'indigo'
|
||||
];
|
||||
const colors = [
|
||||
"coral",
|
||||
"teal",
|
||||
"violet",
|
||||
"amber",
|
||||
"emerald",
|
||||
"rose",
|
||||
"skyblue",
|
||||
"fuchsia",
|
||||
"orange",
|
||||
"indigo",
|
||||
];
|
||||
|
||||
const colorValues: Record<string, string> = {
|
||||
coral: '#FF6B6B',
|
||||
teal: '#2EC4B6',
|
||||
violet: '#9B5DE5',
|
||||
amber: '#F5B041',
|
||||
emerald: '#2ECC71',
|
||||
rose: '#E74C6F',
|
||||
skyblue: '#5DADE2',
|
||||
fuchsia: '#D63384',
|
||||
orange: '#F39C12',
|
||||
indigo: '#5B2C6F'
|
||||
};
|
||||
const colorValues: Record<string, string> = {
|
||||
coral: "#FF6B6B",
|
||||
teal: "#2EC4B6",
|
||||
violet: "#9B5DE5",
|
||||
amber: "#F5B041",
|
||||
emerald: "#2ECC71",
|
||||
rose: "#E74C6F",
|
||||
skyblue: "#5DADE2",
|
||||
fuchsia: "#D63384",
|
||||
orange: "#F39C12",
|
||||
indigo: "#5B2C6F",
|
||||
};
|
||||
|
||||
const animationStyles = [
|
||||
'slide-up',
|
||||
'bounce-in',
|
||||
'drop-in',
|
||||
'scale-up',
|
||||
'fade-rotate',
|
||||
'spring-left'
|
||||
];
|
||||
const animationStyles = [
|
||||
"slide-up",
|
||||
"bounce-in",
|
||||
"drop-in",
|
||||
"scale-up",
|
||||
"fade-rotate",
|
||||
"spring-left",
|
||||
];
|
||||
|
||||
let currentWordIndex = $state(0);
|
||||
let currentColor = $state(colors[0]);
|
||||
let currentAnimation = $state('slide-up');
|
||||
let letters = $state<string[]>([]);
|
||||
let currentWordIndex = $state(0);
|
||||
let currentColor = $state(colors[0]);
|
||||
let currentAnimation = $state("slide-up");
|
||||
let letters = $state<string[]>([]);
|
||||
|
||||
$effect(() => {
|
||||
const interval = setInterval(() => {
|
||||
currentWordIndex = Math.floor(Math.random() * loadingWords.length);
|
||||
currentColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
currentAnimation = animationStyles[Math.floor(Math.random() * animationStyles.length)];
|
||||
letters = loadingWords[currentWordIndex].split('');
|
||||
}, 2000);
|
||||
$effect(() => {
|
||||
const interval = setInterval(() => {
|
||||
currentWordIndex = Math.floor(Math.random() * loadingWords.length);
|
||||
currentColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
currentAnimation =
|
||||
animationStyles[
|
||||
Math.floor(Math.random() * animationStyles.length)
|
||||
];
|
||||
letters = loadingWords[currentWordIndex].split("");
|
||||
}, 2000);
|
||||
|
||||
// Initialize immediately
|
||||
currentWordIndex = Math.floor(Math.random() * loadingWords.length);
|
||||
currentColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
currentAnimation = animationStyles[Math.floor(Math.random() * animationStyles.length)];
|
||||
letters = loadingWords[currentWordIndex].split('');
|
||||
// Initialize immediately
|
||||
currentWordIndex = Math.floor(Math.random() * loadingWords.length);
|
||||
currentColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
currentAnimation =
|
||||
animationStyles[Math.floor(Math.random() * animationStyles.length)];
|
||||
letters = loadingWords[currentWordIndex].split("");
|
||||
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="modal-overlay" role="dialog" aria-label="Loading">
|
||||
<div class="modal-content">
|
||||
<div class="loading-letters" style="color: {colorValues[currentColor]}">
|
||||
{#each letters as letter, i}
|
||||
<span
|
||||
class="letter {currentAnimation}"
|
||||
style="--delay: {i * 60}ms; --color: {colorValues[currentColor]}"
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="loading-subtitle">Transforming your text...</p>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<div class="loading-letters" style="color: {colorValues[currentColor]}">
|
||||
{#each letters as letter, i}
|
||||
<span
|
||||
class="letter {currentAnimation}"
|
||||
style="--delay: {i * 60}ms; --color: {colorValues[
|
||||
currentColor
|
||||
]}"
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="loading-subtitle">Transforming your text...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
.modal-content {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.loading-letters {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
min-height: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.loading-letters {
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
min-height: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.letter {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.4s;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
.letter {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.4s;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
/* Slide up */
|
||||
.slide-up {
|
||||
animation-name: slide-up;
|
||||
}
|
||||
/* Slide up */
|
||||
.slide-up {
|
||||
animation-name: slide-up;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce in */
|
||||
.bounce-in {
|
||||
animation-name: bounce-in;
|
||||
}
|
||||
/* Bounce in */
|
||||
.bounce-in {
|
||||
animation-name: bounce-in;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Drop in */
|
||||
.drop-in {
|
||||
animation-name: drop-in;
|
||||
}
|
||||
/* Drop in */
|
||||
.drop-in {
|
||||
animation-name: drop-in;
|
||||
}
|
||||
|
||||
@keyframes drop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
85% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes drop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-60px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
85% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scale up */
|
||||
.scale-up {
|
||||
animation-name: scale-up;
|
||||
}
|
||||
/* Scale up */
|
||||
.scale-up {
|
||||
animation-name: scale-up;
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes scale-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade rotate */
|
||||
.fade-rotate {
|
||||
animation-name: fade-rotate;
|
||||
}
|
||||
/* Fade rotate */
|
||||
.fade-rotate {
|
||||
animation-name: fade-rotate;
|
||||
}
|
||||
|
||||
@keyframes fade-rotate {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(-15deg) scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes fade-rotate {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(-15deg) scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spring from left */
|
||||
.spring-left {
|
||||
animation-name: spring-left;
|
||||
}
|
||||
/* Spring from left */
|
||||
.spring-left {
|
||||
animation-name: spring-left;
|
||||
}
|
||||
|
||||
@keyframes spring-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes spring-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-subtitle {
|
||||
margin-top: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.loading-subtitle {
|
||||
margin-top: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,25 +2,33 @@ import { describe, it, expect } from 'vitest';
|
||||
import { buildSystemPrompt, buildUserMessage } from '$lib/llm';
|
||||
|
||||
describe('buildSystemPrompt', () => {
|
||||
it('fills in {style} placeholder from intensity instruction', () => {
|
||||
it('combines intensity and style detail without redundancy', () => {
|
||||
const result = buildSystemPrompt(
|
||||
'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).not.toContain('{style}');
|
||||
expect(result).toContain('Rewrite the text strongly: in a sarcastic, snarky tone with biting wit');
|
||||
});
|
||||
|
||||
it('includes the style modifier on its own line', () => {
|
||||
const result = buildSystemPrompt('some modifier', 'lightly hint at a {style} tone');
|
||||
expect(result).toContain('some modifier');
|
||||
it('strips leading "Rewrite " verb from style modifier to avoid duplication', () => {
|
||||
const result = buildSystemPrompt(
|
||||
'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', () => {
|
||||
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('Output ONLY the converted text');
|
||||
});
|
||||
|
||||
it('does not contain {style} placeholder', () => {
|
||||
const result = buildSystemPrompt('test modifier', 'strongly');
|
||||
expect(result).not.toContain('{style}');
|
||||
});
|
||||
});
|
||||
|
||||
describe('buildUserMessage', () => {
|
||||
|
||||
@@ -22,10 +22,11 @@ export interface ConvertResult {
|
||||
}
|
||||
|
||||
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.
|
||||
${intensityFilled}.
|
||||
${styleModifier}
|
||||
Rewrite the text ${intensityInstruction}: ${styleDetail}
|
||||
Preserve the core meaning but fully transform the voice and tone.
|
||||
Output ONLY the converted text — no explanations, no labels, no quotes.`;
|
||||
}
|
||||
|
||||
@@ -91,7 +91,7 @@ describe('getIntensityConfig', () => {
|
||||
const config = getIntensityConfig(i);
|
||||
expect(config).toBeDefined();
|
||||
expect(config!.label).toBeTruthy();
|
||||
expect(config!.instruction).toContain('{style}');
|
||||
expect(config!.instruction).toBeTruthy();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -103,10 +103,10 @@ describe('getIntensityConfig', () => {
|
||||
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++) {
|
||||
const config = getIntensityConfig(i);
|
||||
expect(config!.instruction).toContain('{style}');
|
||||
expect(config!.instruction).not.toContain('{style}');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -195,17 +195,11 @@ export const intensityMap: Record<
|
||||
number,
|
||||
{ label: string; instruction: string }
|
||||
> = {
|
||||
1: { label: "Subtle", instruction: "lightly hint at a {style} tone" },
|
||||
2: { label: "Moderate", instruction: "rewrite with a {style} tone" },
|
||||
3: { label: "Strong", instruction: "rewrite strongly in a {style} style" },
|
||||
4: {
|
||||
label: "Heavy",
|
||||
instruction: "rewrite completely in {style} — fully commit to the voice",
|
||||
},
|
||||
5: {
|
||||
label: "Maximum",
|
||||
instruction: "go absolutely all-out {style} — no restraint",
|
||||
},
|
||||
1: { label: "Subtle", instruction: "subtly, with a light touch" },
|
||||
2: { label: "Moderate", instruction: "with moderate intensity" },
|
||||
3: { label: "Strong", instruction: "strongly" },
|
||||
4: { label: "Heavy", instruction: "completely, fully committing to the voice" },
|
||||
5: { label: "Maximum", instruction: "with absolute maximum intensity, no restraint" },
|
||||
};
|
||||
|
||||
export function getStylesByCategory(categoryId: string): Style[] {
|
||||
|
||||
Reference in New Issue
Block a user