Anthoropic社の発表により、Claude4シリーズの発表がありました。前回から約3ヶ月ぶりの新モデル発表となりました。
AIのモデルの進化スピードは加速してきているので、早速キャッチアップしていきたいと思います。
今回の発表に関連する動画をまとめておこうと思います。
ClaudeCodeは VsCodeとGitHubと連携ができるようになりました。
Cursorと統合することで、普段と同じように開発を続けることが可能です。
2025年からAIの技術に興味を持ち、APIを使ったアプリケーションを作成したいと考えていました。ChatGPTやGeminiなどの複数のアプリケーションを使用していましたが、1つの場所で複数のモデルを使用したいと思うようになりました。そこで、興味本位から自己学習の一環としてChatGPTを模倣したアプリケーションを作成しました。
ソースコードは今後GitHub上に公開する予定です。
まだまだ未完成の機能が多いですが、たくさんのAIモデルに対応しているため、AIのWrapperとしてはかなり面白いのではないかと思います。
このサイトは、ChatGPT、Gemini、Claudeなど複数のAIモデルに対応し、ユーザーが自由にモデルを選択して対話できるウェブアプリです。ReactとNode.jsをベースに構築し、APIを介して各AIモデルと連携するアーキテクチャを採用しています。ストリーム出力・推論モデルの思考過程の出力(一部モデル)に対応しています。
開発の過程では、AIの生成したコードやAIのフィードバックを受けながらコーディングを進めました。
各種APIやAIモデルを使用するにあたり、公式ドキュメントは徹底して読み込むことにし、作業を進めました。
デフォルトで選択可能なAIモデルは、左上のモデル名の下矢印を押すことで選択が可能になります。
ChatGPT,Gemini,Grok,Claude,DeepSeekの様々なモデルを使用することが可能です。
2025年4月13日時点では、以下のモデルに対応しています。
| OpenAI | GPT-4o（ChatGPTで使用されているモデル) |
| GPT-4o-mini | |
| O1-mini | |
| O3-mini | |
| GPT-4.5 (プレビュー版) | |
| Gemini | Gemini-2.5-pro |
| Gemini-2.0-flash | |
| Gemini-2.0-falsh-thinkng | |
| Claude | Claude-3.7-sonnet |
| Claude-3.7-sonnet-thinking | |
| Grok | Grok3 |
| Grok3-fast | |
| Grok3-mini | |
| Grok3-mini-fast | |
| DeepSeek | DeepSeek-V3 |
| DeepSeeek-R1 |
OpenAIの「web-search-tools」を使用することで、ウェブ検索が可能になりました。この機能はResponseAPIを使用しています。
検索を実行した際に、検索のソースが画面に表示されます。
こちらの機能は動作の安定化のために、今後調整を行なっていきます。
ResponseAPIについては、こちらの記事で紹介をしています。
ストリーム出力に対応しているモデルに関しては、どのモデルを選択した場合でも、ストリーム出力されるようにしています。DeepSeek-R1の推論モデルのストリーミング出力にはかなりこだっています。
実装済みですが、非公開にしている機能に「音声」機能があります。出力されるテキストを読み上げてくれます。
OpenAIの「TTS-1 HD」モデルを使用した、最新の高品質な音声モデルを採用しながら、音声の波形を表示させることで再生箇所を選びやすくしています。
唯一、LangGraphを使用した機能になっています。以下のステップで高品質な文章生成を目指して作成しました。
それぞれ別のモデルを使うようにしてみました。まだ完成度が低いため、非公開にしています。
元々、技術的にはHTML,CSS,Javascriptの基本的知識程度しかなかったのでプロダクトを作成できるとは思っていませんでした。AIを活用することで、そこからたくさんの学びを得ることができました。
エンドポイントやAPIの利用、Reactの使い方など、今まで触れることのなかった領域の知識を得ることができました。
LangGraphを使ってエージェント機能を実装していますが、ノードの設定を行うだけで並列実行させられる部分はメンテナンスが楽になることから大変面白い発見でした。
何より、新しいモデルが発表されるたびに自分のアプリケーション上で使用できるようになることは非常に楽しみとなっています。
今後は、単に複数のモデルを使用できるだけではAIを使いこなせずに終わってしまいます。エージェント機能の開発に注力し、AIが相互に連携してより高精度なアウトプットを出力できる方向を目指していきたいと考えています。
実装難易度が硬い機能がたくさん未実装なのですが、少しずつアプリケーションのエージェント化に向けて進めていきたいです。
今回、ウェブアプリケーションを作成する上で使用するAPIはGoogleが提供するGemini 1.5 Proです。
Gemini 1.5 Pro は次世代の大規模言語モデル（LLM）で、優れた自然言語生成能力を持っています。この記事では、Gemini 1.5 Pro APIを利用したシンプルなウェブアプリケーションを構築する手順を解説します。
Gemini 1.5 Pro API のエンドポイントや利用方法を確認します。
たとえば、以下のようなエンドポイントがあるかもしれません：
• POST /v1/models/gemini-1.5-pro/completions （テキスト生成用）
• POST /v1/models/gemini-1.5-pro/chat （チャット用）
mkdir my-gemini-app
cd my-gemini-appnpm init -ynpm install express axios dotenv
index.js ファイルを作成し、以下のコードを記述します。
require('dotenv').config(); // .env ファイルから環境変数を読み込む
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
// 環境変数から API キーを取得
const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
const GEMINI_API_URL = 'https://api.gemini-platform.com/v1/models/gemini-1.5-pro/completions'; // 仮のURL
// JSON リクエストボディのパース
app.use(express.json());
// フロントエンド用の静的ファイルを配信
app.use(express.static('public'));
// 動作確認用エンドポイント
app.get('/', (req, res) => {
res.send('Hello from Gemini 1.5 Pro app!');
});
// 質問を受け付けて Gemini API に送信するエンドポイント
app.post('/ask', async (req, res) => {
try {
const userQuestion = req.body.question;
if (!userQuestion) {
return res.status(400).json({ error: 'No question provided' });
}
// Gemini 1.5 Pro API 呼び出し
const response = await axios.post(
GEMINI_API_URL,
{
prompt: userQuestion,
max_tokens: 100,
temperature: 0.7,
},
{
headers: {
'Authorization': `Bearer ${GEMINI_API_KEY}`,
'Content-Type': 'application/json',
},
}
);
const answer = response.data.choices[0].text.trim();
res.json({ answer });
} catch (error) {
console.error('--- Gemini API Error ---');
if (error.response) {
console.error('Status:', error.response.status);
console.error('Data:', error.response.data);
} else {
console.error('Message:', error.message);
}
res.status(500).json({ error: 'エラーが発生しました' });
}
});
// サーバー起動
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});public/index.html の作成
フロントエンドでGemini 1.5 Proに質問を送信する簡単なフォームを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Gemini 1.5 Pro Chat App</title>
</head>
<body>
<h1>Gemini 1.5 Pro Chat App</h1>
<form id="questionForm">
<input type="text" id="questionInput" placeholder="質問を入力してください">
<button type="submit">送信</button>
</form>
<div id="answer"></div>
<script>
document.getElementById('questionForm').addEventListener('submit', async (e) => {
e.preventDefault();
const question = document.getElementById('questionInput').value;
const response = await fetch('/ask', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ question }),
});
const data = await response.json();
document.getElementById('answer').innerText = data.answer || data.error;
});
</script>
</body>
</html>
.env ファイルを作成し、以下のように記述します。
GEMINI_API_KEY=your-gemini-api-key
取得した Gemini APIキー をここに記載します。
node index.jsGemini 1.5からAPI経由で回答が表示されます。
node.jsとExpressを使い、APIを使用したシンプルなアプリケーションを作成できました。
私はChatGPTやGeminiに質問しながら作成したので、かなり短時間で学習できました。
この機能をベースにしてさらに機能を追加することもできるので、ぜひチャレンジしてみてください。
Difyで一連の処理を自動化してアプリケーションを作成できる機能のことを指します。
Difyのワークフローを構築するにはノード（ブロックやツール）をマップ上に配置し、各ノードを線で繋いでいくことで構築することができます。
現在、ワークフローで実装できるブロックは以下の10種類があります。
今回は４つのブロックを使って構築します。
開始ブロックは、すべてのワークフローに必要なノードです。ここで入力した値を受け取ります。
LLM は Chatflow/Workflow の中心的なノードであり、大規模言語モデルの会話/生成/分類/処理などの能力を活用して、多様なタスクを提示された指示に基づいて処理し、ワークフローのさまざまな段階で使用することができます。
LLMのモデルを選択することができますが、今回はデフォルトで設定されている「gpt3.5」にしています。
カスタムロジックの実装のために、PythonまたはNode.jsを使用してコードを記述します。
関数の引数として使用する変数と出力用の変数を定義して使用することができます。
def main(arg1: int) -> dict:
return {
"prompt" : arg1 + "に関する技術的なドキュメントを生成してください。ハルシネーションは出力しないでください。",
}ワークフローの最終出力コンテンツを定義します。すべてのワークフローには、実行が完了した後に最終結果を出力するために少なくとも 1 つの終了ノードが必要です。
終了ノードはプロセスの終了点です。このノードの後にノードを追加することはできません。ワークフロー アプリケーションでは、終了ノードに到達したときにのみ結果が出力されます。プロセスに条件分岐がある場合は、複数の終了ノードを定義する必要があります。
終了ノードは、上流ノードの出力変数を参照できる 1 つ以上の出力変数を宣言する必要があります。
今回のポイントはLLMに渡すプロンプトを変数にしておき、後から編数したり再利用しやすくしています。
同様の目的であれば、「テンプレート」というブロックでも実現可能ですが個人的には関数のブロックの方が使いやすかったので今回はこのような形でワークフローを構築しています。
今回は、プロンプトの文章に「ハルシネーションを使用しないでください。」という一文を追加しています。これは、AppleがApple interigenceに使用しているプロンプトであり、一定の効果があるようです。
LLAMA3は、80億パラメータと700億パラメータの2つのモデルで構成されています。このスケールメリットにより、幅広い分野での高い汎用性能が期待できます。膨大なパラメータ数により、LLAMA3はより複雑な情報を処理し、より人間らしい自然言語生成が可能になりました。
LLAMA3は自然言語の理解と生成で驚異的な能力を発揮します。人間のように自然な会話や文章を生成でき、高度な推論や質問応答も可能です。要約、翻訳、テキスト生成など、多様な自然言語タスクに適用できます。
画像の生成に関しては以下にある通り非常に高速です。
Meta AI の画像生成が高速化され、入力と同時に画像が生成されるため、バンドのアルバム アートワーク、アパートの装飾のインスピレーション、アニメーション カスタム GIF などを作成できます。
META公式サイトより
LLAMA3は120以上の言語に対応しており、マルチリンガルな言語モデルとして際立っています。これにより、世界中のユーザーが自身の母語で高度な言語処理を利用できるようになります。
LLAMA３はMETAAIに用いられています。META AIはMETAが先日発表したWEBサービスでCHATGPTのようなツールです。まだ日本では利用が開始されていません。
FacebookやInstagramなどのMETA社のSNSでは、アプリ上でMETA AIにアクセスしてテキストでの会話や画像生成などの機能を利用することが可能です。
LLAMA3は、オープンソースとして公開されています。これは、研究者や開発者が自由にモデルを改変し、新たな応用例を開発することを可能にします。オープンソース化により、LLAMA3の開発はより活発化することでしょう。
これからサイトやアプリにオープンソースのAIが導入されることでAIの価格競争が起き、多くの人が安価でAIを利用できるようになるかもしれません。また、AIの開発が加速するはずです。これはオープンソースのメリットでもあります。
LLAMAはまだまだ発展途上のAIです。今後新たなトレーニング済みのモデルの発表があるようです。
私たちの最大のモデルはパラメーターが 400B を超えており、これらのモデルはまだトレーニング中ですが、私たちのチームはその傾向に興奮しています。今後数か月にわたって、マルチモーダリティ、複数の言語で会話する機能、はるかに長いコンテキスト ウィンドウ、より強力な全体的な機能などの新機能を備えた複数のモデルをリリースする予定です。また、Llama 3 のトレーニングが完了したら、詳細な研究論文を公開する予定です。
META公式サイトより
これから、より高性能のLLMが発表されることに非常に期待をしております！次の発表が待ち遠しいです。