Slide 22
Slide 22 text
document.getElementById('submit-btn').addEventListener('click', function() {
var submitButton = document.getElementById('submit-btn');
var inputText = document.getElementById('input-text').value;
var responseContainer = document.getElementById('response');
// ボタンを無効化し、ローディング中のテキストを表示
submitButton.disabled = true;
submitButton.textContent = 'Loading...';
fetch('https://mlsa-openai.openai.azure.com/openai/deployments/mlsa-test/chat/completions?api-version=2023-07-01-preview', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// 危険: APIキーが露出しています
'api-key': ‘<YOUR_API_KEY>'
},
body: JSON.stringify({
messages: [{role: 'system', content: 'あなたはチャットbotです。日本語で返答して'}, {role: 'user', content: inputText}],
max_tokens: 800,
temperature: 0.7,
frequency_penalty: 0,
presence_penalty: 0,
top_p: 0.95,
stop: null
})
})
.then(response => response.json())
.then(data => {
// 応答からassistantのメッセージのみを抽出して表示
if (data.choices && data.choices.length > 0 && data.choices[0].message) {
responseContainer.innerHTML = data.choices[0].message.content;
} else {
responseContainer.innerHTML = '応答が見つかりませんでした。';
}
})
.catch(error => {
console.error('Error:', error);
})
.finally(() => {
// ローディングが終了したら、ボタンを再度有効にし、テキストを元に戻す
submitButton.disabled = false;
submitButton.textContent = 'Submit';
});
});
コピー用