init

.gitignore

@@ -0,0 +1,12 @@
+__pycache__/
+*.py[cod]
+*$py.class
+.env
+.venv
+venv/
+env/
+data/
+frontend/node_modules/
+frontend/dist/
+frontend/.env
+.DS_Store

Dockerfile

@@ -0,0 +1,40 @@
+# Stage 1: Build Frontend
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Backend Setup
+FROM python:3.9-slim
+WORKDIR /app
+
+# Install system dependencies if needed
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy backend requirements
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend code
+COPY app.py .
+COPY data ./data
+
+# Copy built frontend from Stage 1
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
+# Set permissions for data directory (crucial for HF Spaces)
+RUN chmod -R 777 /app/data
+
+# Environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+# Expose port
+EXPOSE 7860
+
+# Run command
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,45 @@
+# Skill Tree Tracker
+
+A personal growth visualization tool that helps you track your skills, learning progress, and future roadmap. Built with React Flow and Python Flask, deployable to Hugging Face Spaces.
+
+## Features
+
+- **Visual Skill Tree**: Interactive node-based graph to map out your skills.
+- **Progress Tracking**: Mark skills as Pending, In Progress, or Completed.
+- **Data Persistence**: Saves data locally and syncs to Hugging Face Dataset (optional).
+- **Modern UI**: Clean interface built with Tailwind CSS.
+
+## Local Development
+
+### Prerequisites
+
+- Node.js 20+
+- Python 3.9+
+
+### Setup
+
+1. **Backend**:
+   ```bash
+   pip install -r requirements.txt
+   python app.py
+   ```
+   The backend runs on http://localhost:7860.
+
+2. **Frontend**:
+   ```bash
+   cd frontend
+   npm install
+   npm run dev
+   ```
+   The frontend runs on http://localhost:5173.
+
+### Deployment to Hugging Face Spaces
+
+1. Create a new Space on Hugging Face (Docker SDK).
+2. Upload the contents of this repository.
+3. Set `HF_TOKEN` in Space secrets if you want data sync capabilities.
+4. Set `HF_DB_REPO` to your dataset repository ID (e.g., `username/skill-tree-data`).
+
+## Data Sync
+
+The application automatically syncs `skills.json` to a configured Hugging Face Dataset. This ensures your progress is saved even if the Space restarts.

app.py

@@ -0,0 +1,141 @@
+import os
+import json
+import threading
+import time
+import shutil
+from pathlib import Path
+from flask import Flask, jsonify, request, send_from_directory
+try:
+    from dotenv import load_dotenv
+    load_dotenv(override=True)
+except ImportError:
+    pass
+
+try:
+    from huggingface_hub import HfApi, snapshot_download
+except ImportError:
+    HfApi = None
+
+app = Flask(__name__, static_folder='frontend/dist')
+
+# Configuration
+DATA_DIR = Path("data")
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+SKILLS_FILE = DATA_DIR / "skills.json"
+REPO_ID = os.getenv("HF_DB_REPO", "duqing2026/skill-tree-data") # Default repo, user should configure
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+# Default initial data
+DEFAULT_SKILLS = {
+    "nodes": [
+        {"id": "1", "type": "input", "data": {"label": "开始", "status": "completed"}, "position": {"x": 250, "y": 0}},
+        {"id": "2", "data": {"label": "学习 Python", "status": "in_progress"}, "position": {"x": 100, "y": 100}},
+        {"id": "3", "data": {"label": "学习 React", "status": "pending"}, "position": {"x": 400, "y": 100}},
+    ],
+    "edges": [
+        {"id": "e1-2", "source": "1", "target": "2"},
+        {"id": "e1-3", "source": "1", "target": "3"},
+    ]
+}
+
+class SyncManager:
+    def __init__(self, repo_id, token, data_dir):
+        self.repo_id = repo_id
+        self.token = token
+        self.data_dir = data_dir
+        self.api = HfApi(token=token) if HfApi and token else None
+        self.is_pushing = False
+        
+    def pull(self):
+        if not self.api: 
+            print("Sync: Skipping pull (no API/Token)")
+            return
+        print("Sync: Pulling data...")
+        try:
+            temp_dir = self.data_dir.parent / "temp_data_sync"
+            if temp_dir.exists(): shutil.rmtree(temp_dir)
+            temp_dir.mkdir()
+            
+            snapshot_download(
+                repo_id=self.repo_id,
+                repo_type="dataset",
+                local_dir=temp_dir,
+                token=self.token,
+                allow_patterns=["skills.json"]
+            )
+            
+            # Simple overwrite strategy for now, as this is a personal tool
+            # In a real multi-user scenario, we'd need smart merging
+            src = temp_dir / "skills.json"
+            dst = self.data_dir / "skills.json"
+            if src.exists():
+                shutil.copy2(src, dst)
+                print("Sync: Data pulled successfully.")
+            
+            shutil.rmtree(temp_dir)
+        except Exception as e:
+            print(f"Sync: Pull failed: {e}")
+
+    def push(self):
+        if not self.api: return
+        if self.is_pushing: return
+        
+        print("Sync: Pushing data...")
+        self.is_pushing = True
+        try:
+            self.api.upload_file(
+                path_or_fileobj=self.data_dir / "skills.json",
+                path_in_repo="skills.json",
+                repo_id=self.repo_id,
+                repo_type="dataset",
+                commit_message=f"Update skills.json {int(time.time())}"
+            )
+            print("Sync: Push successful.")
+        except Exception as e:
+            print(f"Sync: Push failed: {e}")
+        finally:
+            self.is_pushing = False
+
+sync_manager = SyncManager(REPO_ID, HF_TOKEN, DATA_DIR)
+
+# Initialize data
+if not SKILLS_FILE.exists():
+    # Try to pull first
+    sync_manager.pull()
+    # If still not exists, use default
+    if not SKILLS_FILE.exists():
+        with open(SKILLS_FILE, "w") as f:
+            json.dump(DEFAULT_SKILLS, f, indent=2)
+
+@app.route("/")
+def serve_index():
+    if os.path.exists(os.path.join(app.static_folder, "index.html")):
+        return send_from_directory(app.static_folder, "index.html")
+    return "Frontend not built. Please run `npm run build` in frontend directory."
+
+@app.route("/<path:path>")
+def serve_static(path):
+    if os.path.exists(os.path.join(app.static_folder, path)):
+        return send_from_directory(app.static_folder, path)
+    return serve_index()
+
+@app.route("/api/skills", methods=["GET"])
+def get_skills():
+    if SKILLS_FILE.exists():
+        with open(SKILLS_FILE, "r") as f:
+            return jsonify(json.load(f))
+    return jsonify(DEFAULT_SKILLS)
+
+@app.route("/api/skills", methods=["POST"])
+def save_skills():
+    data = request.json
+    with open(SKILLS_FILE, "w") as f:
+        json.dump(data, f, indent=2)
+    
+    # Trigger sync in background
+    threading.Thread(target=sync_manager.push).start()
+    
+    return jsonify({"status": "success"})
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7861)

frontend/.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?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/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,
+    },
+  },
+])

frontend/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>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@xyflow/react": "^12.10.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#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;
+}

frontend/src/App.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Panel,
+  type Connection,
+  type Node,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { CustomNode } from './CustomNode';
+import { Save, Plus } from 'lucide-react';
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+const INITIAL_NODES: Node[] = [
+  { id: '1', type: 'custom', data: { label: '开始', status: 'completed' }, position: { x: 250, y: 5 } },
+];
+
+export default function App() {
+  const [nodes, setNodes, onNodesChange] = useNodesState(INITIAL_NODES);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch initial data
+  useEffect(() => {
+    fetch('/api/skills')
+      .then(res => res.json())
+      .then(data => {
+        if (data.nodes && data.nodes.length > 0) {
+          // Map standard types to custom if needed
+          const mappedNodes = data.nodes.map((n: Node) => ({
+            ...n,
+            type: 'custom', // Force custom type
+          }));
+          setNodes(mappedNodes);
+          setEdges(data.edges || []);
+        }
+      })
+      .catch(err => console.error("Failed to load skills", err))
+      .finally(() => setLoading(false));
+  }, [setNodes, setEdges]);
+
+  const onConnect = useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges],
+  );
+
+  const onSave = useCallback(() => {
+    fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ nodes, edges }),
+    }).then(() => alert('保存成功！'));
+  }, [nodes, edges]);
+
+  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
+    // Simple toggle status logic for demo
+    setNodes((nds) =>
+      nds.map((n) => {
+        if (n.id === node.id) {
+          const statuses = ['pending', 'in_progress', 'completed'];
+          const currentIdx = statuses.indexOf((n.data.status as string) || 'pending');
+          const nextStatus = statuses[(currentIdx + 1) % 3];
+          return {
+            ...n,
+            data: { ...n.data, status: nextStatus },
+          };
+        }
+        return n;
+      })
+    );
+  }, [setNodes]);
+
+  const onAddNode = useCallback(() => {
+    const id = (Math.max(...nodes.map(n => parseInt(n.id) || 0), 0) + 1).toString();
+    const newNode: Node = {
+      id,
+      type: 'custom',
+      position: { x: Math.random() * 400 + 100, y: Math.random() * 400 + 100 },
+      data: { label: `技能 ${id}`, status: 'pending' },
+    };
+    setNodes((nds) => nds.concat(newNode));
+  }, [nodes, setNodes]);
+
+  if (loading) return <div className="flex items-center justify-center h-screen" style={{ height: '100vh' }}>加载中...</div>;
+
+  return (
+    <div className="w-full h-screen bg-gray-50" style={{ height: '100vh', width: '100vw' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        nodeTypes={nodeTypes}
+        fitView
+      >
+        <Controls />
+        <MiniMap />
+        <Background gap={12} size={1} />
+        <Panel position="top-right" className="flex gap-2">
+          <button
+            onClick={onAddNode}
+            className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-50 text-gray-700 font-medium cursor-pointer"
+          >
+            <Plus className="w-4 h-4" />
+            添加技能
+          </button>
+          <button
+            onClick={onSave}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-sm hover:bg-blue-700 font-medium cursor-pointer"
+          >
+            <Save className="w-4 h-4" />
+            保存进度
+          </button>
+        </Panel>
+        <Panel position="top-left" className="bg-white/80 backdrop-blur p-4 rounded-lg border border-gray-200 shadow-sm max-w-sm">
+          <h1 className="text-xl font-bold text-gray-900 mb-1">技能树追踪器</h1>
+          <p className="text-sm text-gray-500">
+            点击节点切换状态，拖拽手柄连接节点。
+          </p>
+          <div className="flex gap-3 mt-3 text-xs">
+            <div className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-gray-400"></div>待办</div>
+            <div className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-blue-400"></div>进行中</div>
+            <div className="flex items-center gap-1"><div className="w-2 h-2 rounded-full bg-green-400"></div>已完成</div>
+          </div>
+        </Panel>
+      </ReactFlow>
+    </div>
+  );
+}

frontend/src/CustomNode.tsx

@@ -0,0 +1,41 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
+import { clsx } from 'clsx';
+import { CheckCircle2, Circle, Clock } from 'lucide-react';
+
+type NodeData = {
+  label: string;
+  status: 'pending' | 'in_progress' | 'completed';
+};
+
+// We need to extend NodeProps to include our specific data type
+export function CustomNode({ data }: NodeProps<Node<NodeData>>) {
+  const statusColors = {
+    pending: 'bg-gray-100 border-gray-300 text-gray-500',
+    in_progress: 'bg-blue-50 border-blue-400 text-blue-700',
+    completed: 'bg-green-50 border-green-400 text-green-700',
+  };
+
+  const status = (data.status as keyof typeof statusColors) || 'pending';
+
+  const StatusIcon = {
+    pending: Circle,
+    in_progress: Clock,
+    completed: CheckCircle2,
+  }[status];
+
+  return (
+    <div className={clsx(
+      "px-4 py-2 rounded-lg border-2 shadow-sm min-w-[150px] transition-all bg-white",
+      statusColors[status]
+    )}>
+      <Handle type="target" position={Position.Top} className="w-3 h-3 !bg-gray-400" />
+      
+      <div className="flex items-center gap-2">
+        <StatusIcon className="w-4 h-4" />
+        <span className="font-medium text-sm">{data.label}</span>
+      </div>
+      
+      <Handle type="source" position={Position.Bottom} className="w-3 h-3 !bg-gray-400" />
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+}
+
+html, body, #root {
+  height: 100%;
+  margin: 0;
+  font-family: var(--font-sans);
+}

frontend/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>,
+)

frontend/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"]
+}

frontend/tsconfig.json

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

frontend/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"]
+}

frontend/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:7861',
+        changeOrigin: true,
+      }
+    }
+  }
+})

requirements.txt

@@ -0,0 +1,3 @@
+flask
+python-dotenv
+huggingface_hub