11 |
16 |
17 | ));
18 | Table.displayName = 'Table';
19 |
20 | const TableHeader = React.forwardRef<
21 | HTMLTableSectionElement,
22 | React.HTMLAttributes
82 |
173 | );
174 | }
175 |
--------------------------------------------------------------------------------
/.erb/configs/webpack.config.renderer.dev.ts:
--------------------------------------------------------------------------------
1 | import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
2 | import chalk from 'chalk';
3 | import { execSync, spawn } from 'child_process';
4 | import fs from 'fs';
5 | import HtmlWebpackPlugin from 'html-webpack-plugin';
6 | import MiniCssExtractPlugin from 'mini-css-extract-plugin';
7 | import path from 'path';
8 | import webpack from 'webpack';
9 | import 'webpack-dev-server';
10 | import { merge } from 'webpack-merge';
11 | import checkNodeEnv from '../scripts/check-node-env';
12 | import baseConfig from './webpack.config.base';
13 | import webpackPaths from './webpack.paths';
14 |
15 | // When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
16 | // at the dev webpack config is not accidentally run in a production environment
17 | if (process.env.NODE_ENV === 'production') {
18 | checkNodeEnv('development');
19 | }
20 |
21 | const port = process.env.PORT || 1212;
22 | const manifest = path.resolve(webpackPaths.dllPath, 'controls.json');
23 | const skipDLLs =
24 | module.parent?.filename.includes('webpack.config.renderer.dev.dll') ||
25 | module.parent?.filename.includes('webpack.config.eslint');
26 |
27 | /**
28 | * Warn if the DLL is not built
29 | */
30 | if (
31 | !skipDLLs &&
32 | !(fs.existsSync(webpackPaths.dllPath) && fs.existsSync(manifest))
33 | ) {
34 | console.log(
35 | chalk.black.bgYellow.bold(
36 | 'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"',
37 | ),
38 | );
39 | execSync('npm run postinstall');
40 | }
41 |
42 | const configuration: webpack.Configuration = {
43 | devtool: 'inline-source-map',
44 |
45 | mode: 'development',
46 |
47 | target: ['web', 'electron-renderer'],
48 |
49 | // entry: [
50 | // `webpack-dev-server/client?http://localhost:${port}/dist`,
51 | // 'webpack/hot/only-dev-server',
52 | // path.join(webpackPaths.srcBrowserPath, 'index.tsx'),
53 | // ],
54 |
55 | entry: {
56 | // controls: path.join(webpackPaths.srcBrowserPath, 'controls/entry.tsx'),
57 | controls: [
58 | `webpack-dev-server/client?http://localhost:${port}/dist`,
59 | 'webpack/hot/only-dev-server',
60 | path.join(webpackPaths.srcBrowserPath, 'controls/entry.tsx'),
61 | ],
62 | settings: path.join(webpackPaths.srcBrowserPath, 'settings/entry.tsx'),
63 | },
64 | output: {
65 | path: webpackPaths.distRendererPath,
66 | publicPath: '/',
67 | filename: '[name].bundle.js',
68 | library: {
69 | type: 'umd',
70 | },
71 | },
72 |
73 | module: {
74 | rules: [
75 | {
76 | test: /\.css$/,
77 | use: [
78 | MiniCssExtractPlugin.loader,
79 | 'css-loader',
80 | {
81 | loader: 'postcss-loader',
82 | options: {
83 | postcssOptions: {
84 | plugins: [require('tailwindcss'), require('autoprefixer')],
85 | },
86 | },
87 | },
88 | ],
89 | },
90 | // {
91 | // test: /\.s?css$/,
92 | // use: ['style-loader', 'css-loader'],
93 | // exclude: /\.module\.s?(c|a)ss$/,
94 | // },
95 | // Fonts
96 | {
97 | test: /\.(woff|woff2|eot|ttf|otf)$/i,
98 | type: 'asset/resource',
99 | },
100 | // Images
101 | {
102 | test: /\.(png|jpg|jpeg|gif)$/i,
103 | type: 'asset/resource',
104 | },
105 | // SVG
106 | {
107 | test: /\.svg$/,
108 | use: [
109 | {
110 | loader: '@svgr/webpack',
111 | options: {
112 | prettier: false,
113 | svgo: false,
114 | svgoConfig: {
115 | plugins: [{ removeViewBox: false }],
116 | },
117 | titleProp: true,
118 | ref: true,
119 | },
120 | },
121 | 'file-loader',
122 | ],
123 | },
124 | ],
125 | },
126 | plugins: [
127 | ...(skipDLLs
128 | ? []
129 | : [
130 | new webpack.DllReferencePlugin({
131 | context: webpackPaths.dllPath,
132 | manifest: require(manifest),
133 | sourceType: 'var',
134 | }),
135 | ]),
136 |
137 | new webpack.NoEmitOnErrorsPlugin(),
138 |
139 | new MiniCssExtractPlugin({
140 | filename: '[name].css',
141 | }),
142 |
143 | /**
144 | * Create global constants which can be configured at compile time.
145 | *
146 | * Useful for allowing different behaviour between development builds and
147 | * release builds
148 | *
149 | * NODE_ENV should be production so that modules do not perform certain
150 | * development checks
151 | *
152 | * By default, use 'development' as NODE_ENV. This can be overriden with
153 | * 'staging', for example, by changing the ENV variables in the npm scripts
154 | */
155 | new webpack.EnvironmentPlugin({
156 | NODE_ENV: 'development',
157 | }),
158 |
159 | new webpack.LoaderOptionsPlugin({
160 | debug: true,
161 | }),
162 |
163 | new ReactRefreshWebpackPlugin(),
164 |
165 | new HtmlWebpackPlugin({
166 | filename: 'controls.html',
167 | template: path.join(webpackPaths.assetsPath, 'template.html'),
168 | chunks: ['controls'],
169 | minify: {
170 | collapseWhitespace: true,
171 | removeAttributeQuotes: true,
172 | removeComments: true,
173 | },
174 | isBrowser: false,
175 | env: process.env.NODE_ENV,
176 | isDevelopment: process.env.NODE_ENV !== 'production',
177 | nodeModules: webpackPaths.appNodeModulesPath,
178 | }),
179 |
180 | new HtmlWebpackPlugin({
181 | filename: 'settings.html',
182 | template: path.join(webpackPaths.assetsPath, 'template.html'),
183 | chunks: ['settings'],
184 | minify: {
185 | collapseWhitespace: true,
186 | removeAttributeQuotes: true,
187 | removeComments: true,
188 | },
189 | isBrowser: false,
190 | env: process.env.NODE_ENV,
191 | isDevelopment: process.env.NODE_ENV !== 'production',
192 | nodeModules: webpackPaths.appNodeModulesPath,
193 | }),
194 | ],
195 |
196 | node: {
197 | __dirname: false,
198 | __filename: false,
199 | },
200 |
201 | devServer: {
202 | port,
203 | compress: true,
204 | hot: true,
205 | headers: { 'Access-Control-Allow-Origin': '*' },
206 | static: {
207 | publicPath: '/',
208 | },
209 | historyApiFallback: {
210 | verbose: true,
211 | },
212 | setupMiddlewares(middlewares) {
213 | console.log('Starting preload.js builder...');
214 | const preloadProcess = spawn('npm', ['run', 'start:preload'], {
215 | shell: true,
216 | stdio: 'inherit',
217 | })
218 | .on('close', (code: number) => process.exit(code!))
219 | .on('error', (spawnError) => console.error(spawnError));
220 |
221 | console.log('Starting Main Process...');
222 | let args = ['run', 'start:main'];
223 | if (process.env.MAIN_ARGS) {
224 | args = args.concat(
225 | ['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat(),
226 | );
227 | }
228 | spawn('npm', args, {
229 | shell: true,
230 | stdio: 'inherit',
231 | })
232 | .on('close', (code: number) => {
233 | preloadProcess.kill();
234 | process.exit(code!);
235 | })
236 | .on('error', (spawnError) => console.error(spawnError));
237 | return middlewares;
238 | },
239 | },
240 | };
241 |
242 | export default merge(baseConfig, configuration);
243 |
--------------------------------------------------------------------------------
/src/ai-api/device/__tests__/index.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | EmbedRequest as OllamaEmbedRequest,
3 | ChatRequest as OllamaChatRequest,
4 | Ollama,
5 | } from 'ollama';
6 | import { models } from '../index';
7 | import { Session, connectSession } from '../session';
8 | import { ChatOptions, EmbedOptions, Tools } from '../../types';
9 |
10 | describe('connectSession', () => {
11 | test('should create a session and return active status', async () => {
12 | const sessionOptions = { model: 'test-model' };
13 | const result = await connectSession(sessionOptions);
14 | expect(result).toEqual({ active: true, model: 'test-model' });
15 | });
16 |
17 | test('should return inactive status if chat throws an error', async () => {
18 | const sessionOptions = { model: 'test-model' };
19 | const result = await connectSession(sessionOptions, {
20 | chat: jest.fn().mockRejectedValue(new Error('Chat error')),
21 | } as unknown as Ollama);
22 | expect(result).toEqual({ active: false, model: null });
23 | });
24 | });
25 |
26 | describe('session.chat', () => {
27 | beforeEach(() => {
28 | jest.clearAllMocks();
29 | });
30 |
31 | test('should call session.chat with minimal required options', async () => {
32 | // eslint-disable-next-line no-underscore-dangle
33 | const session = Session.create();
34 |
35 | const options: ChatOptions = {
36 | model: 'test-model',
37 | messages: [{ role: 'user', content: 'Why is the sky blue' }],
38 | };
39 |
40 | const result = await session.chat(options);
41 |
42 | const ollama = new Ollama();
43 |
44 | const ollamaResponse = (await ollama.chat(
45 | Session.convertChatOptions(options),
46 | )) as any;
47 |
48 | expect(result).toEqual({
49 | ...Session.convertOllamaChatResponse(ollamaResponse),
50 | id: expect.any(String),
51 | });
52 | });
53 |
54 | test('should call session.chat with all provided options', async () => {
55 | const session = Session.create();
56 |
57 | const options: ChatOptions = {
58 | model: 'test-model',
59 | messages: [{ role: 'user', content: 'Why is the sky blue' }],
60 | options: {
61 | temperature: 0.5,
62 | stop: undefined,
63 | seed: undefined,
64 | repeat_penalty: 1.0,
65 | presence_penalty: 0.0,
66 | frequency_penalty: 0.0,
67 | top_k: 50,
68 | top_p: 1.0,
69 | },
70 | };
71 |
72 | const result = await session.chat(options);
73 |
74 | const ollama = new Ollama();
75 | const ollamaResponse = await ollama.chat(
76 | Session.convertChatOptions(options),
77 | );
78 |
79 | expect(result).toEqual({
80 | ...Session.convertOllamaChatResponse(ollamaResponse),
81 | id: expect.any(String),
82 | });
83 | });
84 |
85 | test('should support tools', async () => {
86 | // eslint-disable-next-line
87 | const addFunc = (a: number, b: number) => a + b;
88 |
89 | const addTool = {
90 | type: 'function',
91 | function: {
92 | name: 'addFunc',
93 | description: 'Add two numbers together.',
94 | parameters: {
95 | type: 'object',
96 | required: ['a', 'b'],
97 | properties: {
98 | a: {
99 | type: 'number',
100 | description: 'The first number to add.',
101 | },
102 | b: {
103 | type: 'number',
104 | description: 'The second number to add.',
105 | },
106 | },
107 | },
108 | },
109 | };
110 | // eslint-disable-next-line no-underscore-dangle
111 | const session = Session.create();
112 |
113 | const options: ChatOptions = {
114 | model: 'llama3.2',
115 | messages: [{ role: 'user', content: 'Add 1 and 2' }],
116 | tools: [addTool] as ChatOptions['tools'],
117 | };
118 | const result = await session.chat(options);
119 |
120 | const ollama = new Ollama();
121 | const ollamaResponse = await ollama.chat(
122 | Session.convertChatOptions(options),
123 | );
124 |
125 | expect(result).toEqual({
126 | ...Session.convertOllamaChatResponse(ollamaResponse),
127 | id: expect.any(String),
128 | });
129 | });
130 |
131 | test('should throw validation error if session.chat messages format is incorrect', async () => {
132 | const session = Session.create();
133 |
134 | const options: ChatOptions = {
135 | model: 'test-model',
136 | messages: 'Hello',
137 | } as unknown as ChatOptions;
138 |
139 | await expect(async () => {
140 | return session.chat(options);
141 | }).rejects.toThrow(/Validation errors:/);
142 | });
143 |
144 | test('should throw validation error if session.chat options contain invalid values', async () => {
145 | const session = Session.create();
146 |
147 | const options: ChatOptions = {
148 | model: 'test-model',
149 | messages: [{ role: 'user', content: 'Why is the sky blue' }],
150 | options: {
151 | temperature: 'HOT',
152 | },
153 | } as unknown as ChatOptions;
154 |
155 | await expect(async () => {
156 | return session.chat(options);
157 | }).rejects.toThrow(/Validation errors:/);
158 | });
159 | });
160 |
161 | describe('session.embed', () => {
162 | beforeEach(() => {
163 | jest.clearAllMocks();
164 | });
165 |
166 | test('should call session.embed with minimal required options', async () => {
167 | // eslint-disable-next-line no-underscore-dangle
168 | const session = Session.create();
169 |
170 | const options: EmbedOptions = {
171 | model: 'test-model',
172 | input: 'Hello',
173 | };
174 |
175 | const result = await session.embed(options);
176 |
177 | const ollama = new Ollama();
178 |
179 | const ollamaResponse = (await ollama.embed(
180 | options as OllamaEmbedRequest,
181 | )) as any;
182 |
183 | expect(result).toEqual({
184 | ...Session.convertOllamaEmbedResponse(ollamaResponse),
185 | id: expect.any(String),
186 | });
187 | });
188 |
189 | test('should call session.chat with all provided options', async () => {
190 | const session = Session.create();
191 |
192 | const options: ChatOptions = {
193 | model: 'test-model',
194 | messages: [{ role: 'user', content: 'Why is the sky blue' }],
195 | options: {
196 | temperature: 0.5,
197 | stop: undefined,
198 | seed: undefined,
199 | repeat_penalty: 1.0,
200 | presence_penalty: 0.0,
201 | frequency_penalty: 0.0,
202 | top_k: 50,
203 | top_p: 1.0,
204 | },
205 | };
206 |
207 | const result = await session.chat(options);
208 |
209 | const ollama = new Ollama();
210 |
211 | const ollamaResponse = (await ollama.chat(
212 | Session.convertChatOptions(options),
213 | )) as any;
214 |
215 | expect(result).toEqual({
216 | ...Session.convertOllamaChatResponse(ollamaResponse),
217 | id: expect.any(String),
218 | });
219 | });
220 |
221 | test('should throw validation error if session.chat messages format is incorrect', async () => {
222 | const session = Session.create();
223 |
224 | const options: ChatOptions = {
225 | model: 'test-model',
226 | messages: 'Hello',
227 | } as unknown as ChatOptions;
228 |
229 | await expect(async () => {
230 | return session.chat(options);
231 | }).rejects.toThrow(/Validation errors:/);
232 | });
233 |
234 | test('should throw validation error if session.chat options contain invalid values', async () => {
235 | const session = Session.create();
236 |
237 | const options: ChatOptions = {
238 | model: 'test-model',
239 | messages: [{ role: 'user', content: 'Why is the sky blue' }],
240 | options: {
241 | temperature: 'HOT',
242 | },
243 | } as unknown as ChatOptions;
244 |
245 | await expect(async () => {
246 | return session.chat(options);
247 | }).rejects.toThrow(/Validation errors:/);
248 | });
249 | });
250 |
251 | describe('models.isAvailable', () => {
252 | test('should return true if the model is available', async () => {
253 | const result = await models.isAvailable('test-model');
254 | expect(result).toBe(true);
255 | });
256 | });
257 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Browser.AI: Run AI Models Locally in Your Browser
2 |
3 | Browser.AI enables developers to run AI models directly on users' devices through a browser-based API. This prototype tests the concept of local AI model execution to improve privacy, speed, and offline functionality for web applications. It exists to provide a demo to support a
4 |
5 | ## Overview
6 | Browser.AI is a browser prototype that provides an API on the `window` object, enabling websites to run AI models locally on the user’s device. This allows for faster, more private, and offline-capable AI interactions.
7 |
8 | ## Run
9 | - Download and start [Ollama](https://ollama.com/download).
10 | - [Download browser](https://browser.christophermckenzie.com/)
11 | - Have fun
12 |
13 | ## Features
14 | - **On-device AI models**
15 | Keep AI computations on your machine, enhancing privacy, security, and speed.
16 | - **API access via window object**
17 | Interact with models directly using a simple, intuitive API through the `window` object.
18 | - **Chat & Embedding AI models**
19 | A streamlined interface for integrating chatbots and other AI features.
20 |
21 | ## Why Use Browser.AI?
22 | - **Privacy:** Your data stays on your device—nothing is sent to external servers.
23 | - **Speed:** AI models run locally, minimizing latency.
24 | - **Offline:** Works even when you’re not connected to the internet.
25 | - **Security:** You have full control over which models run on your machine.
26 | - **Cost Savings:** No server costs.
27 | - **Control:** You choose the models that run locally, giving you power over AI usage.
28 |
29 | ## How It Works
30 | Browser.AI exposes three key APIs:
31 | 1. **Permissions:** `window.ai.permissions` - Manage permissions for running AI models on your device.
32 | 1. Request permissions: `window.ai.permissions.request({ model: 'name' })`
33 | 2. List enabled models: `window.ai.permissions.models()`
34 | 2. **Model:** `window.ai.model` - Connect to and interact with AI models directly.
35 | 1. Information: `window.ai.model.info({ model: 'name' })`
36 | 2. Connect to session: `window.ai.model.connect({ model: 'name'});`
37 | 3. **Session:** - `connect` returns a session object, which makes available methods for `chat` and `embed`
38 | 1. Chat: `session.chat({ messages: [{ role: 'user', content: 'hello' }]});`
39 | 2. Embed `session.embed({ input: 'hello' });`
40 |
41 | ### Example Usage
42 |
43 | **Simple Chat**
44 | ```js
45 | if(await window.ai.permissions.request({ model: 'llama3.2', silent: true })) {
46 | const session = await window.ai.model.connect({ model: 'llama3.2' });
47 | const response = await session.chat({ messages: [{ role: 'user', content: 'hello' }] })
48 | console.log(response)
49 | }
50 | ```
51 | **Tool support for Chat**
52 | ```js
53 | const addFunc = (a, b) => a + b;
54 |
55 | const addTool = {
56 | type: "function",
57 | function: {
58 | name: "addFunc",
59 | description: "Add two numbers together.",
60 | parameters: {
61 | type: "object",
62 | required: ["a", "b"],
63 | properties: {
64 | a: {
65 | type: "number",
66 | description: "The first number to add.",
67 | },
68 | b: {
69 | type: "number",
70 | description: "The second number to add.",
71 | },
72 | },
73 | },
74 | },
75 | }
76 |
77 | if(await window.ai.permissions.request({ model: 'llama3.2', silent: true })) {
78 | const session = await window.ai.model.connect({ model: 'llama3.2' });
79 | const response = await session.chat({ messages: [{ role: 'user', content: 'add 1 and 2' }], tools: [addTool] })
80 |
81 | if (response.choices[0].message.tool_calls) {
82 | const { name, arguments } = response.choices[0].message.tool_calls[0].function;
83 | const result = addFunc(arguments.a, arguments.b);
84 | console.log(`Function ${name} called with result: ${result}`);
85 | }
86 |
87 | console.log(response)
88 | }
89 | ```
90 | **Generate Embeddings**
91 | ```js
92 | const docsToEmbed = [...]
93 | const embededDocs = [];
94 | if(await window.ai.permissions.request({ model: 'llama3.2', silent: true })) {
95 | const session = await window.ai.model.connect({ model: 'llama3.2' });
96 | let i = 0;
97 | while(i < docsToEmbed.length) {
98 | const response = await session.embed({ input: doc })
99 | embededDocs.push(response.embeddings)
100 | i++;
101 | }
102 | }
103 | ```
104 | **Request user enables model**
105 | ```js
106 | const response = await window.ai.permissions.request({ model: 'llama3.2' })
107 | if (response) {
108 | // write code that accesses model
109 | } else {
110 | // handle state where user has not yet enabled model.
111 | // because silent is false by default, they will get a browser
112 | // dialog asking them if they want to enable.
113 | }
114 | ```
115 |
116 | ## Current Limitations
117 | - The current implementation has chat and embed methods. This functionality will be expanded to handle all common interfaces for models.
118 | - Does not support streaming that this time. Will add support.
119 | - Does not support function calls. Will add support shortly.
120 | - Permissions are on model level. Will add support for domain level model permissions.
121 |
122 | ## Architecture
123 |
124 | ### AI API
125 | The API is exposed on the `window` object, providing access to AI models running on the user’s machine. It communicates with the **Device Bridge**, which handles permissions, model management, and returns the output.
126 |
127 | ### Device Bridge
128 | The Device Bridge manages models on the user’s machine. It can download, enable, or disable models but doesn’t actually run them. In this prototype, we use **Ollama** as the model runtime.
129 | > The Device Bridge is currently tied to Ollama for the sake of this prototype.
130 |
131 | ### Device (Model Runtime)
132 | This is the actual runtime environment where AI models are executed. For this prototype, Ollama is used to run models on the user’s machine.
133 |
134 | ### Key Concepts
135 | - **Available**: A model that is present on the user’s machine (or can be downloaded) but is not yet enabled for use.
136 | - **Enabled**: A model that is available and can be accessed by the AI API.
137 | - **Device**: Hardware the browser, and model, is running on.
138 |
139 | ## FAQs
140 |
141 | - **Is this a real browser?**
142 | Not exactly. It’s a prototype with limited functionality, mainly for experimenting with AI models in a browser-like environment.
143 | - **Why should I use this?**
144 | If you want to build or test web apps that leverage AI models running locally on users' devices, this is the tool for you!
145 | - **Can I contribute?**
146 | Absolutely! Feel free to reach out if you’re interested in contributing or collaborating. Link to proposal
147 |
148 | ### Roadmap
149 | - [ ] Add support for streaming.
150 | - [x] Add function-calling support for models.
151 | - [ ] Add support for for text completion.
152 | - [ ] Add support (should work now, but not tested) for image generation.
153 | - [ ] Add support for other runtimes (device adapters)
154 | - [ ] Add experimental support for 3rd-party providers
155 |
156 | ## Development
157 |
158 | ### Getting Started
159 |
160 | To set up the project locally, follow these steps:
161 |
162 | 1. **Clone the repo:** git clone git@github.com:kenzic/browser.ai.git
163 | 2. **Install dependencies:** Make sure you have [Node.js](https://nodejs.org/) 20+ installed, then run: `pnpm install`
164 | 3. **Start the development server:** To run the app in development mode: `pnpm start`
165 | 4. **Build the app:** To create a production build of the app: `pnpm package`
166 |
167 | ### Contributing
168 |
169 | Contributions are welcome! Here’s how you can contribute:
170 |
171 | 1. **Fork the repository**
172 | 2. **Create a new branch** for your feature or bugfix: `git checkout -b feature-name`
173 | 3. **Make your changes**, ensuring you follow the project’s code style.
174 | 4. **Open a pull request** with a description of your changes.
175 |
176 | Feel free to reach out if you have any questions or need help getting started!
177 |
178 | ## Thank You
179 |
180 | This is my first Electron app, and I used [electron-react-boilerplate](https://electron-react-boilerplate.js.org/) to kickstart the project. I was also inspired by the [Electron as Browser](https://github.com/hulufei/electron-as-browser) project. Thanks to everyone who made those tools!
181 |
--------------------------------------------------------------------------------
/src/browser/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import availableModelsData from '../../../ollama-models.json';
3 | import { Skeleton } from './components/skeleton';
4 | import { Switch } from './components/switch';
5 | import {
6 | Table,
7 | TableBody,
8 | TableCaption,
9 | TableCell,
10 | TableHead,
11 | TableHeader,
12 | TableRow,
13 | } from './components/table';
14 |
15 | import '../global.css';
16 |
17 | type ModelConfigureation = {
18 | title: string;
19 | link: string;
20 | tags: string[];
21 | };
22 |
23 | type ModelsConfigurationFile = Array
83 | {tabIDs.map((id) => {
84 | // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
85 | const { title, isLoading, favicon } = tabs[id] || {};
86 | return (
87 |
126 | switchTab(id)}
95 | >
96 | {isLoading ? (
97 | 
100 | )}
101 |
120 | );
121 | })}
122 |
123 |
102 |
111 |
108 | {title}
109 |
110 |
112 |
119 | close(e, id)}
115 | >
116 |
118 |
127 |
172 |
128 |
171 |
129 |
160 |
170 |
138 |
140 |
149 |
151 |
157 | {isLoading ?
159 |
28 |
30 | );
31 | };
32 |
33 | type ModelRowProps = {
34 | model: {
35 | title: string;
36 | };
37 | isEnabled: boolean;
38 | };
39 |
40 | const ModelRow: React.FC{emoji}
29 |
116 |
141 | );
142 | };
143 |
144 | const TableSkeleton = () => {
145 | return (
146 |
117 |
118 | Ollama connection status:{' '}
119 |
120 |
126 |
123 | {isConnected ? 'Connected' : 'Not Connected'}
124 |
125 |
127 | {/* {
132 | const { value } = e.target;
133 | setHostUrl(value);
134 | }}
135 | onBlur={() => {
136 | window.browserai.device.setHost(hostUrl);
137 | }}
138 | /> */}
139 |
140 |
197 |
228 |
272 |
273 | );
274 | };
275 |
--------------------------------------------------------------------------------
/setupJest.ts:
--------------------------------------------------------------------------------
1 | const ollamaClient = {
2 | Ollama: jest.fn().mockImplementation(() => {
3 | return {
4 | chat: jest.fn().mockReturnValue({
5 | model: 'llama3.2',
6 | created_at: new Date('2024-10-08T19:50:39.718631Z'),
7 | message: {
8 | role: 'assistant',
9 | content:
10 | "The sky appears blue to our eyes due to a phenomenon called Rayleigh scattering, named after the British physicist Lord Rayleigh, who first explained it in the late 19th century.\n\nHere's what happens:\n\n1. **Sunlight enters Earth's atmosphere**: When sunlight enters our atmosphere, it consists of a spectrum of colors, including all the colors of the visible light spectrum.\n2. **Light interacts with nitrogen and oxygen molecules**: As sunlight travels through the atmosphere, it encounters tiny molecules of nitrogen (N2) and oxygen (O2). These molecules scatter the light in all directions.\n3. **Shorter wavelengths are scattered more**: The shorter (blue) wavelengths of light are scattered more than the longer (red) wavelengths by the smaller nitrogen and oxygen molecules. This is because the smaller molecules have a larger cross-sectional area, which allows them to scatter the shorter wavelengths more efficiently.\n4. **Blue light is dispersed in all directions**: As a result of this scattering, the blue light is dispersed in all directions and reaches our eyes from every part of the sky.\n5. **Our eyes perceive the scattered blue light as the dominant color**: Because of the way that the light is scattered, our eyes perceive the blue light as the dominant color, making the sky appear blue to us.\n\nIt's worth noting that during sunrise and sunset, the sky can take on a range of colors, including pink, orange, and red. This is because the sunlight has to travel through more of the Earth's atmosphere to reach our eyes, which scatters the shorter wavelengths even further, leaving mainly longer wavelengths (like red and orange) to be visible.\n\nSo, in short, the sky appears blue because of the way that sunlight interacts with the tiny molecules of nitrogen and oxygen in our atmosphere, scattering the shorter wavelengths more than the longer ones.",
11 | },
12 | done_reason: 'stop',
13 | done: true,
14 | total_duration: 39007631218,
15 | load_duration: 34515208,
16 | prompt_eval_count: 31,
17 | prompt_eval_duration: 117012000,
18 | eval_count: 370,
19 | eval_duration: 38854044000,
20 | }),
21 | embed: jest.fn().mockReturnValue({
22 | model: 'test-model',
23 | embeddings: [[-0.0062045706, -0.013037177, 0.009031619]],
24 | total_duration: 10409949560,
25 | load_duration: 9907444385,
26 | prompt_eval_count: 2,
27 | }),
28 | ps: jest.fn().mockReturnValue({
29 | models: [
30 | {
31 | name: 'mistral:latest',
32 | model: 'mistral:latest',
33 | size: 5137025024,
34 | digest:
35 | '2ae6f6dd7a3dd734790bbbf58b8909a606e0e7e97e94b7604e0aa7ae4490e6d8',
36 | details: {
37 | parent_model: '',
38 | format: 'gguf',
39 | family: 'llama',
40 | families: ['llama'],
41 | parameter_size: '7.2B',
42 | quantization_level: 'Q4_0',
43 | },
44 | expires_at: '2024-06-04T14:38:31.83753-07:00',
45 | size_vram: 5137025024,
46 | },
47 | ],
48 | }),
49 | pull: jest.fn().mockReturnValue({ status: 'success' }),
50 | list: jest.fn().mockReturnValue({
51 | models: [
52 | {
53 | name: 'gemma2:latest',
54 | model: 'gemma2:latest',
55 | modified_at: '2024-09-29T18:48:29.085228211-04:00',
56 | size: 5443152417,
57 | digest: '123',
58 | details: {
59 | parent_model: '',
60 | format: 'gguf',
61 | family: 'gemma2',
62 | families: ['gemma2'],
63 | parameter_size: '9.2B',
64 | quantization_level: 'Q4_0',
65 | },
66 | },
67 | {
68 | name: 'llama3.1:latest',
69 | model: 'llama3.1:latest',
70 | modified_at: '2024-09-29T18:48:27.795520534-04:00',
71 | size: 4661230766,
72 | digest:
73 | '42182419e9508c30c4b1fe55015f06b65f4ca4b9e28a744be55008d21998a093',
74 | details: {
75 | parent_model: '',
76 | format: 'gguf',
77 | family: 'llama',
78 | families: ['llama'],
79 | parameter_size: '8.0B',
80 | quantization_level: 'Q4_0',
81 | },
82 | },
83 | {
84 | name: 'llama3.2:latest',
85 | model: 'llama3.2:latest',
86 | modified_at: '2024-09-29T18:48:26.599147061-04:00',
87 | size: 2019393189,
88 | digest: '234',
89 | details: {
90 | parent_model: '',
91 | format: 'gguf',
92 | family: 'llama',
93 | families: ['llama'],
94 | parameter_size: '3.2B',
95 | quantization_level: 'Q4_K_M',
96 | },
97 | },
98 | {
99 | name: 'qwen2.5:latest',
100 | model: 'qwen2.5:latest',
101 | modified_at: '2024-09-28T16:42:21.537757929-04:00',
102 | size: 4683087332,
103 | digest: '456',
104 | details: {
105 | parent_model: '',
106 | format: 'gguf',
107 | family: 'qwen2',
108 | families: ['qwen2'],
109 | parameter_size: '7.6B',
110 | quantization_level: 'Q4_K_M',
111 | },
112 | },
113 | {
114 | name: 'llava:latest',
115 | model: 'llava:latest',
116 | modified_at: '2024-09-13T21:38:28.050957108-04:00',
117 | size: 4733363377,
118 | digest:
119 | '8dd30f6b0cb19f555f2c7a7ebda861449ea2cc76bf1f44e262931f45fc81d081',
120 | details: {
121 | parent_model: '',
122 | format: 'gguf',
123 | family: 'llama',
124 | families: ['llama', 'clip'],
125 | parameter_size: '7B',
126 | quantization_level: 'Q4_0',
127 | },
128 | },
129 | ],
130 | }),
131 | show: jest.fn().mockReturnValue({
132 | license: 'Model license text',
133 | modelfile: 'blah blah blah',
134 | parameters: 'blah blah blah',
135 | template: 'blah blah blah',
136 | details: {
137 | parent_model: '',
138 | format: 'gguf',
139 | family: 'llama',
140 | families: ['llama'],
141 | parameter_size: '3.2B',
142 | quantization_level: 'Q4_K_M',
143 | },
144 | model_info: {
145 | 'general.architecture': 'llama',
146 | 'general.basename': 'Llama-3.2',
147 | 'general.file_type': 15,
148 | 'general.finetune': 'Instruct',
149 | 'general.languages': ['en', 'de', 'fr', 'it', 'pt', 'hi', 'es', 'th'],
150 | 'general.parameter_count': 3212749888,
151 | 'general.quantization_version': 2,
152 | 'general.size_label': '3B',
153 | 'general.tags': [
154 | 'facebook',
155 | 'meta',
156 | 'pytorch',
157 | 'llama',
158 | 'llama-3',
159 | 'text-generation',
160 | ],
161 | 'general.type': 'model',
162 | 'llama.attention.head_count': 24,
163 | 'llama.attention.head_count_kv': 8,
164 | 'llama.attention.key_length': 128,
165 | 'llama.attention.layer_norm_rms_epsilon': 0.00001,
166 | 'llama.attention.value_length': 128,
167 | 'llama.block_count': 28,
168 | 'llama.context_length': 131072,
169 | 'llama.embedding_length': 3072,
170 | 'llama.feed_forward_length': 8192,
171 | 'llama.rope.dimension_count': 128,
172 | 'llama.rope.freq_base': 500000,
173 | 'llama.vocab_size': 128256,
174 | 'tokenizer.ggml.bos_token_id': 128000,
175 | 'tokenizer.ggml.eos_token_id': 128009,
176 | 'tokenizer.ggml.merges': null,
177 | 'tokenizer.ggml.model': 'gpt2',
178 | 'tokenizer.ggml.pre': 'llama-bpe',
179 | 'tokenizer.ggml.token_type': null,
180 | 'tokenizer.ggml.tokens': null,
181 | },
182 | modified_at: '2024-09-29T18:48:26.599147061-04:00',
183 | }),
184 | };
185 | }),
186 | };
187 |
188 | jest.mock('ollama', () => ollamaClient);
189 |
190 | jest.mock('./src/lib/config');
191 | jest.mock('./src/lib/store', () => ({
192 | getStore: jest.fn().mockResolvedValue({
193 | get: jest.fn().mockImplementation((key) => {
194 | if (key === 'localModels') {
195 | return [
196 | {
197 | model: 'test-model',
198 | enabled: true,
199 | },
200 | {
201 | model: 'gemma2',
202 | enabled: true,
203 | },
204 | ];
205 | }
206 |
207 | if (key === 'deviceHost') {
208 | return 'http://localhost:11434';
209 | }
210 |
211 | throw new Error('Invalid key passed to store.get mock');
212 | }),
213 | set: jest.fn(),
214 | }),
215 | }));
216 |
217 | jest.mock('electron-store');
218 |
219 | // eslint-disable-next-line no-underscore-dangle
220 | (global as any).__mocks__ = {
221 | ollamaClient,
222 | };
223 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "browserai",
3 | "version": "0.1.5",
4 | "description": "Prototype of a window.ai api for accessing on-device models in the browser",
5 | "keywords": [
6 | "browser",
7 | "ai",
8 | "prototype",
9 | "electron",
10 | "typescript",
11 | "react",
12 | "tailwindcss",
13 | "webpack"
14 | ],
15 | "homepage": "https://github.com/kenzic/browser.ai#readme",
16 | "bugs": {
17 | "url": "https://github.com/kenzic/browser.ai/issues"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "git+https://github.com/kenzic/browser.ai.git"
22 | },
23 | "license": "MIT",
24 | "author": {
25 | "name": "Chris Mckenzie",
26 | "url": "https://card.christophermckenzie.com"
27 | },
28 | "main": "./.erb/dll/main.bundle.dev.js",
29 | "scripts": {
30 | "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
31 | "build:dll": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
32 | "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
33 | "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
34 | "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll",
35 | "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
36 | "lint:fix": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
37 | "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never && npm run build:dll",
38 | "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
39 | "prestart": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.dev.ts",
40 | "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run prestart && npm run start:renderer",
41 | "start:main": "concurrently -k \"cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --watch --config ./.erb/configs/webpack.config.main.dev.ts\" \"electronmon .\"",
42 | "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
43 | "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
44 | "test": "jest"
45 | },
46 | "browserslist": [
47 | "extends browserslist-config-erb"
48 | ],
49 | "prettier": {
50 | "singleQuote": true,
51 | "overrides": [
52 | {
53 | "files": [
54 | ".prettierrc",
55 | ".eslintrc"
56 | ],
57 | "options": {
58 | "parser": "json"
59 | }
60 | }
61 | ]
62 | },
63 | "jest": {
64 | "moduleDirectories": [
65 | "node_modules",
66 | "release/app/node_modules",
67 | "src"
68 | ],
69 | "moduleFileExtensions": [
70 | "js",
71 | "jsx",
72 | "ts",
73 | "tsx",
74 | "json"
75 | ],
76 | "moduleNameMapper": {
77 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "198 | 199 | Browser.AI Settings 200 | 201 |
202 |
203 |
218 | 204 | Browser.AI leverages Ollama to support on-device models. Ollama must 205 | be running on your machine for AI API to function properly. You can 206 | download Ollama from{' '} 207 | 213 | https://ollama.com/download 214 | 215 | . 216 |
217 |
220 |
227 | Model Settings
221 |222 | You can enable or disable each model using the switch on the right. 223 | Once enabled, sites using the AI API can preform tasks using the model 224 | via the AI API. 225 |
226 |