https://github.com/jomagene/hng12-stage3-ai-text-interface
AI-Powered Text Processing Interface is a Next.js web app that leverages Chrome’s AI APIs for language detection, summarization, and translation in a chat-like interface. It uses Tailwind CSS for styling and handles text processing asynchronously with proper error feedback.
https://github.com/jomagene/hng12-stage3-ai-text-interface
animation-css chrome-ai hot-toast language-detection nextjs15 summarization translator
Last synced: about 1 month ago
JSON representation
AI-Powered Text Processing Interface is a Next.js web app that leverages Chrome’s AI APIs for language detection, summarization, and translation in a chat-like interface. It uses Tailwind CSS for styling and handles text processing asynchronously with proper error feedback.
- Host: GitHub
- URL: https://github.com/jomagene/hng12-stage3-ai-text-interface
- Owner: Jomagene
- License: mit
- Created: 2025-02-17T08:58:26.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-25T15:32:54.000Z (8 months ago)
- Last Synced: 2025-06-10T13:04:55.304Z (4 months ago)
- Topics: animation-css, chrome-ai, hot-toast, language-detection, nextjs15, summarization, translator
- Language: JavaScript
- Homepage: https://gtext-ai.vercel.app
- Size: 4.65 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AI-Powered Text Processing Interface
## 🚀 Overview
An AI-powered text processing interface that allows users to input text and leverage Chrome's AI APIs for:
- **Language Detection**
- **Summarization** (for now just for English text over 150 characters)
- **Translation**
The UI is designed to be chat-like, responsive, and accessible.
---
## 🎯 Features
### 🔹 Core Functionality
- **Chat-like UI**: User inputs appear in an output area similar to a messaging app.
- **Language Detection**: Displays detected language below the input text.
- **Summarization**: If text exceeds 150 characters, a "Summarize" button appears (only for English text).
- **Translation**: Users can translate text using a dropdown language selector and "Translate" button.
- **Asynchronous API Calls**: Handles processing via Chrome AI APIs, ensuring smooth user interactions.
- **Error Handling**: Displays clear messages for empty inputs, API failures, and invalid text.
### 🎨 UI/UX Considerations
- **Large, user-friendly text area** for input.
- **Accessible components** with keyboard navigation, and focus indicators.
- **Responsive design**
---
## 🧐 Screenshots
### Launching the Application
### Translator in action
### Summarizer in action
---
## 🛠️ Technologies Used
- **Frontend**: Javascript, Next.js
- **APIs**: Chrome AI APIs (Summarizer, Translator, Language Detection)
- **Deployment**: Vercel
---
## 📌 Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/your-repo.git
cd your-repo
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open the app in your Chrome browser.
> **Note:** Enable experimental feature flags in Chrome to access these APIs.
---
## 🔧 Chrome Requirements
### Browser Compatibility
- These APIs are currently exclusive to Chrome, with plans to standardize them across browsers.
### Supported Features & Platforms
- **Summarizer API**: Requires Gemini Nano and runs locally on desktop/laptop computers. Not supported on mobile devices.
- **Language Detection and Translation APIs**: Available on both desktop and Android devices within Chrome.
### Hardware Requirements
- **Operating Systems**: Windows 10 or 11, macOS 13+ (Ventura and onwards), or Linux.
- **Storage**: At least 22 GB of free space on the volume containing your Chrome profile.
- **Network**: Unlimited data or an unmetered connection is recommended.
For comprehensive details, refer to the [Chrome AI Documentation](https://developer.chrome.com/docs/ai).
---
## 📚 Additional Resources
- [Chrome AI APIs Overview](https://developer.chrome.com/docs/ai/)
- [Summarizer API Documentation](https://developer.chrome.com/docs/ai/summarizer-api)
- [Translator API Documentation](https://developer.chrome.com/docs/ai/translator-api)
- [Language Detection API Documentation](https://developer.chrome.com/docs/ai/language-detection)
> **Note:** Enable experimental feature flags in Chrome to access these APIs.
---
## 💜 License
This project is licensed under the [MIT License](LICENSE).