はじめに
AIの時代ということで、Azure OpenAIを使用して簡易的な要約アプリを作成してみました
アプリの構成
フロントエンド
- React
- Material UI Componentを使用
メインの部分のみのソースコードです
"use client";
import { SetStateAction, useState } from "react";
import { Button, Box, TextField, Typography } from '@mui/material';
export default function Home() {
const [inputValue, setInputValue] = useState<string>('');
const [summary, setSummary] = useState<string>('');
const handleChange = (event: { target: { value: SetStateAction<string>; }; }) => {
setInputValue(event.target.value);
};
const handleSubmit = async (event) => {
event.preventDefault();
const response = await fetch('関数アプリのURL', { // URLは関数アプリの関数のURLの取得ボタンから取得可能です
method: 'POST',
body: JSON.stringify({
text: inputValue
}),
});
if (response.ok) {
const result = await response.text();
setSummary(result)
}
};
return (
<Box m={4} sx={{ width: '100%' }}>
<form onSubmit={handleSubmit}>
<TextField
sx={{ width: '100%', maxWidth: '800px' }}
value={inputValue}
placeholder="要約したい内容を入力してください"
onChange={handleChange}
rows={4}
multiline
/>
<Box mt={2}>
<Button
variant="contained"
type="submit"
disabled={!inputValue.trim()}
>
要約を実施
</Button>
</Box>
</form>
{summary &&
<Box mt={2} sx={{ width: '800px' }}>
<Typography variant="h5">要約結果</Typography>
<p>{summary}</p>
</Box>
}
</Box>
);
}
バックエンド
- Azure Functions
- Azure OpenAIの呼び出し処理
Azure Functions構築方法
関数アプリから手順に沿って構築していきます
注意点
フレックス従量課金だと常に課金されるため、従量課金を選択します！
Azure OpenAIの構築方法
Azure OpenAIから手順に沿って構築していきます
注意点
Azure AI Foundryにてモデルを選択するのですが、モデルによって性能、料金が異なるため用途になったものを選択します。今回はo4-miniを選択しました
繋ぎこみ
関数アプリにて適用するソースコードです
module.exports = async function (context, req) {
const inputText = req.body?.text;
const deproymentName = process.env['DEPLOYMENT_NAME']
try {
const response = await fetch(
`https://XXXXX.openai.azure.com/openai/deployments/${deproymentName}/chat/completions?api-version=2025-01-01-preview`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'api-key': process.env['OPENAI_API_KEY']
},
body: JSON.stringify({
messages: [
{ role: 'system', content: 'あなたは優秀な日本語の要約アシスタントです。' },
{ role: 'user', content: `以下の文章を要約してください：\n${inputText}` }
],
max_completion_tokens: 100000
})
}
);
const result = await response.json();
context.res = {
status: 200,
body: result.choices[0].message.content
};
} catch (error) {
context.log(error.message)
context.log.error("OpenAI API エラー:", error.message);
context.res = {
status: 500,
body: error.message
};
}
};
補足
- 秘匿性の高い情報は環境変数に設定します
- 認証チェックは入れていないのですが、本来制御は必要です
- 作成した関数アプリ内のテスト/実行から動作確認を実施します
システム
プロンプトはそこまでこだわっていないため、若干要約をしてくれるというようなシステムです
さいごに
簡易的でもAIを使用したアプリを作成して面白かったです。今後は少し機能をパワーアップしていければと思います