Built-in AI: The next frontier for web experiences presented by Miravia

Key Concepts

• Web AI: A set of APIs and features built directly into the browser, enabling developers to leverage AI models and Large Language Models (LLMs) on the user's device.
• Client-side AI: AI processing that occurs directly on the user's device (browser), as opposed to server-side AI.
• Server-side AI: AI processing that occurs on a remote server.
• Summarizer API: A specific Web AI API that allows for the summarization of text content.
• TLDR (Too Long; Didn't Read): A concise summary style.
• AB Testing: A method of comparing two versions of a webpage or app against each other to determine which one performs better.
• Conversion Rate: The percentage of users who complete a desired action (e.g., making a purchase).
• Loading Strategy: A plan for how to load and integrate AI features to ensure a smooth user experience.
• Cloud Fallback: A strategy where a cloud-based solution is used as a temporary substitute if the on-device solution is not yet available.

Miraavia's Adoption of Built-in AI for Enhanced User Experience

This presentation details how Miraavia, Alibaba's e-commerce platform for European users, successfully integrated built-in AI, specifically the Summarizer API, to significantly improve their product detail page experience. The core challenge addressed was helping users quickly understand the sentiment and key points from hundreds of user reviews without overwhelming them.

The Problem: Navigating User Reviews

Miraavia faced a common e-commerce challenge: making a large volume of user reviews digestible and useful for potential customers.

• Initial Approach: A simple, paginated list of all reviews, which was a mixed bag of positive and negative feedback.
• Improvement 1: Grouping reviews by star ratings, offering a slightly better organization.
• Improvement 2: Implementing server-side AI to generate a single, overarching summary at the top of the page. While helpful, this still didn't cater to users who wanted more detail without reading every single review.
• The Gap: Users liked the detail in reviews but lacked the time to read them all. The team sought a way to provide summaries within specific rating groups.

The Solution: Client-Side AI and the Summarizer API

The introduction of the Summarizer API presented a pivotal opportunity for Miraavia to move AI processing from the server to the client.

• Server-Side AI Limitations: Relying solely on server-side AI for dynamic summarization (e.g., when users clicked on different rating groups or when new reviews were added frequently) would place a significant load on their servers, leading to increased costs and potential performance issues.
• The "Aha Moment": The Summarizer API offered a direct path to offload this processing to the user's device, reducing server pressure and costs.
• Early Adoption: Miraavia became an early adopter, rapidly developing and implementing the client-side Summarizer API.

Live Implementation and Performance Gains

The live implementation showcases the power of client-side AI for real-time summarization.

• Functionality: Clicking on different star ratings on Miraavia's product pages now generates instant summaries of reviews within that specific rating group, directly on the client side.
• Performance: The experience is described as "fast."
• AB Testing Results: Upon the stable release of the Summarizer API in Chrome 138, Miraavia conducted AB testing.
  • Key Metrics:
    • A 12.4% jump in conversion rate on product pages.
    • A 3.3% lift for the entire website.
• Full Rollout: Based on stable performance and positive user feedback, Miraavia confidently launched the feature across all their product detail pages for English language support. Users can now experience this feature by visiting Miraavia, selecting a product, setting the language to English, and checking the reviews.

Implementation Walkthrough: A Surprisingly Simple Process

The presentation outlines the straightforward steps involved in implementing the Summarizer API.

1. Check for Device Support:

   • Method: Call summarizer.availability().
   • Purpose: To ensure the user's device and browser support the necessary AI models and hardware.
   • Logic: Developers write code to handle different status codes returned by this method.

2. Summarization Process:

   • Initialization: Create a summarizer object.
   • Configuration: Configure the summarizer with a prompt and shared context.
     • Use Case: Summarizing review text from a client-side JSON file.
     • Prompt Style: Set to TLDR (Too Long; Didn't Read) for a concise summary.
     • Length: Set to short.
   • Data Handling: Gather and format the review content.
   • Summarization: Pass the formatted content to the summarize method.
   • Output: The returned result is the rendered summary on the web page.

Key Takeaways and Encouragement

The presentation concludes with actionable insights and a call to action for developers.

• Smart Loading Strategy for Built-in AI:
  1. Check Compatibility: Verify device and browser support.
  2. Initiate Download with Cloud Fallback: Start the download of necessary AI models while providing a cloud-based fallback for an immediate, zero-width experience.
  3. Seamless Switch: Transition to the on-device model once it's ready, ensuring a fast and fluid user experience.
• The Power of Client-Side AI: Built-in AI is presented not as a complex cloud service but as a "little client-side helper" that enhances UX directly within the browser.
• Accessibility and Ease of Use: The technology is described as "free and simple to implement."
• Call to Action: Developers are encouraged to try built-in AI in their own projects.
  • Resources: A QR code links to Miraavia's full case study, and the Chrome for Developers site offers more information.
  • Support: Developers are invited to reach out with questions or ideas.

The speaker expresses anticipation for the innovative applications developers will create using the power of built-in AI.