frontend/llm/custom: finish custom icon implementation

Author: haraldschilly

src/packages/frontend/components/language-model-icon.tsx

@@ -1,20 +1,20 @@
-import { CSS } from "@cocalc/frontend/app-framework";
+import { CSS, useTypedRedux } from "@cocalc/frontend/app-framework";
 import {
   LanguageModel,
-  isCustomOpenAI,
+  fromCustomOpenAIModel,
+  fromOllamaModel,
   isGoogleModel,
   isLanguageModel,
-  isOllamaLLM,
   model2vendor,
 } from "@cocalc/util/db-schema/llm-utils";
 import { unreachable } from "@cocalc/util/misc";
 import AIAvatar from "./ai-avatar";
+import AnthropicAvatar from "./anthropic-avatar";
 import GoogleGeminiLogo from "./google-gemini-avatar";
 import GooglePalmLogo from "./google-palm-avatar";
 import MistralAvatar from "./mistral-avatar";
 import OllamaAvatar from "./ollama-avatar";
 import OpenAIAvatar from "./openai-avatar";
-import AnthropicAvatar from "./anthropic-avatar";
 
 export function LanguageModelVendorAvatar(
   props: Readonly<{
@@ -25,6 +25,9 @@ export function LanguageModelVendorAvatar(
 ) {
   const { model, size = 20 } = props;
 
+  const ollama = useTypedRedux("customize", "ollama");
+  const custom_openai = useTypedRedux("customize", "custom_openai");
+
   const style: CSS = {
     marginRight: "5px",
     ...props.style,
@@ -38,13 +41,35 @@ export function LanguageModelVendorAvatar(
     return fallback();
   }
 
+  function renderImgIcon(icon: string) {
+    return (
+      <img
+        width={size}
+        height={size}
+        src={icon}
+        style={{ display: "inline-block", ...style }}
+      />
+    );
+  }
+
   if (isLanguageModel(model)) {
     const vendorName = model2vendor(model).name;
     switch (vendorName) {
       case "openai":
-      case "custom_openai":
         return <OpenAIAvatar size={size} style={style} />;
 
+      case "custom_openai": {
+        const icon = custom_openai?.getIn([
+          fromCustomOpenAIModel(model),
+          "icon",
+        ]);
+        if (typeof icon === "string") {
+          return renderImgIcon(icon);
+        } else {
+          return <OpenAIAvatar size={size} style={style} />;
+        }
+      }
+
       case "google": {
         if (model === "chat-bison-001") {
           // Palm2, no longer supported, just for backwards compatibility
@@ -59,8 +84,14 @@ export function LanguageModelVendorAvatar(
       case "mistralai":
         return <MistralAvatar size={size} style={style} />;
 
-      case "ollama":
-        return <OllamaAvatar size={size} style={style} />;
+      case "ollama": {
+        const icon = ollama?.getIn([fromOllamaModel(model), "icon"]);
+        if (typeof icon === "string") {
+          return renderImgIcon(icon);
+        } else {
+          return <OllamaAvatar size={size} style={style} />;
+        }
+      }
 
       case "anthropic":
         return <AnthropicAvatar size={size} style={style} />;
@@ -71,13 +102,5 @@ export function LanguageModelVendorAvatar(
     }
   }
 
-  if (isOllamaLLM(model)) {
-    return <OllamaAvatar size={size} style={style} />;
-  }
-
-  if (isCustomOpenAI(model)) {
-    return <OpenAIAvatar size={size} style={style} />;
-  }
-
   return fallback();
 }

src/packages/frontend/editors/markdown-input/mentionable-users.tsx

@@ -13,7 +13,6 @@ import { redux, useMemo, useTypedRedux } from "@cocalc/frontend/app-framework";
 import AnthropicAvatar from "@cocalc/frontend/components/anthropic-avatar";
 import GoogleGeminiLogo from "@cocalc/frontend/components/google-gemini-avatar";
 import MistralAvatar from "@cocalc/frontend/components/mistral-avatar";
-import OllamaAvatar from "@cocalc/frontend/components/ollama-avatar";
 import OpenAIAvatar from "@cocalc/frontend/components/openai-avatar";
 import { LLMModelPrice } from "@cocalc/frontend/frame-editors/llm/llm-selector";
 import { useProjectContext } from "@cocalc/frontend/project/context";
@@ -37,6 +36,7 @@ import {
 } from "@cocalc/util/db-schema/llm-utils";
 import { cmp, timestamp_cmp, trunc_middle } from "@cocalc/util/misc";
 import { CustomLLMPublic } from "@cocalc/util/types/llm";
+import { LanguageModelVendorAvatar } from "../../components/language-model-icon";
 import { Item as CompleteItem } from "./complete";
 
 // we make the show_llm_main_menu field required, to avoid forgetting to set it ;-)
@@ -259,8 +259,8 @@ function mentionableUsers({
           value,
           label: (
             <span>
-              <OllamaAvatar size={size} /> {conf.display}{" "}
-              <LLMModelPrice model={m} floatRight />
+              <LanguageModelVendorAvatar model={value} size={size} />{" "}
+              {conf.display} <LLMModelPrice model={m} floatRight />
             </span>
           ),
           search: search_term,
@@ -283,8 +283,8 @@ function mentionableUsers({
           value,
           label: (
             <span>
-              <OpenAIAvatar size={size} /> {conf.display}{" "}
-              <LLMModelPrice model={m} floatRight />
+              <LanguageModelVendorAvatar model={value} size={size} />{" "}
+              {conf.display} <LLMModelPrice model={m} floatRight />
             </span>
           ),
           search: search_term,

src/packages/frontend/frame-editors/llm/components.tsx

@@ -6,11 +6,10 @@ export function getCustomLLMGroup() {
   const site_name = customize.get("site_name");
   const organization_name = customize.get("organization_name") ?? "";
   return {
-    title: `These language models on ${site_name} are managed by ${organization_name}`,
+    title: `Managed by ${organization_name || site_name}`,
     label: (
       <>
-        <Text strong>{site_name} language models</Text> – managed by{" "}
-        {organization_name}
+        <Text strong>{site_name} language models</Text>
       </>
     ),
   };

src/packages/frontend/frame-editors/llm/llm-selector.tsx

@@ -109,7 +109,15 @@ export default function LLMSelector({
 
     if (service === "custom") {
       const { title, label } = getCustomLLMGroup();
-      ret.push({ label, title, options });
+      ret.push({
+        label: (
+          <>
+            {label} – {title}
+          </>
+        ),
+        title: "These language models are configured by the administrators.",
+        options,
+      });
     } else {
       const { name, desc, short } = LLM_PROVIDER[service];
       const label = (

src/packages/util/db-schema/llm-utils.ts

@@ -1,9 +1,9 @@
 // this contains bits and pieces from the wrongly named openai.ts file
 
+import { isEmpty } from "lodash";
 import LRU from "lru-cache";
 
 import { unreachable } from "@cocalc/util/misc";
-import { isEmpty } from "lodash";
 
 // "Client LLMs" are defined in the user's account settings
 // They directly query an external LLM service.

src/packages/util/db-schema/site-settings-extras.ts

@@ -140,7 +140,7 @@ function custom_llm_valid(value: string): boolean {
 // Ollama and Custom OpenAI have the same schema
 function custom_llm_display(value: string): string {
   const structure =
-    "Must be {[key : string] : {model: string, baseUrl: string, cocalc?: {display?: string, desc?: string, ...}, ...}";
+    "Must be {[key : string] : {model: string, baseUrl: string, cocalc?: {display?: string, desc?: string, icon?: string, ...}, ...}";
   if (isEmpty(value)) {
     return `Empty. ${structure}`;
   }
@@ -312,7 +312,7 @@ export const EXTRAS: SettingsExtras = {
   },
   ollama_configuration: {
     name: "Ollama Configuration",
-    desc: 'Configure Ollama endpoints. e.g. Ollama has "gemma" installed and is available at localhost:11434: `{"gemma" : {"baseUrl": "http://localhost:11434/" , cocalc: {display: "Gemma", desc: "Google\'s Gemma Model"}}`',
+    desc: 'Configure Ollama endpoints. e.g. Ollama has "gemma" installed and is available at localhost:11434: `{"gemma" : {"baseUrl": "http://localhost:11434/" , cocalc: {display: "Gemma", desc: "Google\'s Gemma Model", icon: "https://.../...png"}}`',
     default: "{}",
     multiline: 5,
     show: ollama_enabled,
@@ -324,7 +324,7 @@ export const EXTRAS: SettingsExtras = {
   // This is very similar to the ollama config, but there are small differences in the details.
   custom_openai_configuration: {
     name: "Custom OpenAI Endpoints",
-    desc: 'Configure OpenAI endpoints, queried via [@langchain/openai (Node.js)](https://js.langchain.com/v0.1/docs/integrations/llms/openai/). e.g. `{"myllm" : {"baseUrl": "http://1.2.3.4:5678/" , apiKey: "key...", cocalc: {display: "My LLM", desc: "My custom LLM"}}, "gpt-4o-high": {baseUrl: "https://api.openai.com/v1", temperature: 2, "openAIApiKey": "sk-...", "model": "gpt-4o", cocalc: {display: "High GPT-4 Omni", desc: "GPT 4 Omni High Temp"}}}`',
+    desc: 'Configure OpenAI endpoints, queried via [@langchain/openai (Node.js)](https://js.langchain.com/v0.1/docs/integrations/llms/openai/). e.g. `{"myllm" : {"baseUrl": "http://1.2.3.4:5678/" , apiKey: "key...", cocalc: {display: "My LLM", desc: "My custom LLM", icon: "https://.../...png"}}, "gpt-4o-high": {baseUrl: "https://api.openai.com/v1", temperature: 1.5, "openAIApiKey": "sk-...", "model": "gpt-4o", cocalc: {display: "High GPT-4 Omni", desc: "GPT 4 Omni High Temp"}}}`',
     default: "{}",
     multiline: 5,
     show: custom_openai_enabled,