My HNG Internship Journey: Stage 3 — Building an AI-Powered Text Processing Interface

#javascript #webdev #programming #productivity

Two weeks ago, I completed Stage 3 of the HNG Internship. The task was to build a chat-style AI text processor using Chrome’s AI APIs for summarization, translation, and language detection. Here’s my experience.

Task Requirements

Create a chat-like interface where users input text and see outputs above.
Integrate Chrome’s AI APIs for translation (English, Portuguese, Spanish, etc.), language detection, and summarization.
Ensure accessibility, responsive design, and error handling.
Render action buttons (Summarize/Translate) based on text length and language.

Live Demo:

https://chattextgen.vercel.app/

Execution & Challenges

What Worked:

Successfully integrated Google’s Translator API for translating text and detecting languages.
Added a hover-to-translate feature: three dots appear on text hover, letting users translate to preferred languages.
Designed a responsive UI that works on mobile and desktop.

Struggles:

Summarization API Issues: Chrome’s Summarizer API repeatedly failed during testing. I tried multiple free alternatives, but none worked reliably. For now, summarization is incomplete.
Tight Deadline: Built this in days while balancing work commitments. Compromised on some edge cases to meet the deadline.
Error Handling: Implementing clear error messages for API failures required extra debugging time.

Outcome & Lessons

The app works for translation and language detection but lacks summarization. I’ll revisit this later with better APIs.

What I Learned:

Async JavaScript and API error handling are critical.
Accessibility (ARIA labels, keyboard navigation) takes patience but is worth it.
Time management is key with complex tasks.

Future Improvements