@jupyterlite/ai 0.6.2 → 0.7.0

package/src/chat-handler.ts

@@ -5,14 +5,16 @@
 
 import {
   ChatCommand,
-  ChatModel,
+  AbstractChatContext,
+  AbstractChatModel,
   IChatCommandProvider,
+  IChatContext,
   IChatHistory,
   IChatMessage,
+  IChatModel,
   IInputModel,
   INewMessage
 } from '@jupyter/chat';
-import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import {
   AIMessage,
   HumanMessage,
@@ -20,9 +22,11 @@ import {
   SystemMessage
 } from '@langchain/core/messages';
 import { UUID } from '@lumino/coreutils';
+
+import { jupyternautLiteIcon } from './icons';
 import { chatSystemPrompt } from './provider';
 import { IAIProviderRegistry } from './tokens';
-import { jupyternautLiteIcon } from './icons';
+import { AIChatModel } from './types/ai-model';
 
 /**
  * The base64 encoded SVG string of the jupyternaut lite icon.
@@ -31,12 +35,24 @@ import { jupyternautLiteIcon } from './icons';
 const AI_AVATAR_BASE64 = btoa(jupyternautLiteIcon.svgstr);
 const AI_AVATAR = `data:image/svg+xml;base64,${AI_AVATAR_BASE64}`;
 
+export const welcomeMessage = (providers: string[]) => `
+#### Ask JupyterLite AI
+
+
+The provider to use can be set in the settings editor, by selecting it from
+the <img src="${AI_AVATAR}" width="16" height="16"> _AI provider_ settings.
+
+The current providers that are available are _${providers.sort().join('_, _')}_.
+
+To clear the chat, you can use the \`/clear\` command from the chat input.
+`;
+
 export type ConnectionMessage = {
   type: 'connection';
   client_id: string;
 };
 
-export class ChatHandler extends ChatModel {
+export class ChatHandler extends AbstractChatModel {
   constructor(options: ChatHandler.IOptions) {
     super(options);
     this._providerRegistry = options.providerRegistry;
@@ -52,7 +68,7 @@ export class ChatHandler extends ChatModel {
     });
   }
 
-  get provider(): BaseChatModel | null {
+  get provider(): AIChatModel | null {
     return this._providerRegistry.currentChatModel;
   }
 
@@ -126,7 +142,7 @@ export class ChatHandler extends ChatModel {
     );
 
     const sender = { username: this._personaName, avatar_url: AI_AVATAR };
-    this.updateWriters([sender]);
+    this.updateWriters([{ user: sender }]);
 
     // create an empty message to be filled by the AI provider
     const botMsg: IChatMessage = {
@@ -184,6 +200,10 @@ export class ChatHandler extends ChatModel {
     this._controller?.abort();
   }
 
+  createChatContext(): IChatContext {
+    return new ChatHandler.ChatContext({ model: this });
+  }
+
   private _providerRegistry: IAIProviderRegistry;
   private _personaName = 'AI';
   private _prompt: string;
@@ -194,10 +214,23 @@ export class ChatHandler extends ChatModel {
 }
 
 export namespace ChatHandler {
-  export interface IOptions extends ChatModel.IOptions {
+  /**
+   * The options used to create a chat handler.
+   */
+  export interface IOptions extends IChatModel.IOptions {
     providerRegistry: IAIProviderRegistry;
   }
 
+  /**
+   * The minimal chat context.
+   */
+  export class ChatContext extends AbstractChatContext {
+    users = [];
+  }
+
+  /**
+   *  The chat command provider for the chat.
+   */
   export class ClearCommandProvider implements IChatCommandProvider {
     public id: string = '@jupyterlite/ai:clear-commands';
     private _slash_commands: ChatCommand[] = [

package/src/completion-provider.ts

@@ -4,8 +4,8 @@ import {
   IInlineCompletionProvider
 } from '@jupyterlab/completer';
 
-import { IBaseCompleter } from './base-completer';
 import { IAIProviderRegistry } from './tokens';
+import { AICompleter } from './types/ai-model';
 
 /**
  * The generic completion provider to register to the completion provider manager.
@@ -34,7 +34,7 @@ export class CompletionProvider implements IInlineCompletionProvider {
   /**
    * Get the current completer.
    */
-  get completer(): IBaseCompleter | null {
+  get completer(): AICompleter | null {
     return this._providerRegistry.currentCompleter;
   }
 

package/src/default-providers/Anthropic/completer.ts

@@ -3,7 +3,6 @@ import {
   IInlineCompletionContext
 } from '@jupyterlab/completer';
 import { ChatAnthropic } from '@langchain/anthropic';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 
 import { BaseCompleter, IBaseCompleter } from '../../base-completer';
@@ -14,10 +13,6 @@ export class AnthropicCompleter implements IBaseCompleter {
     this._completer = new ChatAnthropic({ ...options.settings });
   }
 
-  get completer(): BaseChatModel {
-    return this._completer;
-  }
-
   /**
    * Getter and setter for the initial prompt.
    */

package/src/default-providers/ChromeAI/completer.ts

@@ -3,7 +3,6 @@ import {
   IInlineCompletionContext
 } from '@jupyterlab/completer';
 import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
-import { LLM } from '@langchain/core/language_models/llms';
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
 
 import { BaseCompleter, IBaseCompleter } from '../../base-completer';
@@ -45,10 +44,6 @@ export class ChromeCompleter implements IBaseCompleter {
     this._prompt = value;
   }
 
-  get completer(): LLM {
-    return this._completer;
-  }
-
   async fetch(
     request: CompletionHandler.IRequest,
     context: IInlineCompletionContext

package/src/default-providers/ChromeAI/instructions.ts

@@ -22,3 +22,24 @@ During the download, ChromeAI may not be available via the extension.
 
 <i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: <https://developer.chrome.com/docs/ai/get-started>
 `;
+
+/**
+ * Check if the browser supports ChromeAI and the model is available.
+ */
+export async function compatibilityCheck(): Promise<string | null> {
+  // Check if the browser supports the ChromeAI model
+  if (
+    typeof window === 'undefined' ||
+    !('LanguageModel' in window) ||
+    window.LanguageModel === undefined ||
+    (window.LanguageModel as any).availability === undefined
+  ) {
+    return 'Your browser does not support ChromeAI. Please use an updated chrome based browser like Google Chrome, and follow the instructions in settings to enable it.';
+  }
+  const languageModel = window.LanguageModel as any;
+  if (!(await languageModel.availability())) {
+    return 'The ChromeAI model is not available in your browser. Please ensure you have enabled the necessary flags in Google Chrome as described in the instructions in settings.';
+  }
+  // If the model is available, return null to indicate compatibility
+  return null;
+}

package/src/default-providers/MistralAI/completer.ts

@@ -2,7 +2,6 @@ import {
   CompletionHandler,
   IInlineCompletionContext
 } from '@jupyterlab/completer';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import {
   BaseMessage,
   HumanMessage,
@@ -47,10 +46,6 @@ export class CodestralCompleter implements IBaseCompleter {
     );
   }
 
-  get completer(): BaseChatModel {
-    return this._completer;
-  }
-
   /**
    * Getter and setter for the initial prompt.
    */

package/src/default-providers/Ollama/completer.ts

@@ -0,0 +1,62 @@
+import {
+  CompletionHandler,
+  IInlineCompletionContext
+} from '@jupyterlab/completer';
+import { AIMessage, SystemMessage } from '@langchain/core/messages';
+import { ChatOllama } from '@langchain/ollama';
+
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
+
+export class OllamaCompleter implements IBaseCompleter {
+  constructor(options: BaseCompleter.IOptions) {
+    this._completer = new ChatOllama({ ...options.settings });
+  }
+
+  /**
+   * Getter and setter for the initial prompt.
+   */
+  get prompt(): string {
+    return this._prompt;
+  }
+  set prompt(value: string) {
+    this._prompt = value;
+  }
+
+  async fetch(
+    request: CompletionHandler.IRequest,
+    context: IInlineCompletionContext
+  ) {
+    const { text, offset: cursorOffset } = request;
+    const prompt = text.slice(0, cursorOffset);
+
+    const messages = [new SystemMessage(this._prompt), new AIMessage(prompt)];
+
+    try {
+      const response = await this._completer.invoke(messages);
+      const items = [];
+      if (typeof response.content === 'string') {
+        items.push({
+          insertText: response.content
+        });
+      } else {
+        response.content.forEach(content => {
+          if (content.type !== 'text') {
+            return;
+          }
+          items.push({
+            insertText: content.text,
+            filterText: prompt.substring(prompt.length)
+          });
+        });
+      }
+      return { items };
+    } catch (error) {
+      console.error('Error fetching completions', error);
+      return { items: [] };
+    }
+  }
+
+  private _completer: ChatOllama;
+  private _prompt: string = COMPLETION_SYSTEM_PROMPT;
+}

package/src/default-providers/Ollama/instructions.ts

@@ -0,0 +1,70 @@
+export default `
+Ollama allows to run large language models locally on your machine.
+To use it you need to install the Ollama CLI and pull the model you want to use.
+
+1. Install the Ollama CLI by following the instructions at <https://ollama.com/download>
+
+2. Pull the model you want to use by running the following command in your terminal:
+
+   \`\`\`bash
+   ollama pull <model-name>
+   \`\`\`
+
+   For example, to pull the Llama 2 model, run:
+
+   \`\`\`bash
+   ollama pull llama2
+   \`\`\`
+
+3. Once the model is pulled, you can use it in your application by running the following command:
+
+    \`\`\`bash
+    ollama serve
+    \`\`\`
+
+4. This model will be available in the extension, using the model name you used in the command above.
+
+<details>
+<summary>Deploying Lite/Lab on external server</summary>
+
+See https://objectgraph.com/blog/ollama-cors/ for more details.
+
+On Linux, you can run the following commands:
+
+1. Check if CORS is enabled on the server. You can do this by running the following command in your terminal:
+
+   \`\`\`bash
+   curl -X OPTIONS http://localhost:11434 -H "Origin: http://example.com" -H "Access-Control-Request-Method: GET" -I
+   \`\`\`
+
+   If CORS is disabled, you will see a response like this:
+
+   \`\`\`bash
+   HTTP/1.1 403 Forbidden
+   Date: Wed, 09 Oct 2024 10:12:15 GMT
+   Content-Length: 0
+    \`\`\`
+
+2. If CORS is not enabled, update _/etc/systemd/system/ollama.service_ with:
+
+   \`\`\`bash
+   [Service]
+   Environment="OLLAMA_HOST=0.0.0.0"
+   Environment="OLLAMA_ORIGINS=*"
+   \`\`\`
+
+3. Restart the service:
+
+   \`\`\`bash
+   sudo systemctl daemon-reload
+   sudo systemctl restart ollama
+   \`\`\`
+
+4. Check if CORS is enabled on the server again by running the following command in your terminal:
+
+    \`\`\`bash
+    curl -X OPTIONS http://localhost:11434 -H "Origin: http://example.com" -H "Access-Control-Request-Method: GET" -I
+    \`\`\`
+
+</details>
+`;

package/src/default-providers/OpenAI/completer.ts

@@ -2,7 +2,6 @@ import {
   CompletionHandler,
   IInlineCompletionContext
 } from '@jupyterlab/completer';
-import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatOpenAI } from '@langchain/openai';
 
@@ -14,10 +13,6 @@ export class OpenAICompleter implements IBaseCompleter {
     this._completer = new ChatOpenAI({ ...options.settings });
   }
 
-  get completer(): BaseChatModel {
-    return this._completer;
-  }
-
   /**
    * Getter and setter for the initial prompt.
    */

package/src/default-providers/WebLLM/completer.ts

@@ -0,0 +1,162 @@
+import {
+  CompletionHandler,
+  IInlineCompletionContext
+} from '@jupyterlab/completer';
+import { HumanMessage, SystemMessage } from '@langchain/core/messages';
+import { ChatWebLLM } from '@langchain/community/chat_models/webllm';
+
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
+
+/**
+ * Regular expression to match the '```' string at the start of a string.
+ * So the completions returned by the LLM can still be kept after removing the code block formatting.
+ *
+ * For example, if the response contains the following content after typing `import pandas`:
+ *
+ * ```python
+ * as pd
+ * ```
+ *
+ * The formatting string after removing the code block delimiters will be:
+ *
+ * as pd
+ */
+const CODE_BLOCK_START_REGEX = /^```(?:[a-zA-Z]+)?\n?/;
+
+/**
+ * Regular expression to match the '```' string at the end of a string.
+ */
+const CODE_BLOCK_END_REGEX = /```$/;
+
+export class WebLLMCompleter implements IBaseCompleter {
+  constructor(options: BaseCompleter.IOptions) {
+    const model = options.settings.model as string;
+    // provide model separately since ChatWebLLM expects it
+    this._completer = new ChatWebLLM({
+      ...options.settings,
+      model
+    });
+
+    // Initialize the model and track its status
+    this._isInitialized = false;
+    this._isInitializing = false;
+    this._initError = null;
+    void this._initializeModel();
+  }
+
+  /**
+   * Initialize the WebLLM model
+   */
+  private async _initializeModel(): Promise<void> {
+    if (this._isInitialized || this._isInitializing) {
+      return;
+    }
+
+    this._isInitializing = true;
+    try {
+      await this._completer.initialize((progress: any) => {
+        console.log('WebLLM initialization progress:', progress);
+      });
+      this._isInitialized = true;
+      this._isInitializing = false;
+      console.log('WebLLM model successfully initialized');
+    } catch (error) {
+      this._initError =
+        error instanceof Error ? error : new Error(String(error));
+      this._isInitializing = false;
+      console.error('Failed to initialize WebLLM model:', error);
+    }
+  }
+
+  /**
+   * Getter and setter for the initial prompt.
+   */
+  get prompt(): string {
+    return this._prompt;
+  }
+  set prompt(value: string) {
+    this._prompt = value;
+  }
+
+  get provider(): ChatWebLLM {
+    return this._completer;
+  }
+
+  async fetch(
+    request: CompletionHandler.IRequest,
+    context: IInlineCompletionContext
+  ) {
+    // Abort any pending request
+    if (this._abortController) {
+      this._abortController.abort();
+    }
+
+    // Create a new abort controller for this request
+    this._abortController = new AbortController();
+    const signal = this._abortController.signal;
+
+    if (!this._isInitialized) {
+      if (this._initError) {
+        console.error('WebLLM model failed to initialize:', this._initError);
+        return { items: [] };
+      }
+
+      if (!this._isInitializing) {
+        // Try to initialize again if it's not currently initializing
+        await this._initializeModel();
+      } else {
+        console.log(
+          'WebLLM model is still initializing, please try again later'
+        );
+        return { items: [] };
+      }
+
+      // Return empty if still not initialized
+      if (!this._isInitialized) {
+        return { items: [] };
+      }
+    }
+
+    const { text, offset: cursorOffset } = request;
+    const prompt = text.slice(0, cursorOffset);
+    const trimmedPrompt = prompt.trim();
+
+    const messages = [
+      new SystemMessage(this._prompt),
+      new HumanMessage(trimmedPrompt)
+    ];
+
+    try {
+      console.log('Trigger invoke');
+      const response = await this._completer.invoke(messages, { signal });
+      let content = response.content as string;
+      console.log('Response content:', content);
+
+      if (CODE_BLOCK_START_REGEX.test(content)) {
+        content = content
+          .replace(CODE_BLOCK_START_REGEX, '')
+          .replace(CODE_BLOCK_END_REGEX, '');
+      }
+
+      const items = [{ insertText: content }];
+      return {
+        items
+      };
+    } catch (error) {
+      if (error instanceof Error) {
+        console.error('Error fetching completion from WebLLM:', error.message);
+      } else {
+        console.error('Unknown error fetching completion from WebLLM:', error);
+      }
+      return { items: [] };
+    }
+  }
+
+  private _completer: ChatWebLLM;
+  private _prompt: string = COMPLETION_SYSTEM_PROMPT;
+  private _isInitialized: boolean = false;
+  private _isInitializing: boolean = false;
+  private _initError: Error | null = null;
+  private _abortController: AbortController | null = null;
+}

package/src/default-providers/WebLLM/instructions.ts

@@ -0,0 +1,33 @@
+export default `
+WebLLM enables running LLMs directly in your browser, making it possible to use AI features without sending data to external servers.
+
+<i class="fas fa-info-circle"></i> WebLLM runs models entirely in your browser, so initial model download may be large (100MB-2GB depending on the model).
+
+<i class="fas fa-exclamation-triangle"></i> <strong>Requirements:</strong> WebLLM requires a browser with WebGPU support (Chrome 113+, Edge 113+, or Safari 17+). It will not work on older browsers or browsers without WebGPU enabled.
+
+1. Enter a model in the JupyterLab settings under the **Ai providers** section. Select the \`WebLLM\` provider and type the model you want to use.
+2. When you first use WebLLM, your browser will download the model. A progress notification will appear:
+3. Once loaded, use the chat
+4. Example of available models:
+  - Llama-3.2-1B-Instruct-q4f32_1-MLC
+  - Mistral-7B-Instruct-v0.3-q4f32_1-MLC
+  - Qwen3-0.6B-q4f32_1-MLC
+5. See the full list of models: https://github.com/mlc-ai/web-llm/blob/632d34725629b480b5b2772379ef5c150b1286f0/src/config.ts#L303-L309
+
+<i class="fas fa-exclamation-triangle"></i> Model performance depends on your device's hardware capabilities. More powerful devices will run models faster. Some larger models may not work well on devices with limited GPU memory or may experience slow response times.
+`;
+
+/**
+ * Check if the browser supports WebLLM.
+ */
+export async function compatibilityCheck(): Promise<string | null> {
+  // Check if the browser supports the ChromeAI model
+  if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
+    return 'Your browser does not support WebLLM, it does not support required WebGPU.';
+  }
+  if ((await navigator.gpu.requestAdapter()) === null) {
+    return 'You may need to enable WebGPU, `await navigator.gpu.requestAdapter()` is null.';
+  }
+  // If the model is available, return null to indicate compatibility
+  return null;
+}