Update to use new vertex api

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+      "@tailwindcss/postcss": {}
+    }
+}

package.json

@@ -10,38 +10,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "^18.1.4",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^18.1.0",
-    "@angular/material": "^18.1.4",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@google/generative-ai": "^0.19.0",
-    "firebase": "^10.13.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "uuid": "^10.0.0",
-    "zone.js": "~0.14.3"
+    "@angular/animations": "^19.2.8",
+    "@angular/cdk": "^19.2.11",
+    "@angular/common": "^19.2.8",
+    "@angular/compiler": "^19.2.8",
+    "@angular/core": "^19.2.8",
+    "@angular/fire": "^19.1.0",
+    "@angular/forms": "^19.2.8",
+    "@angular/material": "^19.2.11",
+    "@angular/platform-browser": "^19.2.8",
+    "@angular/platform-browser-dynamic": "^19.2.8",
+    "@google/generative-ai": "^0.24.0",
+    "@tailwindcss/postcss": "^4.1.4",
+    "firebase": "^11.6.1",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "uuid": "^11.1.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.4",
-    "@angular/cli": "^18.1.4",
-    "@angular/compiler-cli": "^18.1.0",
-    "@types/jasmine": "~5.1.0",
+    "@angular-devkit/build-angular": "^19.2.9",
+    "@angular/cli": "^19.2.9",
+    "@angular/compiler-cli": "^19.2.8",
+    "@types/jasmine": "~5.1.7",
     "@types/uuid": "^10.0.0",
-    "autoprefixer": "^10.4.20",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
+    "autoprefixer": "^10.4.21",
+    "jasmine-core": "~5.6.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.9",
-    "typescript": "~5.5.2"
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.4",
+    "typescript": "~5.8.3"
   }
 }

src/app/app.component.ts

@@ -46,31 +46,30 @@ const HELP_ME_CLEAN = 'You are an organization expert transforming this place to
 const HELP_ME_PLAN = 'You are a travel expert planning a trip here for 5 people including one toddler and my mom who is turning 50.';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatSnackBarModule, // Do not remove: used by service.
-    MatButtonModule,
-    MatMenuModule,
-    MatChipsModule,
-    MatFormFieldModule,
-    MatSlideToggleModule,
-    MatProgressSpinnerModule,
-    MatIconModule,
-    MatInputModule,
-    MatNativeDateModule,
-    MatSelectModule,
-    MatCheckboxModule,
-    AsyncPipe,
-    TaskComponent,
-    CheckboximageComponent,
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-root',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatSnackBarModule, // Do not remove: used by service.
+        MatButtonModule,
+        MatMenuModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatSlideToggleModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatInputModule,
+        MatNativeDateModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        AsyncPipe,
+        TaskComponent,
+        CheckboximageComponent,
+    ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   readonly formControls = {

src/app/checkboximage.component.ts

@@ -10,12 +10,11 @@ import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  selector: 'app-checkboximage',
-  standalone: true,
-  imports: [MatCheckbox, MatIconModule, MatCardModule],
-  templateUrl: './checkboximage.component.html',
-  styleUrl: './checkboximage.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-checkboximage',
+    imports: [MatCheckbox, MatIconModule, MatCardModule],
+    templateUrl: './checkboximage.component.html',
+    styleUrl: './checkboximage.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CheckboximageComponent {
   checked = input(false);

src/app/roundbutton.component.ts

@@ -9,12 +9,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
-  selector: 'app-roundbutton',
-  standalone: true,
-  imports: [MatButtonModule, MatIconModule],
-  templateUrl: './roundbutton.component.html',
-  styleUrl: './roundbutton.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-roundbutton',
+    imports: [MatButtonModule, MatIconModule],
+    templateUrl: './roundbutton.component.html',
+    styleUrl: './roundbutton.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RoundbuttonComponent {
   checked = input(false);

src/app/services/task.service.ts

@@ -45,7 +45,7 @@ import { GoogleGenerativeAIFetchError } from '@google/generative-ai';
 import { v4 as uuidv4 } from 'uuid';
 import { GoogleGenerativeAI } from '@google/generative-ai';
 import { environment } from '../../environments/environments';
-import { getVertexAI, getGenerativeModel } from 'firebase/vertexai-preview';
+import { getVertexAI, getGenerativeModel } from 'firebase/vertexai';
 
 type Priority = 'none' | 'low' | 'medium' | 'high';
 
@@ -93,8 +93,7 @@ export class TaskService {
   // first call to GenerateContent(). You may see a PERMISSION_DENIED error before then.
   private prodModel = getGenerativeModel(this.vertexAI, MODEL_CONFIG);
 
-  private genAI = new GoogleGenerativeAI(environment.gemini_api_key);
-  private experimentModel = this.genAI.getGenerativeModel(MODEL_CONFIG);
+  private experimentModel = getGenerativeModel(this.vertexAI, MODEL_CONFIG);
 
   user$ = authState(this.auth);
   public tasksSubject = new Subject<Task[]>();

src/app/task.component.ts

@@ -21,23 +21,22 @@ import { RoundbuttonComponent } from './roundbutton.component';
 import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
-  selector: 'app-task',
-  standalone: true,
-  imports: [
-    MatCard,
-    MatCardHeader,
-    MatCardTitle,
-    MatCardContent,
-    MatCheckbox,
-    MatButtonToggleModule,
-    MatIconModule,
-    MatButtonModule,
-    RoundbuttonComponent,
-    MatDividerModule,
-  ],
-  templateUrl: './task.component.html',
-  styleUrl: './task.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-task',
+    imports: [
+        MatCard,
+        MatCardHeader,
+        MatCardTitle,
+        MatCardContent,
+        MatCheckbox,
+        MatButtonToggleModule,
+        MatIconModule,
+        MatButtonModule,
+        RoundbuttonComponent,
+        MatDividerModule,
+    ],
+    templateUrl: './task.component.html',
+    styleUrl: './task.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TaskComponent {
   task = input(undefined as TaskWithSubtasks | undefined);

src/styles.scss

@@ -51,9 +51,7 @@ $firebase-ai-angular-theme: mat.define-theme((
 // Comment out the line below if you want to use the deprecated `color` inputs.
 // @include mat.color-variants-backwards-compatibility($firebase-ai-angular-theme);
 /* You can add global styles to this file, and also import other style files */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html, body { height: 100%; }
 body {