Skip to content

Commit b8cf80d

Browse files
whitehorse21whitehorse21
committedJun 12, 2023
first version
0 parents  commit b8cf80d

28 files changed

+3399
-0
lines changed
 

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
/.env
7+
.env
8+
.pnp.js
9+
10+
# testing
11+
/coverage
12+
13+
# next.js
14+
/.next/
15+
/out/
16+
17+
# production
18+
/build
19+
20+
# misc
21+
.DS_Store
22+
*.pem
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
.pnpm-debug.log*
29+
30+
# local env files
31+
.env*.local
32+
33+
# vercel
34+
.vercel
35+
36+
# typescript
37+
*.tsbuildinfo
38+
next-env.d.ts

‎context/DarkContext.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createContext, useState } from "react";
2+
3+
const DarkContext = createContext({});
4+
5+
const DarkProvider = (props: any) => {
6+
const [darkMode, setDarkMode] = useState<boolean>(false);
7+
8+
const toggleDarkMode = () => {
9+
setDarkMode(!darkMode);
10+
console.log(darkMode);
11+
};
12+
13+
return (
14+
<DarkContext.Provider value={{ darkMode, toggleDarkMode }}>
15+
{props.children}
16+
</DarkContext.Provider>
17+
);
18+
};
19+
20+
export { DarkContext, DarkProvider };

‎next.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
}
5+
6+
module.exports = nextConfig

‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "my-project",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@types/node": "18.14.2",
13+
"@types/react": "18.0.28",
14+
"@types/react-dom": "18.0.11",
15+
"eslint": "8.35.0",
16+
"eslint-config-next": "13.2.2",
17+
"eventsource-parser": "^0.1.0",
18+
"next": "13.2.2",
19+
"openai": "^3.1.0",
20+
"react": "18.2.0",
21+
"react-dom": "18.2.0",
22+
"typescript": "4.9.5"
23+
},
24+
"devDependencies": {
25+
"autoprefixer": "^10.4.13",
26+
"postcss": "^8.4.21",
27+
"tailwindcss": "^3.2.7"
28+
}
29+
}

‎pages/_app.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import "@/styles/globals.css";
2+
import type { AppProps } from "next/app";
3+
4+
export default function App({ Component, pageProps }: AppProps) {
5+
return <Component {...pageProps} />;
6+
}

‎pages/_document.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Html, Head, Main, NextScript } from "next/document";
2+
3+
export default function Document() {
4+
return (
5+
<Html lang="en">
6+
<Head />
7+
<body>
8+
<Main />
9+
<NextScript />
10+
</body>
11+
</Html>
12+
);
13+
}

‎pages/api/generate.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { OpenAIStream, OpenAIStreamPayload } from "../../utils/OpenAIStream";
2+
3+
type RequestData = {
4+
messageText: string;
5+
};
6+
7+
8+
if (!process.env.OPENAI_API_KEY) {
9+
throw new Error("Missing env var from OpenAI");
10+
}
11+
12+
export const config = {
13+
runtime: "edge",
14+
};
15+
16+
let message_junk = "";
17+
18+
const handler = async (req: Request): Promise<Response> => {
19+
20+
const { messageText } = (await req.json()) as RequestData;
21+
22+
message_junk += `${messageText} \n` ;
23+
24+
if (!messageText) {
25+
return new Response("No prompt in the request, Please check README.md else please contact via my mail: zhenghu61919@gmail.com", { status: 400 });
26+
}
27+
28+
const payload: OpenAIStreamPayload = {
29+
model: "text-davinci-003",
30+
prompt: message_junk,
31+
temperature: 0.7,
32+
top_p: 1,
33+
frequency_penalty: 0,
34+
presence_penalty: 0,
35+
max_tokens: 1000,
36+
stream: true,
37+
n: 1,
38+
};
39+
40+
const stream = await OpenAIStream(payload);
41+
return new Response(stream);
42+
};
43+
44+
export default handler;

‎pages/container.tsx

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { DarkContext } from "@/context/DarkContext";
2+
import { useState, useEffect, useRef, useContext } from "react";
3+
4+
import Image from "next/image";
5+
6+
import TypeWriter from "./typeWriter";
7+
8+
const Container = () => {
9+
const { darkMode, toggleDarkMode }: any = useContext(DarkContext);
10+
11+
const scrollContainer = useRef(null);
12+
const focus = useRef<any>(null);
13+
14+
const [messageText, setMessageText] = useState("");
15+
16+
const [isLoading, setIsLoading] = useState(false);
17+
18+
const [userChat, setUserChat] = useState<string[]>([]);
19+
const [botChat, setBotChat] = useState<string[]>([]);
20+
21+
const botResponse = async () => {
22+
setIsLoading(true);
23+
const response = await fetch("/api/generate", {
24+
method: "POST",
25+
headers: {
26+
"Content-Type": "application/json",
27+
},
28+
body: JSON.stringify({
29+
messageText,
30+
}),
31+
});
32+
console.log("Edge function returned.");
33+
34+
if (!response.ok) {
35+
throw new Error(response.statusText);
36+
}
37+
38+
// This data is a ReadableStream
39+
const data = response.body;
40+
if (!data) {
41+
return;
42+
}
43+
44+
const reader = data.getReader();
45+
const decoder = new TextDecoder();
46+
let done = false;
47+
48+
let botReply = "";
49+
50+
while (!done) {
51+
const { value, done: doneReading } = await reader.read();
52+
done = doneReading;
53+
const botMessage = decoder.decode(value);
54+
botReply += botMessage;
55+
}
56+
botReply += "\n";
57+
setBotChat([...botChat, botReply]);
58+
setIsLoading(false);
59+
};
60+
61+
const handleScroll = (ref: any) => {
62+
ref.scrollTo({
63+
top: ref.scrollHeight,
64+
left: 0,
65+
behavior: "smooth",
66+
});
67+
};
68+
69+
const sendMessage = () => {
70+
if (isLoading) return;
71+
if (messageText.trim().length !== 0) {
72+
botResponse();
73+
}
74+
setUserChat(
75+
messageText.trim().length === 0 ? userChat : [...userChat, messageText]
76+
);
77+
setMessageText("");
78+
};
79+
80+
const handleEnterKey = (e: any) => {
81+
if (e.key === "Enter" && !e.shiftKey) {
82+
sendMessage();
83+
}
84+
};
85+
86+
useEffect(() => {
87+
if (isLoading === false) {
88+
focus?.current?.focus();
89+
}
90+
}, [isLoading]);
91+
92+
useEffect(() => {
93+
handleScroll(scrollContainer.current);
94+
}, [userChat, botChat]);
95+
96+
return (
97+
<div className={`bg-${darkMode}`}>
98+
<div
99+
className={`flex gap-8 items-center justify-center h-[10vh] relative header-${darkMode}`}
100+
>
101+
<h1
102+
className={`text-${darkMode} text-2xl font-bold text-center py-7`}
103+
>
104+
ChatGPT Demo
105+
</h1>
106+
<div className="absolute right-4" onClick={toggleDarkMode}>
107+
{darkMode ? (
108+
<Image
109+
src="/assets/images/icons/light-sun.svg"
110+
alt="tool"
111+
width={0}
112+
height={0}
113+
className="w-12 h-12 p-2"
114+
/>
115+
) : (
116+
<Image
117+
src="/assets/images/icons/dark-moon.svg"
118+
alt="tool"
119+
width={0}
120+
height={0}
121+
className="w-12 h-12 p-2"
122+
/>
123+
)}
124+
</div>
125+
</div>
126+
<div className={`container-bg-${darkMode}`}>
127+
<div
128+
className="container mx-auto px-12 max-sm:px-6 py-6 overflow-auto h-[80vh] chat-container"
129+
ref={scrollContainer}
130+
>
131+
{userChat.map((ele, key) => {
132+
return (
133+
<div key={`blockchat-${key}`}>
134+
<div
135+
key={`userchat-${key}`}
136+
className="flex flex-col my-2 items-end justify-center"
137+
>
138+
<div
139+
className={`input-user-chat-bg-${darkMode} input-user-chat-color-${darkMode} rounded-2xl px-6 py-2 max-w-[50%] max-lg:max-w-full break-words`}
140+
>
141+
{ele}
142+
</div>
143+
</div>
144+
{botChat[key] && (
145+
<div
146+
key={`botchat-${key}`}
147+
className="flex flex-col my-2 items-start justify-center break-words"
148+
>
149+
<div
150+
className={`input-bot-chat-bg-${darkMode} input-user-chat-color-${darkMode} rounded-2xl px-6 py-2 max-w-[50%] max-lg:max-w-full`}
151+
>
152+
{botChat[key].split("\n").map((ele: any, indkey: any) => {
153+
return <p key={`indkey-${indkey}`}>{ele}</p>;
154+
})}
155+
</div>
156+
</div>
157+
)}
158+
</div>
159+
);
160+
})}
161+
{isLoading && (
162+
<div className="lds-ellipsis">
163+
<div></div>
164+
<div></div>
165+
<div></div>
166+
<div></div>
167+
</div>
168+
)}
169+
</div>
170+
</div>
171+
<div className="container mx-auto px-12 max-sm:px-2 flex justify-center h-[10vh] relative">
172+
{isLoading ? (
173+
<div className="relative w-1/2 items-center max-sm:py-2 max-xl:w-full flex justify-center max-md:flex-col max-md:items-center gap-4">
174+
<textarea
175+
disabled
176+
value={messageText}
177+
onChange={(e) => setMessageText(e.target.value)}
178+
onKeyUp={handleEnterKey}
179+
className={`input-bg-${darkMode} rounded-full outline-none border input-border-${darkMode} input-text-${darkMode} w-full h-14 px-6 py-3 resize-none`}
180+
placeholder="PLEASE TYPE YOUR TEXT HERE ..."
181+
/>
182+
<Image
183+
src="/assets/images/icons/send-message.png"
184+
width={32}
185+
height={32}
186+
className={`absolute right-4 active:translate-y-1 p-1`}
187+
onClick={sendMessage}
188+
alt=""
189+
/>
190+
</div>
191+
) : (
192+
<div className="relative w-1/2 items-center max-sm:py-2 max-xl:w-full flex justify-center max-md:flex-col max-md:items-center gap-4">
193+
<textarea
194+
ref={focus}
195+
value={messageText}
196+
onChange={(e) => setMessageText(e.target.value)}
197+
onKeyUp={handleEnterKey}
198+
className={`input-bg-${darkMode} rounded-full outline-none border input-border-${darkMode} input-text-${darkMode} w-full h-14 px-6 py-3 resize-none`}
199+
placeholder="PLEASE TYPE YOUR TEXT HERE ..."
200+
/>
201+
<Image
202+
src="/assets/images/icons/send-message.png"
203+
width={32}
204+
height={32}
205+
className={`absolute right-4 active:translate-y-1 p-1`}
206+
onClick={sendMessage}
207+
alt=""
208+
/>
209+
</div>
210+
)}
211+
</div>
212+
</div>
213+
);
214+
};
215+
216+
export default Container;

‎pages/index.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Head from "next/head";
2+
3+
import { DarkProvider } from "@/context/DarkContext";
4+
5+
import Container from "./container";
6+
7+
export default function Home() {
8+
return (
9+
<>
10+
<DarkProvider>
11+
<Head>
12+
<title>ChatGPT BOT</title>
13+
<meta name="description" content="Generated by create next app" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1" />
15+
<link rel="icon" href="/favicon.ico" />
16+
</Head>
17+
<main>
18+
<Container />
19+
</main>
20+
</DarkProvider>
21+
</>
22+
);
23+
}

‎pages/typeWriter.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { useState, useEffect } from "react";
2+
3+
const TypeWriter = ({ typeContent }: any) => {
4+
const [typeLetter, setTypeLetter] = useState<string>("");
5+
6+
let i = 0;
7+
8+
const handleTyping = () => {
9+
setTypeLetter(typeContent.substring(0, i));
10+
i++;
11+
};
12+
13+
useEffect(() => {
14+
const interval = setInterval(() => handleTyping(), 200);
15+
return () => clearInterval(interval);
16+
}, []);
17+
18+
return <p>{typeLetter}</p>;
19+
};
20+
21+
export default TypeWriter;

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/assets/images/icons/dark-moon.png

63.7 KB
Loading

‎public/assets/images/icons/dark-moon.svg

+9
Loading

‎public/assets/images/icons/light-sun.png

184 KB
Loading

‎public/assets/images/icons/light-sun.svg

+9
Loading

‎public/assets/images/icons/message-send.svg

+9
Loading

‎public/assets/images/icons/send-message.png

15 KB
Loading

‎public/favicon.ico

25.3 KB
Binary file not shown.

‎public/next.svg

+1
Loading

‎public/thirteen.svg

+1
Loading

‎public/vercel.svg

+1
Loading

‎styles/Home.module.css

+278
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
.main {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 6rem;
7+
min-height: 100vh;
8+
}
9+
10+
.description {
11+
display: inherit;
12+
justify-content: inherit;
13+
align-items: inherit;
14+
font-size: 0.85rem;
15+
max-width: var(--max-width);
16+
width: 100%;
17+
z-index: 2;
18+
font-family: var(--font-mono);
19+
}
20+
21+
.description a {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.5rem;
26+
}
27+
28+
.description p {
29+
position: relative;
30+
margin: 0;
31+
padding: 1rem;
32+
background-color: rgba(var(--callout-rgb), 0.5);
33+
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34+
border-radius: var(--border-radius);
35+
}
36+
37+
.code {
38+
font-weight: 700;
39+
font-family: var(--font-mono);
40+
}
41+
42+
.grid {
43+
display: grid;
44+
grid-template-columns: repeat(4, minmax(25%, auto));
45+
width: var(--max-width);
46+
max-width: 100%;
47+
}
48+
49+
.card {
50+
padding: 1rem 1.2rem;
51+
border-radius: var(--border-radius);
52+
background: rgba(var(--card-rgb), 0);
53+
border: 1px solid rgba(var(--card-border-rgb), 0);
54+
transition: background 200ms, border 200ms;
55+
}
56+
57+
.card span {
58+
display: inline-block;
59+
transition: transform 200ms;
60+
}
61+
62+
.card h2 {
63+
font-weight: 600;
64+
margin-bottom: 0.7rem;
65+
}
66+
67+
.card p {
68+
margin: 0;
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
line-height: 1.5;
72+
max-width: 30ch;
73+
}
74+
75+
.center {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
position: relative;
80+
padding: 4rem 0;
81+
}
82+
83+
.center::before {
84+
background: var(--secondary-glow);
85+
border-radius: 50%;
86+
width: 480px;
87+
height: 360px;
88+
margin-left: -400px;
89+
}
90+
91+
.center::after {
92+
background: var(--primary-glow);
93+
width: 240px;
94+
height: 180px;
95+
z-index: -1;
96+
}
97+
98+
.center::before,
99+
.center::after {
100+
content: "";
101+
left: 50%;
102+
position: absolute;
103+
filter: blur(45px);
104+
transform: translateZ(0);
105+
}
106+
107+
.logo,
108+
.thirteen {
109+
position: relative;
110+
}
111+
112+
.thirteen {
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
width: 75px;
117+
height: 75px;
118+
padding: 25px 10px;
119+
margin-left: 16px;
120+
transform: translateZ(0);
121+
border-radius: var(--border-radius);
122+
overflow: hidden;
123+
box-shadow: 0px 2px 8px -1px #0000001a;
124+
}
125+
126+
.thirteen::before,
127+
.thirteen::after {
128+
content: "";
129+
position: absolute;
130+
z-index: -1;
131+
}
132+
133+
/* Conic Gradient Animation */
134+
.thirteen::before {
135+
animation: 6s rotate linear infinite;
136+
width: 200%;
137+
height: 200%;
138+
background: var(--tile-border);
139+
}
140+
141+
/* Inner Square */
142+
.thirteen::after {
143+
inset: 0;
144+
padding: 1px;
145+
border-radius: var(--border-radius);
146+
background: linear-gradient(
147+
to bottom right,
148+
rgba(var(--tile-start-rgb), 1),
149+
rgba(var(--tile-end-rgb), 1)
150+
);
151+
background-clip: content-box;
152+
}
153+
154+
/* Enable hover only on non-touch devices */
155+
@media (hover: hover) and (pointer: fine) {
156+
.card:hover {
157+
background: rgba(var(--card-rgb), 0.1);
158+
border: 1px solid rgba(var(--card-border-rgb), 0.15);
159+
}
160+
161+
.card:hover span {
162+
transform: translateX(4px);
163+
}
164+
}
165+
166+
@media (prefers-reduced-motion) {
167+
.thirteen::before {
168+
animation: none;
169+
}
170+
171+
.card:hover span {
172+
transform: none;
173+
}
174+
}
175+
176+
/* Mobile */
177+
@media (max-width: 700px) {
178+
.content {
179+
padding: 4rem;
180+
}
181+
182+
.grid {
183+
grid-template-columns: 1fr;
184+
margin-bottom: 120px;
185+
max-width: 320px;
186+
text-align: center;
187+
}
188+
189+
.card {
190+
padding: 1rem 2.5rem;
191+
}
192+
193+
.card h2 {
194+
margin-bottom: 0.5rem;
195+
}
196+
197+
.center {
198+
padding: 8rem 0 6rem;
199+
}
200+
201+
.center::before {
202+
transform: none;
203+
height: 300px;
204+
}
205+
206+
.description {
207+
font-size: 0.8rem;
208+
}
209+
210+
.description a {
211+
padding: 1rem;
212+
}
213+
214+
.description p,
215+
.description div {
216+
display: flex;
217+
justify-content: center;
218+
position: fixed;
219+
width: 100%;
220+
}
221+
222+
.description p {
223+
align-items: center;
224+
inset: 0 0 auto;
225+
padding: 2rem 1rem 1.4rem;
226+
border-radius: 0;
227+
border: none;
228+
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
229+
background: linear-gradient(
230+
to bottom,
231+
rgba(var(--background-start-rgb), 1),
232+
rgba(var(--callout-rgb), 0.5)
233+
);
234+
background-clip: padding-box;
235+
backdrop-filter: blur(24px);
236+
}
237+
238+
.description div {
239+
align-items: flex-end;
240+
pointer-events: none;
241+
inset: auto 0 0;
242+
padding: 2rem;
243+
height: 200px;
244+
background: linear-gradient(
245+
to bottom,
246+
transparent 0%,
247+
rgb(var(--background-end-rgb)) 40%
248+
);
249+
z-index: 1;
250+
}
251+
}
252+
253+
/* Tablet and Smaller Desktop */
254+
@media (min-width: 701px) and (max-width: 1120px) {
255+
.grid {
256+
grid-template-columns: repeat(2, 50%);
257+
}
258+
}
259+
260+
@media (prefers-color-scheme: dark) {
261+
.vercelLogo {
262+
filter: invert(1);
263+
}
264+
265+
.logo,
266+
.thirteen img {
267+
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
268+
}
269+
}
270+
271+
@keyframes rotate {
272+
from {
273+
transform: rotate(360deg);
274+
}
275+
to {
276+
transform: rotate(0deg);
277+
}
278+
}

‎styles/globals.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.header-true {
6+
@apply bg-[#212121];
7+
}
8+
9+
.header-false {
10+
@apply bg-white;
11+
}
12+
13+
.text-true {
14+
@apply text-white;
15+
}
16+
17+
.text-false {
18+
@apply text-sky-400;
19+
}
20+
21+
.bg-true {
22+
@apply bg-[#212121];
23+
}
24+
25+
.bg-false {
26+
@apply bg-sky-100;
27+
}
28+
29+
.container-bg-true {
30+
@apply bg-[#0f0f0f];
31+
}
32+
33+
.container-bg-false {
34+
@apply bg-sky-100;
35+
}
36+
37+
.input-bg-true {
38+
@apply bg-[#212121];
39+
}
40+
41+
.input-bg-false {
42+
@apply bg-sky-50;
43+
}
44+
45+
.input-border-true {
46+
@apply border-gray-300;
47+
}
48+
49+
.input-border-false {
50+
@apply border-sky-300;
51+
}
52+
53+
.input-text-true {
54+
@apply text-white;
55+
}
56+
57+
.input-text-false {
58+
@apply text-sky-900;
59+
}
60+
61+
.button-bg-true {
62+
@apply bg-[#8774e1];
63+
}
64+
65+
.button-bg-false {
66+
@apply bg-sky-500;
67+
}
68+
69+
.input-user-chat-bg-true {
70+
@apply bg-[#8774e1];
71+
}
72+
73+
.input-user-chat-bg-false {
74+
@apply bg-[#efffde];
75+
}
76+
77+
.input-user-chat-color-true {
78+
@apply text-white;
79+
}
80+
81+
.input-user-chat-color-false {
82+
@apply text-black;
83+
}
84+
85+
.input-bot-chat-bg-true {
86+
@apply bg-[#212121];
87+
}
88+
89+
.isLoading-true {
90+
@apply opacity-10;
91+
}
92+
93+
.input-bot-chat-bg-false {
94+
@apply bg-white;
95+
}
96+
97+
.chat-container::-webkit-scrollbar {
98+
display: none;
99+
}
100+
101+
.lds-ellipsis {
102+
display: inline-block;
103+
position: relative;
104+
width: 80px;
105+
height: 80px;
106+
}
107+
.lds-ellipsis div {
108+
position: absolute;
109+
top: 33px;
110+
width: 8px;
111+
height: 8px;
112+
border-radius: 50%;
113+
background: gray;
114+
animation-timing-function: cubic-bezier(0, 1, 1, 0);
115+
}
116+
.lds-ellipsis div:nth-child(1) {
117+
left: 4px;
118+
animation: lds-ellipsis1 0.6s infinite;
119+
}
120+
.lds-ellipsis div:nth-child(2) {
121+
left: 4px;
122+
animation: lds-ellipsis2 0.6s infinite;
123+
}
124+
.lds-ellipsis div:nth-child(3) {
125+
left: 16px;
126+
animation: lds-ellipsis2 0.6s infinite;
127+
}
128+
.lds-ellipsis div:nth-child(4) {
129+
left: 28px;
130+
animation: lds-ellipsis3 0.6s infinite;
131+
}
132+
@keyframes lds-ellipsis1 {
133+
0% {
134+
transform: scale(0);
135+
}
136+
100% {
137+
transform: scale(1);
138+
}
139+
}
140+
@keyframes lds-ellipsis3 {
141+
0% {
142+
transform: scale(1);
143+
}
144+
100% {
145+
transform: scale(0);
146+
}
147+
}
148+
@keyframes lds-ellipsis2 {
149+
0% {
150+
transform: translate(0, 0);
151+
}
152+
100% {
153+
transform: translate(12px, 0);
154+
}
155+
}

‎tailwind.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
"./app/**/*.{js,ts,jsx,tsx}",
5+
"./pages/**/*.{js,ts,jsx,tsx}",
6+
"./components/**/*.{js,ts,jsx,tsx}",
7+
8+
// Or if using `src` directory:
9+
"./src/**/*.{js,ts,jsx,tsx}",
10+
],
11+
theme: {
12+
extend: {},
13+
},
14+
plugins: [],
15+
}

‎tsconfig.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": true,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true,
17+
"paths": {
18+
"@/*": ["./*"]
19+
}
20+
},
21+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
22+
"exclude": ["node_modules"]
23+
}

‎utils/OpenAIStream.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import {
2+
createParser,
3+
ParsedEvent,
4+
ReconnectInterval,
5+
} from "eventsource-parser";
6+
7+
export interface OpenAIStreamPayload {
8+
model: string;
9+
prompt: string;
10+
temperature: number;
11+
top_p: number;
12+
frequency_penalty: number;
13+
presence_penalty: number;
14+
max_tokens: number;
15+
stream: boolean;
16+
n: number;
17+
}
18+
19+
export async function OpenAIStream(payload: OpenAIStreamPayload) {
20+
const encoder = new TextEncoder();
21+
const decoder = new TextDecoder();
22+
23+
let counter = 0;
24+
25+
const res = await fetch("https://api.openai.com/v1/completions", {
26+
headers: {
27+
"Content-Type": "application/json",
28+
Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ""}`,
29+
},
30+
method: "POST",
31+
body: JSON.stringify(payload),
32+
});
33+
34+
const stream = new ReadableStream({
35+
async start(controller) {
36+
// callback
37+
function onParse(event: ParsedEvent | ReconnectInterval) {
38+
if (event.type === "event") {
39+
const data = event.data;
40+
if (data === "[DONE]") {
41+
controller.close();
42+
return;
43+
}
44+
try {
45+
const json = JSON.parse(data);
46+
const text = json.choices[0].text;
47+
if (counter < 2 && (text.match(/\n/) || []).length) {
48+
// this is a prefix character (i.e., "\n\n"), do nothing
49+
return;
50+
}
51+
const queue = encoder.encode(text);
52+
controller.enqueue(queue);
53+
counter++;
54+
} catch (e) {
55+
// maybe parse error
56+
controller.error(e);
57+
}
58+
}
59+
}
60+
61+
// stream response (SSE) from OpenAI may be fragmented into multiple chunks
62+
// this ensures we properly read chunks and invoke an event for each SSE event stream
63+
const parser = createParser(onParse);
64+
// https://web.dev/streams/#asynchronous-iteration
65+
for await (const chunk of res.body as any) {
66+
parser.feed(decoder.decode(chunk));
67+
}
68+
},
69+
});
70+
71+
return stream;
72+
}

‎yarn.lock

+2,401
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.