Feature/recognize plants

Angular/src/app/helpers/image-helper.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ImageHelperService } from './image-helper.service';
+
+describe('ImageHelperService', () => {
+  let service: ImageHelperService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ImageHelperService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Angular/src/app/helpers/image-helper.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { IVisionAi } from '../interfaces/image-ai';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ImageHelperService {
+
+  constructor() { }
+
+  getBase64(file: File): Promise<string | ArrayBuffer | null> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(`Error: ${error}`);
+    });
+  }
+
+  async fileToGenerativePart(file: File): Promise<IVisionAi> {
+    const base64EncodedData = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            const result = reader.result as string;
+            const base64Data = result.split(',')[1];  // Extract base64 data part only
+            resolve(base64Data);
+        };
+        reader.onerror = (error) => reject(`File reading error: ${error}`);
+        reader.readAsDataURL(file);
+    });
+
+    return {
+        inlineData: { data: base64EncodedData, mimeType: file.type },
+    };
+}
+}

Angular/src/app/interfaces/image-ai.ts

@@ -0,0 +1,8 @@
+interface InlineData {
+  data?: string;
+  mimeType?: string;
+}
+
+export interface IVisionAi {
+  inlineData?: InlineData;
+}

Angular/src/app/pages/recipes-listing/recipes-listing.component.ts

@@ -52,7 +52,7 @@ export class RecipesListingComponent {
     },
     {
       title: 'Feedback Analyzer',
-      img: 'assets/img/plat-identifier-using-ai.png',
+      img: 'assets/img/ai-powered-feedback-analysis.png',
       desc: 'AI-Powered analyzer to assesse sentiment in images and text.',
       url: '/feedback-analyzer',
       github:

Angular/src/app/pages/recognise-plant-ai/recognise-plant-ai.component.html

@@ -1 +1,23 @@
-<p>recognise-plant-ai works!</p>
+<div class="container">
+    <h2 class="mb-4 pb-4 border-bottom text-center">Plant Identify using Vision Api - Google Ai</h2>
+    <div class="row justify-content-center">
+        <div class="mb-3 col-md-6 col-12">
+            <img [src]='image' class="w-100 mb-5 d-block m-auto" />
+
+            <!-- Image upload input -->
+            <input type="file" (change)="onFileChange($event)" accept="image/*" class="form-control" />
+
+            <button (click)="onPlantIdentify()" [disabled]="!image" class="btn btn-primary mt-2 w-100 mt-3">
+                Identify Plant
+            </button>
+
+            <!-- Display Analysis Result -->
+            @if (result) {
+            <div class="pt-5 text-center">
+                <h3>Ai Reponse</h3>
+                <p>{{result}}</p>
+            </div>
+            }
+        </div>
+    </div>
+</div>

Angular/src/app/pages/recognise-plant-ai/recognise-plant-ai.component.ts

@@ -1,12 +1,60 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { GeminiGoogleAiService } from '../../services/gemini-google-ai/gemini-google-ai.service';
+import { ImageHelperService } from '../../helpers/image-helper.service';
+import { IVisionAi } from '../../interfaces/image-ai';
+import { LoadingService } from '../../services/loading/loading.service';
 
 @Component({
   selector: 'app-recognise-plant-ai',
   standalone: true,
-  imports: [],
+  imports: [FormsModule],
   templateUrl: './recognise-plant-ai.component.html',
   styleUrl: './recognise-plant-ai.component.scss'
 })
 export class RecognisePlantAiComponent {
+  image: string = '';
+  inlineImageData: IVisionAi = {};
+  imageFile: File | null = null;
+  result: any | null = null;
 
+  private geminiAiService = inject(GeminiGoogleAiService);
+  private imageHelper = inject(ImageHelperService);
+  private loadingService = inject(LoadingService);
+
+  onFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+
+    if (input?.files && input.files[0]) {
+      const file = input.files[0];
+
+      // Getting base64 from file to render in DOM
+      this.imageHelper.getBase64(file)
+        .then((result: any) => {
+          this.image = result
+          console.log(this.image);
+        })
+        .catch(e => console.log(e));
+
+      // Generating content model for Gemini Google AI
+      this.imageHelper.fileToGenerativePart(file)
+        .then((image: IVisionAi) => {
+          this.inlineImageData = image;
+          console.log(this.inlineImageData);
+        });
+    } else {
+      console.log("No file selected.");
+    }
+  }
+
+  onPlantIdentify() {
+    this.loadingService.onLoadingToggle();
+
+    this.geminiAiService.onImagePrompt('Which type of plant is this share the details and if the plant seems in issue please highlights the steps to fix and make plant sustainable.', this.inlineImageData)
+      .then((response) => {
+        this.result = response;
+        this.loadingService.onLoadingToggle();
+      })
+      .catch(e => console.log(e));
+  }
 }

Angular/src/app/services/gemini-google-ai/gemini-google-ai.service.ts

@@ -22,4 +22,26 @@ export class GeminiGoogleAiService {
     const content = await model.generateContent(prompt);
     return content.response.text();
   }
+
+   /**
+   * Communicate with Gemini - Google Ai using image prompt
+   */
+   async onImagePrompt(prompt: string, imageinlineData: any): Promise<any> {
+    try {
+      const model: GenerativeModel = this.#genAI.getGenerativeModel({
+        model: 'gemini-1.5-flash',
+      });
+
+      const result = await model.generateContent([prompt, imageinlineData]);
+
+      if (!result || !result.response) {
+        throw new Error('Failed to get a valid response from the model');
+      }
+
+      return result.response.text();
+    } catch (error) {
+      console.error('Error generating content:', error);
+      throw new Error('Failed to generate content with Gemini - Google AI.');
+    }
+  }
 }