Skip to content

Commit b077968

Browse files
CoderUniCoderUni
committed
feat: Add frontend website from other repo
2 parents 7b903ce + 620fad8 commit b077968

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+8243
-0
lines changed

‎web/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎web/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
# env
39+
.env

‎web/.yarnrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎web/README.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<h1 align="center">
2+
<img src="public/logo.png" alt="vLLM Web Interface Logo" width="100" />
3+
<br />
4+
vLLM Web Interface
5+
</h1>
6+
7+
<p align="center">
8+
<a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-14-black" alt="Next.js"></a>
9+
<a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind_CSS-3.4-blue" alt="Tailwind CSS"></a>
10+
<a href="https://github.com/your-username/your-repo-name/actions"><img src="https://img.shields.io/badge/build-passing-brightgreen" alt="Build Status"></a>
11+
</p>
12+
13+
<p align="center">
14+
A modern, friendly, and responsive web interface for interacting with <a href="https://docs.vllm.ai/en/latest/">vLLM</a> language models. Built with Next.js and Shadcn UI.
15+
</p>
16+
17+
<div align="center">
18+
19+
<img src="public/screenshot.png" alt="App Screenshot" width="800" />
20+
</div>
21+
22+
<br />
23+
24+
## ✨ Features
25+
26+
- **🚀 Fast & Reactive:** Built on Next.js for optimal performance.
27+
- **💬 Streaming Support:** Real-time token streaming from vLLM.
28+
- **🎨 Modern UI:** Clean interface using TailwindCSS and Shadcn UI.
29+
- **📝 Markdown Support:** Renders code blocks and standard markdown syntax.
30+
- **⚙️ Configurable:** Easy setup for different model endpoints and system prompts.
31+
32+
## ⚙️ Prerequisites
33+
34+
Before running the web interface, ensure you have the following:
35+
36+
- **vLLM Instance:** You must have vLLM running separately (locally or via Docker).
37+
> **Note:** Ensure your vLLM API is accessible (default port is usually 8000).
38+
- **Node.js:** Version 18+ ([Download](https://nodejs.org/)).
39+
- **Package Manager:** `npm` or `yarn`.
40+
41+
## 🚀 Getting Started
42+
43+
Follow these instructions to set up the project locally.
44+
45+
### 1. Clone the repository
46+
47+
```bash
48+
git clone https://github.com/CoderUni/CodingLLM.git
49+
cd CodingLLM/web
50+
```
51+
52+
### 2. Install Dependencies
53+
54+
```bash
55+
yarn install
56+
# or
57+
npm install
58+
```
59+
60+
### 3. Configure Environment
61+
62+
Rename the example environment file to `.env`:
63+
64+
```bash
65+
mv .example.env .env
66+
```
67+
68+
Open `.env` and configure it to match your vLLM setup:
69+
70+
```env
71+
# The API endpoint for your vLLM instance
72+
VLLM_URL="http://localhost:8000/v1"
73+
74+
# The specific model name you are serving (Must match vLLM config)
75+
VLLM_MODEL="BigJuicyData/coder-final"
76+
77+
# Context window limit
78+
VLLM_TOKEN_LIMIT="32000"
79+
80+
# Default system prompt for the chat
81+
NEXT_PUBLIC_SYSTEM_PROMPT="You are a helpful assistant."
82+
```
83+
84+
### 4. Run Development Server
85+
86+
```bash
87+
yarn dev
88+
```
89+
90+
Open [http://localhost:3000](http://localhost:3000) in your browser to start chatting!
91+
92+
## 🛠️ Tech Stack
93+
94+
- **Framework:** [Next.js](https://nextjs.org/)
95+
- **Styling:** [TailwindCSS](https://tailwindcss.com/)
96+
- **Components:** [shadcn/ui](https://ui.shadcn.com/) (Radix UI + Tailwind)
97+
- **Chat Logic:** shadcn-chat
98+
99+
## 🤝 Acknowledgments
100+
101+
Forked from [yoziru/nextjs-vllm-ui](https://github.com/yoziru/nextjs-vllm-ui).
102+
103+
This version includes bug fixes, UI improvements, and enhanced stability.

‎web/components.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/app/globals.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎web/example.env‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
VLLM_URL="https://frances-intersesamoid-twiddly.ngrok-free.dev" # Remove the trailing slash
2+
VLLM_MODEL="BigJuicyData/coder-final"
3+
VLLM_TOKEN_LIMIT="32000"
4+
NEXT_PUBLIC_SYSTEM_PROMPT="You are Qwen. You are an expert algorithmic assistant. 1. CORE OBJECTIVE: Solve the user's problem using the most efficient algorithm (optimal Time/Space Complexity). 2. THOUGHT PROCESS: Use your <think> tag to analyze edge cases and plan the logic. 3. OUTPUT: After reasoning, provide the solution."

‎web/next.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
// set basepath based on environment
4+
basePath: process.env.NEXT_PUBLIC_BASE_PATH ?? "",
5+
output: "standalone",
6+
};
7+
8+
export default nextConfig;

‎web/package.json‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "nextjs-vllm-ui",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@ai-sdk/openai": "^0.0.40",
13+
"@hookform/resolvers": "^3.3.4",
14+
"@radix-ui/react-dialog": "^1.0.5",
15+
"@radix-ui/react-icons": "^1.3.2",
16+
"@radix-ui/react-slider": "^1.3.6",
17+
"@radix-ui/react-slot": "^1.0.2",
18+
"@radix-ui/react-tabs": "^1.0.4",
19+
"@radix-ui/react-tooltip": "^1.0.7",
20+
"ai": "^3.2.0",
21+
"class-variance-authority": "^0.7.0",
22+
"clsx": "^2.1.0",
23+
"katex": "^0.16.25",
24+
"llama3-tokenizer-js": "^1.1.3",
25+
"lucide-react": "^0.555.0",
26+
"next": "14.2.25",
27+
"next-themes": "^0.3.0",
28+
"react": "^18",
29+
"react-code-blocks": "^0.1.6",
30+
"react-dom": "^18",
31+
"react-hook-form": "^7.51.2",
32+
"react-markdown": "^9.0.1",
33+
"react-syntax-highlighter": "^16.1.0",
34+
"react-textarea-autosize": "^8.5.3",
35+
"rehype-katex": "^7.0.1",
36+
"remark-gfm": "^4.0.0",
37+
"remark-math": "^6.0.0",
38+
"sonner": "^1.4.41",
39+
"tailwind-merge": "^2.2.2",
40+
"use-debounce": "^10.0.0",
41+
"use-local-storage-state": "^19.2.0",
42+
"uuid": "^9.0.1",
43+
"zod": "^3.23.8"
44+
},
45+
"devDependencies": {
46+
"@types/node": "^20.11.30",
47+
"@types/react": "^18.2.73",
48+
"@types/react-dom": "^18.2.23",
49+
"@types/react-syntax-highlighter": "^15.5.13",
50+
"@types/uuid": "^9.0.8",
51+
"autoprefixer": "^10.4.19",
52+
"eslint": "^8.57.0",
53+
"eslint-config-next": "14.1.4",
54+
"postcss": "^8.4.38",
55+
"tailwindcss": "^3.4.3",
56+
"typescript": "^5.4.3",
57+
"typescript-eslint": "^7.4.0"
58+
},
59+
"packageManager": "[email protected]"
60+
}

‎web/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎web/public/logo.png‎

8.42 KB
Loading

0 commit comments

Comments
 (0)