Posted on Sep 25, 2024

Generating text description from youtube link using Angular, Gemini and Netlify

#angular #gemini #ai #netlify

In this post we will implement an application to generate ai description from a youtube link using:

angular with primeng for the ui
gemini to generate the description
netlify for ci/cd

Create app using angular cli

ng new angular-youtube-description

Add required dependencies

gemini

npm i @google/generative-ai

primeng

npm install primeng
in angular.json add

... "styles": [ "node_modules/primeng/resources/themes/lara-light-blue/theme.css", "node_modules/primeng/resources/primeng.min.css", ... ]

and in styles.css add

@import "primeng/resources/themes/lara-light-blue/theme.css"; @import "primeng/resources/primeng.css";

Adding initial changes on app.component.ts

Let's start adding some changes into app.component.ts. Each property has a comment with an explanation

import { CommonModule } from '@angular/common'; import { Component, inject, OnInit, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { GoogleGenerativeAI } from '@google/generative-ai'; import { FormsModule } from '@angular/forms'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { take } from 'rxjs'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'app-root', standalone: true, imports: [ RouterOutlet, CommonModule, FormsModule, HttpClientModule, ButtonModule, InputTextModule ], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent implements OnInit { generatedDescription = signal<string | undefined>(undefined); // to see the description response in the template videoUrl = signal<string | undefined>(undefined); // url we want to send to gemini error = signal<string | undefined>(undefined); // to display an error in template when failing isLoading = signal<boolean | undefined>(undefined); // to display in template when waiting for gemini response #genAI: GoogleGenerativeAI | undefined; // to build a gemini model and generate content from prompt #youtubeApiKey: string | undefined = ''; // add youtube key required to get video data #geminiApiKey: string | undefined = ''; // add gemini key required to get gemini response #http = inject(HttpClient); // to make a request to youtube video so we can get title and description to send to gemini ngOnInit() { this.#genAI = new GoogleGenerativeAI(this.#geminiApiKey!); }

Generating required key for gemini

go to Google AI Studio.
login with your Google account.
create an API key.
once you get the key, assign it to #geminiApiKey in app.component.ts

Generating required key for youtube

follow this instructions https://developers.google.com/youtube/v3/getting-started
once you get the key, assign it to #youtubeApiKey in app.component.ts

Adding logic to get youtube video data and gemini response

getVideoDetails(videoUrl: string | undefined): we make a request to get youtube title and description so we can create gemini prompt. Since we need a videoId we added extractVideoId(url: string) to extract it from url

generateDescription(title: string, originalDescription: string): in this method we create prompt to request gemini. We need to specify a model as parameter, in this case we use 'gemini-pro'. Finally we execute generateContent to assign the response to generatedDescription signal so we can display it in the template

import { CommonModule } from '@angular/common'; import { Component, inject, OnInit, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { GoogleGenerativeAI } from '@google/generative-ai'; import { FormsModule } from '@angular/forms'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { take } from 'rxjs'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'app-root', standalone: true, imports: [ RouterOutlet, CommonModule, FormsModule, HttpClientModule, ButtonModule, InputTextModule ], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent implements OnInit { generatedDescription = signal<string | undefined>(undefined); videoUrl = signal<string | undefined>(undefined); error = signal<string | undefined>(undefined); isLoading = signal<boolean | undefined>(undefined); #genAI: GoogleGenerativeAI | undefined; #youtubeApiKey: string | undefined = ''; // add youtube key required to get video data #geminiApiKey: string | undefined = ''; // add gemini key required to get gemini response); #http = inject(HttpClient); ngOnInit() { this.#genAI = new GoogleGenerativeAI(this.#geminiApiKey!); } getVideoDetails(videoUrl: string | undefined): void { this.error.set(undefined); const videoId = this.extractVideoId(videoUrl!); if (!videoId) { this.error.set('Invalid YouTube URL'); return; } const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&id=${videoId}&key=${ this.#youtubeApiKey }`; this.isLoading.set(true); this.#http .get(url) .pipe(take(1)) .subscribe({ next: (response: any) => { const videoData = response.items[0]; this.generateDescription( videoData.snippet.title, videoData.snippet.description ); }, error: () => { this.isLoading.set(false); this.error.set('Unable to fetch video details'); }, }); } private generateDescription( title: string, originalDescription: string ): void { const prompt = { input: `Generate a description for a YouTube video with the title: "${title}" and the following description: "${originalDescription}"`, }; this.#genAI ?.getGenerativeModel({ model: 'gemini-pro' }) .generateContent(prompt.input) .then((response: any) => { this.generatedDescription.set( response.response.candidates[0].content.parts[0]?.text ); this.isLoading.set(false); }) .catch(() => { this.isLoading.set(false); this.error.set('Unable to get response from Gemini AI model'); }); } private extractVideoId(url: string): string | null { const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/; const match = url.match(regex); return match ? match[1] : null; } }

Updating template on app.component.html

<div class="app-container"> <div class="app"> <h1>Enter youtube video url</h1>  <input type="text" pInputText [(ngModel)]="videoUrl" placeholder="Enter youtube video url" /> <p-button type="submit" [disabled]="isLoading()" (click)="getVideoDetails(videoUrl())" > Get description </p-button>  @if(isLoading()){ <p class="loading">Generating description from youtube video...</p>  } @else if(generatedDescription()){ <p>{{ generatedDescription() }}</p>  <p><i>Generated description by Gemini</i></p> } @if(error()){ <p class="error">{{ error() }}</p>  } </div> </div>

Updating styles on app.component.css

.app-container { justify-content: center; align-items: center; } .app { display: flex; flex-direction: column; align-items: center; margin-inline: 20%; } p-button { margin-top: 20px; } input { width: 350px; } .error { color: red; } .loading { font-style: italic; }

Deploying app using Netlify

We don't want to expose our keys in our code, so we will use @ngx-env/builder to add our keys in a .env file to finally create environment variables on Netlify portal
1 - npm i @ngx-env/builder and follow documentation
2 - update env.d.ts

declare interface Env { readonly NODE_ENV: string; // Replace the following with your own environment variables. NG_APP_YOUTUBE_API_KEY: string; NG_APP_GEMINI_API_KEY: string; [key: string]: any; }

2 - add your key to .env file (IGNORE IT - DO NOT PUSH IT)

NG_APP_YOUTUBE_API_KEY=add your youtube api key here NG_APP_GEMINI_API_KEY=add your gemini api key here

3 - update app.component.ts to use env variables

#youtubeApiKey: string | undefined = import.meta.env.NG_APP_YOUTUBE_API_KEY; #geminiApiKey: string | undefined = import.meta.env.NG_APP_GEMINI_API_KEY;