Next compatibility (mlc-ai#138)

Fixes mlc-ai#126 Add an example for next js, and a one line change to rollup to make it next compatible
bailoo · Jul 3, 2023 · 526f42e · 526f42e
1 parent e6a2d92
commit 526f42e
Show file tree

Hide file tree

Showing 20 changed files with 581 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -183,7 +183,7 @@ WebLLM package is a web runtime designed for [MLC LLM](https://github.com/mlc-ai
     1. [emscripten](https://emscripten.org). It is an LLVM-based compiler that compiles C/C++ source code to WebAssembly.
         - Follow the [installation instruction](https://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended) to install the latest emsdk.
         - Source `emsdk_env.sh` by `source path/to/emsdk_env.sh`, so that `emcc` is reachable from PATH and the command `emcc` works.
-    4. Install jekyll by following the [official guides](https://jekyllrb.com/docs/installation/). It is the package we use for website.
+    4. Install jekyll by following the [official guides](https://jekyllrb.com/docs/installation/). It is the package we use for website. This is not needed if you're using nextjs (see next-simple-chat in the examples).
     5. Install jekyll-remote-theme by command. Try [gem mirror](https://gems.ruby-china.com/) if install blocked.
         ```shell
         gem install jekyll-remote-theme

diff --git a/examples/next-simple-chat/.eslintrc.json b/examples/next-simple-chat/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/examples/next-simple-chat/.gitignore b/examples/next-simple-chat/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/examples/next-simple-chat/README.md b/examples/next-simple-chat/README.md
@@ -0,0 +1,17 @@
+This is a [Next.js](https://nextjs.org/) project using web-llm.
+
+## Getting Started
+
+First, install web-llm from source.
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/examples/next-simple-chat/next.config.js b/examples/next-simple-chat/next.config.js
@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+
+
+  webpack: (config, { isServer }) => {
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
+          // by next.js will be dropped. Doesn't make much sense, but how it is
+        fs: false, // the solution
+        module: false,
+        perf_hooks: false,
+      };
+    }
+
+    return config
+  },
+}
+
+module.exports = nextConfig
diff --git a/examples/next-simple-chat/package.json b/examples/next-simple-chat/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "next-simple-chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mlc-ai/web-llm": "../..",
+    "@types/node": "20.3.3",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.44.0",
+    "eslint-config-next": "13.4.7",
+    "next": "13.4.7",
+    "postcss": "8.4.24",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.6"
+  }
+}
diff --git a/examples/next-simple-chat/postcss.config.js b/examples/next-simple-chat/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/next-simple-chat/public/favicon.ico b/examples/next-simple-chat/public/favicon.ico
diff --git a/examples/next-simple-chat/public/next.svg b/examples/next-simple-chat/public/next.svg
diff --git a/examples/next-simple-chat/public/vercel.svg b/examples/next-simple-chat/public/vercel.svg
diff --git a/examples/next-simple-chat/src/pages/_app.tsx b/examples/next-simple-chat/src/pages/_app.tsx
@@ -0,0 +1,6 @@
+import '~/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/next-simple-chat/src/pages/_document.tsx b/examples/next-simple-chat/src/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/examples/next-simple-chat/src/pages/api/hello.ts b/examples/next-simple-chat/src/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/examples/next-simple-chat/src/pages/index.tsx b/examples/next-simple-chat/src/pages/index.tsx
@@ -0,0 +1,25 @@
+import Head from "next/head";
+import ChatComponent from "~/utils/chat_component";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Example App</title>
+        <meta
+          name="description"
+          content="Example app for web llm next compatibility"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main
+        className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
+      >
+          <ChatComponent />
+      </main>
+    </>
+  );
+}
diff --git a/examples/next-simple-chat/src/styles/globals.css b/examples/next-simple-chat/src/styles/globals.css
@@ -0,0 +1,156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+chatui-chat {
+  height: 100;
+}
+
+.chatui {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 867px;
+  margin: 25px 10px;
+  height: 600px;
+  border: 2px solid #ddd;
+  border-radius: 5px;
+  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
+}
+
+s .chatui-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 2px solid #ddd;
+  background: #eee;
+  color: #666;
+}
+
+.chatui-chat {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.chatui-chat::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chatui-chat::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.chatui-chat::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+}
+
+.msg {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+
+.msg:last-of-type {
+  margin: 0;
+}
+
+.msg-bubble {
+  max-width: 450px;
+  padding: 15px;
+  border-radius: 15px;
+  background: #ececec;
+}
+
+.left-msg .msg-bubble {
+  border-bottom-left-radius: 0;
+}
+
+.error-msg .msg-bubble {
+ border-bottom-left-radius: 0;
+ color: #f15959;
+}
+
+.init-msg .msg-bubble {
+ border-bottom-left-radius: 0;
+}
+
+.right-msg {
+  flex-direction: row-reverse;
+}
+
+.right-msg .msg-bubble {
+  background: #579ffb;
+  color: #fff;
+  border-bottom-right-radius: 0;
+}
+
+.chatui-inputarea {
+  display: flex;
+  padding: 10px;
+  border-top: 2px solid #ddd;
+  background: #eee;
+}
+
+.chatui-inputarea * {
+  padding: 10px;
+  border: none;
+  border-radius: 3px;
+  font-size: 1em;
+}
+
+.chatui-input {
+  flex: 1;
+  background: #ddd;
+}
+
+.chatui-btn {
+ margin-left: 10px;
+ background: #579ffb;
+ color: #fff;
+ font-weight: bold;
+ cursor: pointer;
+ padding: 10px;
+}
+
+.chatui-btn:hover {
+ background: #577bfb;
+}
+
+.chatui-chat {
+  background-color: #fcfcfe;
+}