1 of 33

Integrando IA em

Web Apps

Gemini AI + Angular = ❤️

@willmendesneto

Salvador, Bahia, Brasil

Google Developer Expert

2 of 33

are evolving

From IF/Else To AI

3 of 33

Before the web was…

4 of 33

A.I.� A-What?

5 of 33

Generate Images

Write content

Financial Solution

Slide Decks� Plagiarism Detection

Be a Music DJ with A.I. 🎉

</Apps Are Using AI For>

6 of 33

A.I. + Music = Music FX DJ

7 of 33

8 of 33

9 of 33

But first things first

Let's get back to basics

10 of 33

<New? Not at all!>

1950

Lack of resources

XIX Century

</New? Not at all!>

11 of 33

USer

Website

Who's Answering?

Chat App

Computer

Jane

Chat App

12 of 33

Will A.I. dominate the world?

Not really *

13 of 33

Second things second:

Time to train the machine

It's your responsibility now

14 of 33

Treat like a baby

15 of 33

So let me tell you a story…

16 of 33

Tião the Monkey x Cacareco the Rhino

17 of 33

Evolução da inteligência artificial tem limitado a compreensão sobre a humana

18 of 33

What is a real A.I.

Learning from real, for real

19 of 33

Transforme texto em áudio

20 of 33

Controle a cor do site com a voz

21 of 33

This is really cool

22 of 33

This is really cool

NOT A.I.

23 of 33

Javascript Native API

Great support in Browsers - ~80%

Locale Support

</SpeechAPI>

24 of 33

What do you mean by

window.ai ?

25 of 33

The power of window.ai

// checks to see if text sessions are supported by the browser

await window.ai.canCreateTextSession();

// returns an object of default options for `createTextSession`

const options = await window.ai.defaultTextSessionOptions();

// creates session with gemini nano model. Note: options arg optional

const session = await window.ai.createTextSession(options);

// command for executing prompt

await session.prompt("What does NASA stand for?");

// destroys the session

await session.destroy();

26 of 33

27 of 33

<👀 👀 👀?>

Show me what you got

</👀 👀 👀?>

28 of 33

🙏 I.A, resume isso aqui para mim 🙏

29 of 33

Gemini AI Request

const generativeAI = new GoogleGenerativeAI('<GEMINI-AI-TOKEN-HERE>');

const model = generativeAI.getGenerativeModel({

model: 'gemini-pro'

});

const result = await model.generateContent(`

Create a short summary of the page

${window.location.href} with no more than 100 words`

);

const response = await result.response;

console.log(response.text());

30 of 33

<Why?>

Work Automation

Excellent usage for such scenario

Way more Fun with A.I.

</Why?>

Summary With A.I.

1

31 of 33

<Why?>

Learning based on your needs

Case-by-case answers� LLM's in practice

</Why?>

A.I. Ask Anything

2

32 of 33

The future is bright,

The future is

.I.

✨ Stay tuned and always bet on JS! ✨

33 of 33

Thank you!

Gracias!

Obrigado! 👋

@willmendesneto

Salvador, Bahia, Brasil

Google Developer Expert