feat: Jan Hub Revamp (#4491)

* feat: model hub revamp UI

* chore: model description - consistent markdown css

* chore: add model versions dropdown

* chore: integrate APIs - model sources

* chore: update model display name

* chore: lint fix

* chore: page transition animation

* feat: model search dropdown - deeplink

* chore: bump cortex version

* chore: add remote model sources

* chore: model download state

* chore: fix model metadata label

* chore: polish model detail page markdown

* test: fix test cases

* chore: initialize default Hub model sources

* chore: fix model stats

* chore: clean up click outside and inside hooks

* feat: change hub banner

* chore: lint fix

* chore: fix css long model id

core/src/browser/extensions/model.ts

@@ -1,10 +1,13 @@
 import { BaseExtension, ExtensionTypeEnum } from '../extension'
-import { Model, ModelInterface, OptionType } from '../../types'
+import { Model, ModelInterface, ModelSource, OptionType } from '../../types'
 
 /**
  * Model extension for managing models.
  */
-export abstract class ModelExtension extends BaseExtension implements ModelInterface {
+export abstract class ModelExtension
+  extends BaseExtension
+  implements ModelInterface
+{
   /**
    * Model extension type.
    */
@@ -25,4 +28,16 @@ export abstract class ModelExtension extends BaseExtension implements ModelInter
   abstract updateModel(modelInfo: Partial<Model>): Promise<Model>
   abstract deleteModel(model: string): Promise<void>
   abstract isModelLoaded(model: string): Promise<boolean>
+  /**
+   * Get model sources
+   */
+  abstract getSources(): Promise<ModelSource[]>
+  /**
+   * Add a model source
+   */
+  abstract addSource(source: string): Promise<void>
+  /**
+   * Delete a model source
+   */
+  abstract deleteSource(source: string): Promise<void>
 }

core/src/types/model/index.ts

@@ -2,3 +2,4 @@ export * from './modelEntity'
 export * from './modelInterface'
 export * from './modelEvent'
 export * from './modelImport'
+export * from './modelSource'

core/src/types/model/modelInterface.ts

@@ -1,5 +1,6 @@
 import { Model } from './modelEntity'
 import { OptionType } from './modelImport'
+import { ModelSource } from './modelSource'
 
 /**
  * Model extension for managing models.
@@ -50,4 +51,17 @@ export interface ModelInterface {
     name?: string,
     optionType?: OptionType
   ): Promise<void>
+
+  /**
+   * Get model sources
+   */
+  getSources(): Promise<ModelSource[]>
+  /**
+   * Add a model source
+   */
+  addSource(source: string): Promise<void>
+  /**
+   * Delete a model source
+   */
+  deleteSource(source: string): Promise<void>
 }

core/src/types/model/modelSource.ts

@@ -0,0 +1,67 @@
+/**
+ * GGUF Metadata of the model source
+ */
+export interface GGUF {
+  architecture: string
+  bos_token: string
+  chat_template: string
+  context_length: number
+  eos_token: string
+  total: number
+}
+
+/**
+ * Card Metadata of the model source
+ */
+export interface CardData {
+  license: string
+  pipeline_tag: string
+}
+
+/**
+ * Model Metadata of the model source
+ */
+export interface Metadata {
+  author: string
+  cardData: CardData
+  createdAt: string
+  description: string
+  disabled: boolean
+  downloads: number
+  gated: boolean
+  gguf: GGUF
+  id: string
+  inference: string
+  lastModified: string
+  likes: number
+  modelId: string
+  pipeline_tag: string
+  private: boolean
+  sha: string
+  siblings: Array<{
+    rfilename: string
+    size: number
+  }>
+  spaces: string[]
+  tags: string[]
+  usedStorage: number
+  apiKey?: string
+}
+
+/**
+ * Model source sibling information
+ */
+export interface ModelSibling {
+  id: string
+  size: number
+}
+
+/**
+ * Model source object
+ */
+export interface ModelSource {
+  id: string
+  metadata: Metadata
+  models: ModelSibling[]
+  type?: string
+}

electron/tests/e2e/hub.e2e.spec.ts

@@ -17,7 +17,7 @@ test('explores hub', async ({ hubPage }) => {
   await hubPage.navigateByMenu()
   await hubPage.verifyContainerVisible()
   await hubPage.scrollToBottom()
-  const useModelBtn = page.getByTestId(/^use-model-btn-.*/).first()
+  const useModelBtn = page.getByTestId(/^setup-btn/).first()
 
   await expect(useModelBtn).toBeVisible({
     timeout: TIMEOUT,

electron/tests/e2e/thread.e2e.spec.ts

@@ -1,33 +1,18 @@
 import { expect } from '@playwright/test'
 import { page, test, TIMEOUT } from '../config/fixtures'
 
-test('Select GPT model from Hub and Chat with Invalid API Key', async ({
-  hubPage,
-}) => {
-  await hubPage.navigateByMenu()
-  await hubPage.verifyContainerVisible()
-
-  // Select the first GPT model
-  await page
-    .locator('[data-testid^="use-model-btn"][data-testid*="gpt"]')
-    .first()
-    .click()
-
-  await page.getByTestId('txt-input-chat').fill('dummy value')
-
+test('show onboarding screen without any threads created or models downloaded', async () => {
+  await page.getByTestId('Thread').first().click({
+    timeout: TIMEOUT,
+  })
   const denyButton = page.locator('[data-testid="btn-deny-product-analytics"]')
 
   if ((await denyButton.count()) > 0) {
     await denyButton.click({ force: true })
-  } else {
-    await page.getByTestId('btn-send-chat').click({ force: true })
   }
 
-  await page.waitForFunction(
-    () => {
-      const loaders = document.querySelectorAll('[data-testid$="loader"]')
-      return !loaders.length
-    },
-    { timeout: TIMEOUT }
-  )
+  const onboardScreen = page.getByTestId('onboard-screen')
+  await expect(onboardScreen).toBeVisible({
+    timeout: TIMEOUT,
+  })
 })

extensions/inference-cortex-extension/bin/version.txt

@@ -1 +1 @@
-1.0.9-rc4
+1.0.9-rc5