AI

JavaScript

Gemini 2.5 Flash Image(nano-banana)をJSで使用してみようとした

やりたいことGemini 2.5 Flash Image(通称nano-banana)がリリースされたのでJavaScriptで使用することをためします。このモデルは特に画像の修正が得意だとされています。以下の記事でGemini 2.0で画像生成を行いましたので作成したコードを利用してGemini 2.5 Flash Imageをためしますが失敗しました。ここでは修正内容とダメだった理由を残します。注意この記事を書いた時点（2025/08/29）では無料（Googleが言うには請求先アカウントにリンクされていないプロジェクト）では使用できませんでした。ただしGemini 2.5 Flash I...
2025.08.29
JavaScript
JavaScript

【有料】ViteでGeminiの画像生成

やりたいことGoogleの生成AIであるGeminiをNodeJSで使用して、画像生成を行います。実装はフロントエンドのみでバックエンドはGoogleにあるGeminiを使用します。GoogleのAPIキーを発行する必要があります。注意：この記事を書いて時点でGeminiの画像生成はプレビュー機能です。今後仕様等変更になる可能性があります。この記事ではNodeJSを用いてクライアントサイドでの実装を行っています。しかしこの方法はAPI KEYが使用者に漏れる可能性がありますのでGoogleから推奨されていません。個人的な使用や、実験にとどめてください。環境Vite：6.2.0@google/g...
2025.04.15
JavaScript
JavaScript

Teachable Machineを使って画像の判別Webアプリを作る

やりたいことgoogleのAI Modelを作成するサービスであるTeachable Machineを使ってWebアプリを作成します。この記事ではPCのカメラ撮影した画像でトレーニングを行い、PCのカメラの入力に応じて動作が変わるWebアプリを作成します。Teachable MachineでできることTeachable Machineは無料でAIのトレーニングを行いモデルを作成することができます。AIの入力になるのは画像（細かく言うと通常の画像とポーズに分かれています。）もしくは音声データで、出力は分類の確率です。（分類は２種類である必要はありません）単純な例を挙げると猫の画像100枚と犬の画...
2024.11.13
JavaScript
nodejs

Gemini+NodeJSで遊ぶまとめ

やりたいことGoogleのAIであるGeminiをNodeJSで使用する記事のまとめです。オフィシャル記事まとめNodeJSで環境を作成してGeminiから回答を得るところまでHTMLで入力、Gemeniからの回答を出力するところまでフィルタ(SafetySetting)の設定方法
2024.10.26
nodejs
nodejs

NodeJS+GeminiにGUIを実装する

やりたいこと下の記事でNodeJSでGeminiを使用できるようにしました。しかしGUIがなく実用性は皆無なのでGUIを実装します。おさらい前回作成したHTMLは以下の通りです。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Gemini</title> </head> <body> <script type="module" src="main.js"></script> </body></html>同様にJSは以下の通りです。let api_key = "Your API key"import { GoogleGener...
2024.10.10
nodejs
nodejs

NodeJSでGeminiの実装

やりたいことGoogleの生成AIであるGeminiをNodeJSで使用します。実装API key の作成以下のページにアクセスしてAPI keyを取得しますプロジェクトの作成ここでは以下の記事を用いてNodeJS+Viteのプロジェクトを作成しました。続いて以下のコマンドを実行し、generative-aiをインストールします。npm install @google/generative-aiHTMLの作成Srcフォルダにindex.htmlを作成します。内容は以下のようにしました。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...
2024.10.09
nodejs