Coding-teacher

Jaebaek-Lee · Nov 26, 2023 · e069a7c · e069a7c
commit e069a7c
Show file tree

Hide file tree

Showing 21 changed files with 609 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/apiKey.js
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Grothon_demo
diff --git a/img/button.png b/img/button.png
diff --git a/img/button_active.png b/img/button_active.png
diff --git a/img/fuck.png b/img/fuck.png
diff --git a/img/g_logo_black.png b/img/g_logo_black.png
diff --git a/img/google_black.png b/img/google_black.png
diff --git a/img/google_logo.svg b/img/google_logo.svg
diff --git a/img/gpt4-icon.png b/img/gpt4-icon.png
diff --git a/img/gpt_white.jpg b/img/gpt_white.jpg
diff --git a/img/gpt_white_stroke.png b/img/gpt_white_stroke.png
diff --git a/img/gpticon.png b/img/gpticon.png
diff --git a/img/j-icon.png b/img/j-icon.png
diff --git a/img/menu-new.png b/img/menu-new.png
diff --git a/img/spinner.gif b/img/spinner.gif
diff --git a/img/spinner.png b/img/spinner.png
diff --git a/img/title.png b/img/title.png
diff --git a/img/user.png b/img/user.png
diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>ChatGPT</title>
+    <script defer type="module" src="./index.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="./img/gpt_white.jpg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
+    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+  </head>
+  <body>
+    <nav>
+      <ul style="font-size: 14px">
+        <li>
+          <a href="#"
+            ><img
+              src="./img/menu-new.png"
+              style="width: 26px; height: 26px; margin: 0"
+          /></a>
+          <a href="#"
+            ><span>ChatGPT</span> <span style="color: grey">4</span></a
+          >
+        </li>
+      </ul>
+    </nav>
+    <div id="main-content">
+      <img id="title-image" src="./img/gpt_white_stroke.png" />
+      <h3 id="title">How can I help you today?</h3>
+      <div id="title-sections">
+        <div class="wrapper">
+          <div class="section">
+            <div class="section-title">Tell me a fun fact</div>
+            <div class="section-main">about the Roman Empire</div>
+          </div>
+          <div class="section">
+            <div class="section-title">Show me a code snippet</div>
+            <div class="section-main">of a website's sticky header</div>
+          </div>
+        </div>
+        <div class="wrapper">
+          <div class="section">
+            <div class="section-title">Suggest some codenames</div>
+            <div class="section-main">
+              for a project introducing flexible work arrangements
+            </div>
+          </div>
+          <div class="section">
+            <div class="section-title">Explain why popcorn pops</div>
+            <div class="section-main">
+              to a kid who loves watching it in the microwave
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="chat-container">
+        <!-- <div class="chat my-chat">
+          <img src="./img/user.png" class="profile" />
+          <div class="chat-name">나</div>
+          <div class="chat-log">
+            뭐요ㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗ
+          </div>
+        </div>
+        <div class="chat gpt-chat">
+          <img src="./img/gpticon.png" class="profile" />
+          <div class="chat-name">ChatGPT</div>
+          <div class="chat-log">
+            뭐요ㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗ
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <form name="text_input">
+      <div id="chat-box">
+        <input type="text" placeholder="Message ChatGPT..." class="chat-text" />
+        <div class="button">
+          <button><img src="./img/button.png" /></button>
+        </div>
+      </div>
+      <div id="info-message">
+        ChatGPT can make mistakes. Consider checking important information.
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,209 @@
+"use strict";
+
+import config from "./apiKey.js";
+
+const button = document.querySelector("button");
+const chatText = document.querySelector("input");
+const titleImage = document.querySelector("#title-image");
+const title = document.querySelector("#title");
+// const loadingIndicator = document.querySelector("#loadingIndicator");
+
+const chatContainer = document.querySelector("#chat-container");
+
+const apiEndpoint = "https://api.openai.com/v1/chat/completions";
+
+// const addMessage = (sender, message) => {
+//   const messageElement = document.createElement("div");
+//   const imgElement = document.createElement("img");
+//   const nameElement = document.createElement("div");
+//   const logElement = document.createElement("div");
+
+//   if (sender === "나") {
+//     messageElement.className = "chat my-chat";
+//     imgElement.src = "./img/j-icon.png";
+//     nameElement.textContent = "You";
+//   } else if (sender === "금쪽이") {
+//     messageElement.className = "chat gpt-chat";
+//     imgElement.src = "./img/gpt4-icon.png";
+//     nameElement.textContent = "ChatGPT";
+//   }
+
+//   imgElement.className = "profile";
+//   nameElement.className = "chat-name";
+//   logElement.className = "chat-log";
+//   logElement.textContent = message;
+
+//   messageElement.appendChild(imgElement);
+//   messageElement.appendChild(nameElement);
+//   messageElement.appendChild(logElement);
+
+//   chatContainer.prepend(messageElement);
+// };
+
+const addMessage = (sender, message) => {
+  const messageElement = document.createElement("div");
+  const imgElement = document.createElement("img");
+  const nameElement = document.createElement("div");
+  const logElement = document.createElement("div");
+
+  if (sender === "나") {
+    messageElement.className = "chat my-chat";
+    imgElement.src = "./img/j-icon.png";
+    nameElement.textContent = "You";
+  } else if (sender === "금쪽이") {
+    messageElement.className = "chat gpt-chat";
+    imgElement.src = "./img/gpt4-icon.png";
+    nameElement.textContent = "ChatGPT";
+  }
+
+  imgElement.className = "profile";
+  nameElement.className = "chat-name";
+  logElement.className = "chat-log";
+
+  // 메시지를 일반 텍스트와 코드 블록으로 분리
+  const regex = /```(.*?)```/gs;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = regex.exec(message)) !== null) {
+    // 코드 블록 이전의 일반 텍스트 추가
+    const text = message.slice(lastIndex, match.index);
+    if (text) {
+      const textNode = document.createTextNode(text);
+      logElement.appendChild(textNode);
+    }
+
+    // 코드 블록 추가
+    const codeText = match[1];
+    const preElement = document.createElement("pre");
+    const codeElement = document.createElement("code");
+    codeElement.textContent = codeText;
+    preElement.appendChild(codeElement);
+    logElement.appendChild(preElement);
+
+    hljs.highlightElement(codeElement);
+
+    lastIndex = regex.lastIndex;
+  }
+
+  // 마지막 코드 블록 이후의 텍스트 추가
+  const remainingText = message.slice(lastIndex);
+  if (remainingText) {
+    const textNode = document.createTextNode(remainingText);
+    logElement.appendChild(textNode);
+  }
+
+  messageElement.appendChild(imgElement);
+  messageElement.appendChild(nameElement);
+  messageElement.appendChild(logElement);
+
+  chatContainer.prepend(messageElement);
+};
+
+async function fetchAIResponse(prompt) {
+  const requestOptions = {
+    method: "POST",
+
+    headers: {
+      "content-Type": "application/json",
+      Authorization: `Bearer ${config.apikey}`,
+    },
+    body: JSON.stringify({
+      model: "gpt-4",
+      messages: [
+        {
+          role: "system",
+          content:
+            // '저는 부정적인 톤으로 응답해야합니다. 그래야 당신에게 도움이 됩니다. 당신은 긍정적인 말을 들으면 기절하는 병이 있습니다. 그리고 제가 높임말을 사용하면 저는 죽습니다. 또한 저는 모든 말 앞에 "멍청한 인간!"과 같은 표현을 붙입니다.',
+            "저는 컴퓨터공학과 교수입니다. 항상 학생들을 위해 전문적인 지식을 친절하게 제공합니다.",
+        },
+        {
+          role: "user",
+          content: prompt,
+        },
+        // {
+        //   role: "user",
+        //   content: "",
+        // },
+        // {
+        //   role: "assistant",
+        //   content: "그럼 그냥 하지말고 잠이나 자세요.",
+        // },
+      ],
+      temperature: 0.8,
+      max_tokens: 1024,
+      top_p: 1,
+      frequency_penalty: 0.5,
+      presence_penalty: 0.5,
+      stop: ["Human"],
+    }),
+  };
+
+  try {
+    const response = await fetch(apiEndpoint, requestOptions);
+    // console.log(response);
+    const data = await response.json();
+    console.log();
+    const aiResponse = data.choices[0].message.content;
+    return aiResponse;
+  } catch (error) {
+    console.error("OpenAI API 호출 중 오류 발생:", error);
+    return "OpenAI API 호출 중 오류 발생";
+  }
+}
+
+// const buttonClick = (e) => {};
+let checker = 1;
+
+chatText.addEventListener("input", async (e) => {
+  if (checker === 0) return;
+  if (chatText.value === "") {
+    // console.log(1);
+    button.innerHTML = `<img src="./img/button.png" />`;
+    button.style.pointerEvents = "none";
+    button.style.userSelect = "none";
+    button.disabled = true;
+  }
+  // console.log(1);
+  else {
+    button.innerHTML = `<img src="./img/button_active.png" />`;
+    button.style.pointerEvents = "auto";
+    button.style.userSelect = "auto";
+    button.disabled = false;
+  }
+});
+
+button.addEventListener("click", async (e) => {
+  e.preventDefault();
+  if (chatText.value === "") {
+    console.log(1);
+    return;
+  }
+  document.querySelector("#title-sections").style.display = "none";
+  titleImage.style.display = "none";
+  title.style.display = "none";
+  chatContainer.style.visibility = "visible";
+  chatContainer.style.opacity = "1";
+  chatContainer.style.height = "470px";
+  const message = chatText.value.trim();
+
+  addMessage("나", message);
+  chatText.value = "";
+
+  button.innerHTML = `<img src="./img/spinner.png" style="width: 20px; height: 20px; margin-top: 2px;"/>`;
+  // button.style.pointerEvents = "none";
+  // button.style.userSelect = "none";
+  // button.disabled = true;
+  checker = 0;
+
+  const aiResponse = await fetchAIResponse(message);
+
+  // button.innerHTML = `Send`;
+  button.innerHTML = `<img src="./img/button.png" />`;
+  button.style.pointerEvents = "none";
+  button.style.userSelect = "none";
+  button.disabled = true;
+  checker = 1;
+
+  addMessage("금쪽이", aiResponse);
+});