Add gemini nano sample (#1234)
Add gemini nano sample --------- Co-authored-by: Oliver Dunk <oliverdunk@google.com>
This commit is contained in:
Sebastian Benz
GitHub
Родитель
ad20939023
Коммит
e1ad9ce8f0
|
|
@ -0,0 +1,14 @@
|
|||
# On-device AI with Gemini Nano
|
||||
|
||||
This sample demonstrates how to use the built-in Chrome Prompt API.
|
||||
|
||||
## Overview
|
||||
|
||||
The extension provides a chat interface for the built-in Chrome prompt API. To learn more about the API and how to sign-up for the preview, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/ai/built-in).
|
||||
|
||||
## Running this extension
|
||||
|
||||
1. Clone this repository.
|
||||
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
|
||||
3. Click the extension icon.
|
||||
4. Interact with the prompt API in the sidebar.
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
chrome.sidePanel
|
||||
.setPanelBehavior({ openPanelOnActionClick: true })
|
||||
.catch((error) => console.error(error));
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.9 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 267 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 458 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 890 B |
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "Chrome Built-in AI Demo",
|
||||
"version": "0.1",
|
||||
"manifest_version": 3,
|
||||
"description": "Try the built-in AI preview in Chrome.",
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"permissions": ["sidePanel"],
|
||||
"side_panel": {
|
||||
"default_path": "sidepanel/index.html"
|
||||
},
|
||||
"action": {
|
||||
"default_icon": {
|
||||
"16": "images/icon16.png",
|
||||
"32": "images/icon32.png",
|
||||
"48": "images/icon48.png",
|
||||
"128": "images/icon128.png"
|
||||
},
|
||||
"default_title": "Open Chat Interface"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
color: #1f1f1f;
|
||||
background-color: #f2f2f2;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
min-width: 100px;
|
||||
padding: 8px;
|
||||
margin: 16px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: #ccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
background: #ddd;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
margin-top: 16px;
|
||||
accent-color: black;
|
||||
}
|
||||
|
||||
textarea {
|
||||
--padding: 32px;
|
||||
width: calc(100% - var(--padding));
|
||||
max-width: calc(100% - var(--padding));
|
||||
}
|
||||
|
||||
.text,
|
||||
textarea {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: 1s ease-in-out 1s infinite reverse both running blink;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Chrome built-in AI</h1>
|
||||
<textarea
|
||||
id="input-prompt"
|
||||
placeholder='Type something, e.g. "Write a haiku about Chrome Extensions"'
|
||||
cols="30"
|
||||
rows="5"
|
||||
></textarea>
|
||||
<div>
|
||||
<input
|
||||
type="range"
|
||||
id="temperature"
|
||||
name="temperature"
|
||||
min="0"
|
||||
max="2"
|
||||
step="0.01"
|
||||
/>
|
||||
<label for="temperature"
|
||||
>Temperature: <span id="label-temperature"></span
|
||||
></label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="range" id="top-k" name="top-k" min="1" max="50" step="1" />
|
||||
<label for="top-k">Top-k: <span id="label-top-k"></span></label>
|
||||
</div>
|
||||
<button id="button-prompt" class="primary" disabled>Run</button>
|
||||
<button id="button-reset" class="secondary" disabled>Reset</button>
|
||||
<div id="response" class="text" hidden></div>
|
||||
<div id="loading" class="text" hidden><span class="blink">...</span></div>
|
||||
<div id="error" class="text" hidden></div>
|
||||
<script src="index.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
const inputPrompt = document.body.querySelector('#input-prompt');
|
||||
const buttonPrompt = document.body.querySelector('#button-prompt');
|
||||
const buttonReset = document.body.querySelector('#button-reset');
|
||||
const elementResponse = document.body.querySelector('#response');
|
||||
const elementLoading = document.body.querySelector('#loading');
|
||||
const elementError = document.body.querySelector('#error');
|
||||
const sliderTemperature = document.body.querySelector('#temperature');
|
||||
const sliderTopK = document.body.querySelector('#top-k');
|
||||
const labelTemperature = document.body.querySelector('#label-temperature');
|
||||
const labelTopK = document.body.querySelector('#label-top-k');
|
||||
|
||||
let session;
|
||||
|
||||
async function runPrompt(prompt, params) {
|
||||
try {
|
||||
if (!session) {
|
||||
// Start by checking if it's possible to create a session based on the availability of the model, and the characteristics of the device.
|
||||
const canCreate = await self.ai.canCreateTextSession();
|
||||
// canCreate will be one of the following:
|
||||
// * "readily": the model is available on-device and so creating will happen quickly
|
||||
// * "after-download": the model is not available on-device, but the device is capable,
|
||||
// so creating the session will start the download process (which can take a while).
|
||||
// * "no": the model is not available for this device.
|
||||
if (canCreate === 'no') {
|
||||
console.warn('Built-in prompt API not available.');
|
||||
throw new Error(
|
||||
'Built-in prompt API not available. Join the preview program to learn how to enable it.'
|
||||
);
|
||||
}
|
||||
console.log('Creating new text session');
|
||||
session = await self.ai.createTextSession(params);
|
||||
}
|
||||
return session.prompt(prompt);
|
||||
} catch (e) {
|
||||
console.log('Prompt failed');
|
||||
console.error(e);
|
||||
console.log('Prompt:', prompt);
|
||||
// Reset session
|
||||
reset();
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
if (session) {
|
||||
session.destroy();
|
||||
}
|
||||
session = null;
|
||||
}
|
||||
|
||||
async function initDefaults() {
|
||||
const defaults = await window.ai.defaultTextSessionOptions();
|
||||
console.log('Model default:', defaults);
|
||||
sliderTemperature.value = defaults.temperature;
|
||||
sliderTopK.value = defaults.topK;
|
||||
labelTopK.textContent = defaults.topK;
|
||||
labelTemperature.textContent = defaults.temperature;
|
||||
labelTemperature.value = defaults.temperature;
|
||||
}
|
||||
|
||||
initDefaults();
|
||||
|
||||
buttonReset.addEventListener('click', () => {
|
||||
hide(elementLoading);
|
||||
hide(elementError);
|
||||
hide(elementResponse);
|
||||
reset();
|
||||
buttonReset.setAttribute('disabled', '');
|
||||
});
|
||||
|
||||
sliderTemperature.addEventListener('input', (event) => {
|
||||
labelTemperature.textContent = event.target.value;
|
||||
reset();
|
||||
});
|
||||
|
||||
sliderTopK.addEventListener('input', (event) => {
|
||||
labelTopK.textContent = event.target.value;
|
||||
reset();
|
||||
});
|
||||
|
||||
inputPrompt.addEventListener('input', () => {
|
||||
if (inputPrompt.value.trim()) {
|
||||
buttonPrompt.removeAttribute('disabled');
|
||||
} else {
|
||||
buttonPrompt.setAttribute('disabled', '');
|
||||
}
|
||||
});
|
||||
|
||||
buttonPrompt.addEventListener('click', async () => {
|
||||
const prompt = inputPrompt.value.trim();
|
||||
showLoading();
|
||||
try {
|
||||
const params = {
|
||||
temperature: sliderTemperature.value,
|
||||
topK: sliderTopK.value
|
||||
};
|
||||
const response = await runPrompt(prompt, params);
|
||||
showResponse(response);
|
||||
} catch (e) {
|
||||
showError(e);
|
||||
}
|
||||
});
|
||||
|
||||
function showLoading() {
|
||||
buttonReset.removeAttribute('disabled');
|
||||
hide(elementResponse);
|
||||
hide(elementError);
|
||||
show(elementLoading);
|
||||
}
|
||||
|
||||
function showResponse(response) {
|
||||
hide(elementLoading);
|
||||
show(elementResponse);
|
||||
// Make sure to preserve line breaks in the response
|
||||
elementResponse.textContent = '';
|
||||
const paragraphs = response.split(/\r?\n/);
|
||||
for (const paragraph of paragraphs) {
|
||||
if (paragraph) {
|
||||
elementResponse.appendChild(document.createTextNode(paragraph));
|
||||
}
|
||||
elementResponse.appendChild(document.createElement('BR'));
|
||||
}
|
||||
}
|
||||
|
||||
function showError(error) {
|
||||
show(elementError);
|
||||
hide(elementResponse);
|
||||
hide(elementLoading);
|
||||
elementError.textContent = error;
|
||||
}
|
||||
|
||||
function show(element) {
|
||||
element.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
function hide(element) {
|
||||
element.setAttribute('hidden', '');
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче