🔧 My HNG Internship Journey: Stage 3 — Building an AI-Powered Text Processing Interface
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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
- Find a reliable free summarization API.
- Refine the UI for better visual feedback.
- Add more languages and optimize performance.
Links to My Work
GitHub Repo: https://github.com/toptech5419/myHNGInternship-journey.git
LinkedIn: https://www.linkedin.com/in/toptech5419/
X (Twitter): https://x.com/Toptech5419
Medium: https://medium.com/@alabitemitope51
This stage taught me resilience in problem-solving. Onward to the next challenge!
...