GoogleChromeLabs · etiennenoel · Feb 19, 2025
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/web-ai-demos.iml b/.idea/web-ai-demos.iml
diff --git a/built-in-ai-playground/built-in-ai-playground-logo.svg b/built-in-ai-playground/built-in-ai-playground-logo.svg
diff --git a/built-in-ai-playground/favicon.png b/built-in-ai-playground/favicon.png
diff --git a/built-in-ai-playground/index.csr.html b/built-in-ai-playground/index.csr.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" data-beasties-container="">
+<head>
+  <meta charset="utf-8">
+  <title>AI Playground</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.png">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
+<link rel="stylesheet" href="styles-TIJQ7WHD.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-TIJQ7WHD.css"></noscript></head>
+<body ngcm="">
+  <app-root></app-root>
+
+<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="scripts-WUCNTACX.js" defer=""></script><script src="main-IOPJ6IDZ.js" type="module"></script></body>
+</html>
diff --git a/built-in-ai-playground/index.html b/built-in-ai-playground/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html><html lang="en" data-beasties-container><head>
+  <meta charset="utf-8">
+  <title>API Playground</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.png">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
+<link rel="stylesheet" href="styles-TIJQ7WHD.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-TIJQ7WHD.css"></noscript><style ng-app-id="ng">div[_ngcontent-ng-c1954250409]{background-color:#f8f9fa;box-shadow:0 .5rem 1rem #00000026;border-radius:15px;position:fixed;padding:4px;text-align:center;top:25px;left:calc(50% - 100px);width:200px}</style><style ng-app-id="ng">.content[_ngcontent-ng-c3014540547]{height:100vh;overflow:auto}</style><style ng-app-id="ng">.sidebar[_ngcontent-ng-c538380724]{background-color:#e9ecef;height:100vh;margin:0;width:350px}.sidebar.sidebar-collapsed[_ngcontent-ng-c538380724]{width:75px}.sidebar.sidebar-collapsed[_ngcontent-ng-c538380724]   .title[_ngcontent-ng-c538380724]{display:none}.sidebar.sidebar-collapsed[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li[_ngcontent-ng-c538380724]{text-align:center}.sidebar.sidebar-collapsed[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li[_ngcontent-ng-c538380724]   span[_ngcontent-ng-c538380724]{display:none}.sidebar.sidebar-collapsed[_ngcontent-ng-c538380724]   header[_ngcontent-ng-c538380724]{margin-left:0;margin-right:0!important;flex-direction:column}.sidebar[_ngcontent-ng-c538380724]   header[_ngcontent-ng-c538380724]{margin-left:25px;margin-right:.5rem!important;flex-direction:row}.sidebar[_ngcontent-ng-c538380724]   header[_ngcontent-ng-c538380724]   .title[_ngcontent-ng-c538380724]{font-weight:700;margin:0}.sidebar[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li[_ngcontent-ng-c538380724]{border-radius:10px;margin-top:10px;padding:5px;transform:rotate(0)}.sidebar[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li.active[_ngcontent-ng-c538380724]{background-color:#cfe2ff}.sidebar[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li[_ngcontent-ng-c538380724]:hover{background-color:#ced4da}.sidebar[_ngcontent-ng-c538380724]   nav[_ngcontent-ng-c538380724]   ul[_ngcontent-ng-c538380724]   li[_ngcontent-ng-c538380724]   span[_ngcontent-ng-c538380724]{margin-left:.5rem}.sidebar[_ngcontent-ng-c538380724]   .btn-sidebar[_ngcontent-ng-c538380724]{background-color:#e9ecef}.sidebar[_ngcontent-ng-c538380724]   .btn-sidebar[_ngcontent-ng-c538380724]:hover{background-color:#ced4da}</style></head>
+<body><!--nghm--><script type="text/javascript" id="ng-event-dispatch-contract">(()=>{function p(t,n,r,o,e,i,f,m){return{eventType:t,event:n,targetElement:r,eic:o,timeStamp:e,eia:i,eirp:f,eiack:m}}function u(t){let n=[],r=e=>{n.push(e)};return{c:t,q:n,et:[],etc:[],d:r,h:e=>{r(p(e.type,e,e.target,t,Date.now()))}}}function s(t,n,r){for(let o=0;o<n.length;o++){let e=n[o];(r?t.etc:t.et).push(e),t.c.addEventListener(e,t.h,r)}}function c(t,n,r,o,e=window){let i=u(t);e._ejsas||(e._ejsas={}),e._ejsas[n]=i,s(i,r),s(i,o,!0)}window.__jsaction_bootstrap=c;})();
+</script><script>window.__jsaction_bootstrap(document.body,"ng",["click"],[]);</script>
+  <app-root ng-version="19.1.6" ngh="5" ng-server-context="ssg"><router-outlet></router-outlet><app-root ngh="4"><router-outlet></router-outlet><app-layout _nghost-ng-c3014540547 ngh="2"><div _ngcontent-ng-c3014540547 class="d-flex gap-2"><app-sidebar _ngcontent-ng-c3014540547 _nghost-ng-c538380724 ngh="0"><div _ngcontent-ng-c538380724 class="sidebar flex-shrink-0 d-flex flex-column"><header _ngcontent-ng-c538380724 class="d-flex pt-4 gap-2 align-items-center"><img _ngcontent-ng-c538380724 src="/built-in-ai-playground-logo.svg" alt="Built-In AI Playground Logo" class="d-block"><h1 _ngcontent-ng-c538380724 class="title h6 flex-grow-1">Built-In AI Playground</h1></header><nav _ngcontent-ng-c538380724 class="mt-5 ms-2 me-2 flex-grow-1"><ul _ngcontent-ng-c538380724 class="list-unstyled"><li _ngcontent-ng-c538380724 class="active"><a _ngcontent-ng-c538380724 routerlink="/" class="btn stretched-link" href="/" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-house"></i><span _ngcontent-ng-c538380724>Home</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/translator-api" class="btn stretched-link" href="/translator-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-translate"></i><span _ngcontent-ng-c538380724>Translator API</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/language-detector-api" class="btn stretched-link" href="/language-detector-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-globe"></i><span _ngcontent-ng-c538380724>Language Detector API</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/summarizer-api" class="btn stretched-link" href="/summarizer-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-text-paragraph"></i><span _ngcontent-ng-c538380724>Summarizer API</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/writer-api" class="btn stretched-link" href="/writer-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-pencil-square"></i><span _ngcontent-ng-c538380724>Writer API</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/rewriter-api" class="btn stretched-link" href="/rewriter-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-arrow-clockwise"></i><span _ngcontent-ng-c538380724>Rewriter API</span></a></li><li _ngcontent-ng-c538380724 class><a _ngcontent-ng-c538380724 routerlink="/prompt-api" class="btn stretched-link" href="/prompt-api" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-input-cursor-text"></i><span _ngcontent-ng-c538380724>Prompt API</span></a></li><!----></ul></nav><button _ngcontent-ng-c538380724 class="btn btn-sidebar p-3" jsaction="click:;"><i _ngcontent-ng-c538380724 class="bi bi-layout-sidebar"></i></button></div></app-sidebar><div _ngcontent-ng-c3014540547 class="flex-grow-1 content"><router-outlet _ngcontent-ng-c3014540547></router-outlet><app-index ngh="1"><div xmlns="http://www.w3.org/1999/html" class="container"><app-page-title ngh="1"><div class="row mt-5"><div class="col-12"><h1 class="display-5"><i class="bi-house"></i><span class="ms-3">Home</span></h1><div class="mt-4 d-flex gap-4 align-items-center"></div><hr></div></div></app-page-title><div class="row mt-4"><div class="col-12"><p>This built-in AI playground presents all the AI features directly available in Chrome as JS APIs:</p><ul class="list-unstyled mt-4"><li><a routerlink="translator-api" class="btn btn-light" href="/translator-api" jsaction="click:;"><i class="bi bi-translate"></i> Translator API</a></li><li class="mt-3"><a routerlink="language-detector-api" class="btn btn-light" href="/language-detector-api" jsaction="click:;"><i class="bi bi-globe2"></i> Language Detector API</a></li><li class="mt-3"><a routerlink="summarizer-api" class="btn btn-light" href="/summarizer-api" jsaction="click:;"><i class="bi bi-text-paragraph"></i> Summarizer API</a></li><li class="mt-3"><a routerlink="writer-api" class="btn btn-light" href="/writer-api" jsaction="click:;"><i class="bi bi-pencil-square"></i> Writer API</a></li><li class="mt-3"><a routerlink="rewriter-api" class="btn btn-light" href="/rewriter-api" jsaction="click:;"><i class="bi bi-arrow-clockwise"></i> Rewriter API</a></li><li class="mt-3"><a routerlink="prompt-api" class="btn btn-light" href="/prompt-api" jsaction="click:;"><i class="bi bi-input-cursor-text"></i> Prompt API</a></li></ul></div></div><h2 class="display-6 mt-3">Questions?</h2><p class="mt-3">Contact me, <a href="https://etiennenoel.com">Etienne Noël</a></p><div><a href="https://x.com/etiennenoel" class="btn btn-light btn-lg"><i class="bi bi-twitter-x"></i></a><a href="https://www.linkedin.com/in/enoel19/" class="btn btn-light btn-lg ms-2"><i class="bi bi-linkedin"></i></a></div></div></app-index><!----></div></div></app-layout><!----><app-toast _nghost-ng-c1954250409 ngh="3"><!----></app-toast></app-root><!----><app-toast _nghost-ng-c1954250409 ngh="3"><!----></app-toast></app-root>
+
+<script src="polyfills-FFHMD2TL.js" type="module"></script><script src="scripts-WUCNTACX.js" defer></script><script src="main-IOPJ6IDZ.js" type="module"></script>
+
+<script id="ng-state" type="application/json">{"__nghData__":[{"t":{"42":"t0"},"c":{"42":[]}},{},{"c":{"3":[{"i":"c444652500","r":1}]}},{"t":{"0":"t1"},"c":{"0":[]}},{"c":{"0":[{"i":"c3014540547","r":1}]}},{"c":{"0":[{"i":"c2995747896","r":1}]}}]}</script></body></html>
diff --git a/built-in-ai-playground/language-detector-api/index.html b/built-in-ai-playground/language-detector-api/index.html
diff --git a/built-in-ai-playground/main-IOPJ6IDZ.js b/built-in-ai-playground/main-IOPJ6IDZ.js