feat: allow users to add remote models

core/src/browser/extensions/enginesManagement.ts

@@ -5,6 +5,7 @@
   EngineReleased,
   EngineConfig,
   DefaultEngineVariant,
+  Model,
 } from '../../types'
 import { BaseExtension, ExtensionTypeEnum } from '../extension'
 
@@ -15,7 +16,7 @@
  */
 export abstract class EngineManagementExtension extends BaseExtension {
   type(): ExtensionTypeEnum | undefined {
     return ExtensionTypeEnum.Engine
   }
 
   /**
@@ -103,6 +104,11 @@
     engineConfig?: EngineConfig
   ): Promise<{ messages: string }>
 
+  /**
+   * Add a new remote model for a specific engine
+   */
+  abstract addRemoteModel(model: Model): Promise<void>
+
   /**
    * @returns A Promise that resolves to an object of remote models list .
    */

core/src/types/model/modelEntity.ts

@@ -1,5 +1,3 @@
-import { FileMetadata } from '../file'
-
 /**
  * Represents the information about a model.
  * @stored
@@ -70,6 +68,11 @@ export type Model = {
    */
   id: string
 
+  /**
+   * The model identifier, modern version of id.
+   */
+  mode?: string
+
   /**
    * Human-readable name that is used for UI.
    */

web/hooks/useEngineManagement.ts

@@ -8,6 +8,8 @@
   EngineConfig,
   events,
   EngineEvent,
+  Model,
+  ModelEvent,
 } from '@janhq/core'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
@@ -30,10 +32,10 @@
   extension: EngineManagementExtension | null,
   method: (extension: EngineManagementExtension) => Promise<T>
 ): Promise<T> {
   if (!extension) {
     throw new Error('Extension not found')
   }
   return method(extension)
 }
 
 /**
@@ -54,7 +56,7 @@
     mutate,
   } = useSWR(
     extension ? 'engines' : null,
     () => fetchExtensionData(extension, (ext) => ext.getEngines()),
     {
       revalidateOnFocus: false,
       revalidateOnReconnect: true,
@@ -67,10 +69,10 @@
 /**
  * @returns A Promise that resolves to an object of remote models.
  */
 export function useGetRemoteModels(name: string) {
   const extension = useMemo(
     () =>
       extensionManager.get<EngineManagementExtension>(
         ExtensionTypeEnum.Engine
       ) ?? null,
     []
@@ -80,24 +82,24 @@
     data: remoteModels,
     error,
     mutate,
   } = useSWR(
     extension ? 'remoteModels' : null,
     () => fetchExtensionData(extension, (ext) => ext.getRemoteModels(name)),
     {
       revalidateOnFocus: false,
       revalidateOnReconnect: true,
     }
   )
 
   return { remoteModels, error, mutate }
 }
 
 /**
  * @param name - Inference engine name.
  * @returns A Promise that resolves to an array of installed engine.
  */
 export function useGetInstalledEngines(name: InferenceEngine) {
   const extension = useMemo(
     () =>
       extensionManager.get<EngineManagementExtension>(
         ExtensionTypeEnum.Engine
@@ -385,3 +387,31 @@
     throw error
   }
 }
+
+/**
+ * Add a new remote engine model
+ * @param name
+ * @param engine
+ * @returns
+ */
+export const addRemoteEngineModel = async (name: string, engine: string) => {
+  const extension = getExtension()
+
+  if (!extension) {
+    throw new Error('Extension is not available')
+  }
+
+  try {
+    // Call the extension's method
+    const response = await extension.addRemoteModel({
+      id: name,
+      model: name,
+      engine: engine as InferenceEngine,
+    } as unknown as Model)
+    events.emit(ModelEvent.OnModelsUpdate, { fetch: true })
+    return response
+  } catch (error) {
+    console.error('Failed to install engine variant:', error)
+    throw error
+  }
+}

web/screens/Settings/Engines/ModalAddModel.tsx

@@ -0,0 +1,155 @@
+import { memo, ReactNode, useState } from 'react'
+
+import { useForm } from 'react-hook-form'
+
+import Image from 'next/image'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+
+import { InferenceEngine, Model } from '@janhq/core'
+
+import { Button, Input, Modal } from '@janhq/joi'
+import { useAtomValue } from 'jotai'
+import { PlusIcon } from 'lucide-react'
+
+import { z } from 'zod'
+
+import {
+  addRemoteEngineModel,
+  useGetEngines,
+  useGetRemoteModels,
+} from '@/hooks/useEngineManagement'
+
+import { getLogoEngine, getTitleByEngine } from '@/utils/modelEngine'
+
+import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+
+const modelSchema = z.object({
+  modelName: z.string().min(1, 'Model name is required'),
+})
+
+const ModelAddModel = ({ engine }: { engine: string }) => {
+  const [open, setOpen] = useState(false)
+  const { mutate: mutateListEngines } = useGetRemoteModels(engine)
+  const { engines } = useGetEngines()
+  const models = useAtomValue(downloadedModelsAtom)
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setError,
+  } = useForm({
+    resolver: zodResolver(modelSchema),
+    defaultValues: {
+      modelName: '',
+    },
+  })
+
+  const onSubmit = async (data: z.infer<typeof modelSchema>) => {
+    if (models.some((e: Model) => e.id === data.modelName)) {
+      setError('modelName', {
+        type: 'manual',
+        message: 'Model already exists',
+      })
+      return
+    }
+    await addRemoteEngineModel(data.modelName, engine)
+    mutateListEngines()
+
+    setOpen(false)
+  }
+
+  // Helper to render labels with asterisks for required fields
+  const renderLabel = (
+    prefix: ReactNode,
+    label: string,
+    isRequired: boolean,
+    desc?: string
+  ) => (
+    <>
+      <span className="flex flex-row items-center gap-1">
+        {prefix}
+        {label}
+      </span>
+      <p className="mt-1 font-normal text-[hsla(var(--text-secondary))]">
+        {desc}
+        {isRequired && <span className="text-red-500">*</span>}
+      </p>
+    </>
+  )
+
+  return (
+    <Modal
+      title={
+        <div>
+          <p>Add Model</p>
+        </div>
+      }
+      fullPage
+      open={open}
+      onOpenChange={() => setOpen(!open)}
+      trigger={
+        <Button>
+          <PlusIcon className="mr-2" size={14} />
+          Add Model
+        </Button>
+      }
+      className="w-[500px]"
+      content={
+        <div>
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-2">
+              <label htmlFor="modelName" className="font-semibold">
+                {renderLabel(
+                  getLogoEngine(engine as InferenceEngine) ? (
+                    <Image
+                      src={getLogoEngine(engine as InferenceEngine) ?? ''}
+                      width={40}
+                      height={40}
+                      alt="Engine logo"
+                      className="h-5 w-5 flex-shrink-0"
+                    />
+                  ) : (
+                    <></>
+                  ),
+                  getTitleByEngine(engine as InferenceEngine) ?? engine,
+                  false,
+                  'Model ID'
+                )}
+              </label>
+              <Input placeholder="Enter model ID" {...register('modelName')} />
+              {errors.modelName && (
+                <p className="text-sm text-red-500">
+                  {errors.modelName.message}
+                </p>
+              )}
+              <div className="pt-4">
+                <a
+                  target="_blank"
+                  href={engines?.[engine as InferenceEngine]?.[0]?.url}
+                  className="text-[hsla(var(--app-link))]"
+                >
+                  See model list from{' '}
+                  {getTitleByEngine(engine as InferenceEngine)}
+                </a>
+              </div>
+            </div>
+
+            <div className="mt-8 flex justify-end gap-x-2">
+              <Button
+                theme="ghost"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit">Add</Button>
+            </div>
+          </form>
+        </div>
+      }
+    />
+  )
+}
+
+export default memo(ModelAddModel)

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -27,6 +27,8 @@ import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
 
 import { getTitleByEngine } from '@/utils/modelEngine'
 
+import ModalAddModel from './ModalAddModel'
+
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
 const RemoteEngineSettings = ({
@@ -194,10 +196,11 @@ const RemoteEngineSettings = ({
         <div className="mb-3 mt-4 pb-4">
           <div className="flex w-full flex-col items-start justify-between sm:flex-row">
             <div className="w-full flex-shrink-0 ">
-              <div className="flex items-center justify-between gap-x-2">
+              <div className="mb-4 flex items-center justify-between gap-x-2">
                 <div>
                   <h6 className="mb-2 line-clamp-1 font-semibold">Model</h6>
                 </div>
+                <ModalAddModel engine={name} />
               </div>
 
               <div>