Spaces:

amiguel
/

expertInsp

Sleeping

amiguel Cursor commited on May 5

Commit

9b54db2

0 Parent(s):

Initial setup: React + Express streaming chat for Qwen 2.5 7B

- Vite/React frontend with SSE streaming and direct DOM rendering at 50 tok/s
- Express backend proxy with Qwen ChatML template and HF Inference API
- Multi-stage Dockerfile optimised for Hugging Face Spaces (port 7860)

Co-authored-by: Cursor <cursoragent@cursor.com>

Files changed (13) hide show

.dockerignore +7 -0
.gitignore +5 -0
Dockerfile +38 -0
index.html +12 -0
package-lock.json +0 -0
package.json +27 -0
server.ts +94 -0
src/App.tsx +187 -0
src/StreamingText.tsx +23 -0
src/main.tsx +9 -0
tsconfig.json +20 -0
tsconfig.node.json +14 -0
vite.config.ts +16 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,7 @@

+node_modules
+dist
+.git
+.gitignore
+*.md
+.env
+.env.*

.gitignore ADDED Viewed

	@@ -0,0 +1,5 @@

+node_modules
+dist
+.DS_Store
+.env
+.env.*

Dockerfile ADDED Viewed

	@@ -0,0 +1,38 @@

+# ---- Build stage ----
+FROM node:20-slim AS builder
+WORKDIR /app
+# Copy lockfile + manifest first for layer-cache efficiency
+COPY package.json package-lock.json ./
+# Reproducible install (includes devDeps needed for vite build)
+RUN npm ci
+# Copy source
+COPY . .
+# Build the React frontend → dist/
+RUN npm run build
+# ---- Runtime stage ----
+FROM node:20-slim
+WORKDIR /app
+COPY package.json package-lock.json ./
+# Production + tsx needed for server runtime
+RUN npm ci
+# Bring in the compiled frontend and server source
+COPY --from=builder /app/dist ./dist
+COPY server.ts ./
+# Hugging Face Spaces requires port 7860
+EXPOSE 7860
+# HF_TOKEN must be added as a Repository Secret in Space settings
+# It is read at runtime via process.env.HF_TOKEN
+CMD ["npm", "run", "server"]

index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwen 2.5 7B Chat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "name": "qwen-chat-space",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "server": "tsx server.ts"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  }
+}

server.ts ADDED Viewed

	@@ -0,0 +1,94 @@

+import express, { Request, Response } from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const app = express();
+const PORT = 7860;
+const MODEL_ID = "amiguel/qwen2.5-7b-instruct-ai_llm-sft";
+const API_URL = `https://api-inference.huggingface.co/models/${MODEL_ID}`;
+app.use(express.json());
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+app.use(express.static(path.join(__dirname, 'dist')));
+app.post('/api/chat', async (req: Request, res: Response) => {
+  const { messages } = req.body;
+  const hfToken = process.env.HF_TOKEN;
+  if (!hfToken) {
+    return res.status(401).json({ error: "HF_TOKEN environment variable not set." });
+  }
+  // Qwen 2.5 ChatML prompt template
+  const prompt = messages
+    .map((m: { role: string; content: string }) => {
+      if (m.role === 'user') return `<|im_start|>user\n${m.content}<|im_end|>\n`;
+      if (m.role === 'assistant') return `<|im_start|>assistant\n${m.content}<|im_end|>\n`;
+      return '';
+    })
+    .join('') + '<|im_start|>assistant\n';
+  try {
+    const response = await fetch(API_URL, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${hfToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        inputs: prompt,
+        parameters: {
+          max_new_tokens: 1024,
+          return_full_text: false,
+          do_sample: true,
+          temperature: 0.7,
+        },
+        stream: true,
+        options: {
+          wait_for_model: true,
+        },
+      }),
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("HF API Error:", errorText);
+      return res.status(response.status).json({ error: errorText });
+    }
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+    if (!reader) {
+      return res.end();
+    }
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      const chunk = decoder.decode(value, { stream: true });
+      res.write(chunk);
+    }
+    res.end();
+  } catch (error) {
+    console.error("Server Error:", error);
+    res.status(500).json({ error: "Internal Server Error" });
+  }
+});
+// SPA fallback
+app.get('*', (_req, res) => {
+  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+});
+app.listen(PORT, () => {
+  console.log(`Server running on http://0.0.0.0:${PORT}`);
+});

src/App.tsx ADDED Viewed

	@@ -0,0 +1,187 @@

+import { useState, useRef, FormEvent } from 'react';
+import { StreamingText } from './StreamingText';
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+export default function App() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isStreaming) return;
+    const userMessage: Message = { role: 'user', content: input };
+    const newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setInput('');
+    setIsStreaming(true);
+    setMessages((prev) => [...prev, { role: 'assistant', content: '' }]);
+    abortControllerRef.current = new AbortController();
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: newMessages }),
+        signal: abortControllerRef.current.signal,
+      });
+      if (!response.body) throw new Error('No body in response');
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        // Robust SSE parser: handles chunks split across network packets
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+        for (const line of lines) {
+          if (line.startsWith('data:')) {
+            const jsonStr = line.replace('data:', '').trim();
+            if (jsonStr === '[DONE]') continue;
+            try {
+              const parsed = JSON.parse(jsonStr);
+              const token = parsed.token?.text || '';
+              if (token) {
+                setMessages((prev) => {
+                  const updated = [...prev];
+                  const lastMsg = updated[updated.length - 1];
+                  if (lastMsg.role === 'assistant') {
+                    lastMsg.content += token;
+                  }
+                  return updated;
+                });
+              }
+            } catch (err) {
+              console.error('JSON parse error on line:', line, err);
+            }
+          }
+        }
+      }
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') {
+        console.log('Stream aborted by user');
+      } else {
+        console.error('Chat error:', error);
+      }
+    } finally {
+      setIsStreaming(false);
+      abortControllerRef.current = null;
+    }
+  };
+  const handleStop = () => {
+    abortControllerRef.current?.abort();
+  };
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: '#f5f5f5' }}>
+      <header
+        style={{
+          padding: '1rem',
+          backgroundColor: '#fff',
+          borderBottom: '1px solid #ddd',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+        }}
+      >
+        <h1 style={{ margin: 0, fontSize: '1.25rem' }}>Qwen 2.5 7B Chat</h1>
+      </header>
+      <main style={{ flex: 1, overflowY: 'auto', padding: '1rem' }}>
+        {messages.map((msg, idx) => (
+          <div
+            key={idx}
+            style={{
+              marginBottom: '1rem',
+              display: 'flex',
+              justifyContent: msg.role === 'user' ? 'flex-end' : 'flex-start',
+            }}
+          >
+            <div
+              style={{
+                maxWidth: '70%',
+                padding: '0.75rem',
+                borderRadius: '12px',
+                backgroundColor: msg.role === 'user' ? '#007bff' : '#fff',
+                color: msg.role === 'user' ? '#fff' : '#000',
+                boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+              }}
+            >
+              {msg.role === 'assistant' && idx === messages.length - 1 && isStreaming ? (
+                <StreamingText content={msg.content} />
+              ) : (
+                <div style={{ whiteSpace: 'pre-wrap' }}>{msg.content}</div>
+              )}
+            </div>
+          </div>
+        ))}
+      </main>
+      <footer style={{ padding: '1rem', backgroundColor: '#fff', borderTop: '1px solid #ddd' }}>
+        <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem' }}>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type your message..."
+            style={{
+              flex: 1,
+              padding: '0.75rem',
+              borderRadius: '4px',
+              border: '1px solid #ccc',
+            }}
+            disabled={isStreaming}
+          />
+          {isStreaming ? (
+            <button
+              type="button"
+              onClick={handleStop}
+              style={{
+                padding: '0.75rem 1.5rem',
+                backgroundColor: '#dc3545',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Stop
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={!input.trim()}
+              style={{
+                padding: '0.75rem 1.5rem',
+                backgroundColor: '#007bff',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Send
+            </button>
+          )}
+        </form>
+      </footer>
+    </div>
+  );
+}

src/StreamingText.tsx ADDED Viewed

	@@ -0,0 +1,23 @@

+import { useEffect, useRef } from 'react';
+interface StreamingTextProps {
+  content: string;
+}
+export const StreamingText = ({ content }: StreamingTextProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (containerRef.current) {
+      // Direct DOM mutation bypasses VDOM diffing for smooth 50+ tok/s rendering
+      containerRef.current.innerText = content;
+    }
+  }, [content]);
+  return (
+    <div
+      ref={containerRef}
+      style={{ whiteSpace: 'pre-wrap', fontFamily: 'sans-serif', lineHeight: '1.6' }}
+    />
+  );
+};

src/main.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

tsconfig.json ADDED Viewed

	@@ -0,0 +1,20 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,14 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts", "server.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 7860,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7860',
+        changeOrigin: true,
+      }
+    }
+  }
+})