Skip to content

Commit 9f768b2

Browse files
captainbrossetcaptainbrosset
committed
Add LanguageDetector API playground and integrate into existing demos
1 parent ce5e53e commit 9f768b2

File tree

20 files changed

+408
-17
lines changed

20 files changed

+408
-17
lines changed

‎built-in-ai/playgrounds/languagedetector-api/index.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/png" href="/Demos/built-in-ai/static/images/icon.png" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap"
12+
rel="stylesheet">
13+
<title>LanguageDetector API playground</title>
14+
<link rel="stylesheet" href="/Demos/built-in-ai/static/button.css">
15+
<link rel="stylesheet" href="/Demos/built-in-ai/static/design.css">
16+
<link rel="stylesheet" href="/Demos/built-in-ai/static/spinner.css">
17+
<link rel="stylesheet" href="/Demos/built-in-ai/static/app.css">
18+
19+
<!-- Prompt API Chrome OT -->
20+
<meta http-equiv="origin-trial" content="AmNHs0xw9QAO2YukciI1RKhICzfn+DueUuUPFJijaUlhXbyw/XzBOxmslmw+PimfrSQ8YdtE9hZyALjnakHqFAkAAABreyJvcmlnaW4iOiJodHRwczovL21pY3Jvc29mdGVkZ2UuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJBSVByb21wdEFQSU11bHRpbW9kYWxJbnB1dCIsImV4cGlyeSI6MTc4MTU2ODAwMH0=">
21+
<!-- Summarizer API Chrome OT -->
22+
<meta http-equiv="origin-trial" content="AnmQ0jmbPIpGfZVA7KzZjGm+eqWhTVbw32p25GY5AUThwYV9mfnlRV9OFcB+rppXIcqjo9EVZo7Twi4azvQmVAIAAABjeyJvcmlnaW4iOiJodHRwczovL21pY3Jvc29mdGVkZ2UuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJBSVN1bW1hcml6YXRpb25BUEkiLCJleHBpcnkiOjE3NjA0MDAwMDB9">
23+
<!-- Writer API Chrome OT -->
24+
<meta http-equiv="origin-trial" content="Avs2en8Snsf0yWPOMv/HFHNDQPFK5BQE2fr5Jkshhp6All1GvEkWJn0zEN7qJ7ey7Hdxg7MOpM88RXupv/05FgQAAABceyJvcmlnaW4iOiJodHRwczovL21pY3Jvc29mdGVkZ2UuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJBSVdyaXRlckFQSSIsImV4cGlyeSI6MTc3NjcyOTYwMH0=">
25+
<!-- Rewriter API Chrome OT -->
26+
<meta http-equiv="origin-trial" content="AiehW/m2LP6tGyptGkHWswW78TJWMCQoDWQNItlcEnnRlUHeRXWS3Rq4TKKe9laNLZMz0HVgbIbLTrhhX0alGAgAAABeeyJvcmlnaW4iOiJodHRwczovL21pY3Jvc29mdGVkZ2UuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJBSVJld3JpdGVyQVBJIiwiZXhwaXJ5IjoxNzc2NzI5NjAwfQ==">
27+
</head>
28+
29+
30+
31+
<body>
32+
<header>
33+
<button title="Toggle the menu" class="nav-anchor" popovertarget="menu-popover"><span class="sr-only">Open menu</span></button>
34+
<h2 class="app-title">Built-in AI playgrounds</h2>
35+
36+
<nav id="menu">
37+
<ul class="menu">
38+
<li>
39+
<a href="/Demos/built-in-ai/playgrounds/prompt-api" class="item">Prompt</a>
40+
</li>
41+
<li>
42+
<span class="item parent">
43+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api">Writing assistance</a>
44+
</span>
45+
<ul class="menu">
46+
<li>
47+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api" class="item">Summarizer</a>
48+
</li>
49+
<li>
50+
<a href="/Demos/built-in-ai/playgrounds/writer-api" class="item">Writer</a>
51+
</li>
52+
<li>
53+
<a href="/Demos/built-in-ai/playgrounds/rewriter-api" class="item">Rewriter</a>
54+
</li>
55+
</ul>
56+
</li>
57+
<li>
58+
<a href="/Demos/built-in-ai/playgrounds/proofreader-api" class="item">Proofreader</a>
59+
</li>
60+
<li>
61+
<span class="item parent">
62+
<a href="/Demos/built-in-ai/playgrounds/translator-api">Translation</a>
63+
</span>
64+
<ul class="menu">
65+
<li>
66+
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
67+
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item current">LanguageDetector</a>
70+
</li>
71+
</ul>
72+
</li>
73+
<!-- li>
74+
<span class="item parent">
75+
Samples
76+
</span>
77+
<ul class="menu">
78+
<li>
79+
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce</a>
80+
</li>
81+
<li>
82+
<a href="/Demos/built-in-ai/samples/news" class="item">News</a>
83+
</li>
84+
</ul>
85+
</li -->
86+
</ul>
87+
</nav>
88+
89+
</header>
90+
91+
92+
<nav id="menu-popover" popover>
93+
<ul class="menu">
94+
<li>
95+
<a href="/Demos/built-in-ai/playgrounds/prompt-api" class="item">Prompt</a>
96+
</li>
97+
<li>
98+
<span class="item parent">
99+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api">Writing assistance</a>
100+
</span>
101+
<ul class="menu">
102+
<li>
103+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api" class="item">Summarizer</a>
104+
</li>
105+
<li>
106+
<a href="/Demos/built-in-ai/playgrounds/writer-api" class="item">Writer</a>
107+
</li>
108+
<li>
109+
<a href="/Demos/built-in-ai/playgrounds/rewriter-api" class="item">Rewriter</a>
110+
</li>
111+
</ul>
112+
</li>
113+
<li>
114+
<a href="/Demos/built-in-ai/playgrounds/proofreader-api" class="item">Proofreader</a>
115+
</li>
116+
<li>
117+
<span class="item parent">
118+
<a href="/Demos/built-in-ai/playgrounds/translator-api">Translation</a>
119+
</span>
120+
<ul class="menu">
121+
<li>
122+
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
123+
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item current">LanguageDetector</a>
126+
</li>
127+
</ul>
128+
</li>
129+
<!-- li>
130+
<span class="item parent">
131+
Samples
132+
</span>
133+
<ul class="menu">
134+
<li>
135+
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce</a>
136+
</li>
137+
<li>
138+
<a href="/Demos/built-in-ai/samples/news" class="item">News</a>
139+
</li>
140+
</ul>
141+
</li -->
142+
</ul>
143+
</nav>
144+
145+
146+
147+
<link rel="stylesheet" href="/Demos/built-in-ai/static/playground.css">
148+
149+
<link rel="stylesheet" href="/Demos/built-in-ai/static/languagedetector-api.css">
150+
151+
152+
<main>
153+
<h1>LanguageDetector API</h1>
154+
<p class="description">Web API for identifying the likely natural language that some text is written in, using a browser-provided language model. For more information, see <a href="https://learn.microsoft.com/microsoft-edge/web-platform/languagedetector-api" target="_blank">Identify a text's language with the LanguageDetector API</a>.</p>
155+
156+
<div id="message-ui" class="message-bar"></div>
157+
158+
<div class="settings card-with-shadow">
159+
160+
<div class="settings-row">
161+
<label for="text">Text to analyze</label>
162+
<textarea spellcheck="false" id="text">Ordered a Philly cheesesteak, and it was not edible. Their milkshake is just milk with cheap syrup. Horrible place!</textarea>
163+
</div>
164+
165+
<div class="settings-row submit">
166+
<button class="ai-button" id="detect">Detect the language</button>
167+
<button id="stop">Stop</button>
168+
</div>
169+
</div>
170+
171+
<pre id="output"></pre>
172+
173+
<div class="metrics card-with-shadow">
174+
<span class="metric">Initial latency: <span class="value" id="init-latency-metric"></span> ms</span>
175+
<span class="metric">First chunk latency: <span class="value" id="first-chunk-latency-metric"></span> ms</span>
176+
<span class="metric">Chunks: <span class="value" id="chunks-metric"></span></span>
177+
<span class="metric">Rate: <span class="value" id="chunk-rate-metric"></span> chunk/sec</span>
178+
<span class="metric">Total time: <span class="value" id="total-time-metric"></span> ms</span>
179+
</div>
180+
</main>
181+
182+
<script src="/Demos/built-in-ai/static/session.js"></script>
183+
<script src="/Demos/built-in-ai/static/spinner.js"></script>
184+
<script src="/Demos/built-in-ai/static/metrics.js"></script>
185+
<script src="/Demos/built-in-ai/static/slider.js"></script>
186+
187+
<script src="/Demos/built-in-ai/static/languagedetector-api.js"></script>
188+
189+
190+
</body>
191+
</html>

‎built-in-ai/playgrounds/prompt-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/playgrounds/proofreader-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/playgrounds/rewriter-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/playgrounds/summarizer-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/playgrounds/translator-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item current">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item current">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/playgrounds/writer-api/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/samples/e-commerce/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/samples/news/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
6565
<li>
6666
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
6767
</li>
68+
<li>
69+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
70+
</li>
6871
</ul>
6972
</li>
7073
<!-- li>
@@ -118,6 +121,9 @@ <h2 class="app-title">Built-in AI playgrounds</h2>
118121
<li>
119122
<a href="/Demos/built-in-ai/playgrounds/translator-api" class="item">Translator</a>
120123
</li>
124+
<li>
125+
<a href="/Demos/built-in-ai/playgrounds/languagedetector-api" class="item">LanguageDetector</a>
126+
</li>
121127
</ul>
122128
</li>
123129
<!-- li>

‎built-in-ai/static/languagedetector-api.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#input {
2+
height: 14rem;
3+
max-height: 50vh;
4+
}
5+
6+
#output:empty::before {
7+
content: "The detected language and confidence will appear here";
8+
}

0 commit comments

Comments
 (0)