├── LICENSE
├── README.md
├── assets
    └── img
    │   ├── cleaning_services.svg
    │   └── menu.svg
├── functions
    └── api
    │   └── completions.ts
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Siyu Long
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # chatgpt-api-frontend
 2 | Frontend of ChatGPT API, with an optional Cloudflare Pages Functions backend to proxy requests and store tokens.
 3 | 
 4 | ## Features
 5 | - [x] Chat with gpt-3.5-turbo model
 6 | - [x] Stream HTTP responses
 7 | - [x] Markdown support
 8 | - [x] Code highlighting
 9 | - [x] Save chat history
10 | - [x] Store token in backend or require user to provide it
11 | 
12 | ## Usage
13 | 
14 | Open `index.html`. That's it!
15 | 


--------------------------------------------------------------------------------
/assets/img/cleaning_services.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path style="fill:#fff" d="M120 1016V726q0-78.85 56-134.425Q232 536 310 536h60V196q0-24.75 17.625-42.375T430 136h100q24.75 0 42.375 17.625T590 196v340h60q78.85 0 134.425 55.575Q840 647.15 840 726v290H120Zm60-60h105V826q0-12.75 9-21.375T315.5 796q12.5 0 21 8.625T345 826v130h105V826q0-12.75 9-21.375T480.5 796q12.5 0 21 8.625T510 826v130h105V826q0-12.75 9-21.375T645.5 796q12.5 0 21 8.625T675 826v130h105V726q0-54.167-37.917-92.083Q704.167 596 650 596H310q-54.167 0-92.083 37.917Q180 671.833 180 726v230Zm350-420V196H430v340h100Z"/></svg>
2 | 


--------------------------------------------------------------------------------
/assets/img/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path style="fill:#fff" d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg>
2 | 


--------------------------------------------------------------------------------
/functions/api/completions.ts:
--------------------------------------------------------------------------------
 1 | export async function onRequestPost(context) {
 2 |   const { request, env } = context;
 3 |   const token =
 4 |     (request.headers.get("Authorization") || "").replace("Bearer ", "") ||
 5 |     env.OPENAI_API_KEY;
 6 | 
 7 |   return fetch(env.OPENAI_API_URL, {
 8 |     method: "POST",
 9 |     headers: {
10 |       Authorization: `Bearer ${token}`,
11 |       "Content-Type": "application/json",
12 |     },
13 |     body: request.body,
14 |   });
15 | }
16 | 
17 | export async function onRequestOptions(context) {
18 |   const { env } = context;
19 |   if (!env.OPENAI_API_URL) return new Response("Not found", { status: 404 });
20 |   const tokenProvided = env.OPENAI_API_KEY;
21 |   const headers = {
22 |     "access-control-allow-origin": "*",
23 |     "access-control-allow-methods": "POST",
24 |     "access-control-allow-headers": "content-type",
25 |   };
26 |   if (!tokenProvided)
27 |     headers["access-control-allow-headers"] += ", authorization";
28 |   return new Response(null, { headers });
29 | }
30 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="description" content="ChatGPT API Demo" />
  6 |     <meta name="viewport" content="width=device-width, height=device-height" />
  7 |     <title>OpenAI Chat</title>
  8 |     <style>
  9 |       * {
 10 |         box-sizing: border-box;
 11 |       }
 12 |       html,
 13 |       body,
 14 |       #app {
 15 |         height: 100%;
 16 |       }
 17 |       body {
 18 |         margin: 0;
 19 |         font-family: -apple-system, "system-ui", "Segoe UI Adjusted", "Segoe UI",
 20 |           "Liberation Sans", sans-serif;
 21 |       }
 22 |       pre {
 23 |         overflow-x: auto;
 24 |         border-radius: 6px;
 25 |       }
 26 |       button {
 27 |         border: none;
 28 |         background-color: transparent;
 29 |         color: inherit;
 30 |         padding: 0;
 31 |         cursor: pointer;
 32 |       }
 33 |       ul {
 34 |         list-style: none;
 35 |         padding: 0;
 36 |         margin: 0;
 37 |       }
 38 |       #app {
 39 |         display: flex;
 40 |         flex-direction: column;
 41 |       }
 42 |       header {
 43 |         position: relative;
 44 |         width: 100%;
 45 |         height: 48px;
 46 |         flex-shrink: 0;
 47 |         display: flex;
 48 |         justify-content: center;
 49 |         align-items: center;
 50 |         background-color: #333;
 51 |         color: white;
 52 |       }
 53 |       header > button {
 54 |         position: absolute;
 55 |         padding: 12px;
 56 |       }
 57 |       button.menu {
 58 |         left: 0;
 59 |       }
 60 |       button.clear {
 61 |         right: 0;
 62 |       }
 63 |       .hidden {
 64 |         display: none;
 65 |       }
 66 |       aside {
 67 |         position: fixed;
 68 |         top: 0;
 69 |         width: 100%;
 70 |         height: 100%;
 71 |         z-index: 1;
 72 |         display: flex;
 73 |       }
 74 |       .sidebar-container {
 75 |         background-color: #333;
 76 |         color: white;
 77 |         width: 300px;
 78 |         overflow-y: auto;
 79 |       }
 80 |       .sidebar-modal {
 81 |         flex: 1 0;
 82 |         min-width: 64px;
 83 |         background-color: rgba(0, 0, 0, 0.3);
 84 |       }
 85 |       li > button {
 86 |         width: 100%;
 87 |         height: 48px;
 88 |         text-align: left;
 89 |         padding: 0 16px;
 90 |         transition: background-color 0.2s;
 91 |       }
 92 |       li > button:hover {
 93 |         background-color: rgba(255, 255, 255, 0.1);
 94 |       }
 95 |       main {
 96 |         flex-grow: 1;
 97 |         overflow-y: auto;
 98 |       }
 99 |       .chat-container {
100 |         display: flex;
101 |         flex-direction: column;
102 |         width: 100%;
103 |         max-width: 768px;
104 |         margin: 0 auto;
105 |         overflow-wrap: break-word;
106 |       }
107 |       .chat-container .message {
108 |         padding: 2px 16px;
109 |       }
110 |       .chat-container .assistant {
111 |         background-color: #f0f0f0;
112 |       }
113 |       footer {
114 |         width: 100%;
115 |         padding: 8px;
116 |         display: flex;
117 |         justify-content: center;
118 |         border-top: 1px solid rgba(0, 0, 0, 0.1);
119 |       }
120 |       #input-box {
121 |         width: 100%;
122 |         max-width: 768px;
123 |         padding: 8px;
124 |         border-width: 1px;
125 |         border-color: rgba(0, 0, 0, 0.1);
126 |         border-radius: 6px;
127 |         box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
128 |       }
129 |     </style>
130 |   </head>
131 |   <body>
132 |     <div id="app"></div>
133 |     <script
134 |       src="https://unpkg.com/react@18/umd/react.production.min.js"
135 |       crossorigin
136 |     ></script>
137 |     <script
138 |       src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
139 |       crossorigin
140 |     ></script>
141 |     <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
142 |     <link
143 |       href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.min.css"
144 |       rel="stylesheet"
145 |     />
146 |     <script
147 |       src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"
148 |       integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA=="
149 |       crossorigin="anonymous"
150 |       referrerpolicy="no-referrer"
151 |     ></script>
152 |     <script type="module">
153 |       function getToken() {
154 |         // Try localStorage first
155 |         let token = localStorage.getItem("openai-token");
156 |         if (token) return token;
157 | 
158 |         token = prompt("Please enter your OpenAI API key");
159 |         if (token) {
160 |           localStorage.setItem("openai-token", token);
161 |           return token;
162 |         }
163 |       }
164 | 
165 |       async function getApiUrl() {
166 |         if (getApiUrl.url) return getApiUrl.url;
167 |         try {
168 |           const response = await fetch("/api/completions", {
169 |             method: "OPTIONS",
170 |           });
171 |           if (response.status !== 200) throw new Error();
172 |           getApiUrl.url = "/api/completions";
173 |           const corsHeaders = (
174 |             response.headers.get("Access-Control-Allow-Headers") || ""
175 |           ).toLowerCase();
176 |           getApiUrl.tokenRequired = corsHeaders.includes("authorization");
177 |         } catch (e) {
178 |           getApiUrl.url = "https://api.openai.com/v1/chat/completions";
179 |           getApiUrl.tokenRequired = true;
180 |         }
181 |         return getApiUrl.url;
182 |       }
183 | 
184 |       async function complete(messages, token, progressCallback) {
185 |         const headers = { "Content-Type": "application/json" };
186 |         if (getApiUrl.tokenRequired) headers.Authorization = `Bearer ${token}`;
187 |         const response = await fetch(await getApiUrl(), {
188 |           method: "POST",
189 |           headers: headers,
190 |           body: JSON.stringify({
191 |             model: "gpt-3.5-turbo",
192 |             messages: messages,
193 |             stream: true,
194 |           }),
195 |         });
196 | 
197 |         if (response.status !== 200) {
198 |           throw new Error(await response.text());
199 |         }
200 | 
201 |         const reader = response.body.getReader();
202 |         let responseObj = {};
203 |         for (;;) {
204 |           const { done, value } = await reader.read();
205 |           if (done) break;
206 |           const lines = new TextDecoder("utf-8").decode(value).split("\n");
207 |           for (const line of lines) {
208 |             if (line.startsWith("data: ")) {
209 |               if (line.includes("[DONE]")) return responseObj;
210 |               try {
211 |                 const data = JSON.parse(line.slice(6));
212 |                 const delta = data.choices[0].delta;
213 |                 for (const key in delta) {
214 |                   if (!(key in responseObj)) responseObj[key] = delta[key];
215 |                   else responseObj[key] += delta[key];
216 |                   progressCallback(responseObj);
217 |                 }
218 |               } catch (e) {
219 |                 console.log("Error parsing line:", line);
220 |               }
221 |             }
222 |           }
223 |         }
224 |         return responseObj;
225 |       }
226 | 
227 |       var md = window.markdownit();
228 | 
229 |       function ChatContainer({ messages }) {
230 |         const ref = React.useRef(null);
231 |         React.useEffect(() => {
232 |           // Highlight code blocks but skip ones that are already highlighted
233 |           ref.current
234 |             .querySelectorAll("pre code:not(.hljs)")
235 |             .forEach((node) => {
236 |               hljs.highlightElement(node);
237 |             });
238 | 
239 |           // Highlight code blocks in the last message
240 |           const last = ref.current.lastElementChild;
241 |           for (const node of last ? last.querySelectorAll("pre code") : []) {
242 |             node.textContent = node.innerText;
243 |             hljs.highlightElement(node);
244 |           }
245 | 
246 |           // Scroll to bottom
247 |           const main = ref.current.parentElement;
248 |           main.scrollTop = main.scrollHeight;
249 |         });
250 | 
251 |         return React.createElement(
252 |           "div",
253 |           { ref, className: "chat-container" },
254 |           messages.map((message, index) => {
255 |             return React.createElement("div", {
256 |               className: [message.role, "message"].join(" "),
257 |               key: index,
258 |               dangerouslySetInnerHTML: {
259 |                 __html: md.render(message.content || ""),
260 |               },
261 |             });
262 |           })
263 |         );
264 |       }
265 | 
266 |       export function Sidebar({
267 |         messages,
268 |         onMessagesChange,
269 |         onModalClick,
270 |         onClearClick,
271 |         onSettingsClick,
272 |       }) {
273 |         const initConversations = JSON.parse(
274 |           localStorage.getItem("conversations") || "[]"
275 |         );
276 |         const [conversations, setConversations] =
277 |           React.useState(initConversations);
278 |         const [currentConversation, setCurrentConversation] = React.useState(
279 |           conversations[0]
280 |         );
281 |         const currentConversationRef = React.useRef(currentConversation);
282 | 
283 |         React.useEffect(() => {
284 |           if (!conversations.length) localStorage.removeItem("conversations");
285 |           else
286 |             localStorage.setItem(
287 |               "conversations",
288 |               JSON.stringify(conversations)
289 |             );
290 |         }, [conversations]);
291 | 
292 |         React.useEffect(() => {
293 |           currentConversationRef.current = currentConversation;
294 |           onMessagesChange(currentConversation?.messages || []);
295 |         }, [currentConversation, onMessagesChange]);
296 | 
297 |         React.useEffect(() => {
298 |           if (!messages.length && !currentConversationRef.current) return;
299 | 
300 |           if (!currentConversationRef.current) {
301 |             const newCoversation = {
302 |               id: crypto.getRandomValues(new Uint32Array(1))[0],
303 |               title: messages[0].content.split("\n")[0].slice(0, 20),
304 |               messages,
305 |             };
306 |             setConversations([newCoversation, ...conversations]);
307 |             setCurrentConversation(newCoversation);
308 |           } else if (currentConversationRef.current.messages !== messages) {
309 |             currentConversationRef.current.messages = messages;
310 |             localStorage.setItem(
311 |               "conversations",
312 |               JSON.stringify(conversations)
313 |             );
314 |           }
315 |         }, [messages]);
316 | 
317 |         return [
318 |           React.createElement(
319 |             "div",
320 |             { key: "sidebar-container", className: "sidebar-container" },
321 |             [
322 |               React.createElement("ul", { key: "list" }, [
323 |                 React.createElement("li", { key: "new" }, [
324 |                   React.createElement(
325 |                     "button",
326 |                     {
327 |                       key: "new",
328 |                       onClick: () => setCurrentConversation(null),
329 |                     },
330 |                     "New Chat"
331 |                   ),
332 |                 ]),
333 |                 conversations.map((conversation, index) => {
334 |                   return React.createElement("li", { key: index }, [
335 |                     React.createElement(
336 |                       "button",
337 |                       {
338 |                         key: conversation.id,
339 |                         onClick: () => {
340 |                           setCurrentConversation(conversation);
341 |                         },
342 |                         onContextMenu: (ev) => {
343 |                           ev.preventDefault();
344 |                           setConversations(
345 |                             conversations.filter((c) => c !== conversation)
346 |                           );
347 |                           if (currentConversation === conversation)
348 |                             setCurrentConversation(null);
349 |                         },
350 |                       },
351 |                       conversation.title
352 |                     ),
353 |                   ]);
354 |                 }),
355 |                 React.createElement("li", { key: "clear" }, [
356 |                   React.createElement(
357 |                     "button",
358 |                     {
359 |                       key: "clear",
360 |                       onClick: () => {
361 |                         setConversations([]);
362 |                         setCurrentConversation(null);
363 |                         onMessagesChange([]);
364 |                         onModalClick();
365 |                       },
366 |                     },
367 |                     "Clear Conversations"
368 |                   ),
369 |                 ]),
370 |                 React.createElement("li", { key: "settings" }, [
371 |                   React.createElement(
372 |                     "button",
373 |                     {
374 |                       key: "settings",
375 |                       onClick: onSettingsClick,
376 |                     },
377 |                     "Settings"
378 |                   ),
379 |                 ]),
380 |               ]),
381 |             ]
382 |           ),
383 |           React.createElement("div", {
384 |             key: "sidebar-modal",
385 |             className: "sidebar-modal",
386 |             onClick: onModalClick,
387 |           }),
388 |         ];
389 |       }
390 | 
391 |       export function App() {
392 |         let token = null;
393 |         getApiUrl().then(() => {
394 |           if (getApiUrl.tokenRequired) token = getToken();
395 |         });
396 | 
397 |         const [messages, setMessages] = React.useState([]);
398 |         const [editingMessage, setEditingMessage] = React.useState(null);
399 | 
400 |         const [showSidebar, setShowSidebar] = React.useState(false);
401 | 
402 |         return [
403 |           React.createElement("header", { key: "header" }, [
404 |             React.createElement("span", { key: "title" }, "OpenAI Chat"),
405 |             React.createElement(
406 |               "button",
407 |               {
408 |                 key: "menu",
409 |                 onClick: () => {
410 |                   setShowSidebar(!showSidebar);
411 |                 },
412 |                 className: "menu",
413 |               },
414 |               React.createElement("img", {
415 |                 src: "/assets/img/menu.svg",
416 |                 width: "24",
417 |                 height: "24",
418 |                 alt: "Menu",
419 |               })
420 |             ),
421 |             React.createElement(
422 |               "button",
423 |               {
424 |                 key: "clear",
425 |                 onClick: () => {
426 |                   setMessages([]);
427 |                 },
428 |                 className: "clear",
429 |               },
430 |               React.createElement("img", {
431 |                 src: "/assets/img/cleaning_services.svg",
432 |                 width: "24",
433 |                 height: "24",
434 |                 alt: "Clear",
435 |               })
436 |             ),
437 |           ]),
438 | 
439 |           React.createElement(
440 |             "aside",
441 |             {
442 |               key: "sidebar",
443 |               className: showSidebar ? "sidebar" : "sidebar hidden",
444 |             },
445 | 
446 |             React.createElement(Sidebar, {
447 |               key: "sidebar",
448 |               messages,
449 |               onMessagesChange: setMessages,
450 | 
451 |               onModalClick: () => {
452 |                 setShowSidebar(false);
453 |               },
454 |             })
455 |           ),
456 | 
457 |           React.createElement(
458 |             "main",
459 |             { key: "main" },
460 |             React.createElement(ChatContainer, {
461 |               messages: [...messages, editingMessage].filter((m) => m),
462 |               key: "chat-container",
463 |             })
464 |           ),
465 | 
466 |           React.createElement(
467 |             "footer",
468 |             { key: "footer" },
469 |             React.createElement("input", {
470 |               id: "input-box",
471 |               type: "text",
472 |               "aria-label": "Chat with AI",
473 |               onKeyUp: async (ev) => {
474 |                 if (ev.key === "Enter") {
475 |                   if (
476 |                     ev.target.value.length === 0 ||
477 |                     ev.target.value.length >= 4096
478 |                   )
479 |                     return;
480 |                   const message = ev.target.value;
481 |                   ev.target.value = "";
482 |                   ev.target.blur();
483 |                   const userMessages = [
484 |                     ...messages,
485 |                     { role: "user", content: message },
486 |                   ];
487 |                   setMessages(userMessages);
488 |                   try {
489 |                     const completion = await complete(
490 |                       userMessages,
491 |                       token,
492 |                       (message) => setEditingMessage({ ...message })
493 |                     );
494 |                     setMessages((messages) => [...messages, completion]);
495 |                   } catch (error) {
496 |                     console.log(error.message);
497 |                     return;
498 |                   } finally {
499 |                     setEditingMessage(null);
500 |                   }
501 |                 }
502 |               },
503 |             })
504 |           ),
505 |         ];
506 |       }
507 | 
508 |       const rootNode = document.getElementById("app");
509 |       const root = ReactDOM.createRoot(rootNode);
510 |       root.render(React.createElement(App));
511 |     </script>
512 |   </body>
513 | </html>
514 | 


--------------------------------------------------------------------------------