feat: enhance app and configure for huggingface

.gitignore

@@ -0,0 +1,24 @@
+# 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?

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+# Build the web version
+RUN npm run build
+
+# Install serve to run the static site
+RUN npm install -g serve
+
+# Hugging Face Spaces default port
+EXPOSE 7860
+
+# Serve the 'dist' directory (Web build output) on port 7860
+CMD ["serve", "-s", "dist", "-l", "7860"]

README.md

@@ -0,0 +1,69 @@
+---
+title: Electron 跨平台演示
+emoji: ⚡
+colorFrom: blue
+colorTo: cyan
+sdk: docker
+app_port: 7860
+short_description: 一个基于 Electron + Vite + React 的跨平台应用示例
+---
+
+# Electron 跨平台项目
+
+这是一个基于 Electron、Vite 和 React 的跨平台应用示例。
+本项目旨在展示如何兼顾桌面端 (Electron) 和 Web 端开发。
+
+## 功能特性
+
+- ⚡ **Electron**: 桌面端跨平台支持 (Windows, macOS, Linux)
+- ⚛️ **React**: 现代前端框架
+- 🚀 **Vite**: 极速构建工具
+- 🌐 **Web 兼容**: 支持在浏览器中运行
+- 📦 **Docker**: 支持容器化部署 Web 版本
+
+## 快速开始
+
+### 1. 安装依赖
+
+```bash
+npm install
+```
+
+### 2. 开发模式
+
+```bash
+# 启动开发服务器 (同时启动 Electron 和 Web)
+npm run dev
+```
+
+### 3. 构建
+
+```bash
+# 构建 Electron 应用和 Web 版本
+npm run build
+```
+
+构建产物：
+- `dist`: Web 版本静态文件
+- `dist-electron`: Electron 主进程文件
+- `release`: 打包后的 Electron 安装包 (需配置 electron-builder)
+
+## Docker 部署
+
+本项目支持 Docker 部署 Web 版本，适用于 Hugging Face Spaces 等平台。
+
+```bash
+docker build -t electron-web .
+docker run -p 7860:7860 electron-web
+```
+
+## 项目结构
+
+- `electron/`: Electron 主进程和预加载脚本
+- `src/`: React 渲染进程源码
+- `dist/`: Web 构建输出
+- `dist-electron/`: Electron 构建输出
+
+## 许可证
+
+MIT

dist-electron/main.js

@@ -0,0 +1,49 @@
+"use strict";
+const electron = require("electron");
+const path = require("node:path");
+const os = require("node:os");
+process.env.DIST = path.join(__dirname, "../dist");
+process.env.VITE_PUBLIC = electron.app.isPackaged ? process.env.DIST : path.join(__dirname, "../public");
+let win;
+const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+function createWindow() {
+  win = new electron.BrowserWindow({
+    icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js")
+    }
+  });
+  win.webContents.on("did-finish-load", () => {
+    win?.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
+  });
+  if (VITE_DEV_SERVER_URL) {
+    win.loadURL(VITE_DEV_SERVER_URL);
+  } else {
+    win.loadFile(path.join(process.env.DIST, "index.html"));
+  }
+}
+electron.app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    electron.app.quit();
+    win = null;
+  }
+});
+electron.app.on("activate", () => {
+  if (electron.BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+electron.app.whenReady().then(() => {
+  electron.ipcMain.handle("get-system-info", () => {
+    return {
+      platform: process.platform,
+      arch: process.arch,
+      node: process.versions.node,
+      electron: process.versions.electron,
+      chrome: process.versions.chrome,
+      cpus: os.cpus().length,
+      memory: Math.round(os.totalmem() / 1024 / 1024 / 1024) + " GB"
+    };
+  });
+  createWindow();
+});

dist-electron/preload.js

@@ -0,0 +1,25 @@
+"use strict";
+const electron = require("electron");
+electron.contextBridge.exposeInMainWorld("ipcRenderer", {
+  on(...args) {
+    const [channel, listener] = args;
+    return electron.ipcRenderer.on(channel, (event, ...args2) => listener(event, ...args2));
+  },
+  off(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.off(channel, ...omit);
+  },
+  send(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.send(channel, ...omit);
+  },
+  invoke(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.invoke(channel, ...omit);
+  }
+  // You can expose other APTs you need here.
+  // ...
+});
+electron.contextBridge.exposeInMainWorld("electronAPI", {
+  getSystemInfo: () => electron.ipcRenderer.invoke("get-system-info")
+});

electron/main.ts

@@ -0,0 +1,74 @@
+import { app, BrowserWindow, ipcMain } from 'electron'
+import path from 'node:path'
+import os from 'node:os'
+
+// The built directory structure
+//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js
+// │ └─┬ preload
+// │   └── index.js
+// ├─┬ dist
+// │ └── index.html
+
+process.env.DIST = path.join(__dirname, '../dist')
+process.env.VITE_PUBLIC = app.isPackaged ? process.env.DIST : path.join(__dirname, '../public')
+
+let win: BrowserWindow | null
+
+const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
+
+function createWindow() {
+  win = new BrowserWindow({
+    icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  })
+
+  // Test active push message to Renderer-process.
+  win.webContents.on('did-finish-load', () => {
+    win?.webContents.send('main-process-message', (new Date).toLocaleString())
+  })
+
+  if (VITE_DEV_SERVER_URL) {
+    win.loadURL(VITE_DEV_SERVER_URL)
+  } else {
+    // win.loadFile('dist/index.html')
+    win.loadFile(path.join(process.env.DIST, 'index.html'))
+  }
+}
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+    win = null
+  }
+})
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+app.whenReady().then(() => {
+  ipcMain.handle('get-system-info', () => {
+    return {
+      platform: process.platform,
+      arch: process.arch,
+      node: process.versions.node,
+      electron: process.versions.electron,
+      chrome: process.versions.chrome,
+      cpus: os.cpus().length,
+      memory: Math.round(os.totalmem() / 1024 / 1024 / 1024) + ' GB',
+    }
+  })
+  createWindow()
+})

electron/preload.ts

@@ -0,0 +1,28 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+// --------- Expose some API to the Renderer process ---------
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  on(...args: Parameters<typeof ipcRenderer.on>) {
+    const [channel, listener] = args
+    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
+  },
+  off(...args: Parameters<typeof ipcRenderer.off>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.off(channel, ...omit)
+  },
+  send(...args: Parameters<typeof ipcRenderer.send>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.send(channel, ...omit)
+  },
+  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.invoke(channel, ...omit)
+  },
+
+  // You can expose other APTs you need here.
+  // ...
+})
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getSystemInfo: () => ipcRenderer.invoke('get-system-info'),
+})

eslint.config.js

@@ -0,0 +1,23 @@
+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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>electron-cross-platform</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "electron-cross-platform",
+  "private": true,
+  "version": "0.0.0",
+  "main": "dist-electron/main.js",
+  "description": "一个跨平台的 Electron 项目示例",
+  "author": "Your Name",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && electron-builder",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "electron": "^40.8.0",
+    "electron-builder": "^26.8.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-electron": "^0.29.0",
+    "vite-plugin-electron-renderer": "^0.14.6"
+  }
+}

src/App.css

@@ -0,0 +1,136 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+/* Custom styles */
+.status-badge {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.status-badge.electron {
+  background-color: #2b2e3b;
+  color: #9feaf9;
+  border: 1px solid #9feaf9;
+}
+
+.status-badge.web {
+  background-color: #f0f0f0;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+@media (prefers-color-scheme: dark) {
+  .status-badge.web {
+    background-color: #333;
+    color: #fff;
+    border: 1px solid #555;
+  }
+}
+
+.system-info {
+  margin-top: 15px;
+  text-align: left;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 15px;
+  border-radius: 8px;
+  display: inline-block;
+}
+
+.system-info ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.system-info li {
+  margin: 5px 0;
+  font-family: monospace;
+}
+
+.todo-input {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.todo-input input {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 200px;
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.todo-list li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.todo-list li:last-child {
+  border-bottom: none;
+}
+
+.delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.delete-btn:hover {
+  background: rgba(255, 0, 0, 0.1);
+  border-radius: 50%;
+}

src/App.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+interface SystemInfo {
+  platform: string
+  arch: string
+  node: string
+  electron: string
+  chrome: string
+  cpus: number
+  memory: string
+}
+
+function App() {
+  const [count, setCount] = useState(0)
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null)
+  const [isElectron, setIsElectron] = useState(false)
+  const [todos, setTodos] = useState<string[]>(() => {
+    const saved = localStorage.getItem('todos')
+    return saved ? JSON.parse(saved) : []
+  })
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => {
+    // Check if running in Electron
+    const checkElectron = async () => {
+      if (window.electronAPI) {
+        setIsElectron(true)
+        const info = await window.electronAPI.getSystemInfo()
+        setSystemInfo(info)
+      }
+    }
+    checkElectron()
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem('todos', JSON.stringify(todos))
+  }, [todos])
+
+  const addTodo = () => {
+    if (inputValue.trim()) {
+      setTodos([...todos, inputValue.trim()])
+      setInputValue('')
+    }
+  }
+
+  const removeTodo = (index: number) => {
+    setTodos(todos.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div className="container">
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React + Electron</h1>
+      
+      <div className="card status-card">
+        <h2>运行环境检测</h2>
+        <div className={`status-badge ${isElectron ? 'electron' : 'web'}`}>
+          {isElectron ? '🖥️ Electron 桌面端' : '🌐 Web 浏览器端'}
+        </div>
+        
+        {isElectron && systemInfo && (
+          <div className="system-info">
+            <h3>系统信息</h3>
+            <ul>
+              <li><strong>平台:</strong> {systemInfo.platform} ({systemInfo.arch})</li>
+              <li><strong>CPU核心:</strong> {systemInfo.cpus} 核</li>
+              <li><strong>内存:</strong> {systemInfo.memory}</li>
+              <li><strong>Chrome:</strong> {systemInfo.chrome}</li>
+              <li><strong>Electron:</strong> {systemInfo.electron}</li>
+              <li><strong>Node.js:</strong> {systemInfo.node}</li>
+            </ul>
+          </div>
+        )}
+      </div>
+
+      <div className="card">
+        <h2>功能演示 1: 计数器</h2>
+        <button onClick={() => setCount((count) => count + 1)}>
+          计数器: {count}
+        </button>
+      </div>
+
+      <div className="card">
+        <h2>功能演示 2: 本地待办事项 (LocalStorage)</h2>
+        <div className="todo-input">
+          <input 
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && addTodo()}
+            placeholder="输入待办事项..."
+          />
+          <button onClick={addTodo}>添加</button>
+        </div>
+        <ul className="todo-list">
+          {todos.map((todo, index) => (
+            <li key={index}>
+              <span>{todo}</span>
+              <button className="delete-btn" onClick={() => removeTodo(index)}>❌</button>
+            </li>
+          ))}
+          {todos.length === 0 && <li className="empty">暂无待办事项</li>}
+        </ul>
+      </div>
+
+      <p className="read-the-docs">
+        本项目支持 Docker 部署到 Hugging Face Spaces
+      </p>
+    </div>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface Window {
+  electronAPI?: {
+    getSystemInfo: () => Promise<{
+      platform: string
+      arch: string
+      node: string
+      electron: string
+      chrome: string
+      cpus: number
+      memory: string
+    }>
+  }
+}

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import electron from 'vite-plugin-electron/simple'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    electron({
+      main: {
+        // Shortcut of `build.lib.entry`
+        entry: 'electron/main.ts',
+      },
+      preload: {
+        // Shortcut of `build.rollupOptions.input`
+        input: 'electron/preload.ts',
+      },
+      // Optional: Use Node.js API in the Renderer-process
+      renderer: {},
+    }),
+  ],
+})