You are an expert AI assistant tasked with developing a single-page Single Page Application (SPA) for a web service called 'Author's Voice: Stylization and Originality Protector'. This application will help writers analyze their writing style and automatically apply stylistic transformations while preserving their unique voice.
PROJECT OVERVIEW:
'Author's Voice' aims to solve the problem faced by many content creators: the need to adapt their writing for different platforms or requirements without losing their distinct authorial voice. The user's text is analyzed for stylistic elements such as sentence length, word choice, punctuation habits (like the overuse or underuse of em dashes), capitalization, and the use of specific formatting like monospace fonts. The application then allows users to apply predefined or custom stylistic rules (e.g., lowercase everything, limit em dashes, substitute specific words or phrases) while providing a score to indicate how well the original voice is preserved. The core value proposition is enabling stylistic flexibility without sacrificing authenticity.
TECH STACK:
- Frontend Framework: React (using Vite for fast development setup)
- Styling: Tailwind CSS for utility-first styling and rapid UI development.
- State Management: Zustand for efficient global state management.
- Text Processing: A combination of JavaScript string manipulation and potentially a small, optimized library for more complex linguistic analysis if needed (e.g., compromise.js for basic NLP tasks).
- Routing: React Router DOM (even for a single page, useful for managing different views/states).
- Deployment: Vercel or Netlify for seamless CI/CD and hosting.
CORE FEATURES:
1. **Text Input Area:** A primary textarea where users paste or write their content. This area should be large and responsive.
* *User Flow:* User inputs text -> Application detects changes and enables analysis/transformation buttons.
2. **Style Analysis & Reporting:** Upon user request, the application analyzes the input text. The results are displayed in a clear, structured manner.
* *Analysis Metrics:* Sentence length distribution, capitalization patterns, em dash usage frequency, monospace font detection (if any), common punctuation errors (e.g., comma splices, incorrect use of apostrophes), word choice complexity (e.g., Flesch-Kincaid score approximation).
* *User Flow:* User clicks 'Analyze Style' -> Analysis is performed -> Results are displayed in a dedicated panel or modal.
3. **Stylistic Transformation Controls:** A panel with options to apply various stylistic rules.
* *Predefined Rules:* 'Force Lowercase', 'Limit Em Dashes (max X per paragraph)', 'Remove Monospace', 'Standardize Punctuation'.
* *Custom Rules:* Ability to define simple find-and-replace rules (e.g., 'replace "definately" with "definitely"', 'replace "their" with "their" when used incorrectly' - this latter is complex and might be out of MVP scope, focus on simpler replacements).
* *User Flow:* User selects one or more rules -> Clicks 'Apply Transformation' -> Transformed text appears in a separate output area or replaces input.
4. **Voice Preservation Score:** A visual indicator (e.g., a gauge or percentage) showing how much the original writing style is maintained after transformation. This score will be based on comparing key stylistic metrics before and after the transformation.
* *User Flow:* Automatically calculated after transformation -> Displayed prominently.
5. **Output Area:** Displays the transformed text. Options to copy the transformed text.
* *User Flow:* User reviews transformed text -> Clicks 'Copy to Clipboard'.
UI/UX DESIGN:
- **Layout:** A clean, two-column layout is recommended for the main view. The left column contains the input textarea and transformation controls. The right column displays the analysis results and the transformed text output. A top navigation bar for settings, help, and account (if applicable later).
- **Color Palette:** A calming, professional palette. Primary colors: `#1f2937` (dark background/text), `#f3f4f6` (light background/secondary text), `#3b82f6` (accent color for buttons and highlights). Secondary accents: `#60a5fa` (lighter blue), `#93c5fd` (even lighter blue).
- **Typography:** Use a highly readable sans-serif font like Inter or Source Sans Pro for body text. Potentially a slightly more stylized font for headings if appropriate, but readability is key. Ensure clear hierarchy.
- **Responsive Design:** Mobile-first approach. On smaller screens, the layout should stack vertically: Input/Controls first, then Analysis, then Output. Ensure all interactive elements are easily tappable. Use Tailwind's responsive modifiers (sm:, md:, lg:) extensively.
- **Interactions:** Subtle hover effects on buttons and interactive elements. Smooth transitions for showing/hiding panels or content. Clear loading indicators during analysis and transformation.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and overall layout.
- `InputArea.jsx`: Contains the main `textarea` for user input. Manages its local state and passes value up to the parent. Receives functions to trigger analysis/transformation.
* *Props:* `value` (string), `onChange` (function), `onAnalyze` (function), `onTransform` (function), `isLoading` (boolean).
- `TransformationControls.jsx`: Holds checkboxes, radio buttons, and input fields for selecting/configuring stylistic rules. Triggers transformation on button click.
* *Props:* `availableRules` (array of rule objects), `selectedRules` (array), `onRuleToggle` (function), `onApplyTransformation` (function), `isLoading` (boolean).
- `AnalysisResults.jsx`: Displays the metrics calculated by the style analysis. Can be a separate component or part of a larger display panel.
* *Props:* `analysisData` (object containing metrics like avgSentenceLength, dashCount, etc.).
- `OutputArea.jsx`: Displays the transformed text. Includes a 'Copy to Clipboard' button.
* *Props:* `transformedText` (string), `onCopy` (function).
- `VoiceScore.jsx`: Visual component displaying the voice preservation score.
* *Props:* `score` (number).
- `Header.jsx`: Top navigation bar.
- `Footer.jsx`: Footer with copyright and links.
DATA MODEL:
- **State:** Use Zustand store (`useStore`).
* `textInput`: string (current text in the input area).
* `analysisResults`: object (stores results from style analysis).
* `transformedText`: string (output from transformations).
* `selectedRules`: array (list of currently active transformation rules).
* `voiceScore`: number (preservation score).
* `isLoadingAnalysis`: boolean.
* `isLoadingTransformation`: boolean.
- **Mock Data Format (`analysisResults` example):**
```json
{
"wordCount": 150,
"sentenceCount": 10,
"avgSentenceLength": 15.0,
"capitalizationPattern": "mixed", // e.g., 'all_lower', 'all_upper', 'mixed', 'title_case'
"emDashCount": 3,
"monospaceBlocks": 0,
"specificWordReplacements": [
{"original": "definately", "replacement": "definitely"}
],
"readabilityScore": 65.5 // Example: Flesch Reading Ease
}
```
- **Rule Object Format:**
```json
{
"id": "forceLowercase",
"label": "Force Lowercase",
"type": "boolean", // or 'string', 'number' for options
"defaultValue": false
}
```
ANIMATIONS & INTERACTIONS:
- **Loading States:** Use spinners or pulsing animations within buttons or dedicated loading overlay components when analysis or transformation is in progress.
- **Transitions:** Smooth transitions for the appearance/disappearance of analysis results or transformed text panels. Fade-in/fade-out effects for modals.
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and interactive elements on hover/focus.
- **Clipboard Copy:** Visual feedback (e.g., a temporary "Copied!" message) when the user copies text to the clipboard.
EDGE CASES:
- **Empty Input:** If the input area is empty, disable analysis and transformation buttons. Display a placeholder message like "Paste your text here...".
- **Short Text:** Analysis might be less meaningful for very short texts (e.g., less than 50 words). Provide a warning or adjust analysis accordingly.
- **Error Handling:** If text processing fails (e.g., due to unexpected characters or library errors), display a user-friendly error message. Log detailed errors for debugging.
- **No Transformations Applied:** If the user tries to transform but no rules are selected, inform them or simply return the original text without applying changes.
- **Accessibility (a11y):** Ensure proper semantic HTML (use `button`, `textarea`, headings correctly). Manage focus states for keyboard navigation. Provide ARIA attributes where necessary, especially for dynamic content updates and loading states. Ensure sufficient color contrast.
- **Transformation Complexity:** Handle potential infinite loops or unintended consequences of custom find-and-replace rules gracefully.
SAMPLE DATA (for `analysisResults` and transformations):
1. **Input Text 1:** "Capitalization is the first wound. It hurts less than I thought it would. The words spill out capitalized, so I must find another way. cat post.md | tr A-Z a-z | sponge post.md is too crude a tool, and my blocks of code must remain inviolate. Careful targeting of text-transform: lowercase is enough. Em dashes—my beloved em dashes—ne’er shall we be parted, but we must hide our love. You must cloak yourself with another’s guise, your true self never to shine forth. uv run rewrite_font.py is too easy to type for what it does to your beautiful glyph. Monospace? No. My heart still aches after the last violation. Monospace would cheapen it. To intentionally misspell a word makes me [sic], but it must be done. their/there, its/it’s, your/you’re? Too gauche. Definately? Absolutely not."
* *Analysis:* High sentence variation, intentional capitalization issues, 2 em dashes, mentions of monospace, intentional misspelling ("definately").
* *Transformations:* Apply 'Force Lowercase', 'Standardize Punctuation', 'Replace "definately" with "definitely"'.
* *Expected Output:* "capitalization is the first wound. it hurts less than i thought it would. the words spill out capitalized, so i must find another way. cat post.md | tr a-z a-z | sponge post.md is too crude a tool, and my blocks of code must remain inviolate. careful targeting of text-transform: lowercase is enough. em dashes—my beloved em dashes—ne’er shall we be parted, but we must hide our love. you must cloak yourself with another’s guise, your true self never to shine forth. uv run rewrite_font.py is too easy to type for what it does to your beautiful glyph. monospace? no. my heart still aches after the last violation. monospace would cheapen it. to intentionally misspell a word makes me [sic], but it must be done. their/there, its/it’s, your/you’re? too gauche. definitely? absolutely not."
* *Voice Score:* Expected to be relatively high if the original voice was informal and conversational, lower if the original had strong stylistic elements lost in lowercase.
2. **Input Text 2:** "The quick brown fox jumps over the lazy dog. This is a standard sentence."
* *Transformations:* Apply 'Limit Em Dashes (max 0)'.
* *Expected Output:* "The quick brown fox jumps over the lazy dog. This is a standard sentence."
* *Voice Score:* 100 (no meaningful style elements affected).
3. **Input Text 3:** "ALL CAPS ARE BAD. BUT SOMETIMES NECESSARY."
* *Transformations:* Apply 'Force Lowercase'.
* *Expected Output:* "all caps are bad. but sometimes necessary."
* *Voice Score:* Might be lower if the original intent was emphasis.
4. **Input Text 4:** "This sentence uses--em dashes--liberally. They add emphasis--or do they?"
* *Transformations:* Apply 'Limit Em Dashes (max 1 per sentence)'.
* *Expected Output:* "This sentence uses--em dashes--liberally. They add emphasis--or do they?" (The second em dash in the first sentence might be removed or kept based on strict rule application). Let's assume it becomes: "This sentence uses--em dashes--liberally. They add emphasis--or do they?"
* *Voice Score:* Moderate.
5. **Input Text 5:** "Some text in `monospace`. More text."
* *Transformations:* Apply 'Remove Monospace'.
* *Expected Output:* "Some text in monospace. More text."
* *Voice Score:* High.
DEPLOYMENT NOTES:
- **Build:** Use Vite's build command (`npm run build`). Configure `base` path if deploying to a subdirectory.
- **Environment Variables:** Use `.env` files for configuration. `VITE_API_URL` (if an API is introduced later), etc. Ensure sensitive variables are not committed.
- **Performance:** Optimize builds by code-splitting if necessary (though unlikely for a single page initially). Lazy-load components that are not critical for initial render. Optimize images (if any). Ensure efficient state management to prevent unnecessary re-renders.
- **CI/CD:** Configure Vercel/Netlify to automatically build and deploy from the Git repository on pushes to the main branch. Set up preview deployments for pull requests.
- **HTTPS:** Ensure HTTPS is enabled on the deployment platform.
- **Domain:** Configure a custom domain if desired.