Model download page (#44)

* Downloaded models page start

* Queries and mutations

* Model download mutations and queries

* Model providers page improvements

* Seconds to milliseconds

* Model name parameter changed

* Model name changes

* Changes modelname

* Model download page improvements

* Sizes changed

* changes method and api names

* adds status to model provider info query

* Typo downaloded fixed

* Changed select option bar

* Spinner, refetch added

* Invalid date fix

* Icons for downaloded models added

* Console error fix

* Green color when the models are downloaded

* Align icons and disable add when duplicate is added

* Added green color to the downloaded models as part of the kern dropdown component

* Comments from PR

* Delete model modal and moved the right page to pages

* Parce date and combine requests added

* Optimized code

* applies api changes in the gateway, global notifications

* Added button disabled for OS version

* Aligned icons

* Separator for models, and types with icon instead of column

* Added info on hover

* Adds config manager error on request before init

* PR comments

* Update config check

* Align elements on project settings

* Global changes for the modal center alignment

Co-authored-by: felix0496 <felix.kirsch@kern.ai>
Co-authored-by: JWittmeyer <jens.wittmeyer@onetask.ai>

Author: 3 people

src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import { ProjectNewComponent } from './projects/components/project-new/project-n
 import { ProjectAddComponent } from './projects/components/project-add/project-add.component';
 import { RecordIDEComponent } from './record-ide/components/record-ide.component';
 import { ConfigComponent } from './config/components/config.component';
+import { ModelDownloadComponent } from './model-download/pages/model-download/model-download.component';
 
 const routes: Routes = [
   {
@@ -27,6 +28,7 @@ const routes: Routes = [
   { path: 'notification-center', component: NotificationCenterComponent, data: { name: 'NotificationCenterComponent' } },
   { path: 'projects/new', component: ProjectNewComponent, data: { name: 'ProjectNewComponent' } },
   { path: 'config', component: ConfigComponent, data: { name: 'ConfigComponent' } },
+  
   {
     path: 'projects/:projectId',
     component: ProjectComponent,
@@ -54,6 +56,7 @@ const routes: Routes = [
         path: 'knowledge-base/:knowledgeBaseId',
         component: KnowledgeBaseDetailsComponent, data: { name: 'KnowledgeBaseDetailsComponent' }
       },
+      { path: 'model-download', component: ModelDownloadComponent, data: { name: 'ModelDownloadComponent' } },
       { path: '**', component: ProjectOverviewComponent, data: { name: 'ProjectOverviewComponent' } },
       //TODO: redirecting to projects overview page and errors
     ],

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { ConfigModule } from './config/config.module'
 import { IntercomModule } from 'ng-intercom';
 import { NotificationCenterModule } from './notification-center/notification-center.module';
 import { RecordIDEModule } from './record-ide/record-ide.module';
+import { ModelDownloadModule } from './model-download/model-download.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -40,6 +41,7 @@ import { RecordIDEModule } from './record-ide/record-ide.module';
     ZeroShotModule,
     LabelingModule,
     RecordIDEModule,
+    ModelDownloadModule,
     NotificationCenterModule,
     MonacoEditorModule.forRoot(),
     KnowledgeBasesModule,

src/app/base/components/dropdown/dropdown-helper.ts

@@ -23,6 +23,7 @@ import { FormArray } from "@angular/forms";
  * @textHoverColor {string, optional} - text color on hover for the dropdown options
  * @textSize {string, optional} - text size for the dropdown options
  * @isButtonSampleProjects {boolean, optional} - checks if the button is the specific one for sample project
+ * @isModelDownloaded {boolean[], optional} - checks if the model is downloaded and if so the color of the text is green
  */
 export type DropdownOptions = {
     optionArray: string[] | FormArray[] | any[];
@@ -46,5 +47,6 @@ export type DropdownOptions = {
     textHoverColor?: string;
     textSize?: string;
     isButtonSampleProjects?: boolean;
+    isModelDownloaded: boolean[];
 };
 

src/app/base/components/dropdown/dropdown.component.html

@@ -37,7 +37,7 @@
         role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
         <div class="py-1 cursor-pointer" role="none">
             <div *ngFor="let caption of dropdownOptionCaptions;let i = index" (click)="performActionOnOption($event,i)"
-                [ngClass]="[dropdownOptions.textSize,dropdownOptions.textColor,dropdownOptions.optionDescriptions ? '' : 'flex' ,dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed':'',!dropdownOptions.hasCheckboxes ? dropdownOptions.hoverColor + ' ' +dropdownOptions.textHoverColor:'']"
+                [ngClass]="[dropdownOptions.textSize,dropdownOptions.textColor,dropdownOptions.optionDescriptions ? '' : 'flex' ,dropdownOptions.isOptionDisabled?.length && dropdownOptions.isOptionDisabled[i]?'opacity-50 cursor-not-allowed':'',!dropdownOptions.hasCheckboxes ? dropdownOptions.hoverColor + ' ' +dropdownOptions.textHoverColor:'', dropdownOptions.isModelDownloaded?.length && dropdownOptions.isModelDownloaded[i] ? 'text-green-700 hover:text-lime-300': '']"
                 [ngStyle]="{'border-bottom': dropdownOptions.isButtonSampleProjects && i%2 == 0 && i!=dropdownOptionCaptions.length-1 ? '1px dashed #e2e8f0' : (dropdownOptions.isButtonSampleProjects && i%2 != 0 && i!=dropdownOptionCaptions.length-1 ? '1px solid #e2e8f0' : null) }"
                 class="block px-2 py-1.5 flex-row flex-nowrap items-center gap-x-2 w-max min-w-full"
                 role="menuitem" tabindex="-1" id="menu-item-0">

src/app/base/components/dropdown/dropdown.component.ts

@@ -79,6 +79,7 @@ export class DropdownComponent implements OnChanges {
     if (this.dropdownOptions.optionDescriptions && this.dropdownOptions.optionArray.length != this.dropdownOptions.optionDescriptions.length) this.hasInputErrors = "array options != optionDescriptions length\n";
     if (this.dropdownOptions.optionIcons && this.dropdownOptions.optionIcons.length != this.dropdownOptions.optionIcons.length) this.hasInputErrors = "array options != optionIcons length\n";
     if (!this.dropdownOptions.buttonVersion) this.dropdownOptions.buttonVersion = "default";
+    if (this.dropdownOptions.isModelDownloaded && this.dropdownOptions.isModelDownloaded.length != this.dropdownOptions.optionArray.length) this.hasInputErrors = "array options != isModelDownloaded length\n";
 
     this.buttonClassList = "";
     if (!this.dropdownOptions.buttonBgColor) this.dropdownOptions.buttonBgColor = "bg-white ";

src/app/base/services/base/apollo-checker.ts

@@ -29,8 +29,8 @@ export class ApolloChecker {
     }
 
     private static checkBlackWhiteList(type: string, queryText: string) {
-        if (!ConfigManager.getIsDemo()) return;
-        if (ConfigManager.getIsAdmin()) return;
+        if (!ConfigManager.getIsDemo(true)) return;
+        if (ConfigManager.getIsAdmin(true)) return;
         if (!queryText) throw new Error("Can't find query text");
         if (!ConfigManager.checkBlackWhiteList(type, queryText)) throw new DemoError(type, queryText);
     }

src/app/base/services/config-service.ts

@@ -68,7 +68,8 @@ export class ConfigManager {
         return ConfigManager.config[key][subkey]
     }
 
-    public static getIsManaged(): boolean {
+    public static getIsManaged(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isManaged;
     }
 
@@ -86,14 +87,16 @@ export class ConfigManager {
     public static setIsAdmin(value: boolean) {
         ConfigManager.isAdmin = value;
     }
-    public static getIsAdmin() {
+    public static getIsAdmin(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isAdmin;
     }
 
     public static setIsDemo(value: boolean) {
         ConfigManager.isDemo = value;
     }
-    public static getIsDemo() {
+    public static getIsDemo(ignoreCheck: boolean = false): boolean {
+        if (!ignoreCheck && !ConfigManager.isInit()) console.log("ConfigManager not initialized");
         return ConfigManager.isDemo;
     }
 

src/app/base/services/weak-source/weak-source-apollo.service.ts

@@ -428,4 +428,40 @@ export class WeakSourceApolloService {
     });
   }
 
+  getModelProviderInfo() {
+    const query = this.apollo
+      .watchQuery({
+        query: queries.GET_MODEL_PROVIDER_INFO,
+        fetchPolicy: 'network-only', // Used for first execution
+        nextFetchPolicy: 'cache-first', // Used for subsequent executions (refetch query updates the cache != triggers the function)
+      });
+    const vc = query.valueChanges.pipe(
+      map((result) => result['data']['modelProviderInfo'])
+    );
+    return [query, vc]
+  }
+
+  downloadModel(name: string) {
+    return this.apollo.mutate({
+      mutation: mutations.MODEL_PROVIDER_DOWNLOAD_MODEL,
+      variables: {
+        modelName: name
+      }
+    });
+  }
+
+  deleteModel(name: string) {
+    return this.apollo.mutate({
+      mutation: mutations.MODEL_PROVIDER_DELETE_MODEL,
+      variables: {
+        modelName: name
+      },
+      refetchQueries: [
+        {
+          query: queries.GET_MODEL_PROVIDER_INFO
+        },
+      ],
+    });
+  }
+
 }

src/app/base/services/weak-source/weak-source-mutations.ts

@@ -98,5 +98,21 @@ export const mutations = {
     }
   }
   
-  `
+  `,
+
+  MODEL_PROVIDER_DELETE_MODEL: gql`
+    mutation($modelName: String!) {
+      modelProviderDeleteModel(modelName: $modelName) {
+        ok
+      }
+    }
+`,
+
+  MODEL_PROVIDER_DOWNLOAD_MODEL: gql`
+  mutation($modelName: String!) {
+    modelProviderDownloadModel(modelName: $modelName) {
+      ok
+    }
+}
+`,
 };

src/app/base/services/weak-source/weak-source-queries.ts

@@ -98,4 +98,17 @@ export const queries = {
   }
   `,
 
+  GET_MODEL_PROVIDER_INFO: gql`
+  query{
+    modelProviderInfo {
+      name
+      revision
+      link
+      date
+      size
+      status
+      zeroShotPipeline
+    }
+  }
+  `,
 };