Skip to content

Commit 52a177b

Browse files
Add source files to the built-in-ai demos
1 parent f61a6af commit 52a177b

File tree

16 files changed

+457
-92
lines changed

16 files changed

+457
-92
lines changed

built-in-ai/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
package-lock.json

built-in-ai/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,19 @@
55
The files in this directory are playgrounds for the built-in AI APIs in Microsoft Edge.
66

77
To learn more, see [Prompt a built-in language model with the Prompt API](https://learn.microsoft.com/microsoft-edge/web-platform/prompt-api) and [Summarize, write, and rewrite text with the Writing Assistance APIs](https://learn.microsoft.com/microsoft-edge/web-platform/writing-assistance-apis).
8+
9+
## Contributing
10+
11+
To make changes to the playground source code, clone this repository and follow these steps:
12+
13+
* To make changes to the source HTML content for one of the playgrounds:
14+
15+
This project uses Eleventy to generate the static HTML files. This is useful to avoid having to write the same HTML boilerplate for each playground.
16+
17+
1. Find the playground you want to edit in the `templates` directory.
18+
1. Make your changes to the HTML file.
19+
1. Run `npm run build` to regenerate the static HTML files in the `playgrounds` directory.
20+
21+
* To make changes to the JavaScript or CSS code for the playgrounds:
22+
23+
Make your changes directly to the JavaScript or CSS files in the `static` directory.

built-in-ai/eleventy.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default async function(eleventyConfig) {
2+
return {
3+
dir: {
4+
"input": "templates",
5+
"output": "playgrounds",
6+
},
7+
pathPrefix: "/Demos/build-in-ai/"
8+
}
9+
};

built-in-ai/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "built-in-ai",
3+
"version": "1.0.0",
4+
"description": "Built-in AI demos",
5+
"devDependencies": {
6+
"@11ty/eleventy": "^3.0.0"
7+
},
8+
"scripts": {
9+
"build": "npx @11ty/eleventy",
10+
"serve": "npx @11ty/eleventy --serve"
11+
}
12+
}

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
@@ -45,17 +45,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
4545
</li>
4646
</ul>
4747
</li>
48-
<!-- li class="divider">
49-
<span class="item parent">Samples</span>
50-
<ul class="menu">
51-
<li>
52-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
53-
</li>
54-
<li>
55-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
56-
</li>
57-
</ul>
58-
</li -->
5948
</ul>
6049
</nav>
6150

@@ -83,17 +72,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
8372
</li>
8473
</ul>
8574
</li>
86-
<!-- li class="divider">
87-
<span class="item parent">Samples</span>
88-
<ul class="menu">
89-
<li>
90-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
91-
</li>
92-
<li>
93-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
94-
</li>
95-
</ul>
96-
</li -->
9775
</ul>
9876
</nav>
9977

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
@@ -45,17 +45,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
4545
</li>
4646
</ul>
4747
</li>
48-
<!-- li class="divider">
49-
<span class="item parent">Samples</span>
50-
<ul class="menu">
51-
<li>
52-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
53-
</li>
54-
<li>
55-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
56-
</li>
57-
</ul>
58-
</li -->
5948
</ul>
6049
</nav>
6150

@@ -83,17 +72,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
8372
</li>
8473
</ul>
8574
</li>
86-
<!-- li class="divider">
87-
<span class="item parent">Samples</span>
88-
<ul class="menu">
89-
<li>
90-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
91-
</li>
92-
<li>
93-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
94-
</li>
95-
</ul>
96-
</li -->
9775
</ul>
9876
</nav>
9977

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
@@ -45,17 +45,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
4545
</li>
4646
</ul>
4747
</li>
48-
<!-- li class="divider">
49-
<span class="item parent">Samples</span>
50-
<ul class="menu">
51-
<li>
52-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
53-
</li>
54-
<li>
55-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
56-
</li>
57-
</ul>
58-
</li -->
5948
</ul>
6049
</nav>
6150

@@ -83,17 +72,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
8372
</li>
8473
</ul>
8574
</li>
86-
<!-- li class="divider">
87-
<span class="item parent">Samples</span>
88-
<ul class="menu">
89-
<li>
90-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
91-
</li>
92-
<li>
93-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
94-
</li>
95-
</ul>
96-
</li -->
9775
</ul>
9876
</nav>
9977

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

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
@@ -45,17 +45,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
4545
</li>
4646
</ul>
4747
</li>
48-
<!-- li class="divider">
49-
<span class="item parent">Samples</span>
50-
<ul class="menu">
51-
<li>
52-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
53-
</li>
54-
<li>
55-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
56-
</li>
57-
</ul>
58-
</li -->
5948
</ul>
6049
</nav>
6150

@@ -83,17 +72,6 @@ <h2 class="app-title">Built-in AI Playground</h2>
8372
</li>
8473
</ul>
8574
</li>
86-
<!-- li class="divider">
87-
<span class="item parent">Samples</span>
88-
<ul class="menu">
89-
<li>
90-
<a href="/Demos/built-in-ai/samples/e-commerce" class="item">E-commerce site</a>
91-
</li>
92-
<li>
93-
<a href="/Demos/built-in-ai/samples/news" class="item">News editor site</a>
94-
</li>
95-
</ul>
96-
</li -->
9775
</ul>
9876
</nav>
9977

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
</body>
2+
</html>
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>{{ title }}</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+
</head>
19+
20+
{% macro nav(isPopover) %}
21+
<nav {% if isPopover %} id="menu-popover" popover{% else %} id="menu"{% endif %}>
22+
<ul class="menu">
23+
<li>
24+
<a href="/Demos/built-in-ai/playgrounds/prompt-api" class="item{% if shorttitle == "Prompt API" %} current{% endif %}">Prompt</a>
25+
</li>
26+
<li>
27+
<span class="item parent">
28+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api">Writing assistance</a>
29+
</span>
30+
<ul class="menu">
31+
<li>
32+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api" class="item{% if shorttitle == "Summarizer API" %} current{% endif %}">Summarizer</a>
33+
</li>
34+
<li>
35+
<a href="/Demos/built-in-ai/playgrounds/writer-api" class="item{% if shorttitle == "Writer API" %} current{% endif %}">Writer</a>
36+
</li>
37+
<li>
38+
<a href="/Demos/built-in-ai/playgrounds/rewriter-api" class="item{% if shorttitle == "Rewriter API" %} current{% endif %}">Rewriter</a>
39+
</li>
40+
</ul>
41+
</li>
42+
</ul>
43+
</nav>
44+
{% endmacro %}
45+
46+
<body>
47+
<header>
48+
<button title="Toggle the menu" class="nav-anchor" popovertarget="menu-popover"><span class="sr-only">Open menu</span></button>
49+
<h2 class="app-title">Built-in AI Playground</h2>
50+
{{ nav(false) }}
51+
</header>
52+
53+
{{ nav(true) }}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{% include "header.njk" %}
2+
3+
<link rel="stylesheet" href="/Demos/built-in-ai/static/playground.css">
4+
{% if stylesheet %}
5+
<link rel="stylesheet" href="/Demos/built-in-ai/static/{{ stylesheet }}">
6+
{% endif %}
7+
8+
<main>
9+
<h1>{{ shorttitle }}</h1>
10+
<p class="description">{{ description | safe }}</p>
11+
12+
<div id="message-ui" class="message-bar"></div>
13+
14+
<div class="settings card-with-shadow">
15+
{{ content | safe }}
16+
</div>
17+
18+
<pre id="output"></pre>
19+
20+
<div class="metrics card-with-shadow">
21+
<span class="metric">Initial latency: <span class="value" id="init-latency-metric"></span> ms</span>
22+
<span class="metric">First chunk latency: <span class="value" id="first-chunk-latency-metric"></span> ms</span>
23+
<span class="metric">Chunks: <span class="value" id="chunks-metric"></span></span>
24+
<span class="metric">Rate: <span class="value" id="chunk-rate-metric"></span> chunk/sec</span>
25+
</div>
26+
</main>
27+
28+
<script src="/Demos/built-in-ai/static/session.js"></script>
29+
<script src="/Demos/built-in-ai/static/spinner.js"></script>
30+
<script src="/Demos/built-in-ai/static/metrics.js"></script>
31+
<script src="/Demos/built-in-ai/static/slider.js"></script>
32+
{% if script %}
33+
<script src="/Demos/built-in-ai/static/{{ script }}"></script>
34+
{% endif %}
35+
36+
{% include "footer.njk" %}

built-in-ai/templates/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<html>
2+
3+
<head>
4+
<meta http-equiv="Refresh" content="0; URL=/Demos/built-in-ai/playgrounds/prompt-api" />
5+
</head>
6+
7+
</html>

0 commit comments

Comments
 (0)