AI Chatbot
あなたのAIの名前を入力してください：
AI:
<!DOCTYPE html>
<html>
<head>
<title>AI Chatbot</title>
</head>
<body>
<h1>AI Chatbot</h1>
<p>あなたのAIの名前を入力してください：</p>
<input type="text" id="imageName">
<button onclick="setName()">決定</button>
<br><br>
<h3 id="bot">AI:</h3>
<input type="text" id="userInput" onkeydown="if (event.keyCode == 13) talk()">
<button onclick="talk()">送信</button>
<!-- AIの名前を格納するscriptタグ -->
<script type="text/javascript">
var aiName = "";
function setName(){
aiName = document.getElementById("imageName").value;
if (aiName !== ""){
document.getElementById("bot").innerHTML = "ようこそ、私は" + aiName + "です。なんでも聞いてください。";
} else {
alert("AIの名前を入力してください。");
}
}
</script>
<!-- ユーザーとの対話を行うscriptタグ -->
<script type="text/javascript">
function talk(){
var input = document.getElementById("userInput").value;
if (input !== ""){
var output = aiName + ": 「" + input + "」と言われたので、お答えします。";
document.getElementById("bot").innerHTML = output;
document.getElementById("userInput").value = "";
} else {
alert("何か話してくれませんか？");
}
}
</script>
</body>
</html>