santhoshj/style
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: eliminate redundancy in system prompt

Browse Source 
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:
Santhosh Janardhanan
2026-04-12 23:23:58 -04:00
parent cb8755f59e
commit 90bb701068
5 changed files with 344 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

541
src/lib/components/LoadingModal.svelte
View File

@@ -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;
}
}
</style>
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>

24
src/lib/llm.test.ts
View File

@@ -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', () => {

7
src/lib/llm.ts
View File

@@ -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.`;
}

6
src/lib/styles.test.ts
View File

@@ -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}');
}
});
});

16
src/lib/styles.ts
View File

@@ -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[] {