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"> <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[
}, 2000); Math.floor(Math.random() * animationStyles.length)
];
letters = loadingWords[currentWordIndex].split("");
}, 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);
}); });
</script> </script>
<div class="modal-overlay" role="dialog" aria-label="Loading"> <div class="modal-overlay" role="dialog" aria-label="Loading">
<div class="modal-content"> <div class="modal-content">
<div class="loading-letters" style="color: {colorValues[currentColor]}"> <div class="loading-letters" style="color: {colorValues[currentColor]}">
{#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} ]}"
</span> >
{/each} {letter}
</div> </span>
<p class="loading-subtitle">Transforming your text...</p> {/each}
</div> </div>
<p class="loading-subtitle">Transforming your text...</p>
</div>
</div> </div>
<style> <style>
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 1000;
animation: fade-in 0.2s ease-out; animation: fade-in 0.2s ease-out;
} }
.modal-content { .modal-content {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
} }
.loading-letters { .loading-letters {
font-size: clamp(2rem, 5vw, 3.5rem); font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700; font-weight: 700;
letter-spacing: 0.05em; letter-spacing: 0.05em;
min-height: 4rem; min-height: 4rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.letter { .letter {
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-duration: 0.4s; animation-duration: 0.4s;
animation-delay: var(--delay); animation-delay: var(--delay);
} }
/* Slide up */ /* Slide up */
.slide-up { .slide-up {
animation-name: slide-up; animation-name: slide-up;
} }
@keyframes slide-up { @keyframes slide-up {
from { from {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(30px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
/* Bounce in */ /* Bounce in */
.bounce-in { .bounce-in {
animation-name: bounce-in; animation-name: bounce-in;
} }
@keyframes bounce-in { @keyframes bounce-in {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-40px); transform: translateY(-40px);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: translateY(8px); transform: translateY(8px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
/* Drop in */ /* Drop in */
.drop-in { .drop-in {
animation-name: drop-in; animation-name: drop-in;
} }
@keyframes drop-in { @keyframes drop-in {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-60px); transform: translateY(-60px);
} }
70% { 70% {
opacity: 1; opacity: 1;
transform: translateY(4px); transform: translateY(4px);
} }
85% { 85% {
transform: translateY(-2px); transform: translateY(-2px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
/* Scale up */ /* Scale up */
.scale-up { .scale-up {
animation-name: scale-up; animation-name: scale-up;
} }
@keyframes scale-up { @keyframes scale-up {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.3); transform: scale(0.3);
} }
to { to {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
} }
/* Fade rotate */ /* Fade rotate */
.fade-rotate { .fade-rotate {
animation-name: fade-rotate; animation-name: fade-rotate;
} }
@keyframes fade-rotate { @keyframes fade-rotate {
from { from {
opacity: 0; opacity: 0;
transform: rotate(-15deg) scale(0.5); transform: rotate(-15deg) scale(0.5);
} }
to { to {
opacity: 1; opacity: 1;
transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);
} }
} }
/* Spring from left */ /* Spring from left */
.spring-left { .spring-left {
animation-name: spring-left; animation-name: spring-left;
} }
@keyframes spring-left { @keyframes spring-left {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateX(-40px); transform: translateX(-40px);
} }
70% { 70% {
opacity: 1; opacity: 1;
transform: translateX(5px); transform: translateX(5px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
} }
.loading-subtitle { .loading-subtitle {
margin-top: 1rem; margin-top: 1rem;
color: #6b7280; color: #6b7280;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
} }
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
} }
</style> </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'; 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', () => {

7
src/lib/llm.ts
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.`;
} }

6
src/lib/styles.test.ts
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}');
} }
}); });
}); });

16
src/lib/styles.ts
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[] {