├── index.html
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | API ChatGpt
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const question = document.getElementById("question");
2 | const responseIA = document.getElementById("response-IA");
3 |
4 | question.addEventListener("keypress", (e) => {
5 | if (question.value && e.key === "Enter") {
6 | sendQuestion();
7 | }
8 | });
9 |
10 | const OPENAI_API_KEY = ""; // Your API key
11 |
12 | function sendQuestion() {
13 | let sendQ = question.value;
14 |
15 | fetch("https://api.openai.com/v1/completions", {
16 | method: "POST",
17 | headers: {
18 | Accept: "application/json",
19 | "Content-Type": "application/json",
20 | Authorization: "Bearer " + OPENAI_API_KEY,
21 | },
22 |
23 | body: JSON.stringify({
24 | model: "text-davinci-003",
25 | prompt: sendQ,
26 | max_tokens: 2048,
27 | temperature: 0.5,
28 | }),
29 | })
30 | .then((response) => response.json())
31 | .then((json) => {
32 | if (responseIA.value) {
33 | responseIA.value += "\n";
34 | }
35 |
36 | if (json.error?.message) {
37 | responseIA.value += `Error: ${json.error.message}`;
38 | } else if (json.choices?.[0].text) {
39 | let text = json.choices[0].text || "No reply";
40 |
41 | responseIA.value += "ChatGPT: " + text;
42 | }
43 |
44 | responseIA, scrollTop = responseIA.scrollHeight;
45 | })
46 | .catch((error) => console.error("Error:", error))
47 | .finally(() => {
48 | question.value = "";
49 | question.disabled = false;
50 | question.focus();
51 | });
52 |
53 | if (responseIA.value) {
54 | responseIA.value += "\n\n\n";
55 |
56 | responseIA.value += `I: ${sendQ}\n`;
57 | question.value = "Waiting your answer...";
58 | question.disabled = true;
59 |
60 | responseIA.scrollTop = responseIA.scrollHeight;
61 | }
62 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .container {
8 | background-color: #222222;
9 | width: 100%;
10 | min-height: 100vh;
11 | display: flex;
12 | justify-content: center;
13 | flex-direction: column;
14 | align-items: center;
15 | gap: 10px;
16 | }
17 |
18 | #response-IA {
19 | font-size: 15px;
20 | width: 50%;
21 | min-height: 60vh;
22 | color: white;
23 | padding: 10px;
24 | border: 1px solid white;
25 | background-color: transparent;
26 | }
27 |
28 | #question {
29 | font-size: 15px;
30 | width: 50%;
31 | min-height: 15vh;
32 | color: white;
33 | padding: 10px;
34 | border: 1px solid white;
35 | background-color: transparent;
36 | outline: none;
37 | }
--------------------------------------------------------------------------------