30:T605,# Chrome AI **Note:** Doesn't work due to chrome now requiring the allow="languageModel" on any iframes that use this, observable don't seem keen to add it. Go ask for it [in the discussion thread](https://github.com/observablehq/feedback/discussions/656) if you found this useful.

Setup Instructions

**Install Chrome Dev**: Ensure you have version 127. [Download Chrome Dev](https://google.com/chrome/dev/).
Check that you’re on 127.0.6512.0 or above
Enable two flags:
- chrome://flags/#optimization-guide-on-device-model - BypassPerfRequirement
- chrome://flags/#prompt-api-for-gemini-nano - Enabled
Relaunch Chrome
Navigate to chrome://components
Check that Optimization Guide On Device Model is downloading or force download if not Might take a few minutes for this component to even appear
Open dev tools and type `await LanguageModel.availability()`, should return "available" when all good
If not you can trigger the download by doing the follow: ```const session = await LanguageModel.create({monitor(m) {m.addEventListener("downloadprogress", e => { console.log(`Downloaded \${e.loaded} of \${e.total} bytes.`); });}});```

Easy exploration with the Chrome AI APIs Gemini Nano Available: ${!!canCreate ? "✅" : "🚫"} Model ready to use: ${canCreate && !!session ? "✅" : "🚫"}31:[] 2e:{"title":"Chrome AI","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"## Settings\n\nSee [Language Model Tuning](https://gemini.google.com/share/a4665036f4b9) for explanation of temprature and topK.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof temp = Inputs.range([0, 1], {\n value: defaultSettings.defaultTemperature,\n label: \"Temperature\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof topK = Inputs.range([0, defaultSettings.maxTopK], {\n step: 1,\n value: defaultSettings.defaultTopK,\n label: \"topK\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"viewof mode = Inputs.radio([\"At once\", \"Streaming\"], {\n value: \"At once\",\n label: \"Mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof systemPrompt = Inputs.textarea({\n label: \"System Prompt\",\n placeholder:\n \"e.g. You are a friendly, helpful assistant specialized in recipe creation.\",\n rows: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof btnSession = Inputs.button(\"Start Session\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof prompt = Inputs.textarea({\n label: \"Prompt\",\n placeholder: !session\n ? \"You need to start a session before prompting is available\"\n : \"Start prompting\",\n submit: mode === \"At once\" ? true : false,\n disabled: !session,\n rows: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"${session?.tokensSoFar} token${session?.tokensSoFar == 1 ? \"\" : \"s\"}","pinned":false,"hidden":false,"mode":"html"},{"id":107,"value":"Inputs.textarea({\n disabled: true,\n placeholder: \"Gemini Nano response will appear here\",\n value: mode === \"Streaming\" ? SLM || \"\" : LM || \"\",\n label: \"Response\",\n rows: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"## Prompt History\n\nPrompts, responses and settings will appear hear. \n\nCheck the checkbox below to have it persist to localStorage.\n\n${viewof persistHistory}","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"promptTable = filteredHistory","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"## Destroy Session\n\nTo stop an active LM session click the button below, this will free up memory.","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"viewof btnDestroy = Inputs.button(\"Destroy Session\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"LanguageModel.create().then((s) => console.log(s.prompt(\"say hello\")))","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof persistHistory = Inputs.toggle({\n value: \"true\",\n label: \"Persist History\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"LM = {\n if (prompt && canCreate && session) {\n console.log(`\\x1B[1;4;34mPrompt:\\x1B[0;3m %s\\x1B[m`, prompt);\n let res = \"\";\n\n if (mode === \"At once\") {\n res = await session.prompt(prompt);\n persistData(prompt, res);\n\n return res;\n } else {\n streamingRes(prompt);\n }\n }\n\n return \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"streamingRes = async (prompt) => {\n let res;\n try {\n let stream = await session.promptStreaming(prompt);\n\n for await (let chunk of stream) {\n res = chunk;\n mutable SLM = chunk;\n }\n persistData(prompt, res);\n } catch (e) {}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"mutable SLM = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"{\n if (!!session) {\n return session;\n } else if (btnSession && canCreate && !session) {\n console.log(userSettings);\n mutable session = await LanguageModel.create();\n console.log(session);\n return session;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"mutable session = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"canCreate = !!(window.LanguageModel && window?.LanguageModel?.availability)\n ? (await window?.LanguageModel.availability()) === \"available\"\n : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"userSettings = {\n return {\n temperature: temp,\n topK,\n initialPrompts: [{ role: \"system\", content: systemPrompt }]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"defaultSettings = canCreate ? await LanguageModel.params() : {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"mutable promptResponseHistory = JSON.parse(\n localStorage.getItem(\"promptTable\") || \"[]\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"filteredHistory = {\n const uniquePrompts = {};\n\n promptResponseHistory.forEach((item) => {\n if (\n !uniquePrompts[item.prompt] ||\n item.prompt.length > uniquePrompts[item.prompt].prompt.length\n ) {\n uniquePrompts[item.prompt] = item;\n }\n });\n\n const uniq = Object.values(uniquePrompts);\n\n return uniq.filter((item) => {\n return !uniq.some(\n (otherItem) =>\n otherItem != item &&\n otherItem.prompt.includes(item.prompt) &&\n otherItem.prompt !== item.prompt\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"persistData = (prompt, res) => {\n console.log(`\\x1B[1;4;32mResponse:\\x1B[0;3m %s\\x1B[m`, res.trim());\n mutable promptResponseHistory.push({\n prompt,\n res,\n ...userSettings,\n tokens: session.tokensSoFar\n });\n // Force cell to update\n mutable promptResponseHistory = mutable promptResponseHistory;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"{\n if (promptTable && persistHistory) {\n localStorage.setItem(\"promptTable\", JSON.stringify(promptTable));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"{\n if (btnDestroy && session) {\n session.destroy();\n mutable session = null;\n return \"Session destroyed\";\n } else if (!session) {\n return \"No session to destroy\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"import { encode } from \"@codingwithfire/gpt-3-encoder\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}