仔犬との会話　マルシーズー

2023.05.07

カテゴリ：チャットGPT

Lenovo IdeaPad Duet Chromebook 2in1ノートパソコン ZA6F0019EC 10.1型(1920x1200)/MediaTek Helio P60T/メモリ 4GB/128GB eMMC/Chrome OS/日本語キーボード/アイスブルー+アイアングレー

マルシーズーのコモ太が言いそうなことをチャット形式で表示されるようなbotをチャットGPTさんに作って頂きました。
以下がコードです。

<!DOCTYPE html>

<style>

body {

background-color: skyblue;

}

/* スクロールバーの色を赤に変更 */

::-webkit-scrollbar {

width: 12px;

background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: red;

}

</style>

<html>

<head>

<title>自動応答チャット</title>

<style>

body {

font-family: sans-serif;

padding: 20px;

}

h1 {

margin-bottom: 20px;

}

input[type="text"] {

width: 100%;

padding: 10px;

font-size: 16px;

margin-bottom: 20px;

}

.chat-container {

max-width: 600px;

margin: 0 auto;

}

.user-message {

background-color: #d9e1e7;

border-radius: 10px;

padding: 10px;

margin-bottom: 10px;

}

.bot-message {

background-color: #007bff;

color: #fff;

border-radius: 10px;

padding: 10px;

margin-bottom: 10px;

text-align: right;

}

</style>

</head>

<body>

<h1>コモ太と会話</h1>

<p>メッセージ入力して改行</P>

</div>

const botMessages = [

"おしっこでる",

"おやつは？",

"ごはんはまだ？",

"ほえるよ",

"ねむたい",

"もうよじ、おきろ",

"さんぽのじかん",

"しやくしょまわりきたない",

"さんろーどきたない",

"みずのみたい",

"さつまいもは？",

"きょうはなんのひ？",

"おもちゃは？",

"じぶんにきびしいよ",

"るすばんきらい",

"うれしょん、ごめん",

"げつようびはさしみ",

"さんぱつして",

"しゃねるがいい",

"ありがとう",

"さんくす",

"からすとあそぶ",

"おなかすいた",

"あそんで"

];

function getBotMessage() {

const index = Math.floor(Math.random() * botMessages.length);

return botMessages[index];

}

function addMessageToLog(message, sender) {

const div = document.createElement('div');

div.textContent = message;

div.className = sender + "-message";

document.getElementById('chatlog').appendChild(div);

// テキストを読み上げる

window.speechSynthesis.speak(new SpeechSynthesisUtterance(message));

}

function processInput() {

const input = document.getElementById('input');

const message = input.value.trim();

input.value = '';

if (message !== '') {

addMessageToLog(message, 'user');

addMessageToLog(getBotMessage(), 'bot');

document.getElementById('chatlog').scrollTop = document.getElementById('chatlog').scrollHeight;

}

document.getElementById('input').addEventListener('keydown', function(event) {

if (event.keyCode === 13) {

processInput();

}

});

document.getElementById('input').focus();

</script>

</body>

</html>

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2023.05.07 16:13:09
コメント(0) | コメントを書く

[チャットGPT] カテゴリの最新記事

チャットGPTさんが国際電話検索を作成 2023.05.05
チャットGPTでデバイスの情報 2023.05.05

マルシーズーコモ太の日常

カテゴリ未分類

ペット

動画

チャットGPT

HTML

プログラミング

ボクシング