Skip to content

Commit af8eec4

Browse files
captainbrossetcaptainbrosset
committed
playgrounds
1 parent 54a5fd4 commit af8eec4

30 files changed

+2447
-14
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ sort on col 3: Repo directory
9292
| EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) |
9393
| SVG support in the Async Clipboard API | Demo page showing how the Async Clipboard API supports SVG format. | [/svg-clipboard/](https://github.com/MicrosoftEdge/Demos/tree/main/svg-clipboard) | [SVG clipbard support demo](https://microsoftedge.github.io/Demos/svg-clipboard/) |
9494
| IndexedDB: getAllRecords() | Demo page showing the benefits of the newly proposed `getAllRecords()` IndexedDB method to more conveniently and quickly read IDB records. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) |
95+
| Built-in AI playground | Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge. | [/built-in-ai/](https://github.com/MicrosoftEdge/Demos/tree/main/on-device-demos) | [Built-in AI playground](https://microsoftedge.github.io/Demos/built-in-ai/) |
9596

9697

9798
## Adding a new demo

‎built-in-ai/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Built-in AI Playground
2+
3+
➡️ **[Open the playground](https://microsoftedge.github.io/Demos/built-in-ai/)** ⬅️
4+
5+
The files in this directory are playgrounds for the built-in AI APIs in Microsoft Edge.
6+
7+
To learn more, see [Prompt a built-in language model with the Prompt API](https://aka.ms/edge-prompt-api-docs) and [Summarize, write, and rewrite text with the Writing Assistance APIs](https://aka.ms/edge-writing-assistance-api-docs).

‎built-in-ai/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>

‎built-in-ai/playgrounds/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>

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

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
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>Prompt 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+
</head>
19+
20+
21+
22+
<body>
23+
<header>
24+
<button title="Toggle the menu" class="nav-anchor" popovertarget="menu-popover"><span class="sr-only">Open menu</span></button>
25+
<h2 class="app-title">Built-in AI Playground</h2>
26+
27+
<nav id="menu">
28+
<ul class="menu">
29+
<li>
30+
<a href="/Demos/built-in-ai/playgrounds/prompt-api" class="item current">Prompt</a>
31+
</li>
32+
<li>
33+
<span class="item parent">
34+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api">Writing assistance</a>
35+
</span>
36+
<ul class="menu">
37+
<li>
38+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api" class="item">Summarizer</a>
39+
</li>
40+
<li>
41+
<a href="/Demos/built-in-ai/playgrounds/writer-api" class="item">Writer</a>
42+
</li>
43+
<li>
44+
<a href="/Demos/built-in-ai/playgrounds/rewriter-api" class="item">Rewriter</a>
45+
</li>
46+
</ul>
47+
</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 -->
59+
</ul>
60+
</nav>
61+
62+
</header>
63+
64+
65+
<nav id="menu-popover" popover>
66+
<ul class="menu">
67+
<li>
68+
<a href="/Demos/built-in-ai/playgrounds/prompt-api" class="item current">Prompt</a>
69+
</li>
70+
<li>
71+
<span class="item parent">
72+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api">Writing assistance</a>
73+
</span>
74+
<ul class="menu">
75+
<li>
76+
<a href="/Demos/built-in-ai/playgrounds/summarizer-api" class="item">Summarizer</a>
77+
</li>
78+
<li>
79+
<a href="/Demos/built-in-ai/playgrounds/writer-api" class="item">Writer</a>
80+
</li>
81+
<li>
82+
<a href="/Demos/built-in-ai/playgrounds/rewriter-api" class="item">Rewriter</a>
83+
</li>
84+
</ul>
85+
</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 -->
97+
</ul>
98+
</nav>
99+
100+
101+
102+
<link rel="stylesheet" href="/Demos/built-in-ai/static/playground.css">
103+
104+
<link rel="stylesheet" href="/Demos/built-in-ai/static/prompt-api.css">
105+
106+
107+
<main>
108+
<h1>Prompt API</h1>
109+
<p class="description">Web API to prompt the browser-provided language model. For more information, check out <a href="https://aka.ms/edge-prompt-api-docs" target="_blank">the API documentation</a>.</p>
110+
111+
<div id="message-ui" class="message-bar"></div>
112+
113+
<div class="settings card-with-shadow">
114+
115+
<div class="settings-row no-separator">
116+
<label for="prompt">
117+
User prompt
118+
<span role="tooltip" id="user-prompt-tooltip" style="anchor-name:--prompt-anchor;">
119+
<span class="tooltip-content" style="position-anchor:--prompt-anchor;">
120+
The user prompt is the text that you want to send to the language model. It can be a question, a statement, or
121+
any other type of input that you want the model to respond to. The model will generate a response based on this
122+
prompt.
123+
</span>
124+
</span>
125+
</label>
126+
<textarea spellcheck="false" id="prompt" placeholder="Enter text to prompt the language model"
127+
aria-describedby="user-prompt-tooltip">Ordered a Philly cheesesteak, and it was not edible. Their milkshake is just milk with cheap syrup. Horrible place!</textarea>
128+
</div>
129+
130+
<div class="settings-row">
131+
<label for="system-prompt">
132+
System prompt
133+
<span role="tooltip" id="system-prompt-tooltip" style="anchor-name:--system-prompt-anchor;">
134+
<span class="tooltip-content" style="position-anchor:--system-prompt-anchor;">
135+
The system prompt is a set of instructions or guidelines that you want the language model to follow when
136+
generating a response. This can include information about the desired tone, style, or content of the response.
137+
The model will use this prompt to generate a response that aligns with your instructions.
138+
</span>
139+
</span>
140+
</label>
141+
<textarea spellcheck="false" id="system-prompt"
142+
placeholder="Enter instructions, guidelines, and any information for the language model"
143+
aria-describedby="system-prompt-tooltip">You are an AI model designed to analyze the sentiment of user-provided text. Your goal is to classify the sentiment into predefined categories and provide a confidence score. Follow these guidelines:
144+
145+
- Identify whether the sentiment is positive, negative, or neutral.
146+
- Provide a confidence score (0-1) reflecting the certainty of the classification.
147+
- Ensure the sentiment classification is contextually accurate.
148+
- If the sentiment is unclear or highly ambiguous, default to neutral.</textarea>
149+
</div>
150+
151+
<div class="settings-row">
152+
<label for="response-schema">
153+
Response constraint schema (<span class="example-link-in-label" id="response-schema-example">load an example</span>)
154+
<span role="tooltip" id="response-schema-tooltip" style="anchor-name:--schema-anchor;">
155+
<span class="tooltip-content" style="position-anchor:--schema-anchor;">
156+
A JSON schema that's used to constrain the model's response.
157+
</span>
158+
</span>
159+
</label>
160+
<textarea spellcheck="false" id="response-schema" placeholder="Enter a JSON schema to constrain the output."
161+
aria-describedby="response-schema-tooltip" class="code"></textarea>
162+
</div>
163+
164+
<details class="settings-row">
165+
<summary>More settings</summary>
166+
<label for="initial-prompts">
167+
N-shot prompt instructions (<span class="example-link-in-label" id="n-shot-example">load an example</span>)
168+
<span role="tooltip" id="n-shot-tooltip" style="anchor-name:--nshot-anchor;">
169+
<span class="tooltip-content" style="position-anchor:--nshot-anchor;">
170+
N-shot prompting is a technique used to provide the model with a few examples of the desired input-output pairs.
171+
</span>
172+
</span>
173+
</label>
174+
<textarea spellcheck="false" id="initial-prompts" placeholder="Enter user/assistant interactions"
175+
aria-describedby="n-shot-tooltip" class="code"></textarea>
176+
</details>
177+
178+
<div class="settings-row no-separator">
179+
<label for="top-k">
180+
TopK
181+
<span role="tooltip" id="top-k-tooltip" style="anchor-name:--topk-anchor;">
182+
<span class="tooltip-content" style="position-anchor:--topk-anchor;">
183+
TopK is a sampling method that selects the top K most likely next tokens from the model's output distribution.
184+
The model then samples from this subset of tokens to generate the next token in the sequence. This method can
185+
help to reduce the randomness of the generated text and make it more coherent.
186+
</span>
187+
</span>
188+
</label>
189+
<div class="slider">
190+
<input type="range" id="top-k" min="1" max="100" value="10" aria-describedby="top-k-tooltip">
191+
<input type="number" id="top-k-value" min="1" max="100" value="10" tabindex="-1">
192+
</div>
193+
</div>
194+
195+
<div class="settings-row">
196+
<label for="temperature">
197+
Temperature
198+
<span role="tooltip" id="temperature-tooltip" style="anchor-name:--temp-anchor;">
199+
<span class="tooltip-content" style="position-anchor:--temp-anchor;">
200+
Temperature is a parameter that controls the randomness of the model's output. A lower temperature (e.g., 0.1)
201+
makes the model more deterministic and focused, while a higher temperature (e.g., 1.0) makes it more random and
202+
creative. Adjusting the temperature can help you find the right balance between coherence and creativity in the
203+
generated text.
204+
</span>
205+
</span>
206+
</label>
207+
<div class="slider">
208+
<input type="range" id="temperature" min="0" max="1.0" value="0.7" step="0.1"
209+
aria-describedby="temperature-tooltip">
210+
<input type="number" id="temperature-value" min="0" max="1.0" value="0.7" step="0.1" tabindex="-1">
211+
</div>
212+
</div>
213+
214+
<div class="settings-row submit">
215+
<button class="ai-button" id="run">Prompt</button>
216+
<button id="stop">Stop</button>
217+
</div>
218+
</div>
219+
220+
<pre id="output"></pre>
221+
222+
<div class="metrics card-with-shadow">
223+
<span class="metric">Initial latency: <span class="value" id="init-latency-metric"></span> ms</span>
224+
<span class="metric">First chunk latency: <span class="value" id="first-chunk-latency-metric"></span> ms</span>
225+
<span class="metric">Chunks: <span class="value" id="chunks-metric"></span></span>
226+
<span class="metric">Rate: <span class="value" id="chunk-rate-metric"></span> chunk/sec</span>
227+
</div>
228+
</main>
229+
230+
<script src="/Demos/built-in-ai/static/session.js"></script>
231+
<script src="/Demos/built-in-ai/static/spinner.js"></script>
232+
<script src="/Demos/built-in-ai/static/metrics.js"></script>
233+
<script src="/Demos/built-in-ai/static/slider.js"></script>
234+
235+
<script src="/Demos/built-in-ai/static/prompt-api.js"></script>
236+
237+
238+
</body>
239+
</html>

0 commit comments

Comments
 (0)