From 35bf80d3f24534d571fc6bb2a86e4f2fa80f6591 Mon Sep 17 00:00:00 2001 From: ThinkingVincent Date: Mon, 27 Nov 2023 19:46:29 +0900 Subject: [PATCH] add spinner --- img/ellipse-spinner.png | Bin 0 -> 1575 bytes img/menu-button-active.png | Bin 0 -> 8183 bytes img/menu-button-nonactive.png | Bin 0 -> 9147 bytes index.html | 5 ++- index.js | 72 ++++++++++++++++++++++++++-------- style.css | 34 ++++++++++++++-- 6 files changed, 91 insertions(+), 20 deletions(-) create mode 100644 img/ellipse-spinner.png create mode 100644 img/menu-button-active.png create mode 100644 img/menu-button-nonactive.png diff --git a/img/ellipse-spinner.png b/img/ellipse-spinner.png new file mode 100644 index 0000000000000000000000000000000000000000..d38d34d7e39e9ca88c588f11868665811b691f22 GIT binary patch literal 1575 zcmV+?2H5$DP)~H2)pb@OP8a>qGwfnCd=1 zF3x+)3H-w%Gs8uGY;af#vwX>q7a)Veq`FBJrCO$1^{i!nEpkmGkY2EWA_Npo7&W>nhUd|Q zwZ?vQiS|6uEE>4NQ~t0E^M%>lR9w zL07~2q!|W|T%d-Aq)B>!X=OMXT)LS+R|AHi2?l~(h=v9WQ8(zBYv^mV&}7jQ1{^-u zpe1$~mhZZ7N+yf$zz15ikfeHt4yyp)pc}uXdJm!n`9Qx-^*4^d7`j3%^`e6ptp=<+ zG;61Nqzw^(6{T7cwqTnYWQ+mytI5t7WLsGL)8?1k_F@dUUc)D(H}fM}^lI8h5E
  • B8Wj&m=gcE!iEiRe!ymCAigrej&QEUe_1%#lwxAAF!h}UvQ$%xE5%6k zFd)8T;fNwGgM0u9g-O#NG^H5X8tD!sBx-v!O%a6ABRp#Fd0hlC;J8PK)Q+y!MGy-T zBJ#}0tGTv1gEST_#CtBQC#nXK;?#hIibW-ZR1Go)2_0L0Q!P?Ca!L|p#p)B~2*UJ2 z1e5B#cvCir1tA%~6bEI4{0u@ep1n}6LF9>N?{?24oshw@GdUIVcRm z?=2x!o;*<);zA5^4npcVV+0{C&RL`q7pH9&Zj#p+Sff8iY6z zgCroNo`eyEI1z(v{S^@;7!sx!;^I*Z@(4oed5R$SAf%oL)*!^iJtGKlk#N}qadB3p zm;{8ZBbnu)7%2M!Le}|LeiQ~_9YU%sb_7Y0(V^wl?0{qBGf&T z%3=3#`B*(s7eQpOECvV7LPVlRQa(`^L1Ywd0TLQ>)XeHPEqnMKBs6O8d6PjFU=#_7 z1sbMWTnnc@f`me2#yEi+c6t3LL8WV3X4BG3MiKw{6+0qPWJP(Y2piaxVg%dfA0jGw zHSSU64K|Y?d%EZ+5TBT%#pG<82qJKF)i07%S7@=^rA-78{!jHS)q4;hkiv9<10c1? zkc%#A4~6M27-UbsYiSH>T`{(NVz6zBDUgZ0|59CpXyjn2rOGGh`s7gAJ=>bLy_hP} zo4ErYaMnVS>K!`l1=DqxL-~)cz|Chgkf6tVWuYs~hN#}_#T)2qu#hyxK$t>T!_gc) zz@E);)TzgE4Cc_)kUnaTfis7$2BkTAfa&J=8f;o=VhUXitXWeiWeQyltx-2njttbq z(ADS~B(v%ko?t+e>{Bs3oClK$J{GUL>k~YG^m7bGlP+53Z5IRve0*^mMF{lKiZK{X zT#~4vzL&Bq1{{5@llQg8wiqz&tiT2H8wqvXBm#}G6=D==Gz~YG#^{j|{Hsx<`1}kS zW3L$K@AX8;=BHSE9vF!#Qsu`OzA5Ayr(m?`4Ka(1709P^2+Km3`L)P387Qag!l@x+ zk(uTa*$o=uuq4QqGk!(3Q{Vy~;iEySNWM3CF^jxEFP#UPKj}&ST6}e^ynfAJ?@Q;r ZY);#N3*K^(1eckt3>sg65Ru*Ey3c@%XPK-`7 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index f58473c..d3b08aa 100644 --- a/index.html +++ b/index.html @@ -83,12 +83,15 @@

    How can I help you today?

    - +
    ChatGPT can make mistakes. Consider checking important information.
    + diff --git a/index.js b/index.js index 31d1627..e759585 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,7 @@ import config from "./apiKey.js"; -const button = document.querySelector("button"); +const chatButton = document.querySelector("#chat-button"); const chatText = document.querySelector("input"); const titleImage = document.querySelector("#title-image"); const title = document.querySelector("#title"); @@ -109,7 +109,7 @@ async function fetchAIResponse(prompt) { Authorization: `Bearer ${config.apikey}`, }, body: JSON.stringify({ - model: "gpt-4", + model: "gpt-3.5-turbo", messages: [ { role: "system", @@ -159,21 +159,21 @@ chatText.addEventListener("input", async (e) => { if (checker === 0) return; if (chatText.value === "") { // console.log(1); - button.innerHTML = ``; - button.style.pointerEvents = "none"; - button.style.userSelect = "none"; - button.disabled = true; + chatButton.innerHTML = ``; + chatButton.style.pointerEvents = "none"; + chatButton.style.userSelect = "none"; + chatButton.disabled = true; } // console.log(1); else { - button.innerHTML = ``; - button.style.pointerEvents = "auto"; - button.style.userSelect = "auto"; - button.disabled = false; + chatButton.innerHTML = ``; + chatButton.style.pointerEvents = "auto"; + chatButton.style.userSelect = "auto"; + chatButton.disabled = false; } }); -button.addEventListener("click", async (e) => { +chatButton.addEventListener("click", async (e) => { e.preventDefault(); if (chatText.value === "") { console.log(1); @@ -190,20 +190,60 @@ button.addEventListener("click", async (e) => { addMessage("나", message); chatText.value = ""; - button.innerHTML = ``; + chatButton.innerHTML = ``; // button.style.pointerEvents = "none"; // button.style.userSelect = "none"; // button.disabled = true; checker = 0; + const tempMessageElement = addTemporaryMessage(); + const aiResponse = await fetchAIResponse(message); // button.innerHTML = `Send`; - button.innerHTML = ``; - button.style.pointerEvents = "none"; - button.style.userSelect = "none"; - button.disabled = true; + chatButton.innerHTML = ``; + chatButton.style.pointerEvents = "none"; + chatButton.style.userSelect = "none"; + chatButton.disabled = true; checker = 1; + // 임시 메시지 요소를 제거하고, 실제 응답으로 메시지 추가 + chatContainer.removeChild(tempMessageElement); addMessage("금쪽이", aiResponse); }); + +const menuButton = document.querySelector("#menu-button"); + +menuButton.addEventListener("mouseover", async (e) => { + e.preventDefault(); + menuButton.innerHTML = ``; +}); + +menuButton.addEventListener("mouseleave", async (e) => { + e.preventDefault(); + menuButton.innerHTML = ``; +}); + +const addTemporaryMessage = () => { + const tempMessageElement = document.createElement("div"); + tempMessageElement.className = "chat gpt-chat"; + const imgElement = document.createElement("img"); + imgElement.src = "./img/gpt4-icon.png"; + imgElement.className = "profile"; + const nameElement = document.createElement("div"); + nameElement.textContent = "ChatGPT"; + nameElement.className = "chat-name"; + const logElement = document.createElement("div"); + logElement.className = "chat-log"; + const spinnerElement = document.createElement("img"); + spinnerElement.src = "./img/ellipse-spinner.png"; // 스피너 이미지 경로를 지정하세요 + spinnerElement.className = "spinner"; + + logElement.appendChild(spinnerElement); + tempMessageElement.appendChild(imgElement); + tempMessageElement.appendChild(nameElement); + tempMessageElement.appendChild(logElement); + + chatContainer.prepend(tempMessageElement); + return tempMessageElement; +}; diff --git a/style.css b/style.css index 6779cda..845f042 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,7 @@ nav { width: 100%; top: 0px; margin-bottom: 4px; - background-color: rgba(255, 255, 255, 0.866); + background-color: rgba(255, 255, 255, 0.918); } ul { @@ -117,7 +117,7 @@ form { justify-content: center; } -button { +#chat-button { border: none; width: 24px; height: 24px; @@ -127,7 +127,7 @@ button { user-select: none; } -.button img { +#chat-button img { width: 24px; height: 24px; margin: 0px; @@ -258,6 +258,11 @@ img { flex-direction: column; justify-content: center; padding-left: 10px; + cursor: pointer; +} + +.section:hover { + background-color: #f1f1f1; } .section-title { @@ -301,3 +306,26 @@ pre { code { font-family: "Consolas", "Monaco", "Courier New", monospace; /* 모노스페이스 폰트 */ } + +#menu-button { + position: fixed; + left: 0px; + top: 45%; + width: 20px; + height: 50px; + cursor: pointer; + z-index: 9999; + border: none; + background-color: white; +} + +.menu-button-icon { + width: 5px; + margin: 0px; +} + +.spinner { + width: 8px; + margin: 0; + padding: 0; +}