AI Feedback Response App

Facilitate writing replies to answer feedback from non-English customers on online auction sites.

Comment

Inspiration

It came from the hassles and efforts to deal with the communication between non-English customers and me on the eBay auction site many years ago. When they wrote feedback in non-English, I used Google Translate to understand what they wrote and their problems. Then, I addressed their problems in English, used Google Translate to translate the texts to the customers' native language, and pasted them into the reply text area on the eBay auction site.

What it does

  • User inputs the feedback in a language that the Translation API understands, for example, Spanish and Traditional Chinese
  • The application uses the Prompt API's N-shot prompting to determine the feedback's sentiment.
  • The application uses the Translate API to detect and translate the feedback to English.
  • The application uses the Summarization API to provide a short English summary for the feedback
  • The application provides a button to call the Writer API to generate the initial draft
  • The user edits the draft until he is satisfied.
  • The application automatically translates the response to the user's native language
  • The user clicks the fake submit button to display the response in the alert box. In the real world, the response is submitted to the backend application to persist in the database or other storage.

How we built it

  • I used the Angular CLI to create an Angular 19 application.
  • Then, I installed @types/dom-chromium-ai dev dependency and made the types available in the application. Then, Angular components and services can access the functions in the window.ai namespace.
  • The Angular application created environment providers to provide Prompt, Translation, Summarization, and Writer APIs. Then, Angular services injected the Chrome built-in APIs and call the API methods.
  • Then, I generated Angular components that injected the Angular services. The services injected the build-in APIs and called them to determine the sentiment of the feedback, translate the feedback to English, summarize the feedback to English, and generate the initial draft of the response. The user edited the response to translate it to the original language. Finally, the user clicked the button to display the translated response in an alert box.

Challenges we ran into

  • The typed definitions of dom-chromium-ai do not match the Window.ai namespace on Chrome Canary. I had to write defensive codes to ensure the functions and objects existed in the Window.ai namespace before calling them.

Accomplishments that we're proud of

  • I launched an AI application using JavaScript/TypeScript that can run offline. Developers with a laptop and a Chrome Canary can experience the capabilities of the APIs even though their status is experimental.

What we learned

  • The Chrome Built-In APIs enable web developers without ML/AI backend to build AI applications on Chrome easily. Web AI impacts the Generative AI development to Hybrid AI architecture. Some of the tasks can be handled on the client side when we know Gemini Nano is powerful enough to tackle them. Other tasks will be delegated to Cloud AI if they require heavy computations and intensive computing resources.

What's next for AI Feedback Response App

  • When the PRs of dom-chromium-ai are merged into the repository, I have to update the dependency, refactor the codes, and deploy the demo to the GitHub page.
  • I would like to incorporate Rewriter API in the demo if possible.
Share this project:

Updates