An AI-powered text processing application that enables users to input text and utilize Chrome's native AI APIs for language detection, translation, and summarization capabilities.
- 💬 Chat-like interface for text input and output
- 🔍 Automatic language detection for input text
- 🌐 Translation support for multiple languages:
- English (en)
- French (fr)
- Spanish (es)
- Portuguese (pt)
- Russian (ru)
- Turkish (tr)
- ✂️ Text summarization for English texts over 150 characters
- Next.js 15 with App Router
- TypeScript
- Tailwind CSS
- Framer motion
- Shadcn/ui Components
- Chrome AI APIs:
- Language Detection API
- Translator API
- Summarizer API
- Chrome browser with experimental AI APIs enabled
- Node.js 18+ installed
- Clone the repository:
git clone /~https://github.com/AJ1732/hng-12--stage-3.git- Install dependencies:
npm install- Create a .env.local file and add your API trial tokens:
NEXT_PUBLIC_TRANSLATOR_API_TRIAL_TOKEN=your_token_here
NEXT_PUBLIC_LANGUAGE_API_TRIAL_TOKEN=your_token_here
NEXT_PUBLIC_SUMMARIZER_API_TRIAL_TOKEN=your_token_here- Run the development server:
npm run dev- Open http://localhost:3000 in Chrome
- Enter text in the input field at the bottom
- Click send or press Enter to display in chat area
- Original text will show with detected language
- For English texts over 150 characters, click "Summarize"
- Select target language and click "Translate" to convert text
- Automatic detection of input text language
- Language code displayed below each message
- Support for 6 target languages
- Clean translation UI with language selector
- Error handling for failed translations
- Available for English texts over 150 characters
- AI-powered text summarization
- Original text preserved
- Full keyboard navigation support
- ARIA labels and roles
- Focus management
- Screen reader friendly
- Mobile-first approach
- Flexible layouts
- Optimized for all screen sizes