chore: initial commit for huggingface spaces

.env

@@ -0,0 +1,8 @@
+# AI 配置 (SiliconFlow)
+OPENAI_API_KEY=sk-smktrezkauofcvezxqsqbuzogzcduiikhcinhswercwhapze
+OPENAI_API_BASE_URL=https://api.siliconflow.cn/v1
+MODEL_NAME=Qwen/Qwen2.5-7B-Instruct
+
+# 部署配置
+PORT=3000
+NODE_ENV=development

.env.example

@@ -0,0 +1,21 @@
+# AI 配置 (OpenAI 或 SiliconFlow)
+OPENAI_API_KEY=your_openai_api_key
+OPENAI_API_BASE_URL=https://api.openai.com/v1
+
+# Supabase 配置
+SUPABASE_URL=your_supabase_url
+SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
+
+# Redis 配置 (并发队列)
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_PASSWORD=
+
+# Stripe 配置 (支付系统)
+STRIPE_SECRET_KEY=your_stripe_secret_key
+STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
+
+# 部署配置
+PORT=3000
+NODE_ENV=development

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vite.env

Dockerfile

@@ -0,0 +1,44 @@
+# 使用 Node.js 20 作为基础镜像
+FROM node:20-slim AS base
+
+# 设置工作目录
+WORKDIR /app
+
+# 安装 pnpm
+RUN npm install -g pnpm
+
+# --- 构建阶段 ---
+FROM base AS builder
+
+# 复制依赖定义
+COPY package.json pnpm-lock.yaml ./
+
+# 安装依赖
+RUN pnpm install
+
+# 复制源代码
+COPY . .
+
+# 构建前端和后端
+RUN pnpm run build
+
+# --- 运行阶段 ---
+FROM base AS runner
+
+WORKDIR /app
+
+# 复制构建产物和必要的运行文件
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/api ./api
+COPY --from=builder /app/.env ./.env
+
+# 暴露端口 (Hugging Face Spaces 默认使用 7860)
+EXPOSE 7860
+ENV PORT=7860
+
+# 启动命令 (使用 tsx 运行后端，或者编译后运行)
+# 这里我们直接运行后端服务
+CMD ["pnpm", "run", "server:dev"]

README.md

@@ -0,0 +1,49 @@
+---
+title: Codex AI 平台
+emoji: 🌐
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+short_description: Codex AI 平台 - 全栈 AI 编排与 RAG 演示系统
+---
+
+# Codex AI 平台 (Codex AI Platform)
+
+这是一个基于 `SiliconFlow` (Qwen2.5-7B-Instruct) 的全栈 AI 应用平台。集成智能对话、可视化工作流编排等功能。
+
+## 🛡️ 技术特点
+- **AI 驱动**：使用 `SiliconFlow` 提供的 Qwen2.5 免费模型，支持流式对话。
+- **高性能架构**：基于 `Express` + `Vite` 构建，支持快速响应。
+- **可视化拓扑**：基于 `React Flow` 构建工作流引擎。
+- **容器化部署**：支持 Docker 一键部署至 Hugging Face Spaces。
+
+## 🚀 快速开始
+
+### 环境变量配置
+在本地运行时，请创建 `.env` 文件并填入以下内容：
+```bash
+OPENAI_API_KEY=您的硅基流动API_KEY
+OPENAI_API_BASE_URL=https://api.siliconflow.cn/v1
+MODEL_NAME=Qwen/Qwen2.5-7B-Instruct
+PORT=7860
+```
+
+### 本地运行
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发环境
+pnpm run dev
+```
+
+## 🛠️ 技术栈
+- **前端**: React 18 + Vite + Tailwind CSS + Framer Motion
+- **后端**: Node.js + Express + TypeScript
+- **AI**: SiliconFlow (OpenAI 兼容接口)
+- **部署**: Docker
+
+## 📝 许可证
+MIT

api/app.ts

@@ -0,0 +1,67 @@
+/**
+ * This is a API server
+ */
+
+import express, {
+  type Request,
+  type Response,
+  type NextFunction,
+} from 'express'
+import cors from 'cors'
+import path from 'path'
+import dotenv from 'dotenv'
+import { fileURLToPath } from 'url'
+import authRoutes from './routes/auth.js'
+
+// for esm mode
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// load env
+dotenv.config()
+
+const app: express.Application = express()
+
+app.use(cors())
+app.use(express.json({ limit: '10mb' }))
+app.use(express.urlencoded({ extended: true, limit: '10mb' }))
+
+/**
+ * API Routes
+ */
+app.use('/api/auth', authRoutes)
+
+/**
+ * health
+ */
+app.use(
+  '/api/health',
+  (req: Request, res: Response, next: NextFunction): void => {
+    res.status(200).json({
+      success: true,
+      message: 'ok',
+    })
+  },
+)
+
+/**
+ * error handler middleware
+ */
+app.use((error: Error, req: Request, res: Response, next: NextFunction) => {
+  res.status(500).json({
+    success: false,
+    error: 'Server internal error',
+  })
+})
+
+/**
+ * 404 handler
+ */
+app.use((req: Request, res: Response) => {
+  res.status(404).json({
+    success: false,
+    error: 'API not found',
+  })
+})
+
+export default app

api/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Vercel deploy entry handler, for serverless deployment, please don't modify this file
+ */
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+import app from './app.js';
+
+export default function handler(req: VercelRequest, res: VercelResponse) {
+  return app(req, res);
+}

api/lib/supabase.ts

@@ -0,0 +1,28 @@
+/**
+ * 模拟 Supabase 客户端 (为了在没有 Supabase 时保证项目运行)
+ * 注意：由于用户要求“不接 Supabase”，这里暂时使用内存模拟或跳过数据库操作
+ */
+
+export const supabase = {
+  rpc: async (name: string, args: any) => {
+    console.log(`[Supabase Mock] 调用 RPC: ${name}`, args);
+    return { data: [], error: null };
+  },
+  from: (table: string) => ({
+    insert: async (data: any) => {
+      console.log(`[Supabase Mock] 插入表 ${table}:`, data);
+      return { data, error: null };
+    },
+    update: (data: any) => ({
+      eq: async (column: string, value: any) => {
+        console.log(`[Supabase Mock] 更新表 ${table} (条件 ${column}=${value}):`, data);
+        return { data, error: null };
+      },
+    }),
+    select: () => ({
+      eq: () => ({
+        single: async () => ({ data: null, error: null }),
+      }),
+    }),
+  }),
+};

api/routes/auth.ts

@@ -0,0 +1,33 @@
+/**
+ * 用户认证 API 路由演示。
+ * 处理用户注册、登录、Token 管理等。
+ */
+import { Router, type Request, type Response } from 'express'
+
+const router = Router()
+
+/**
+ * 用户注册
+ * POST /api/auth/register
+ */
+router.post('/register', async (req: Request, res: Response): Promise<void> => {
+  // TODO: 实现注册逻辑
+})
+
+/**
+ * 用户登录
+ * POST /api/auth/login
+ */
+router.post('/login', async (req: Request, res: Response): Promise<void> => {
+  // TODO: 实现登录逻辑
+})
+
+/**
+ * 用户登出
+ * POST /api/auth/logout
+ */
+router.post('/logout', async (req: Request, res: Response): Promise<void> => {
+  // TODO: 实现登出逻辑
+})
+
+export default router

api/server.ts

@@ -0,0 +1,90 @@
+import express from 'express';
+import cors from 'cors';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import dotenv from 'dotenv';
+import { StripeService } from './services/stripe.service.js';
+import { setupWorkers } from './lib/queue.js';
+import { AIService } from './services/ai.service.ts';
+
+dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const port = process.env.PORT || 7860;
+
+// Stripe Webhook 路由 (需要原始 body 格式进行签名验证)
+app.post('/api/payment/webhook', express.raw({ type: 'application/json' }), async (req, res) => {
+  const sig = req.headers['stripe-signature'] as string;
+  try {
+    await StripeService.handleWebhook(sig, req.body);
+    res.json({ received: true });
+  } catch (err: any) {
+    res.status(400).send(`Webhook 错误: ${err.message}`);
+  }
+});
+
+// 通用中间件
+app.use(express.json());
+app.use(cors());
+
+// 初始化并发任务处理器 (队列)
+setupWorkers(
+  async (job) => {
+    // 处理 AI 任务 (工作流/RAG)
+    console.log(`[队列] 正在处理 AI 任务: ${job.id}`);
+  },
+  async (job) => {
+    // 处理文档向量化任务
+    const { documentId, content, userId } = job.data;
+    await AIService.processDocument(documentId, content, userId);
+  }
+);
+
+// 健康检查接口
+app.get('/api/health', (req, res) => res.json({ status: 'ok', engine: 'Qwen2.5-7B', provider: 'SiliconFlow' }));
+
+// AI 流式对话接口
+app.post('/api/ai/chat', async (req, res) => {
+  const { query, userId, knowledgeBaseId } = req.body;
+  try {
+    const { stream, sources } = await AIService.chatWithKnowledge(userId, query, knowledgeBaseId);
+    
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+
+    // 发送检索来源信息
+    res.write(`data: ${JSON.stringify({ sources })}\n\n`);
+
+    for await (const chunk of stream) {
+      const content = chunk.choices[0]?.delta?.content || '';
+      if (content) {
+        res.write(`data: ${JSON.stringify({ content })}\n\n`);
+      }
+    }
+    res.end();
+  } catch (err) {
+    console.error('[AI] 对话接口出错:', err);
+    res.status(500).json({ error: 'AI 对话失败，请检查 API 配置' });
+  }
+});
+
+// 静态文件服务：将前端构建产物 dist 目录映射到根路径
+// 这样在 Hugging Face Spaces 上运行一个端口即可访问完整应用
+const distPath = path.resolve(__dirname, '../dist');
+app.use(express.static(distPath));
+
+// 所有非 API 请求均返回 index.html (支持单页应用前端路由)
+app.get('*', (req, res) => {
+  res.sendFile(path.join(distPath, 'index.html'));
+});
+
+app.listen(port, () => {
+  console.log(`[服务器] 全栈后端运行在端口: ${port}`);
+  console.log(`[模式] 模型使用: ${process.env.MODEL_NAME || 'Qwen/Qwen2.5-7B-Instruct'}`);
+});
+
+export default app;

api/services/ai.service.ts

@@ -0,0 +1,98 @@
+import OpenAI from 'openai';
+import { supabase } from '../lib/supabase.js';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+// 使用 SiliconFlow 提供的免费 Qwen2.5-7B-Instruct 模型
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  baseURL: process.env.OPENAI_API_BASE_URL || 'https://api.siliconflow.cn/v1',
+});
+
+const MODEL = process.env.MODEL_NAME || 'Qwen/Qwen2.5-7B-Instruct';
+
+export class AIService {
+  /**
+   * 增强型 RAG 检索对话 (当前由于不接 Supabase，向量搜索被模拟)
+   */
+  static async chatWithKnowledge(userId: string, query: string, knowledgeBaseId?: string) {
+    // 1. 生成查询向量 (可选，如果不使用 RAG 则跳过)
+    let context = '';
+    let sources: string[] = [];
+
+    try {
+      // 只有在需要 RAG 时才执行，这里根据项目现状调用模拟
+      const embeddingResponse = await openai.embeddings.create({
+        model: 'BAAI/bge-m3', // SiliconFlow 推荐的向量模型
+        input: query,
+      });
+      const queryEmbedding = embeddingResponse.data[0].embedding;
+
+      // 2. 相似度搜索 (通过 Mock 返回空)
+      const { data: chunks, error } = await supabase.rpc('match_chunks', {
+        query_embedding: queryEmbedding,
+        match_threshold: 0.5,
+        match_count: 5,
+        filter_user_id: userId,
+      });
+
+      if (!error && chunks && chunks.length > 0) {
+        context = chunks.map((c: any) => c.content).join('\n\n');
+        sources = chunks.map((c: any) => c.metadata?.filename || '未知文档');
+      }
+    } catch (e) {
+      console.warn('[AIService] RAG 检索失败，切换到基础对话模式');
+    }
+
+    // 3. 流式生成响应
+    const stream = await openai.chat.completions.create({
+      model: MODEL,
+      messages: [
+        { 
+          role: 'system', 
+          content: `你是一个专业的 AI 助手。${context ? `请基于以下参考资料回答。如果资料中没有，请告知用户。请保持回复的专业与客观。\n\n参考资料：\n${context}` : '请直接回答用户的问题。'}` 
+        },
+        { role: 'user', content: query },
+      ],
+      stream: true,
+    });
+
+    return { stream, sources };
+  }
+
+  /**
+   * 文档向量化处理逻辑
+   */
+  static async processDocument(documentId: string, content: string, userId: string) {
+    const chunks = AIService.splitIntoChunks(content, 1000);
+    
+    for (const chunkText of chunks) {
+      try {
+        const embedding = await openai.embeddings.create({
+          model: 'BAAI/bge-m3',
+          input: chunkText,
+        });
+
+        await supabase.from('chunks').insert({
+          document_id: documentId,
+          user_id: userId,
+          content: chunkText,
+          embedding: embedding.data[0].embedding,
+        });
+      } catch (e) {
+        console.error('[AIService] 向量化处理单条 chunk 失败:', e);
+      }
+    }
+
+    await supabase.from('documents').update({ status: 'completed' }).eq('id', documentId);
+  }
+
+  private static splitIntoChunks(text: string, size: number): string[] {
+    const chunks: string[] = [];
+    for (let i = 0; i < text.length; i += size) {
+      chunks.push(text.slice(i, i + size));
+    }
+    return chunks;
+  }
+}

api/services/stripe.service.ts

@@ -0,0 +1,84 @@
+import Stripe from 'stripe';
+import dotenv from 'dotenv';
+import { supabase } from '../lib/supabase.js';
+
+dotenv.config();
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || '', {
+  apiVersion: '2024-11-20.acacia' as any,
+});
+
+export class StripeService {
+  /**
+   * 为用户创建 Stripe 客户
+   */
+  static async createCustomer(email: string, name: string, userId: string) {
+    const customer = await stripe.customers.create({
+      email,
+      name,
+      metadata: { userId },
+    });
+    
+    // 更新数据库中的 stripe_customer_id
+    await supabase.from('users').update({ stripe_customer_id: customer.id }).eq('id', userId);
+    return customer;
+  }
+
+  /**
+   * 创建订阅 Checkout 会话
+   */
+  static async createSubscriptionSession(customerId: string, priceId: string) {
+    const session = await stripe.checkout.sessions.create({
+      customer: customerId,
+      payment_method_types: ['card'],
+      line_items: [{ price: priceId, quantity: 1 }],
+      mode: 'subscription',
+      success_url: `${process.env.FRONTEND_URL}/dashboard/billing?success=true`,
+      cancel_url: `${process.env.FRONTEND_URL}/dashboard/billing?canceled=true`,
+    });
+    return session;
+  }
+
+  /**
+   * 处理 Stripe Webhook 回调
+   */
+  static async handleWebhook(signature: string, payload: Buffer) {
+    let event: Stripe.Event;
+    try {
+      event = stripe.webhooks.constructEvent(
+        payload,
+        signature,
+        process.env.STRIPE_WEBHOOK_SECRET || ''
+      );
+    } catch (err: any) {
+      throw new Error(`Webhook Signature 验证失败: ${err.message}`);
+    }
+
+    switch (event.type) {
+      case 'customer.subscription.created':
+      case 'customer.subscription.updated': {
+        const subscription = event.data.object as Stripe.Subscription;
+        const customerId = subscription.customer as string;
+        // 更新用户订阅状态
+        await StripeService.updateUserSubscription(customerId, subscription.status);
+        break;
+      }
+      case 'customer.subscription.deleted': {
+        const subscription = event.data.object as Stripe.Subscription;
+        const customerId = subscription.customer as string;
+        await StripeService.updateUserSubscription(customerId, 'free');
+        break;
+      }
+    }
+  }
+
+  private static async updateUserSubscription(stripeCustomerId: string, status: string) {
+    let subscriptionStatus: 'free' | 'pro' | 'enterprise' = 'free';
+    if (status === 'active') subscriptionStatus = 'pro'; // 简化逻辑
+
+    await supabase
+      .from('users')
+      .update({ subscription_status: subscriptionStatus })
+      .eq('stripe_customer_id', stripeCustomerId);
+  }
+}

api/services/workflow.service.ts

@@ -0,0 +1,36 @@
+import { Workflow, WorkflowNode } from '../../shared/types/index.js';
+
+export class WorkflowService {
+  /**
+   * 解析并执行工作流拓扑
+   */
+  static async execute(workflow: Workflow, initialInput: any) {
+    console.log(`[Workflow] 开始执行: ${workflow.name} (ID: ${workflow.id})`);
+    
+    // 此处应实现复杂的拓扑排序与异步执行逻辑
+    // 为了演示，我们采用简单的线性执行
+    let result = initialInput;
+    const sortedNodes = [...workflow.nodes].sort((a, b) => a.position.x - b.position.x);
+
+    for (const node of sortedNodes) {
+      result = await WorkflowService.executeNode(node, result);
+    }
+
+    return result;
+  }
+
+  private static async executeNode(node: WorkflowNode, input: any) {
+    console.log(`[Workflow] 执行节点: ${node.type} (${node.id})`);
+    
+    switch (node.type) {
+      case 'llm':
+        return `AI 处理结果: ${input}`;
+      case 'knowledge_base':
+        return `知识库检索结果: ${input}`;
+      case 'condition':
+        return input;
+      default:
+        return input;
+    }
+  }
+}

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Trae Project</title>
+    <script type="module">
+      if (import.meta.hot?.on) {
+        import.meta.hot.on('vite:error', (error) => {
+          if (error.err) {
+            console.error(
+              [error.err.message, error.err.frame].filter(Boolean).join('\n'),
+            )
+          }
+        })
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nodemon.json

@@ -0,0 +1,10 @@
+{
+  "watch": ["api"],
+  "ext": "ts,mts,js,json",
+  "ignore": ["api/dist/*"],
+  "exec": "tsx api/server.ts",
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "delay": 1000
+}

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "codex-ai-platform",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "client:dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "check": "tsc --noEmit",
+    "server:dev": "nodemon",
+    "dev": "concurrently \"npm run client:dev\" \"npm run server:dev\""
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.45.4",
+    "bullmq": "^5.12.0",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.1",
+    "express": "^4.21.2",
+    "framer-motion": "^11.11.11",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "ioredis": "^5.4.1",
+    "lucide-react": "^0.511.0",
+    "openai": "^4.71.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.2",
+    "react-router-dom": "^7.3.0",
+    "reactflow": "^11.11.4",
+    "stripe": "^17.3.0",
+    "tailwind-merge": "^3.0.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "vite-plugin-pwa": "^0.21.1",
+    "@eslint/js": "^9.25.0",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.15.30",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vercel/node": "^5.3.6",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-dev-locator": "^1.0.0",
+    "concurrently": "^9.2.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "nodemon": "^3.1.10",
+    "tsx": "^4.20.3",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vite-plugin-trae-solo-badge": "^1.0.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,10 @@
+/** WARNING: DON'T EDIT THIS FILE */
+/** WARNING: DON'T EDIT THIS FILE */
+/** WARNING: DON'T EDIT THIS FILE */
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

shared/types/index.ts

@@ -0,0 +1,57 @@
+// 核心业务类型定义
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  subscription_status: 'free' | 'pro' | 'enterprise';
+  stripe_customer_id?: string;
+}
+
+export interface Document {
+  id: string;
+  filename: string;
+  status: 'pending' | 'processing' | 'completed' | 'failed';
+  chunks_count: number;
+  created_at: string;
+}
+
+export interface WorkflowNode {
+  id: string;
+  type: 'llm' | 'input' | 'output' | 'condition' | 'knowledge_base';
+  data: any;
+  position: { x: number; y: number };
+}
+
+export interface WorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+}
+
+export interface Workflow {
+  id: string;
+  name: string;
+  description: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  status: 'draft' | 'published';
+  version: number;
+}
+
+export interface AIResponse {
+  content: string;
+  role: 'user' | 'assistant';
+  sources?: string[];
+}
+
+export interface PaymentIntent {
+  clientSecret: string;
+  publishableKey: string;
+}
+
+export interface TaskStatus {
+  jobId: string;
+  status: 'active' | 'waiting' | 'completed' | 'failed';
+  progress: number;
+  result?: any;
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "@/pages/Home";
+
+export default function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/other" element={<div className="text-center text-xl">Other Page - Coming Soon</div>} />
+      </Routes>
+    </Router>
+  );
+}

src/components/Empty.tsx

@@ -0,0 +1,8 @@
+import { cn } from '@/lib/utils'
+
+// Empty component
+export default function Empty() {
+  return (
+    <div className={cn('flex h-full items-center justify-center')}>Empty</div>
+  )
+}

src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      return savedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  };
+} 

src/i18n/index.ts

@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import enTranslation from '../locales/en/translation.json';
+import zhTranslation from '../locales/zh/translation.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: enTranslation },
+      zh: { translation: zhTranslation },
+    },
+    fallbackLng: 'zh',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

src/index.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/locales/en/translation.json

@@ -0,0 +1,45 @@
+{
+  "common": {
+    "welcome": "Welcome back",
+    "dashboard": "Dashboard",
+    "chat": "AI Chat",
+    "knowledge": "Knowledge Base",
+    "workflow": "Workflow",
+    "billing": "Billing",
+    "settings": "Settings",
+    "logout": "Logout",
+    "save": "Save",
+    "cancel": "Cancel",
+    "submit": "Submit",
+    "loading": "Loading...",
+    "error": "Error occurred"
+  },
+  "dashboard": {
+    "title": "Developer Console",
+    "description": "Manage your AI assets, orchestrate business processes, and integrate payment loops.",
+    "stats": {
+      "active_workflows": "Active Workflows",
+      "kb_usage": "KB Usage",
+      "api_calls": "API Calls"
+    }
+  },
+  "chat": {
+    "placeholder": "Type your message...",
+    "warning": "AI-generated content may be inaccurate, please use with caution.",
+    "clear": "Clear Chat"
+  },
+  "workflow": {
+    "title": "Visual Workflow Orchestrator",
+    "subtitle": "Drag and drop nodes to build complex AI logic",
+    "add_node": "Add Node",
+    "save_draft": "Save Draft",
+    "run_test": "Run Test"
+  },
+  "billing": {
+    "current_plan": "Current Plan",
+    "upgrade": "Upgrade Plan",
+    "free": "Free",
+    "pro": "Pro",
+    "enterprise": "Enterprise"
+  }
+}

src/locales/zh/translation.json

@@ -0,0 +1,45 @@
+{
+  "common": {
+    "welcome": "欢迎回来",
+    "dashboard": "控制台",
+    "chat": "智能对话",
+    "knowledge": "知识库",
+    "workflow": "工作流",
+    "billing": "订阅与支付",
+    "settings": "个人设置",
+    "logout": "退出登录",
+    "save": "保存",
+    "cancel": "取消",
+    "submit": "提交",
+    "loading": "加载中...",
+    "error": "发生错误"
+  },
+  "dashboard": {
+    "title": "开发者控制台",
+    "description": "管理您的 AI 资产、编排业务流程并集成支付闭环。",
+    "stats": {
+      "active_workflows": "活跃工作流",
+      "kb_usage": "知识库占用",
+      "api_calls": "API 调用量"
+    }
+  },
+  "chat": {
+    "placeholder": "输入您的问题...",
+    "warning": "AI 生成的内容可能存在误差，请审慎参考。",
+    "clear": "清除对话"
+  },
+  "workflow": {
+    "title": "可视化工作流编排",
+    "subtitle": "拖拽节点构建复杂的 AI 业务逻辑",
+    "add_node": "添加节点",
+    "save_draft": "保存草稿",
+    "run_test": "运行测试"
+  },
+  "billing": {
+    "current_plan": "当前方案",
+    "upgrade": "升级方案",
+    "free": "免费版",
+    "pro": "专业版",
+    "enterprise": "企业版"
+  }
+}

src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import './i18n'; // 导入 i18n 配置
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/pages/Home.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div></div>;
+}

src/pages/dashboard/Chat.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, User, Bot, Loader2, Trash2 } from 'lucide-react';
+import { useStore } from '@/store/useStore';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+
+export default function ChatPage() {
+  const { t } = useTranslation();
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { chatHistory, addChatMessage, clearChat } = useStore();
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [chatHistory]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+
+    const userQuery = input.trim();
+    setInput('');
+    setIsLoading(true);
+
+    addChatMessage({ content: userQuery, role: 'user' });
+
+    try {
+      const response = await fetch('/api/ai/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: userQuery, userId: 'test-user' }),
+      });
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      let assistantContent = '';
+
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\n');
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              try {
+                const data = JSON.parse(line.slice(6));
+                if (data.content) assistantContent += data.content;
+              } catch (e) {}
+            }
+          }
+        }
+        addChatMessage({ content: assistantContent, role: 'assistant' });
+      }
+    } catch (err) {
+      addChatMessage({ content: t('common.error'), role: 'assistant' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full max-w-4xl mx-auto bg-white rounded-xl shadow-sm border border-zinc-200 overflow-hidden">
+      <div className="p-4 border-b border-zinc-100 flex items-center justify-between bg-zinc-50/50">
+        <h2 className="text-sm font-semibold text-zinc-900">{t('common.chat')}</h2>
+        <button 
+          onClick={clearChat}
+          className="p-1.5 text-zinc-400 hover:text-red-500 transition-colors"
+          title={t('chat.clear')}
+        >
+          <Trash2 size={16} />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6">
+        <AnimatePresence>
+          {chatHistory.map((msg, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              className={`flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}
+            >
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${
+                msg.role === 'user' ? 'bg-blue-600 text-white' : 'bg-zinc-100 text-zinc-600'
+              }`}>
+                {msg.role === 'user' ? <User size={16} /> : <Bot size={16} />}
+              </div>
+              <div className={`
+                max-w-[85%] px-4 py-2 rounded-2xl text-sm leading-relaxed
+                ${msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-zinc-100 text-zinc-900 rounded-tl-none'}
+              `}>
+                {msg.content}
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+        <div ref={messagesEndRef} />
+      </div>
+
+      <form onSubmit={handleSubmit} className="p-4 border-t border-zinc-100">
+        <div className="relative flex items-center">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={t('chat.placeholder')}
+            disabled={isLoading}
+            className="w-full pl-4 pr-12 py-3 bg-zinc-50 border-none rounded-xl focus:ring-2 focus:ring-blue-500 text-sm transition-all"
+          />
+          <button
+            type="submit"
+            disabled={isLoading || !input.trim()}
+            className="absolute right-2 p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+          >
+            {isLoading ? <Loader2 size={18} className="animate-spin" /> : <Send size={18} />}
+          </button>
+        </div>
+        <p className="mt-2 text-[10px] text-center text-zinc-400">{t('chat.warning')}</p>
+      </form>
+    </div>
+  );
+}

src/pages/dashboard/Layout.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import { 
+  LayoutDashboard, MessageSquare, Database, GitBranch, 
+  CreditCard, Settings, Menu, X, Globe 
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useStore } from '@/store/useStore';
+
+export default function DashboardLayout() {
+  const { t } = useTranslation();
+  const { language, setLanguage } = useStore();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const location = useLocation();
+
+  const sidebarItems = [
+    { icon: LayoutDashboard, label: t('common.dashboard'), path: '/dashboard' },
+    { icon: MessageSquare, label: t('common.chat'), path: '/dashboard/chat' },
+    { icon: Database, label: t('common.knowledge'), path: '/dashboard/knowledge' },
+    { icon: GitBranch, label: t('common.workflow'), path: '/dashboard/workflow' },
+    { icon: CreditCard, label: t('common.billing'), path: '/dashboard/billing' },
+    { icon: Settings, label: t('common.settings'), path: '/dashboard/settings' },
+  ];
+
+  return (
+    <div className="flex h-screen bg-zinc-50 overflow-hidden">
+      {/* 移动端菜单按钮 */}
+      <button 
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-md shadow-md"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+      >
+        {isSidebarOpen ? <X size={20} /> : <Menu size={20} />}
+      </button>
+
+      {/* 侧边栏 */}
+      <aside className={`
+        fixed inset-y-0 left-0 z-40 w-64 bg-white border-r border-zinc-200 transform transition-transform duration-200 ease-in-out
+        lg:relative lg:translate-x-0
+        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+      `}>
+        <div className="flex flex-col h-full">
+          <div className="p-6 flex items-center justify-between">
+            <h1 className="text-xl font-bold text-blue-600 flex items-center gap-2">
+              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white text-xs">AI</div>
+              Codex
+            </h1>
+          </div>
+          
+          <nav className="flex-1 px-4 space-y-1 overflow-y-auto">
+            {sidebarItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setIsSidebarOpen(false)}
+                className={`
+                  flex items-center gap-3 px-3 py-2 rounded-lg transition-colors
+                  ${location.pathname === item.path 
+                    ? 'bg-blue-50 text-blue-600' 
+                    : 'text-zinc-600 hover:bg-zinc-100'}
+                `}
+              >
+                <item.icon size={18} />
+                <span className="font-medium text-sm">{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+
+          {/* 语言切换 & 用户信息 */}
+          <div className="p-4 border-t border-zinc-200 space-y-4">
+            <button 
+              onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}
+              className="flex items-center gap-3 px-3 py-2 w-full text-zinc-600 hover:bg-zinc-100 rounded-lg transition-colors text-sm"
+            >
+              <Globe size={18} />
+              <span>{language === 'zh' ? 'English' : '中文'}</span>
+            </button>
+            <div className="flex items-center gap-3 px-3 py-2">
+              <div className="w-8 h-8 bg-zinc-200 rounded-full flex items-center justify-center text-[10px]">USER</div>
+              <div className="flex-1 min-w-0">
+                <p className="text-xs font-medium text-zinc-900 truncate">Dev User</p>
+                <p className="text-[10px] text-zinc-500 truncate">{t('billing.free')}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <main className="flex-1 flex flex-col overflow-hidden relative">
+        <div className="flex-1 overflow-y-auto p-4 lg:p-8">
+          <Outlet />
+        </div>
+      </main>
+
+      {isSidebarOpen && (
+        <div 
+          className="fixed inset-0 z-30 bg-black/20 lg:hidden"
+          onClick={() => setIsSidebarOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

src/pages/dashboard/Workflow.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import ReactFlow, { 
+  addEdge, Background, Controls, MiniMap,
+  useNodesState, useEdgesState, Connection, Edge
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Play, Save, Plus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const initialNodes = [
+  { id: '1', type: 'input', data: { label: 'Input' }, position: { x: 250, y: 5 }, style: { background: '#EBF5FF', border: '1px solid #3B82F6', borderRadius: '8px' } },
+  { id: '2', data: { label: 'LLM Node' }, position: { x: 250, y: 100 }, style: { background: '#FDF2F2', border: '1px solid #EF4444', borderRadius: '8px' } },
+];
+
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', animated: true }];
+
+export default function WorkflowPage() {
+  const { t } = useTranslation();
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback(
+    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
+
+  return (
+    <div className="h-full flex flex-col bg-white rounded-xl shadow-sm border border-zinc-200 overflow-hidden">
+      <div className="p-4 border-b border-zinc-100 flex items-center justify-between bg-zinc-50/50">
+        <div>
+          <h2 className="text-sm font-semibold text-zinc-900">{t('workflow.title')}</h2>
+          <p className="text-[10px] text-zinc-500">{t('workflow.subtitle')}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-zinc-200 rounded-lg text-[10px] font-medium text-zinc-600 hover:bg-zinc-50 transition-colors">
+            <Plus size={12} />
+            {t('workflow.add_node')}
+          </button>
+          <button className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white rounded-lg text-[10px] font-medium hover:bg-blue-700 transition-colors">
+            <Play size={12} />
+            {t('workflow.run_test')}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 relative">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          fitView
+        >
+          <Background color="#F1F5F9" gap={20} />
+          <Controls />
+          <MiniMap nodeStrokeWidth={3} zoomable pannable />
+        </ReactFlow>
+      </div>
+    </div>
+  );
+}

src/store/useStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { User, Workflow, AIResponse } from '@shared/types';
+import i18n from '@/i18n';
+
+interface AppState {
+  user: User | null;
+  language: string;
+  setLanguage: (lang: string) => void;
+  setUser: (user: User | null) => void;
+  
+  chatHistory: AIResponse[];
+  addChatMessage: (message: AIResponse) => void;
+  clearChat: () => void;
+  
+  workflows: Workflow[];
+  activeWorkflow: Workflow | null;
+  setActiveWorkflow: (workflow: Workflow | null) => void;
+  updateWorkflow: (workflow: Workflow) => void;
+}
+
+export const useStore = create<AppState>((set) => ({
+  user: null,
+  language: i18n.language || 'zh',
+  setLanguage: (lang) => {
+    i18n.changeLanguage(lang);
+    set({ language: lang });
+  },
+  setUser: (user) => set({ user }),
+  
+  chatHistory: [],
+  addChatMessage: (message) => set((state) => ({ 
+    chatHistory: [...state.chatHistory, message] 
+  })),
+  clearChat: () => set({ chatHistory: [] }),
+  
+  workflows: [],
+  activeWorkflow: null,
+  setActiveWorkflow: (workflow) => set({ activeWorkflow: workflow }),
+  updateWorkflow: (workflow) => set((state) => ({
+    workflows: state.workflows.map((w) => w.id === workflow.id ? workflow : w)
+  })),
+}));

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false,
+    "forceConsistentCasingInFileNames": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "node",
+      "express"
+    ]
+  },
+  "include": [
+    "src",
+    "api"
+  ]
+}

vercel.json

@@ -0,0 +1,12 @@
+{
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "/api/index"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'Codex AI Platform',
+        short_name: 'CodexAI',
+        description: '全栈 AI 知识库与工作流编排平台',
+        theme_color: '#1E40AF',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@shared': path.resolve(__dirname, './shared'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+});