Enable vercel one click deployment (#10)

app/Dockerfile → Dockerfile

@@ -1,3 +1,5 @@
+# This Dockerfile is generated based on sample in the following document
+# https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 FROM node:18-alpine AS base
 
 # Install dependencies only when needed

README.md

@@ -1,16 +1,64 @@
 # GPT Lite
 
-A lightweight version of ChatGPT UI. Support both Open AI and Azure Open AI accounts
+English | [简体中文](./README.zh-CN.md)
 
-![demo](demo.jpg)
+GPT Lite is a web application that provides a fast ChatGPT user interface. It is built on top of Next.js and AntD. The app supports both Open AI and Azure Open AI accounts.
 
-# How to run locally
+Some example use cases for GPT Lite include:
 
-1. Clone the repo
-2. Install dependencies with `npm install`
-3. Run the app with `npm run dev`
-4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- The free version ChatGPT site The web version is prone to disconnecting and requires refreshing. The Plus subscription at 20 USD/month may not be cost-effective for some users, deploy a customized webchat UI with API integration is a more economical option.
+- Deploy a customized chatgpt web app to exploring OpenAI's ChatGPT completion API.
+- Create a private web chatbot using ChatGPT for exclusive use among friends without sharing api key.
+- Learn developing web applications using OpenAI's API
 
-# How to deploy
+![demo](./docs/images/demo.jpg)
 
-To be updated
+## Prerequisites
+
+To use GPT Lite, you must have either an OpenAI account or an Azure Account 
+
+## Running locally
+
+1. Ensure that NodeJS 18 is installed on your system.
+2. Clone the repository in your terminal.
+3. Install dependencies by running `npm install`.
+4. Verify that you have set the `OPENAI_API_KEY` environment variable correctly.
+5. Start the application with `npm run dev`.
+6. Open [http://localhost:3000](http://localhost:3000) in your web browser.
+
+## Deploy with Docker
+
+1. Clone the repository and go to the `app` subdirectory in your terminal.
+2. Update the `OPENAI_API_KEY` environment variables to the `docker-compose.yml` file.
+3. Build the application using `docker-compose build .`
+4. Start the application by running `docker-compose up -d`.
+
+## One click deploy on Vercel
+
+To easily connect GPT Lite to Vercel, simply click the button below.
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblrchen%2Fgptlite&env=OPENAI_API_KEY&project-name=gptlite&framework=nextjs&repository-name=gptlite)
+
+## Environment Variables
+
+The following environments are specific to OpenAI.
+
+| Name                | Description                                                                                                                      | Default Value         |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| OPENAI_API_BASE_URL | Use this only if you intend to use a reserved proxy for `api.openai.com`                                                         | `https://api.openai.com` |
+| OPENAI_API_KEY      | To obtain the secret key string for OpenAI, please visit the [OpenAI API](https://platform.openai.com/account/api-keys) website. |                       |
+
+The following environments are specific to Azure OpenAI.
+
+| Name                        | Description                                              |
+| --------------------------- | -------------------------------------------------------- |
+| AZURE_OPENAI_API_BASE_URL   | Endpoint, example format:`https://xxx.openai.azure.com` |
+| AZURE_OPENAI_API_KEY        | Key                                                      |
+| AZURE_OPENAI_API_DEPLOYMENT | Model deployment name                                    |
+
+## Contribution
+
+Welcome PRs of any size.
+
+# Disclaimers
+
+This code is intended solely for demonstration and testing purposes.

README.zh-CN.md

@@ -0,0 +1,64 @@
+# ChatGPT-API Demo
+
+[English](./README.md) | 简体中文
+
+GPT Lite是一个ChatGPT UI的第三方页面，使用Next.js和AntD实现，支持Open AI和Azure Open AI账户。
+
+下面是一些GPT Lite的用途：
+- 虽然ChatGPT有官方网站，但是免费版非常容易断开连接并需要连续刷新，20美元/月的Plus订阅又很不划算，部署集成API的第三方UI程序是更经济的选择。
+- 部署一个定制化ChatGPT程序以探索OpenAI's ChatGPT来研究ChatGPT的completion API，prompt提示词等。
+- 部署一个方便家人朋友一起使用的ChatGPT程序，无须共享API密钥。
+- 学习使用OpenAI API开发Web应用程序
+
+![demo](./docs/images/demo.jpg)
+
+## 使用要求
+
+要使用GPT Lite，必须拥有OpenAI帐户或Azure帐户。
+
+## 在本地运行
+
+1. 确保安装了NodeJS 18。
+2. 打开命令行窗口里克隆代码。
+3. 运行`npm install`来安装依赖项。
+4. 确保设置了`OPENAI_API_KEY`环境变量。
+5. 运行`npm run dev`启动应用程序。
+6. 在Web浏览器中打开`http://localhost:3000`。
+
+## 使用Docker部署
+
+1. 打开命令行窗口里克隆代码。
+2. 更新`docker-compose.yml`文件中里的`OPENAI_API_KEY`环境变量。
+3. 运行`docker-compose build`构建。
+4. 运行`docker-compose up -d`启动。
+
+## Vercel一键部署
+
+点击下列Deploy按钮即可一键部署至Vercel
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblrchen%2Fgptlite&env=OPENAI_API_KEY&project-name=gptlite&framework=nextjs&repository-name=gptlite)
+
+## 环境变量说明
+
+以下是OpenAI相关的环境变量
+
+| 名称                  | 描述                                                                            | 默认值                  |
+|---------------------|-------------------------------------------------------------------------------|----------------------|
+| OPENAI_API_BASE_URL | 反向代理 `api.openai.com`                                                         | `https://api.openai.com` |
+| OPENAI_API_KEY      | OpenAI key，可以从[OpenAI API](https://platform.openai.com/account/api-keys)网站获取. |                      |
+
+以下是Azure OpenAI相关的环境变量
+
+| Name                        | Description                                    |
+| --------------------------- |------------------------------------------------|
+| AZURE_OPENAI_API_BASE_URL   | 格式类似`https://xxx.openai.azure.com` |
+| AZURE_OPENAI_API_KEY        | 密钥                                             |
+| AZURE_OPENAI_API_DEPLOYMENT | Model部署的名称                                     |
+
+
+## 贡献代码
+
+欢迎各种PR，大小不限。Issue列表里所有带`Good First Issue`的issue都可以认领。
+
+# 免责说明
+
+此代码仅用于演示和测试目的。

app/docker-compose.yml → docker-compose.yml

@@ -2,12 +2,12 @@ version: '3.8'
 
 services:
   gptlite:
-    build: .
+    build: app
     ports:
       - "3000:3000"
     environment:
-      - OPENAI_BASE_URL=
+      - OPENAI_API_BASE_URL=
       - OPENAI_API_KEY=
-      - AZURE_OPENAI_BASE_URL=
-      - AZURE_OPENAI_DEPLOYMENT=
+      - AZURE_OPENAI_API_BASE_URL=
       - AZURE_OPENAI_API_KEY=
+      - AZURE_OPENAI_DEPLOYMENT=

app/package.json → package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "lint:prettier": "prettier --write \"src/**/*.{ts,tsx,js,html,css,less,md}\""
+    "lint:prettier": "prettier --write \\\"src/**/*.{ts,tsx,js,html,css,less,md}\\\""
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",

app/src/components/HeaderBar/index.tsx → src/components/HeaderBar/index.tsx

@@ -15,6 +15,7 @@ const HeaderBar = () => {
       <Header className={styles.header}>
         <div className={styles.logoBar}>
           <Link href="/">
+            <img alt="logo" src="/logo192.png" />
             <h1>GPT Lite</h1>
           </Link>
         </div>

app/src/pages/api/chat-completion.ts → src/pages/api/chat-completion.ts

@@ -6,7 +6,6 @@ export const config = {
 }
 
 const handler = async (req: Request): Promise<Response> => {
-  let deployment
   try {
     const { messages } = (await req.json()) as {
       messages: Message[]
@@ -26,20 +25,20 @@ const handler = async (req: Request): Promise<Response> => {
     }
 
     const useAzureOpenAI =
-      process.env.AZURE_OPENAI_BASE_URL && process.env.AZURE_OPENAI_BASE_URL.length > 0
+      process.env.AZURE_OPENAI_API_BASE_URL && process.env.AZURE_OPENAI_API_BASE_URL.length > 0
 
     let apiUrl: string
     let apiKey: string
     let model: string
     if (useAzureOpenAI) {
-      const apiBaseUrl = process.env.AZURE_OPENAI_BASE_URL
+      const apiBaseUrl = process.env.AZURE_OPENAI_API_BASE_URL
       const version = '2023-03-15-preview'
       const deployment = process.env.AZURE_OPENAI_DEPLOYMENT || ''
       apiUrl = `${apiBaseUrl}/openai/deployments/${deployment}/chat/completions?api-version=${version}`
       apiKey = process.env.AZURE_OPENAI_API_KEY || ''
       model = 'gpt-35-turbo'
     } else {
-      const apiBaseUrl = process.env.OPENAI_BASE_URL || 'https://api.openai.com'
+      const apiBaseUrl = process.env.OPENAI_API_BASE_URL || 'https://api.openai.com'
       apiUrl = `${apiBaseUrl}/v1/chat/completions`
       apiKey = process.env.OPENAI_API_KEY || ''
       model = 'gpt-3.5-turbo'

app/src/pages/index.tsx → src/pages/index.tsx

@@ -13,8 +13,8 @@ export default function Home() {
       <Layout>
         <HeaderBar />
         <Content className={styles.main}>
-          {/*<ChatGPT fetchPath="http://localhost:3000/api/chat-completion" />*/}
-          <ChatGPT fetchPath="https://gptlite.vercel.app/api/chat-completion" />
+          {/* <ChatGPT fetchPath="http://localhost:3000/api/chat-completion" /> */}
+          <ChatGPT fetchPath="https://gptlite-next-westus3.azurewebsites.net/api/chat-completion" />
         </Content>
         <FooterBar />
       </Layout>

app/tsconfig.json → tsconfig.json

@@ -18,6 +18,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }