myFirstAIchatBot/AI.html at main · supercodingninja/myFirstAIchatBot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, intial-scale=1">

		<style>
			body, html {
              height: 50%;
              margin: 0;
			  font-size: 20px;
			  margin-top: 2px;
			  margin-bottom: 16px;
            }


            .bg {
              /* The image used */
              background: url("https://sallysbakingaddiction.com/wp-content/uploads/2013/05/classic-chocolate-chip-cookies.jpg");

              /* Full height */
              height: 100%;
			  top: 50;
			  right: 0;

              /* Centers and scales my image smooth and professional */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }


			/* Style for my header */
			.h1 {
				font-family: "san-serif", Playfair Display, Bodoni;
				text-align: center;
			}


			/* First paragraph style */
			.p1 {
				font-family: "Gill Sans", sans-serif;
				text-align: center;
			}


			/* My query prompt style */
			.queryPrompt {
				font-family: "Fantasy", Copperplate, Papyris;
				text-align: center;
			}


			/* Query input field and button alignment */
			.queryIB {
				display: flex;
  				flex-direction: row;
  				justify-content: center;
				align-items: center;
				gap: 5px;
			}


			/* End-user query input field */
			.input {
				font-family: "Ramaraja", Helvetica;
				display: flex;
  				text-align: center;
				width: fit-content;
    			min-width: 150px;
			}


			/* My AI button style */
			button {
				background-color: black;
				color: white;
				border: none;
				border-radius: 50%;
				height: 25px;
				width: 25px;
				cursor: pointer;
			}
		</style>
	</head>


	<body>

		<!-- For association with my background style -->
    	<div class="bg"></div>


		<!-- My header -->
		<h1 class="h1" >My First AI Chat Bot</h1>


		<!-- My first paragraph -->
		<p class="p1">
			<a href="https://supercodingninja.github.io/" target=”_blank”>"HELLO, WORLD!"</a> This is my first AI chat box.  I have developed dialogue prompts before- even multiple choice <a href="https://supercodingninja.github.io/WhoIsOutside/" target=”_blank”>game</a>- and I've even used API (Application Programming Interface).  I am familiar with integrating tools and technologies into a website (such as ChatGPT). Still, I had never fully coded my very own Chat Bot until Mr. David Bragg, founder of <a href="https://frontendsimplified.com/" target=”_blank”>Frontend Simplified</a> showed me how, and I highly recommend his courses!
		</p>


		<!-- My inquisition leading user to query search engine -->
		<h3 class="queryPrompt">
			So, without further ado, hello 👋🏿 my name is <a href="https://github.com/supercodingninja" target=”_blank”>Frederick</a> 👨🏾‍🎓 How can I help you today?
		</h3>


		<div class="queryIB">
			<!-- Simple form field for user to enter query. -->
			<input type="text" id="qtxt" onkeypress="this.style.width = (this.value.length) + 'ch';" placeholder='Type a word or sentence' class="input" onload="myFunction()"></input>


			<!-- This button is designed for the end user to submit the desired query (stand back and watch the magic happen and be in awe👨🏾‍🎓) -->
			<button>⬆</button>
		</div>


		<script>

const handleMessage = async () => {
const input = document.querySelector("input"),
  button = document.querySelector("button"),
  message = input.value.trim();

if (!message) return;

input.insertAdjacentHTML(
"beforebegin",
`<p data-user="true">${message}</p>`
);
input.value = "";

try {
const { reply, imageUrl } = await fetch(
    "https://backend.fesinstitute.com/api/public/chat",
    {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message, uid: "YvUJTOs94cNgO5U7HSm4OkDJVmG3" }),
    }
).then((r) => r.json());

const formattedText = reply
    .replace(/###\s+(.*)/g, "<h3>$1</h3>")
    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
    .replace(/^\s*-\s+(.+)/gm, "<li>$1</li>")
    .replace(/^\s*\d+\.\s+(.+)/gm, "<li>$1</li>");

input.insertAdjacentHTML(
    "beforebegin",
    `<div>${formattedText}` +
    (imageUrl
        ? `<img src="${imageUrl}"></div>`
        : "</div>")
);
} catch {
input.insertAdjacentHTML(
    "beforebegin",
    `<p>Bot: Something went wrong!</p>`
);
}
};

document.querySelector("button").onclick = handleMessage;

document.querySelector("input").addEventListener("keypress", (e) => {
if (e.key === "Enter") {
e.preventDefault();
handleMessage();
}
});


// 'ch' unit referenced from John's answer on StackOverflow (https://stackoverflow.com/questions/65575027/how-to-set-html-input-tag-width-fit-content-in-css). John's profile (profile: https://stackoverflow.com/users/11111119/john). Going forward, I I rather write all of this code in separate files (.html, .css, .js, etc.), and honestly, I think I would prefer to use the span tag to allow more versatility and functionality, but I just desired something simple to accomplish a minimum viable product. //

			function myFunction() {
  document.getElementById("qtxt").style.width = (qtxt.value.length) + 'ch';
			}

			window.onload = myFunction();
		</script>
	</body>
</html>