# HumanlyAI – AI Text Humanizer > **"Make AI text sound naturally yours."** **HumanlyAI** is a modern, production-quality, **100% free** web application designed to rewrite AI-generated text into clear, natural, personal, and human-sounding language while strictly preserving the original meaning and factual integrity. --- ## 🌟 Key Features * **Natural AI Humanization**: Transforms stiff, repetitive, and robotic phrasing into organic human prose. * **8 Writing Tones + Custom Personas**: * **Natural**: Balanced, organic conversational flow. * **Casual**: Relaxed and friendly language. * **Professional**: Clear and polished workplace writing. * **Academic**: Formal yet natural and articulate academic prose. * **Friendly**: Warm, engaging, and approachable. * **Simple**: Plain-English and high readability. * **Persuasive**: Compelling and active rhythm. * **Storytelling**: Evocative narrative pacing. * **Custom Persona**: Add fine-grained custom style instructions (e.g., *"In the voice of an encouraging teacher"*). * **3 Humanization Levels**: Light, Medium, and Strong rewriting intensity. * **File Upload Support**: Drag & drop or browse `.txt` and `.md` files directly into the editor. * **Readability Analytics Scorecard**: Live Flesch Reading Ease and Flesch-Kincaid Grade Level comparisons showing before/after clarity improvements. * **Factual & Meaning Preservation**: Engineered prompts ensure no hallucinated facts or dropped information. * **Optional Guest Mode**: Start humanizing immediately without registering or signing in. * **Saved Generation History**: Search, review, reopen in editor, or delete previous rewrites with Supabase Row Level Security (RLS). * **Word & Character Counters**: Live metrics with Before/After comparison statistics. * **Multiple Export Formats**: One-click clipboard copy with feedback and download as `.txt` or `.md`. * **Dark / Light Mode**: Beautiful modern UI with theme persistence and sleek contrast. * **Mobile-Responsive**: Clean dual-panel editor on desktop that gracefully stacks on mobile devices. * **100% Free Forever**: No subscriptions, no credit card requirements, no upgrade buttons. --- ## 🛠️ Tech Stack * **Frontend**: * React 18 / 19 + TypeScript + Vite * Tailwind CSS (Custom Indigo/Violet palette `#6366F1`, `#8B5CF6`) * Lucide React Icons * React Router DOM v7 * Canvas Confetti * **Backend**: * Node.js + Express + TypeScript * Google Gemini API (`@google/generative-ai`) * Supabase Client (`@supabase/supabase-js`) * Security: Helmet, CORS, Express Rate Limit, Zod input validation * **Database & Auth**: * Supabase (PostgreSQL with Row Level Security) * Supabase Authentication (Email/Password + Session Management) --- ## 📁 Project Structure ``` humanizer/ ├── package.json # Root script runner (concurrently) ├── README.md # Complete setup and deployment documentation ├── spec.md # Product specification ├── .env.example # Root environment variable template ├── backend/ │ ├── package.json │ ├── tsconfig.json │ ├── .env.example │ ├── database/ │ │ └── schema.sql # PostgreSQL/Supabase database schema & RLS │ └── src/ │ ├── index.ts # Express server setup & middleware │ ├── config/ │ │ └── env.ts # Environment configuration loader │ ├── controllers/ │ │ ├── humanizeController.ts # AI humanization logic & validation │ │ ├── historyController.ts # Generation history CRUD │ │ ├── statsController.ts # Dashboard metrics │ │ └── contactController.ts # Contact form handler │ ├── middleware/ │ │ ├── authMiddleware.ts# Supabase JWT token verification │ │ ├── errorHandler.ts # Safe error handling (no leaked keys) │ │ └── rateLimiter.ts # Rate limiting protection │ ├── routes/ │ │ ├── humanizeRoutes.ts │ │ ├── historyRoutes.ts │ │ ├── statsRoutes.ts │ │ ├── contactRoutes.ts │ │ └── healthRoutes.ts │ ├── services/ │ │ ├── aiService.ts # Gemini AI prompt engine & demo mode │ │ └── supabaseService.ts # Database queries & memory fallback │ └── types/ │ └── index.ts # TypeScript contracts └── frontend/ ├── package.json ├── vite.config.ts ├── tsconfig.json ├── tailwind.config.js ├── index.html └── src/ ├── index.css # Tailwind directives & glassmorphic styles ├── App.tsx # Router & context providers ├── main.tsx # React entry point ├── context/ │ ├── AuthContext.tsx # Auth state & demo account shortcut │ └── ThemeContext.tsx # Dark/Light theme manager ├── components/ │ ├── layout/ # Navbar, Footer, Layout │ ├── humanizer/ # Studio, Input, Output, Settings, Stats, DemoBadge │ └── ui/ # Toast, Modal └── pages/ ├── LandingPage.tsx # Hero, Features, How it works, Free Forever, FAQ ├── HumanizePage.tsx # Humanizer Studio workspace ├── DashboardPage.tsx# Analytics and recent generation list ├── HistoryPage.tsx # Searchable generation log ├── LoginPage.tsx # Auth login ├── SignupPage.tsx # Auth signup ├── ForgotPasswordPage.tsx ├── AboutPage.tsx # Mission & responsible AI statement ├── ContactPage.tsx # Contact form ├── PrivacyPage.tsx # Data transparency & deletion rights ├── TermsPage.tsx # Terms of service └── NotFoundPage.tsx # 404 handler ``` --- ## 🚀 Quick Start (Running Locally) ### 1. Prerequisites * **Node.js**: `v18.0.0` or higher (`node -v`) * **npm**: `v9.0.0` or higher (`npm -v`) ### 2. Clone & Install Dependencies From the project root directory: ```bash # Install root dependencies npm install # Install backend dependencies cd backend npm install cd .. # Install frontend dependencies cd frontend npm install cd .. ``` Or run: ```bash npm run install:all ``` --- ## ⚙️ Environment Variables Setup ### 1. Root / Backend Environment Variables In `backend/`, copy the example file: ```bash cp backend/.env.example backend/.env ``` Edit `backend/.env`: ```env PORT=5000 NODE_ENV=development FRONTEND_URL=http://localhost:5173 # Google Gemini API Key # Get a free key: https://aistudio.google.com/app/apikey GEMINI_API_KEY=your_gemini_api_key_here # Supabase Credentials (Optional for Demo Mode) SUPABASE_URL=https://your-project-ref.supabase.co SUPABASE_ANON_KEY=your_supabase_anon_key_here SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here ``` ### 2. Frontend Environment Variables In `frontend/`, copy the example file: ```bash cp frontend/.env.example frontend/.env ``` Edit `frontend/.env`: ```env VITE_API_URL=http://localhost:5000/api VITE_SUPABASE_URL=https://your-project-ref.supabase.co VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here ``` > **Note on Demo Mode**: If you run without entering `GEMINI_API_KEY` or `SUPABASE_URL`, HumanlyAI automatically launches in a clearly-labeled **Demo Mode** with local memory persistence so you can test all features and workflows immediately! --- ## 🔑 AI & Database Setup ### Step A: Get a Free Google Gemini API Key 1. Visit [Google AI Studio](https://aistudio.google.com/app/apikey). 2. Click **Create API Key**. 3. Copy the key and set it in `backend/.env`: ```env GEMINI_API_KEY=AIzaSy... ``` ### Step B: Setup Supabase Database 1. Create a free account at [Supabase](https://supabase.com/). 2. Create a new project (e.g. `humanly-ai`). 3. Open the **SQL Editor** tab in the Supabase Dashboard. 4. Open [`backend/database/schema.sql`](file:///c:/Users/sujit/OneDrive/Desktop/humanizer/backend/database/schema.sql) and paste its contents into the SQL Editor. 5. Click **Run**. This will create: * `profiles` table (linked to `auth.users`) * `generations` table (user rewrites and history) * Automated profile creation trigger on signup * Row Level Security (RLS) policies 6. Go to **Project Settings** -> **API** and copy: * **Project URL** -> `SUPABASE_URL` & `VITE_SUPABASE_URL` * **Project API Anon Key** -> `SUPABASE_ANON_KEY` & `VITE_SUPABASE_ANON_KEY` * **service_role key** (secret) -> `SUPABASE_SERVICE_ROLE_KEY` --- ## 🏃‍♂️ Running the Project ### Option 1: Single-Command (Both Backend & Frontend) From the root directory: ```bash npm run dev ``` This uses `concurrently` to start: * **Backend API Server** on `http://localhost:5000` * **Frontend Vite Dev Server** on `http://localhost:5173` ### Option 2: Run Separately In Terminal 1 (Backend): ```bash cd backend npm run dev ``` In Terminal 2 (Frontend): ```bash cd frontend npm run dev ``` Open your browser and navigate to: 👉 **[http://localhost:5173](http://localhost:5173)** --- ## 📡 API Endpoints | Method | Endpoint | Access | Description | |---|---|---|---| | `POST` | `/api/humanize` | Public / Guest | Humanizes AI text with selected tone & level | | `GET` | `/api/history` | Authenticated | Retrieves user's saved generation history | | `GET` | `/api/history/:id`| Authenticated | Retrieves a specific generation item | | `DELETE`| `/api/history/:id`| Authenticated | Deletes a specific generation item | | `DELETE`| `/api/history` | Authenticated | Clears all user history | | `GET` | `/api/stats` | Authenticated | Fetches user dashboard statistics | | `POST` | `/api/contact` | Public | Submits a contact inquiry | | `GET` | `/api/health` | Public | Backend health check & configuration status | ### Sample Humanize Request: ```http POST /api/humanize Content-Type: application/json { "text": "Furthermore, it is important to note that the application of AI facilitates substantial improvements.", "tone": "natural", "level": "medium" } ``` ### Sample Response: ```json { "success": true, "humanized_text": "AI helps teams get work done noticeably faster and smoother.", "original_word_count": 14, "output_word_count": 10, "character_count_original": 101, "character_count_output": 61, "tone": "natural", "level": "medium", "is_demo": false } ``` --- ## 🧪 Verification & Building To verify and build for production: ```bash # Build backend cd backend npm run build # Build frontend cd ../frontend npm run build ``` --- ## 🚢 Deployment Guide ### Deploying Frontend to Vercel 1. Push your code to GitHub. 2. Go to [Vercel](https://vercel.com/) and import the repository. 3. Set **Root Directory** to `frontend`. 4. Add Environment Variables: * `VITE_API_URL`: Your deployed backend URL (e.g. `https://humanly-backend.onrender.com/api`) * `VITE_SUPABASE_URL`: Your Supabase URL * `VITE_SUPABASE_ANON_KEY`: Your Supabase Anon Key 5. Click **Deploy**. ### Deploying Backend to Render or Railway 1. Create a **Web Service** on [Render](https://render.com/) or [Railway](https://railway.app/). 2. Set **Root Directory** to `backend`. 3. Set **Build Command** to `npm install && npm run build`. 4. Set **Start Command** to `npm start`. 5. Add Environment Variables: * `PORT`: `5000` * `NODE_ENV`: `production` * `FRONTEND_URL`: Your deployed frontend URL * `GEMINI_API_KEY`: Your Gemini API Key * `SUPABASE_URL`: Your Supabase URL * `SUPABASE_ANON_KEY`: Your Supabase Anon Key * `SUPABASE_SERVICE_ROLE_KEY`: Your Supabase Service Role Key --- ## 🛡️ Privacy & Responsible AI Statement * HumanlyAI does not claim 100% bypass of AI detectors. It is engineered for writing clarity, natural phrasing, and rhythmic improvement. * No API keys or database secrets are ever exposed in frontend assets. * Users maintain full control of their data and can clear their history at any time. --- ## 📄 License MIT © 2026 HumanlyAI. Built for students, writers, and creators everywhere. # humanizer