feat: #27 add docker image publish actions

feat: add docker deployment support

.eslintignore

@@ -0,0 +1 @@
+public/serviceWorker.js

.github/workflows/docker.yml

@@ -0,0 +1,33 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: yidadaa/chatgpt-next-web
+      
+      - name: Build and push Docker image
+        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,44 @@
+FROM node:18-alpine AS base
+
+FROM base AS deps
+
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* ./
+
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS builder
+
+RUN apk update && apk add --no-cache git
+
+ENV OPENAI_API_KEY=""
+ENV CODE=""
+ARG DOCKER=true
+
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+RUN yarn build
+
+FROM base AS runner
+WORKDIR /app
+
+ENV OPENAI_API_KEY=""
+ENV CODE=""
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/.next/server ./.next/server
+
+EXPOSE 3000
+
+CMD ["node","server.js"]

README.md

@@ -109,31 +109,32 @@ OPENAI_API_KEY=<your api key here>
 ```
 
 ### 本地开发 Local Development
+
 > 如果你是中国大陆用户，不建议在本地进行开发，除非你能够独立解决 OpenAI API 本地代理问题。
 
 1. 安装 nodejs 和 yarn，具体细节请询问 ChatGPT；
 2. 执行 `yarn install && yarn dev` 即可。
 
 ### 本地部署 Local Deployment
+
 请直接询问 ChatGPT，使用下列 Prompt：
+
 ```
 如何使用 pm2 和 yarn 部署 nextjs 项目到 ubuntu 服务器上，项目编译命令为 yarn build，启动命令为 yarn start，启动时需要设置环境变量为 OPENAI_API_KEY，端口为 3000，使用 ngnix 做反向代理
 ```
 
 Please ask ChatGPT with prompt:
+
 ```
 how to deploy nextjs project with pm2 and yarn on my ubuntu server, the build command is `yarn build`, the start command is `yarn start`, the project must start with env var named `OPENAI_API_KEY`, the port is 3000, use ngnix
 ```
 
-### Docker Deployment
-请直接询问 ChatGPT，使用下列 Prompt：
-```
-如何使用 docker 部署 nextjs 项目到 ubuntu 服务器上，项目编译命令为 yarn build，启动命令为 yarn start，启动时需要设置环境变量为 OPENAI_API_KEY，端口为 3000，使用 ngnix 做反向代理
-```
+### 容器部署 Docker Deployment
 
-Please ask ChatGPT with prompt:
-```
-how to deploy nextjs project with docker on my ubuntu server, the build command is `yarn build`, the start command is `yarn start`, the project must start with env var named `OPENAI_API_KEY`, the port is 3000, use ngnix
+```shell
+docker pull yidadaa/chatgpt-next-web
+
+docker run -d -p 3000:3000 -e OPEN_API_KEY="" -e CODE="" aprilnea/chatgpt-next-web
 ```
 
 ## 截图 Screenshots
@@ -143,17 +144,25 @@ how to deploy nextjs project with docker on my ubuntu server, the build command
 ![更多展示 More](./static/more.png)
 
 ## 说明 Attention
+
 本项目的演示地址所用的 OpenAI 账户的免费额度将于 2023-04-01 过期，届时将无法通过演示地址在线体验。
 
 如果你想贡献出自己的 API Key，可以通过作者主页的邮箱发送给作者，并标注过期时间。
 
-The free trial of the OpenAI account used by the demo will expire on April 1, 2023, and the demo will not be available at that time. 
+The free trial of the OpenAI account used by the demo will expire on April 1, 2023, and the demo will not be available at that time.
 
 If you would like to contribute your API key, you can email it to the author and indicate the expiration date of the API key.
 
 ## 鸣谢 Special Thanks
+
 ### 捐赠者 Sponsor
+
 [@mushan0x0](https://github.com/mushan0x0)
+[@ClarenceDan](https://github.com/ClarenceDan)
+
+### 贡献者 Contributor
+
+[@AprilNEA](https://github.com/AprilNEA)
 
 ## LICENSE
 

app/api/chat-stream/route.ts

@@ -1,4 +1,3 @@
-import type { ChatRequest } from "../chat/typing";
 import { createParser } from "eventsource-parser";
 import { NextRequest } from "next/server";
 

app/components/home.tsx

@@ -399,11 +399,16 @@ function useSwitchTheme() {
   useEffect(() => {
     document.body.classList.remove("light");
     document.body.classList.remove("dark");
+
     if (config.theme === "dark") {
       document.body.classList.add("dark");
     } else if (config.theme === "light") {
       document.body.classList.add("light");
     }
+
+    const themeColor = getComputedStyle(document.body).getPropertyValue("--theme-color").trim();
+    const metaDescription = document.querySelector('meta[name="theme-color"]');
+    metaDescription?.setAttribute('content', themeColor);
   }, [config.theme]);
 }
 
@@ -465,6 +470,16 @@ function showMemoryPrompt(session: ChatSession) {
   });
 }
 
+const useHasHydrated = () => {
+  const [hasHydrated, setHasHydrated] = useState<boolean>(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  return hasHydrated;
+};
+
 export function Home() {
   const [createNewSession, currentIndex, removeSession] = useChatStore(
     (state) => [
@@ -473,7 +488,7 @@ export function Home() {
       state.removeSession,
     ]
   );
-  const loading = !useChatStore?.persist?.hasHydrated();
+  const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);
 
   // setting

app/components/settings.tsx

@@ -354,7 +354,7 @@ export function Settings(props: { closeSettings: () => void }) {
             <input
               type="number"
               min={100}
-              max={4000}
+              max={4096}
               value={config.modelConfig.max_tokens}
               onChange={(e) =>
                 updateConfig(

app/layout.tsx

@@ -5,19 +5,29 @@ import "./styles/prism.scss";
 import process from "child_process";
 import { ACCESS_CODES } from "./api/access";
 
-const COMMIT_ID = process
-  .execSync("git rev-parse --short HEAD")
-  .toString()
-  .trim();
+let COMMIT_ID: string | undefined;
+try {
+  COMMIT_ID = process
+    .execSync("git rev-parse --short HEAD")
+    .toString()
+    .trim();
+} catch (e) {
+  console.error("No git or not from git repo.")
+}
 
 export const metadata = {
   title: "ChatGPT Next Web",
   description: "Your personal ChatGPT Chat Bot.",
+  appleWebApp: {
+    title: "ChatGPT Next Web",
+    statusBarStyle: "black-translucent",
+  },
+  themeColor: "#fafafa"
 };
 
 function Meta() {
   const metas = {
-    version: COMMIT_ID,
+    version: COMMIT_ID ?? "unknown",
     access: ACCESS_CODES.size > 0 ? "enabled" : "disabled",
   };
 
@@ -50,6 +60,7 @@ export default function RootLayout({
           href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap"
           rel="stylesheet"
         ></link>
+        <script src="/serviceWorkerRegister.js" defer></script>
       </head>
       <body>{children}</body>
     </html>

app/styles/globals.scss

@@ -7,6 +7,7 @@
   --second: rgb(231, 248, 255);
   --hover-color: #f3f3f3;
   --bar-color: rgba(0, 0, 0, 0.1);
+  --theme-color: var(--gray);
 
   /* shadow */
   --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@@ -28,6 +29,8 @@
   --bar-color: rgba(255, 255, 255, 0.1);
 
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
+
+  --theme-color: var(--gray);
 }
 
 .light {
@@ -84,7 +87,11 @@ body {
   align-items: center;
   user-select: none;
   font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+  @media only screen and (max-width: 600px) {
+    background-color: var(--second);
+  }
 }
 
 ::-webkit-scrollbar {

app/styles/prism.scss

@@ -1,4 +1,9 @@
 .markdown-body {
+  pre {
+    background: #282a36;
+    color: #f8f8f2;
+  }
+
   code[class*="language-"],
   pre[class*="language-"] {
     color: #f8f8f2;
@@ -116,32 +121,32 @@
   }
 }
 
-@mixin light {
-  .markdown-body pre[class*="language-"] {
-    filter: invert(1) hue-rotate(50deg) brightness(1.3);
-  }
-}
+// @mixin light {
+//   .markdown-body pre[class*="language-"] {
+//     filter: invert(1) hue-rotate(50deg) brightness(1.3);
+//   }
+// }
 
-@mixin dark {
-  .markdown-body pre[class*="language-"] {
-    filter: none;
-  }
-}
+// @mixin dark {
+//   .markdown-body pre[class*="language-"] {
+//     filter: none;
+//   }
+// }
 
-:root {
-  @include light();
-}
+// :root {
+// @include light();
+// }
 
-.light {
-  @include light();
-}
+// .light {
+//   @include light();
+// }
 
-.dark {
-  @include dark();
-}
+// .dark {
+//   @include dark();
+// }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include dark();
-  }
-}
+// @media (prefers-color-scheme: dark) {
+//   :root {
+//     @include dark();
+//   }
+// }

next.config.js

@@ -14,4 +14,8 @@ const nextConfig = {
   }
 };
 
+if (process.env.DOCKER) {
+  nextConfig.output = 'standalone'
+}
+
 module.exports = nextConfig;

package.json

@@ -2,6 +2,7 @@
   "name": "chatgpt-next-web",
   "version": "1.1",
   "private": false,
+  "license": "Anti 996",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

public/serviceWorker.js

@@ -0,0 +1,24 @@
+const CHATGPT_NEXT_WEB_CACHE = "chatgpt-next-web-cache";
+
+self.addEventListener('activate', function (event) {
+  console.log('ServiceWorker activated.');
+});
+
+self.addEventListener('install', function (event) {
+  event.waitUntil(
+    caches.open(CHATGPT_NEXT_WEB_CACHE)
+      .then(function (cache) {
+        return cache.addAll([
+        ]);
+      })
+  );
+});
+
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function (response) {
+        return response || fetch(event.request);
+      })
+  );
+});

public/serviceWorkerRegister.js

@@ -0,0 +1,9 @@
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function () {
+    navigator.serviceWorker.register('/serviceWorker.js').then(function (registration) {
+      console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }, function (err) {
+      console.error('ServiceWorker registration failed: ', err);
+    });
+  });
+}

public/site.webmanifest

@@ -1 +1,21 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+    "name": "ChatGPT Next Web",
+    "short_name": "ChatGPT",
+    "icons": [
+      {
+        "src": "/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ],
+    "start_url": "/",
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+  }
+