Upload 22 files

.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=

.gitignore

@@ -0,0 +1,25 @@
+# build output
+dist/
+.vercel/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# Local
+*.local

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

README.md

@@ -1,13 +1,27 @@
----
-title: ChatGPT Turbo Engine Superfast
-emoji: 🐢
-colorFrom: purple
-colorTo: pink
-sdk: streamlit
-sdk_version: 1.17.0
-app_file: app.py
-pinned: false
-license: artistic-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ChatGPT-API Demo
+
+A demo repo based on [OpenAI GPT-3.5 Turbo API](https://platform.openai.com/docs/guides/chat).
+
+## How to build
+
+1. Setup & Install dependencies
+
+    > First, you need [Node.js](https://nodejs.org/) (v18+) installed.
+
+    ```shell
+    npm i
+    ```
+
+2. Make a copy of `.env.example`, then rename it to `.env`
+3. Add your [OpenAI API key](https://platform.openai.com/account/api-keys) to `.env`
+    ```
+    OPENAI_API_KEY=sk-xxx...
+    ```
+4. Run the app
+    ```shell
+    npm run dev
+    ```
+
+## License
+
+MIT

astro.config.mjs

@@ -0,0 +1,23 @@
+import { defineConfig } from 'astro/config'
+import vercel from '@astrojs/vercel/edge'
+import unocss from 'unocss/astro'
+import { presetUno } from 'unocss'
+import presetAttributify from '@unocss/preset-attributify'
+import presetTypography from '@unocss/preset-typography'
+import solidJs from '@astrojs/solid-js'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    unocss({
+      presets: [
+        presetAttributify(),
+        presetUno(),
+        presetTypography(),
+      ]
+    }),
+    solidJs()
+  ],
+  output: 'server',
+  adapter: vercel()
+});

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "novel-gpt",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/solid-js": "^2.0.2",
+    "@astrojs/vercel": "^3.1.3",
+    "@unocss/reset": "^0.50.1",
+    "astro": "^2.0.15",
+    "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.7.0",
+    "katex": "^0.6.0",
+    "markdown-it": "^13.0.1",
+    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-katex": "^2.0.3",
+    "solid-js": "^1.6.11"
+  },
+  "devDependencies": {
+    "@types/markdown-it": "^12.2.3",
+    "@unocss/preset-attributify": "^0.50.1",
+    "@unocss/preset-typography": "^0.50.3",
+    "punycode": "^2.3.0",
+    "unocss": "^0.50.1"
+  }
+}

shims.d.ts

@@ -0,0 +1,16 @@
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+// declare module 'solid-js' {
+//   namespace JSX {
+//     interface HTMLAttributes<T> extends AttributifyAttributes {}
+//   }
+// }
+
+declare global {
+  namespace astroHTML.JSX {
+    interface HTMLAttributes extends AttributifyAttributes { }
+  }
+  namespace JSX {
+    interface HTMLAttributes<T> extends AttributifyAttributes {}
+  }
+}

src/components/Footer.astro

@@ -0,0 +1,18 @@
+<footer op-60>
+  <p mt-6 text-sm text-slate>
+    <span pr-1>Made by</span>
+    <a
+    border-b border-slate border-none hover:border-dashed
+      href="https://ddiu.io" target="_blank"
+    >
+      Diu
+    </a>
+    <span px-1>|</span>
+    <a
+      border-b border-slate border-none hover:border-dashed
+      href="https://github.com/ddiu8081/chatgpt-demo" target="_blank"
+    >
+      Source Code
+    </a>
+  </p>
+</footer>

src/components/Generator.tsx

@@ -0,0 +1,116 @@
+import { createSignal, For, Show } from 'solid-js'
+import MessageItem from './MessageItem'
+import IconClear from './icons/Clear'
+import type { ChatMessage } from '../types'
+
+export default () => {
+  let inputRef: HTMLInputElement
+  const [messageList, setMessageList] = createSignal<ChatMessage[]>([])
+  const [currentAssistantMessage, setCurrentAssistantMessage] = createSignal('')
+  const [loading, setLoading] = createSignal(false)
+
+  const handleButtonClick = async () => {
+    const inputValue = inputRef.value
+    if (!inputValue) {
+      return
+    }
+    setLoading(true)
+    // @ts-ignore
+    if (window?.umami) umami.trackEvent('chat_generate')
+    inputRef.value = ''
+    setMessageList([
+      ...messageList(),
+      {
+        role: 'user',
+        content: inputValue,
+      },
+    ])
+
+    const response = await fetch('/api/generate', {
+      method: 'POST',
+      body: JSON.stringify({
+        messages: messageList(),
+      }),
+    })
+    if (!response.ok) {
+      throw new Error(response.statusText)
+    }
+    const data = response.body
+    if (!data) {
+      throw new Error('No data')
+    }
+    const reader = data.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let done = false
+
+    while (!done) {
+      const { value, done: readerDone } = await reader.read()
+      if (value) {
+        let char = decoder.decode(value)
+        if (char === '\n' && currentAssistantMessage().endsWith('\n')) {
+          continue
+        }
+        if (char) {
+          setCurrentAssistantMessage(currentAssistantMessage() + char)
+        }
+      }
+      done = readerDone
+    }
+    setMessageList([
+      ...messageList(),
+      {
+        role: 'assistant',
+        content: currentAssistantMessage(),
+      },
+    ])
+    setCurrentAssistantMessage('')
+    setLoading(false)
+  }
+
+  const clear = () => {
+    inputRef.value = ''
+    setMessageList([])
+    setCurrentAssistantMessage('')
+  }
+
+  return (
+    <div my-6>
+      <For each={messageList()}>{(message) => <MessageItem role={message.role} message={message.content} />}</For>
+      { currentAssistantMessage() && <MessageItem role="assistant" message={currentAssistantMessage} /> }
+      <Show when={!loading()} fallback={() => <div class="h-12 my-4 flex items-center justify-center bg-slate bg-op-15 text-slate rounded-sm">AI is thinking...</div>}>
+        <div class="my-4 flex items-center gap-2">
+          <input
+            ref={inputRef!}
+            type="text"
+            id="input"
+            placeholder="Enter something..."
+            autocomplete='off'
+            autofocus
+            disabled={loading()}
+            onKeyDown={(e) => {
+              e.key === 'Enter' && !e.isComposing && handleButtonClick()
+            }}
+            w-full
+            px-4
+            h-12
+            text-slate
+            rounded-sm
+            bg-slate
+            bg-op-15
+            focus:bg-op-20
+            focus:ring-0
+            focus:outline-none
+            placeholder:text-slate-400
+            placeholder:op-30
+          />
+          <button onClick={handleButtonClick} disabled={loading()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 text-slate rounded-sm>
+            Send
+          </button>
+          <button title='Clear' onClick={clear} disabled={loading()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 text-slate rounded-sm>
+            <IconClear />
+          </button>
+        </div>
+      </Show>
+    </div>
+  )
+}

src/components/Header.astro

@@ -0,0 +1,12 @@
+---
+import Logo from './Logo.astro'
+---
+
+<header>
+  <Logo />
+  <div class="flex items-center mt-2">
+    <span class="text-2xl text-slate font-extrabold mr-1">ChatGPT</span>
+    <span class="text-2xl text-transparent font-extrabold bg-clip-text bg-gradient-to-r from-sky-400 to-emerald-600">Demo</span>
+  </div>
+  <p mt-1 text-slate op-60>Based on OpenAI API (gpt-3.5-turbo).</p>
+</header>

src/components/Logo.astro

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 32 32"><g fill="none"><path fill="#F8312F" d="M5 3.5a1.5 1.5 0 0 1-1 1.415V12l2.16 5.487L4 23c-1.1 0-2-.9-2-1.998v-7.004a2 2 0 0 1 1-1.728V4.915A1.5 1.5 0 1 1 5 3.5Zm25.05.05c0 .681-.44 1.26-1.05 1.468V12.2c.597.347 1 .994 1 1.73v7.01c0 1.1-.9 2-2 2l-2.94-5.68L28 11.93V5.018a1.55 1.55 0 1 1 2.05-1.468Z"/><path fill="#FFB02E" d="M11 4.5A1.5 1.5 0 0 1 12.5 3h7a1.5 1.5 0 0 1 .43 2.938c-.277.082-.57.104-.847.186l-3.053.904l-3.12-.908c-.272-.08-.56-.1-.832-.18A1.5 1.5 0 0 1 11 4.5Z"/><path fill="#CDC4D6" d="M22.05 30H9.95C6.66 30 4 27.34 4 24.05V12.03C4 8.7 6.7 6 10.03 6h11.95C25.3 6 28 8.7 28 12.03v12.03c0 3.28-2.66 5.94-5.95 5.94Z"/><path fill="#212121" d="M9.247 18.5h13.506c2.33 0 4.247-1.919 4.247-4.25A4.257 4.257 0 0 0 22.753 10H9.247A4.257 4.257 0 0 0 5 14.25a4.257 4.257 0 0 0 4.247 4.25Zm4.225 7.5h5.056C19.34 26 20 25.326 20 24.5s-.66-1.5-1.472-1.5h-5.056C12.66 23 12 23.674 12 24.5s.66 1.5 1.472 1.5Z"/><path fill="#00A6ED" d="M10.25 12C9.56 12 9 12.56 9 13.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5c0-.69-.56-1.25-1.25-1.25Zm11.5 0c-.69 0-1.25.56-1.25 1.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5c0-.69-.56-1.25-1.25-1.25Z"/></g></svg>

src/components/MessageItem.tsx

@@ -0,0 +1,35 @@
+import type { Accessor } from 'solid-js'
+import type { ChatMessage } from '../types'
+import MarkdownIt from 'markdown-it'
+// @ts-ignore
+import mdKatex from 'markdown-it-katex'
+import mdHighlight from 'markdown-it-highlightjs'
+
+interface Props {
+  role: ChatMessage['role']
+  message: Accessor<string> | string
+}
+
+export default ({ role, message }: Props) => {
+  const roleClass = {
+    system: 'bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300',
+    user: 'bg-gradient-to-r from-purple-400 to-yellow-400',
+    assistant: 'bg-gradient-to-r from-yellow-200 via-green-200 to-green-300',
+  }
+  const htmlString = () => {
+    const md = MarkdownIt().use(mdKatex).use(mdHighlight)
+
+    if (typeof message === 'function') {
+      return md.render(message())
+    } else if (typeof message === 'string') {
+      return md.render(message)
+    }
+    return ''
+  }
+  return (
+    <div class="flex py-2 gap-3 -mx-4 px-4 rounded-lg transition-colors md:hover:bg-slate/3" class:op-75={ role === 'user' }>
+      <div class={ `shrink-0 w-7 h-7 mt-4 rounded-full op-80 ${ roleClass[role] }` }></div>
+      <div class="message prose text-slate break-words overflow-hidden" innerHTML={htmlString()} />
+    </div>
+  )
+}

src/components/icons/Clear.tsx

@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M8 20v-5h2v5h9v-7H5v7h3zm-4-9h16V8h-6V4h-4v4H4v3zM3 21v-8H2V7a1 1 0 0 1 1-1h5V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h5a1 1 0 0 1 1 1v6h-1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"></path></svg>
+  )
+}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,34 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+		<script async defer data-website-id="918699fd-0704-408b-bda3-3f28c1bd9d1b" src="https://stats.ddiu.io/app.js"></script>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	html {
+		font-family: system-ui, sans-serif;
+		background-color: #171921;
+		color: #ffffff;
+	}
+	main {
+		max-width: 70ch;
+		margin: 0 auto;
+		padding: 6rem 2rem 4rem;
+	}
+</style>

src/message.css

@@ -0,0 +1,26 @@
+.message pre {
+  background-color: #64748b10;
+  font-size: 0.8rem;
+  padding: 0.4rem 1rem;
+}
+
+.message .hljs {
+  background-color: transparent;
+}
+
+.message table {
+  font-size: 0.8em;
+}
+
+.message table thead tr {
+  background-color: #64748b40;
+  text-align: left;
+}
+
+.message table th, .message table td {
+  padding: 0.6rem 1rem;
+}
+
+.message table tbody tr:last-of-type {
+  border-bottom: 2px solid #64748b40;
+}

src/pages/api/generate.ts

@@ -0,0 +1,67 @@
+import type { APIRoute } from 'astro'
+import { createParser, ParsedEvent, ReconnectInterval } from 'eventsource-parser'
+
+const apiKey = import.meta.env.OPENAI_API_KEY
+
+export const post: APIRoute = async (context) => {
+  const body = await context.request.json()
+  const messages = body.messages
+  const encoder = new TextEncoder()
+  const decoder = new TextDecoder()
+
+  if (!messages) {
+    return new Response('No input text')
+  }
+
+  const completion = await fetch('https://api.openai.com/v1/chat/completions', {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${apiKey}`,
+    },
+    method: 'POST',
+    body: JSON.stringify({
+      model: 'gpt-3.5-turbo',
+      messages,
+      temperature: 0.6,
+      stream: true,
+    }),
+  })
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const streamParser = (event: ParsedEvent | ReconnectInterval) => {
+        if (event.type === 'event') {
+          const data = event.data
+          if (data === '[DONE]') {
+            controller.close()
+            return
+          }
+          try {
+            // response = {
+            //   id: 'chatcmpl-6pULPSegWhFgi0XQ1DtgA3zTa1WR6',
+            //   object: 'chat.completion.chunk',
+            //   created: 1677729391,
+            //   model: 'gpt-3.5-turbo-0301',
+            //   choices: [
+            //     { delta: { content: '你' }, index: 0, finish_reason: null }
+            //   ],
+            // }
+            const json = JSON.parse(data)
+            const text = json.choices[0].delta?.content            
+            const queue = encoder.encode(text)
+            controller.enqueue(queue)
+          } catch (e) {
+            controller.error(e)
+          }
+        }
+      }
+
+      const parser = createParser(streamParser)
+      for await (const chunk of completion.body as any) {
+        parser.feed(decoder.decode(chunk))
+      }
+    },
+  })
+
+  return new Response(stream)
+}

src/pages/index.astro

@@ -0,0 +1,17 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+import Generator from '../components/Generator'
+import '../message.css'
+import 'katex/dist/katex.min.css'
+import 'highlight.js/styles/atom-one-dark.css'
+---
+
+<Layout title="ChatGPT API Demo">
+  <main>
+    <Header />
+    <Generator client:load />
+    <Footer />
+  </main>
+</Layout>

src/types.ts

@@ -0,0 +1,4 @@
+export interface ChatMessage {
+  role: 'system' | 'user' | 'assistant'
+  content: string
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}