Vertex AI for Firebaseを試してみよう


ある日こんなのがコンソールに出ていた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/3e42dc0f-3dfb-b9cc-06e3-ebf5ee0af2b9.png)

アプリとかからAIのAPIを実行できるらしい

# 以前作ったアプリを修正しよう

以前OpenAIのAPIを使ってAIでサイトをコントロールする記事を書いた

しかしAPI処理はbackendに移動する必要があった

それをVertex AI for Firebaseに変えてみよう

https://qiita.com/babu-ch/items/3aac62f73972bc59763e

# Firebaseのinstall

手順に従いインストール

https://firebase.google.com/docs/vertex-ai/get-started?hl=ja&authuser=0&platform=web#no-existing-firebase

ちなみに従量制プランじゃないと使えない

# コードを修正する

サイトの内容自体は修正しません

・main.tsにfirebaseのセットアップ

https://github.com/babu-ch/onseikun2/blob/main/src/main.ts

```ts
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);

// Initialize the Vertex AI service
export const vertexAI = getVertexAI(firebaseApp);
```


・ai部分をvertex aiに

https://github.com/babu-ch/onseikun2/blob/main/src/composables/ai.ts

```ts
            // Initialize the generative model with a model that supports your use case
            // Gemini 1.5 models are versatile and can be used with all API capabilities
            const model = getGenerativeModel(vertexAI, {
                model: "gemini-1.5-flash",
                systemInstruction: prompt,
                generationConfig:  { responseMimeType: "application/json" }
            })

            const result = await model.generateContent(input)

            const text = result.response.text()
```

systemInstructionにpromptを設定しています

https://firebase.google.com/docs/vertex-ai/system-instructions?hl=ja&authuser=0&platform=web

# 試す

## こんにちはってつぶやいて

つぶやきページに移動して呟けました

![スクリーンショット 2024-08-01 18.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/42b88a23-56a3-6b12-b348-60fdf867daea.png)

## ソーキそばとパスタの人にいいねして

いいネできる

![スクリーンショット 2024-08-01 18.41.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/0a47897a-4d18-1e6d-ebc5-28700b0756a2.png)

## 誰か面白そうな人のプロフィール開いて

gemini的には「もち山」さんのプロフィールがおもろかったようです

![スクリーンショット 2024-08-01 18.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/83b8fba1-f5e1-af9e-3a9d-1162bd205cea.png)

動作確認はOKでした

## 前回微妙だった命令をしてみる

「お腹へった」ってつぶやいて。あとそれとは別で「お肉食べたい」ってつぶやいて

![スクリーンショット 2024-08-01 19.20.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/e4972cf9-b6b5-233b-80e5-4aa278e8c145.png)

おお〜〜〜〜いい感じ

前回の結果はこれ

https://qiita.com/babu-ch/items/3aac62f73972bc59763e#%E9%95%B7%E3%82%81%E3%81%AE%E5%91%BD%E4%BB%A4

# おわり🌿

アプリから直でAPI実行できるのは面白いですね

gemini-1.5は100万トークン（？！）対応できるので、小さいサイトならQA突っ込んでお手軽チャットボットとかもできそうですね

https://firebase.google.com/docs/vertex-ai/gemini-models?hl=ja&authuser=0#detailed-info

今回のソース

https://github.com/babu-ch/onseikun2