Merge pull request #83 from cumulo-autumn/dev/ddpn08

Update the demo frontend framework
cumulo-autumn · Dec 30, 2023 · 23a6a28 · 23a6a28
2 parents 741b0fc + d9af40e
commit 23a6a28
Show file tree

Hide file tree

Showing 36 changed files with 1,832 additions and 29,491 deletions.
diff --git a/demo/realtime-txt2img/.dockerignore b/demo/realtime-txt2img/.dockerignore
@@ -0,0 +1,3 @@
+Dockerfile
+.dockerignore
+frontend/node_modules
diff --git a/demo/realtime-txt2img/Dockerfile b/demo/realtime-txt2img/Dockerfile
@@ -3,11 +3,12 @@ FROM node:20-alpine AS frontend
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-COPY view .
-RUN npm ci
-RUN npm run build
+COPY frontend .
+RUN npm i -g pnpm
+RUN pnpm i
+RUN pnpm run build
 
-# build backend on CUDA 
+# build backend on CUDA
 FROM nvidia/cuda:12.2.2-cudnn8-devel-ubuntu22.04 AS backend
 WORKDIR /app
 
@@ -56,14 +57,13 @@ RUN pyenv install $PYTHON_VERSION && \
 
 COPY --chown=user:user . .
 # change dir since pip needs to seed whl folder
-RUN cd server && pip install --no-cache-dir --upgrade -r requirements.txt 
-RUN --mount=type=secret,id=GITHUB_TOKEN,mode=0444,required=true \
-    pip install git+https://$(cat /run/secrets/GITHUB_TOKEN)@github.com/cumulo-autumn/StreamDiffusion.git@main#egg=streamdiffusion[tensorrt]
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+RUN pip install git+https://github.com/cumulo-autumn/StreamDiffusion.git@main#egg=streamdiffusion[tensorrt]
 RUN python -m streamdiffusion.tools.install-tensorrt
 
-COPY --from=frontend /app/build ./view/build
+COPY --from=frontend /app/dist ./frontend/dist
 
-WORKDIR $HOME/app/server
+WORKDIR $HOME/app
 
 USER user
 CMD ["python", "main.py"]
diff --git a/demo/realtime-txt2img/README-ja.md b/demo/realtime-txt2img/README-ja.md
@@ -15,10 +15,10 @@ StreamDiffusion を用いた GUI を提供します。
 
 ```bash
 pip install -r requirements.txt
-cd view
-npm i
-npm run build
-cd ../server
+cd frontend
+pnpm i
+pnpm run build
+cd ..
 python main.py
 ```
 

diff --git a/demo/realtime-txt2img/README.md b/demo/realtime-txt2img/README.md
@@ -13,10 +13,10 @@ You can realtimely generate 4x4 images from text, on changing the input prompt.
 
 ```bash
 pip install -r requirements.txt
-cd view
-npm i
-npm run build
-cd ../server
+cd frontend
+pnpm i
+pnpm run build
+cd ..
 python main.py
 ```
 

diff --git a/demo/realtime-txt2img/server/config.py → demo/realtime-txt2img/config.py b/demo/realtime-txt2img/server/config.py → demo/realtime-txt2img/config.py
diff --git a/demo/realtime-txt2img/frontend/.gitignore b/demo/realtime-txt2img/frontend/.gitignore
@@ -0,0 +1 @@
+tsconfig.tsbuildinfo
diff --git a/demo/realtime-txt2img/frontend/.prettierrc b/demo/realtime-txt2img/frontend/.prettierrc
@@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+trailingComma: all
+printWidth: 150
diff --git a/demo/realtime-txt2img/view/README.md → demo/realtime-txt2img/frontend/README.md b/demo/realtime-txt2img/view/README.md → demo/realtime-txt2img/frontend/README.md
diff --git a/demo/realtime-txt2img/frontend/index.html b/demo/realtime-txt2img/frontend/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Zen+Kaku+Gothic+New:wght@500&display=swap" rel="stylesheet" />
+
+    <title>Txt2Img demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/demo/realtime-txt2img/frontend/package.json b/demo/realtime-txt2img/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "view",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mantine/core": "^7.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "postcss": "^8.4.32",
+    "postcss-preset-mantine": "^1.11.1",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.1.0",
+    "typescript": "^4.9.5",
+    "vite": "^5.0.7",
+    "vite-tsconfig-paths": "^4.2.2"
+  }
+}