first commit

2026-06-28 03:01:28 +08:00 · 2025-04-13 17:44:54 +08:00
commit 0e0b8da317
112 changed files with 4397 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,43 @@
+# 通用端口配置
+BACKEND_PORT=8001
+FRONTEND_PORT=3015
+BACKEND_HOST=0.0.0.0
+
+# 前端访问后端用（生产环境建议写公网或宿主机 IP）
+VITE_API_BASE_URL=http://127.0.0.1:8001
+VITE_SCREENSHOT_BASE_URL=http://127.0.0.1:8001/static/screenshots
+
+# 生产环境配置
+ENV=production
+STATIC=/static
+OUT_DIR=./static/screenshots
+IMAGE_BASE_URL=/static/screenshots
+DATA_DIR=data
+
+
+# AI 相关配置
+OPENAI_API_KEY=
+OPENAI_API_BASE_URL=
+OPENAI_MODEL=
+DEEP_SEEK_API_KEY=
+DEEP_SEEK_API_BASE_URL=
+DEEP_SEEK_MODEL=
+QWEN_API_KEY=
+QWEN_API_BASE_URL=
+QWEN_MODEL=
+
+# FFMPEG 配置
+FFMPEG_BIN_PATH=/Users/jeffery/Downloads/
+
+                                                                                                                                                                                           
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                                                                                                                                          
+~                                                                                       
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,318 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+BiliNote/pnpm-lock.yaml
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+!.env.example
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
+.pdm.toml
+.pdm-python
+.pdm-build/
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+/backend/data/*
+/backend/static/*
+/backend/note_tasks.db
+/backend/bin/
+/backend/logs/
+/backend/note_results
+/backend/models
+/backend/.idea
--- a/BillNote_frontend/.env
+++ b/BillNote_frontend/.env
@@ -0,0 +1,3 @@
+# 前端专用
+VITE_API_BASE_URL=http://127.0.0.1:8000
+VITE_SCREENSHOT_BASE_URL=http://127.0.0.1:8000/static/screenshots
--- a/BillNote_frontend/.gitignore
+++ b/BillNote_frontend/.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?
+/pnpm-lock.yaml
--- a/BillNote_frontend/Dockerfile
+++ b/BillNote_frontend/Dockerfile
@@ -0,0 +1,13 @@
+FROM node:18-alpine AS build
+
+WORKDIR /app
+
+COPY ./BillNote_frontend /app
+
+RUN npm install && npm run build
+
+FROM nginx:alpine
+
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
--- a/BillNote_frontend/README.md
+++ b/BillNote_frontend/README.md
@@ -0,0 +1,54 @@
+# 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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## 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 tseslint.config({
+  extends: [
+    // 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,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+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 tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
--- a/BillNote_frontend/components.json
+++ b/BillNote_frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/BillNote_frontend/eslint.config.js
+++ b/BillNote_frontend/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 },
+      ],
+    },
+  },
+)
--- a/BillNote_frontend/index.html
+++ b/BillNote_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="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BiliNote - 强大的AI视频笔记神器</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/BillNote_frontend/package.json
+++ b/BillNote_frontend/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "bili_note",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@lottiefiles/dotlottie-react": "^0.13.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailwindcss/vite": "^4.1.3",
+    "@uiw/react-markdown-preview": "^5.1.3",
+    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "github-markdown-css": "^5.8.1",
+    "katex": "^0.16.21",
+    "lottie-react": "^2.4.1",
+    "lucide-react": "^0.487.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.55.0",
+    "react-hot-toast": "^2.5.2",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "1.0.0",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.1.0",
+    "tailwindcss": "^4.1.3",
+    "tw-animate-css": "^1.2.5",
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@tailwindcss/postcss": "^4.1.3",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}
--- a/BillNote_frontend/postcss.config.cjs
+++ b/BillNote_frontend/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+    },
+}
--- a/BillNote_frontend/public/icon.svg
+++ b/BillNote_frontend/public/icon.svg
@@ -0,0 +1,12 @@
+<svg width="415" height="412" viewBox="0 0 415 412" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28C0 12.536 12.536 0 28 0H387C402.464 0 415 12.536 415 28V384C415 399.464 402.464 412 387 412H28C12.536 412 0 399.464 0 384V28Z" fill="#3C77FB"/>
+<rect x="60" y="64" width="296" height="283" rx="37" fill="white"/>
+<path d="M268.422 175.657C276.308 180.298 276.308 191.702 268.422 196.343L186.335 244.641C178.336 249.348 168.25 243.58 168.25 234.298V137.702C168.25 128.42 178.336 122.652 186.335 127.359L268.422 175.657Z" fill="#3C77FB"/>
+<path d="M17 282C17 270.954 25.9543 262 37 262H83C94.0457 262 103 270.954 103 282V282C103 293.046 94.0457 302 83 302H37C25.9543 302 17 293.046 17 282V282Z" fill="#3C77FB"/>
+<path d="M38 281.5C38 274.044 44.0442 268 51.5 268H82.5C89.9558 268 96 274.044 96 281.5V281.5C96 288.956 89.9558 295 82.5 295H51.5C44.0442 295 38 288.956 38 281.5V281.5Z" fill="white"/>
+<path d="M17 206C17 194.954 25.9543 186 37 186H83C94.0457 186 103 194.954 103 206V206C103 217.046 94.0457 226 83 226H37C25.9543 226 17 217.046 17 206V206Z" fill="#3C77FB"/>
+<path d="M38 205.5C38 198.044 44.0442 192 51.5 192H82.5C89.9558 192 96 198.044 96 205.5V205.5C96 212.956 89.9558 219 82.5 219H51.5C44.0442 219 38 212.956 38 205.5V205.5Z" fill="white"/>
+<path d="M17 130C17 118.954 25.9543 110 37 110H83C94.0457 110 103 118.954 103 130V130C103 141.046 94.0457 150 83 150H37C25.9543 150 17 141.046 17 130V130Z" fill="#3C77FB"/>
+<path d="M38 129.5C38 122.044 44.0442 116 51.5 116H82.5C89.9558 116 96 122.044 96 129.5V129.5C96 136.956 89.9558 143 82.5 143H51.5C44.0442 143 38 136.956 38 129.5V129.5Z" fill="white"/>
+<path d="M145 290C145 285.582 148.582 282 153 282H284C288.418 282 292 285.582 292 290V299C292 303.418 288.418 307 284 307H153C148.582 307 145 303.418 145 299V290Z" fill="#3C77FB"/>
+</svg>
--- a/BillNote_frontend/public/placeholder.png
+++ b/BillNote_frontend/public/placeholder.png
--- a/BillNote_frontend/public/vite.svg
+++ b/BillNote_frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/BillNote_frontend/src/App.css
+++ b/BillNote_frontend/src/App.css
--- a/BillNote_frontend/src/App.tsx
+++ b/BillNote_frontend/src/App.tsx
@@ -0,0 +1,16 @@
+
+import './App.css'
+import {HomePage} from "./pages/Home.tsx";
+import {useTaskPolling} from "@/hooks/useTaskPolling.ts";
+
+function App() {
+    useTaskPolling(3000) // 每 3 秒轮询一次
+
+    return (
+        <>
+            <HomePage></HomePage>
+        </>
+    )
+}
+
+export default App
--- a/BillNote_frontend/src/assets/Lottie/idle.json
+++ b/BillNote_frontend/src/assets/Lottie/idle.json
--- a/BillNote_frontend/src/assets/Lottie/loading.json
+++ b/BillNote_frontend/src/assets/Lottie/loading.json
--- a/BillNote_frontend/src/assets/react.svg
+++ b/BillNote_frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/BillNote_frontend/src/components/Lottie/Idle.tsx
+++ b/BillNote_frontend/src/components/Lottie/Idle.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import Lottie from 'lottie-react'
+import loadingJson from '@/assets/Lottie/idle.json'
+
+const Idle: FC = () => {
+    return (
+        <div className="flex justify-center items-center ">
+            <Lottie
+                animationData={loadingJson}
+                loop
+                autoplay
+                style={{ width: 350, height: 350 }}
+            />
+        </div>
+    )
+}
+
+export default Idle
--- a/BillNote_frontend/src/components/Lottie/Loading.tsx
+++ b/BillNote_frontend/src/components/Lottie/Loading.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import Lottie from 'lottie-react'
+import loadingJson from '@/assets/Lottie/loading.json'
+
+const Loading: FC = () => {
+    return (
+        <div className="flex justify-center items-center ">
+            <Lottie
+                animationData={loadingJson}
+                loop
+                autoplay
+                style={{ width: 150, height: 150 }}
+            />
+        </div>
+    )
+}
+
+export default Loading
--- a/BillNote_frontend/src/components/ui/badge.tsx
+++ b/BillNote_frontend/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/BillNote_frontend/src/components/ui/button.tsx
+++ b/BillNote_frontend/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/BillNote_frontend/src/components/ui/card.tsx
+++ b/BillNote_frontend/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/BillNote_frontend/src/components/ui/checkbox.tsx
+++ b/BillNote_frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/BillNote_frontend/src/components/ui/form.tsx
+++ b/BillNote_frontend/src/components/ui/form.tsx
@@ -0,0 +1,165 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/BillNote_frontend/src/components/ui/input.tsx
+++ b/BillNote_frontend/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/BillNote_frontend/src/components/ui/label.tsx
+++ b/BillNote_frontend/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/BillNote_frontend/src/components/ui/scroll-area.tsx
+++ b/BillNote_frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/BillNote_frontend/src/components/ui/select.tsx
+++ b/BillNote_frontend/src/components/ui/select.tsx
@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/BillNote_frontend/src/components/ui/sonner.tsx
+++ b/BillNote_frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/BillNote_frontend/src/components/ui/tooltip.tsx
+++ b/BillNote_frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/BillNote_frontend/src/hooks/useTaskPolling.ts
+++ b/BillNote_frontend/src/hooks/useTaskPolling.ts
@@ -0,0 +1,46 @@
+// hooks/useTaskPolling.ts
+import { useEffect } from "react"
+import { useTaskStore } from "@/store/taskStore"
+import {get_task_status} from "@/services/note.ts";
+
+export const useTaskPolling = (interval = 3000) => {
+    const tasks = useTaskStore(state => state.tasks)
+    const updateTaskContent = useTaskStore(state => state.updateTaskContent)
+    const removeTask=useTaskStore(state=>state.removeTask)
+    useEffect(() => {
+        const timer = setInterval(async () => {
+            const pendingTasks = tasks.filter(
+                (task) => task.status === "PENDING" || task.status === "running"
+            )
+
+            for (const task of pendingTasks) {
+                try {
+                    console.log(task)
+                    const res = await get_task_status(task.id)
+                    const {status}=res.data
+
+                    if (status && status !== task.status) {
+                        if (status === "SUCCESS") {
+                            const {  markdown, transcript, audio_meta } = res.data.result
+
+                            updateTaskContent(task.id, {
+                                status,
+                                markdown,
+                                transcript,
+                                audioMeta: audio_meta,
+                            })
+                        } else {
+                            updateTaskStatus(task.id, status)
+                        }
+                    }
+                } catch (e) {
+                    console.error("❌ 任务轮询失败：", e)
+                    removeTask(task.id)
+
+                }
+            }
+        }, interval)
+
+        return () => clearInterval(timer)
+    }, [interval, tasks])
+}
--- a/BillNote_frontend/src/index.css
+++ b/BillNote_frontend/src/index.css
@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #3C77FB;
+  --primary-light: #e0eeff;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #e6f7ff;
+  --input: oklch(0.922 0 0);
+  --ring: #096dd9;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #3C77FB;
+  --primary-light:#e0eeff;
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: #e6f7ff;
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/BillNote_frontend/src/indexa.css
+++ b/BillNote_frontend/src/indexa.css
@@ -0,0 +1,124 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #3C77FB;
+  --primary-light: #e0eeff;
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #e6f7ff;
+  --input: oklch(0.922 0 0);
+  --ring: #096dd9;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: #3C77FB;
+  --primary-light:#e0eeff;
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: #e6f7ff;
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-light: var(--primary-light);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/BillNote_frontend/src/layouts/HomeLayout.tsx
+++ b/BillNote_frontend/src/layouts/HomeLayout.tsx
@@ -0,0 +1,43 @@
+import type { FC, ReactNode } from 'react'
+import { Button } from "@/components/ui/button.tsx"
+
+interface HomeLayoutProps {
+    form: ReactNode
+    preview: ReactNode
+}
+
+const HomeLayout: FC<HomeLayoutProps> = ({ form, preview }) => {
+    return (
+        <div className="min-h-screen  flex flex-col bg-white">
+            <div className="flex flex-1">
+                {/* 左侧部分：Header + 表单 */}
+                <aside className="w-[400px] bg-white border-r border-neutral-200 flex flex-col">
+                    {/* Header */}
+                    <header className="h-16  flex items-center px-6 gap-2">
+                        <div className="w-10 h-10 rounded-2xl overflow-hidden flex justify-center items-center">
+                            <img src="/icon.svg" alt="logo" className="w-full h-full object-contain" />
+                        </div>
+                        <div className="text-2xl font-bold text-gray-800">BiliNote</div>
+                    </header>
+
+                    {/* 表单内容 */}
+                    <div className="flex-1 p-4 overflow-auto">
+                        {form}
+                    </div>
+                </aside>
+
+                {/* 右侧预览区域 */}
+                <main className="flex-1 h-screen p-6 bg-white overflow-hidden">
+                    {preview}
+                </main>
+            </div>
+
+            {/* 页脚 */}
+            {/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
+            {/*    © 2025 BiliNote. All rights reserved.*/}
+            {/*</footer>*/}
+        </div>
+    )
+}
+
+export default HomeLayout
--- a/BillNote_frontend/src/layouts/RootLayout.tsx
+++ b/BillNote_frontend/src/layouts/RootLayout.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode, FC } from "react"
+// import "@/global.css"
+import { Toaster } from 'react-hot-toast'
+
+interface RootLayoutProps {
+    children: ReactNode
+}
+
+export const metadata = {
+    title: "BiliNote - 视频笔记生成器",
+    description: "通过视频链接结合大模型自动生成对应的笔记",
+}
+
+const RootLayout: FC<RootLayoutProps> = ({ children }) => {
+    return (
+        <div className="min-h-screen bg-neutral-100 text-neutral-900 font-sans">
+            <Toaster
+                position="top-center" // 顶部居中显示
+                toastOptions={{
+                    style: {
+                        borderRadius: '8px',
+                        background: '#333',
+                        color: '#fff',
+                    },
+                }}
+            />
+            {children}
+        </div>
+    )
+}
+
+export default RootLayout
--- a/BillNote_frontend/src/lib/utils.ts
+++ b/BillNote_frontend/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))
+}
--- a/BillNote_frontend/src/main.tsx
+++ b/BillNote_frontend/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import RootLayout from "./layouts/RootLayout.tsx";
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <RootLayout>
+            <App />
+        </RootLayout>
+    </StrictMode>,
+)
--- a/BillNote_frontend/src/pages/Home.tsx
+++ b/BillNote_frontend/src/pages/Home.tsx
@@ -0,0 +1,42 @@
+import React,{FC,useEffect,useState}  from "react";
+import HomeLayout from "@/layouts/HomeLayout.tsx";
+import NoteForm from '@/pages/components/NoteForm'
+import MarkdownViewer from '@/pages/components/MarkdownViewer'
+import NoteFormWrapper from "@/pages/components/NoteFormWrapper.tsx";
+import {get_task_status} from "@/services/note.ts";
+import {useTaskStore} from "@/store/taskStore";
+type ViewStatus = 'idle' | 'loading' | 'success'
+export const HomePage:FC =()=>{
+    const tasks = useTaskStore((state) => state.tasks)
+    const currentTaskId = useTaskStore((state) => state.currentTaskId)
+
+    const currentTask = tasks.find((t) => t.id === currentTaskId)
+
+    const [status, setStatus] = useState<ViewStatus>('idle')
+
+    const content = currentTask?.markdown || ''
+
+    useEffect(() => {
+        if (!currentTask) {
+            setStatus('idle')
+        } else if (currentTask.status === 'PENDING') {
+            setStatus('loading')
+        } else if (currentTask.status === 'SUCCESS') {
+            setStatus('success')
+        }
+    }, [currentTask])
+
+    // useEffect( () => {
+    //     get_task_status('d4e87938-c066-48a0-bbd5-9bec40d53354').then(res=>{
+    //         console.log('res1',res)
+    //         setContent(res.data.result.markdown)
+    //     })
+    // }, [tasks]);
+    return (
+        <HomeLayout
+            form={<NoteForm/>}
+            preview={<MarkdownViewer status={status} content={content} />}
+
+        />
+    )
+}
--- a/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
+++ b/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
@@ -0,0 +1,168 @@
+import { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { Button } from "@/components/ui/button"
+import { Copy, Download, FileText,ArrowRight } from "lucide-react"
+import { toast } from "sonner" // 你可以换成自己的通知组件
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { solarizedlight as codeStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism'
+import 'github-markdown-css/github-markdown-light.css'
+import {FC} from 'react'
+import Loading from "@/components/Lottie/Loading.tsx";
+import Idle from "@/components/Lottie/Idle.tsx";
+import {useTaskStore} from "@/store/taskStore";
+interface MarkdownViewerProps {
+    content: string
+    status: 'idle' | 'loading' | 'success'
+}
+
+const MarkdownViewer: FC<MarkdownViewerProps> = ({ content, status }) => {
+    const [copied, setCopied] = useState(false)
+    const getCurrentTask =useTaskStore.getState().getCurrentTask
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(content)
+            setCopied(true)
+            toast.success("已复制到剪贴板")
+            setTimeout(() => setCopied(false), 2000)
+        } catch (e) {
+            toast.error(`复制失败${e}`)
+            toast.error("复制失败",e)
+        }
+    }
+
+    const handleDownload = () => {
+        const currentTask=getCurrentTask()
+        const currentTaskName=currentTask?.audioMeta.title
+        const blob = new Blob([content], { type: "text/markdown;charset=utf-8" })
+        const link = document.createElement("a")
+        link.href = URL.createObjectURL(blob)
+        link.download = `${currentTaskName}.md`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
+    if (status === 'loading') {
+        return (
+            <div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-4">
+                <Loading className='h-5 w-5' />
+                <div className="text-center text-sm">
+                    <p className="text-lg font-bold">正在生成笔记，请稍候…</p>
+                    <p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
+                </div>
+            </div>
+
+        )
+    }
+    else if (status === 'idle'){
+        return (
+            <div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-3">
+
+                    <Idle ></Idle>
+
+                <div className="text-center">
+                    <p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
+                    <p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 等视频平台</p>
+                </div>
+            </div>
+
+        )
+    }
+
+    return (
+        <div className="w-full h-full flex flex-col">
+            {/* 顶部操作栏 */}
+            <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-semibold text-neutral-900 flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-primary" />
+                    笔记内容
+                </h2>
+                <div className="flex items-center gap-2">
+                    <Button onClick={handleCopy} variant="outline" size="sm">
+                        <Copy className="w-4 h-4 mr-1" />
+                        {copied ? "已复制" : "复制"}
+                    </Button>
+                    <Button onClick={handleDownload} variant="outline" size="sm">
+                        <Download className="w-4 h-4 mr-1" />
+                        导出 Markdown
+                    </Button>
+                </div>
+            </div>
+
+            {/* 滚动容器 */}
+
+            <div className='overflow-y-auto'>
+                {
+                    content && content!='loading' || content!='empty'?(
+                        <div className="markdown-body flex-1  bg-white">  <ReactMarkdown
+
+                            components={{
+                                code({ node, inline, className, children, ...props }) {
+                                    const match = /language-(\w+)/.exec(className || '')
+                                    const codeContent = String(children).replace(/\n$/, '')
+
+                                    if (!inline && match) {
+                                        return (
+                                            <div className="relative group">
+                                                <SyntaxHighlighter
+                                                    style={codeStyle}
+                                                    language={match[1]}
+                                                    PreTag="div"
+                                                    {...props}
+                                                >
+                                                    {codeContent}
+                                                </SyntaxHighlighter>
+                                                <button
+                                                    onClick={() => {
+                                                        navigator.clipboard.writeText(codeContent)
+                                                        toast.success("代码已复制")
+                                                    }}
+                                                    className="absolute top-2 right-2 hidden group-hover:flex items-center gap-1 text-xs px-2 py-1 bg-white/70 border border-gray-300 rounded hover:bg-white shadow-sm transition"
+                                                >
+                                                    <Copy className="w-3 h-3" />
+                                                    复制
+                                                </button>
+                                            </div>
+                                        )
+                                    }
+
+                                    return (
+                                        <code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>
+                                            {children}
+                                        </code>
+                                    )
+                                }
+                            }}
+                        >
+                            {content}
+                        </ReactMarkdown></div>
+                    ):(
+                        <div className='w-full h-screen flex justify-center items-center'>
+                           <div className='w-[300px] flex-col justify-items-center '>
+                               <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">
+                                    <ArrowRight className="h-8 w-8 text-primary" />
+                               </div>
+                               <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>
+                               <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
+                           </div>
+                        </div>
+                    )
+                }
+            </div>
+            {/*<div className="markdown-body flex-1 overflow-y-auto bg-white">*/}
+            {/*    {content ? (*/}
+            {/*      */}
+            {/*    ) : (*/}
+            {/*        <>*/}
+            {/*            <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">*/}
+            {/*                <ArrowRight className="h-8 w-8 text-primary" />*/}
+            {/*            </div>*/}
+            {/*            <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>*/}
+            {/*            <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube、腾讯视频和爱奇艺</p>*/}
+            {/*        </>*/}
+            {/*    )}*/}
+            {/*</div>*/}
+        </div>
+    )
+}
+
+export default MarkdownViewer
--- a/BillNote_frontend/src/pages/components/NoteForm.tsx
+++ b/BillNote_frontend/src/pages/components/NoteForm.tsx
@@ -0,0 +1,287 @@
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Info,Clock } from "lucide-react"
+
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
+import {generateNote} from "@/services/note.ts";
+import {useTaskStore} from "@/store/taskStore";
+import { useState } from "react"
+import NoteHistory from "@/pages/components/NoteHistory.tsx";
+
+// ✅ 定义表单 schema
+const formSchema = z.object({
+    video_url: z.string().url("请输入正确的视频链接"),
+    platform: z.string().nonempty("请选择平台"),
+    quality: z.enum(["fast", "medium", "slow"], {
+        required_error: "请选择音频质量",
+    }),
+    screenshot: z.boolean().optional(),
+    link:z.boolean().optional(),
+})
+
+
+type NoteFormValues = z.infer<typeof formSchema>
+
+const NoteForm = () => {
+    const [selectedTaskId] = useState<string | null>(null)
+
+    const tasks = useTaskStore((state) => state.tasks)
+    const setCurrentTask=useTaskStore((state)=>state.setCurrentTask)
+    const currentTaskId=useTaskStore(state=>state.currentTaskId )
+    tasks.find((t) => t.id === selectedTaskId);
+    const form = useForm<NoteFormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            video_url: "",
+            platform: "bilibili",
+            quality: "medium", // 默认中等质量
+            screenshot: false,
+        },
+    })
+
+
+    const isGenerating = false
+
+    const onSubmit = async (data: NoteFormValues) => {
+        console.log("🎯 提交内容：", data)
+        await generateNote({
+            video_url: data.video_url,
+            platform: data.platform,
+            quality: data.quality,
+            screenshot:data.screenshot,
+            link:data.link
+        });
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between my-3">
+                            <h2 className="block  ">视频链接</h2>
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p className="text-xs ">输入视频链接，支持哔哩哔哩、YouTube等平台</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        </div>
+
+                        <div className="flex gap-2">
+                            {/* 平台选择 */}
+                            <FormField
+                                control={form.control}
+                                name="platform"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <Select
+                                            onValueChange={field.onChange}
+                                            defaultValue={field.value}
+                                        >
+                                            <FormControl>
+                                                <SelectTrigger className="w-32">
+                                                    <SelectValue placeholder="选择平台" />
+                                                </SelectTrigger>
+                                            </FormControl>
+                                            <SelectContent>
+                                                <SelectItem value="bilibili">哔哩哔哩</SelectItem>
+                                                <SelectItem value="youtube">Youtube</SelectItem>
+                                                {/*<SelectItem value="local">本地视频</SelectItem>*/}
+                                            </SelectContent>
+                                        </Select>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            {/* 视频地址 */}
+                            <FormField
+                                control={form.control}
+                                name="video_url"
+                                render={({ field }) => (
+                                    <FormItem className="flex-1">
+                                        <FormControl>
+                                            <Input
+                                                placeholder="视频链接"
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                        </div>
+                        {/*<p className="text-xs text-neutral-500">*/}
+                        {/*    支持哔哩哔哩视频链接，例如：*/}
+                        {/*    https://www.bilibili.com/video/BV1vc25YQE9X/*/}
+                        {/*</p>*/}
+                        <FormField
+                            control={form.control}
+                            name="quality"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <div className="flex items-center justify-between my-3">
+                                        <h2 className="block  ">音频质量</h2>
+                                        <TooltipProvider>
+                                            <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                    <Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
+                                                </TooltipTrigger>
+                                                <TooltipContent>
+                                                    <p className="text-xs max-w-[200px]">质量越高，下载体积越大，速度越慢</p>
+                                                </TooltipContent>
+                                            </Tooltip>
+                                        </TooltipProvider>
+                                    </div>
+                                    <Select
+                                        onValueChange={field.onChange}
+                                        defaultValue={field.value}
+                                    >
+                                        <FormControl>
+                                            <SelectTrigger className="w-full">
+                                                <SelectValue placeholder="选择质量" />
+                                            </SelectTrigger>
+                                        </FormControl>
+                                        <SelectContent>
+                                            <SelectItem value="fast">快速（压缩）</SelectItem>
+                                            <SelectItem value="medium">中等（推荐）</SelectItem>
+                                            <SelectItem value="slow">高质量（清晰）</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    {/*<FormDescription className="text-xs text-neutral-500">*/}
+                                    {/*    质量越高，下载体积越大，速度越慢*/}
+                                    {/*</FormDescription>*/}
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                    </div>
+
+                    {/* 是否需要原片位置 */}
+                    <FormField
+                        control={form.control}
+                        name="link"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center space-x-2">
+                                {/* Tooltip 部分 */}
+
+
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                        id="link"
+                                    />
+                                </FormControl>
+
+                                <FormLabel
+                                    htmlFor="link"
+                                    className="text-sm font-medium leading-none"
+                                >
+                                    是否插入内容跳转链接
+                                </FormLabel>
+                            </FormItem>
+                        )}
+                    />
+                    {/* 是否需要下载 */}
+                    <FormField
+                        control={form.control}
+                        name="screenshot"
+                        render={({ field }) => (
+                            <FormItem className="flex items-center space-x-2">
+                                {/* Tooltip 部分 */}
+
+
+                                <FormControl>
+                                    <Checkbox
+                                        checked={field.value}
+                                        onCheckedChange={field.onChange}
+                                        id="screenshot"
+                                    />
+                                </FormControl>
+
+                                <FormLabel
+                                    htmlFor="screenshot"
+                                    className="text-sm font-medium leading-none"
+                                >
+                                    是否插入视频截图
+                                </FormLabel>
+                            </FormItem>
+                        )}
+                    />
+
+                    {/* 提交按钮 */}
+                    <Button
+                        type="submit"
+                        className="w-full bg-primary cursor-pointer"
+                    >
+                        {isGenerating ? "正在生成…" : "生成笔记"}
+                    </Button>
+                </form>
+            </Form>
+
+
+            {/*生成历史    */}
+            <div className="flex items-center gap-2 my-4">
+                <Clock className="h-4 w-4 text-neutral-500" />
+                <h2 className="text-base font-medium text-neutral-900">生成历史</h2>
+            </div>
+            <div className="flex-1 min-h-0 overflow-auto">
+                <NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
+
+            </div>
+
+            {/* 添加一些额外的说明或功能介绍 */}
+            <div className="mt-6 p-4 bg-primary-light rounded-lg">
+                <h3 className="font-medium text-primary mb-2">功能介绍</h3>
+                <ul className="text-sm space-y-2 text-neutral-600">
+                    <li className="flex items-start gap-2">
+                        <span className="text-primary font-bold">•</span>
+                        <span>自动提取视频内容，生成结构化笔记</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                        <span className="text-primary font-bold">•</span>
+                        <span>支持多个视频平台，包括哔哩哔哩、YouTube等</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                        <span className="text-primary font-bold">•</span>
+                        <span>一键复制笔记，支持Markdown格式</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                        <span className="text-primary font-bold">•</span>
+                        <span>可选择是否插入图片</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default NoteForm
--- a/BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
+++ b/BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
@@ -0,0 +1,15 @@
+import { useForm } from "react-hook-form"
+import { Form } from "@/components/ui/form"
+import NoteForm from "./NoteForm"
+
+const NoteFormWrapper = () => {
+    const form = useForm()
+
+    return (
+        <Form {...form}>
+            <NoteForm />
+        </Form>
+    )
+}
+
+export default NoteFormWrapper
--- a/BillNote_frontend/src/pages/components/NoteHistory.tsx
+++ b/BillNote_frontend/src/pages/components/NoteHistory.tsx
@@ -0,0 +1,100 @@
+import { useTaskStore } from "@/store/taskStore"
+import { FC } from "react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { Trash ,Clock} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface NoteHistoryProps {
+    onSelect: (taskId: string) => void
+    selectedId: string | null
+}
+
+const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
+    const tasks = useTaskStore((state) => state.tasks)
+    const removeTask = useTaskStore((state) => state.removeTask)
+
+    if (tasks.length === 0) {
+        return (
+            <div className="text-center py-6 bg-neutral-50 rounded-md border border-neutral-200">
+                <p className="text-sm text-neutral-500">暂无历史记录</p>
+            </div>
+        )
+    }
+
+    return (
+        <ScrollArea className="h-auto max-h-[20vh] sm:max-h-[10vh]">
+
+        <div className="flex flex-col space-y-2">
+                {tasks.map((task) => (
+                    <div
+                        key={task.id}
+                        className={cn(
+                            "flex items-center gap-4 p-3 cursor-pointer transition hover:bg-neutral-50 rounded-md border",
+                            selectedId === task.id && "border-primary bg-primary-light"
+                        )}
+                        onClick={() => onSelect(task.id)}
+                    >
+                        {/* 封面图 */}
+                        <img
+                            src={task.audioMeta.cover_url
+                                ? `/api/image_proxy?url=${encodeURIComponent(task.audioMeta.cover_url)}`
+                                : "/placeholder.png"}
+                            alt="封面"
+                            className="w-16 h-10 object-cover rounded-md"
+                        />
+
+                        {/* 标题 + 状态 */}
+
+                        <div className="flex items-center justify-between gap-2 min-w-0 w-full">
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <div className="font-medium max-w-[120px] truncate flex-1">{task.audioMeta.title || "未命名笔记"}</div>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>{task.audioMeta.title || "未命名笔记"}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                            <div className="shrink-0">
+                                {task.status === "SUCCESS" && <Badge variant="default">已完成</Badge>}
+                                {task.status === "PENDING" && <Badge variant="outline">等待中</Badge>}
+                                {task.status === "FAILED" && <Badge variant="destructive">失败</Badge>}
+                            </div>
+                        </div>
+
+
+                        {/* 删除按钮 */}
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        type="button"
+                                        size="icon"
+                                        variant="ghost"
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            removeTask(task.id)
+                                        }}
+                                        className="shrink-0"
+                                    >
+                                        <Trash className="w-4 h-4 text-muted-foreground" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <p>删除</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    </div>
+
+                ))}
+            </div>
+        </ScrollArea>
+    )
+}
+
+export default NoteHistory
--- a/BillNote_frontend/src/services/note.ts
+++ b/BillNote_frontend/src/services/note.ts
@@ -0,0 +1,97 @@
+import request from "@/utils/request"
+import toast from 'react-hot-toast'
+import {useTaskStore} from "@/store/taskStore";
+import request from "@/utils/request"
+interface GenerateNotePayload {
+    video_url: string
+    platform: "bilibili" | "youtube"
+    quality: "fast" | "medium" | "slow"
+}
+
+export const generateNote = async (data: {
+    video_url: string;
+    link: undefined | boolean;
+    screenshot: undefined | boolean;
+    platform: string;
+    quality: string
+}) => {
+    try {
+        const response = await request.post("/generate_note", data)
+
+        if (response.data.code!=0){
+            if (response.data.msg){
+                toast.error(response.data.msg)
+
+            }
+            return null
+        }
+        toast.success("笔记生成任务已提交！")
+
+        const taskId = response.data.data.task_id
+
+        console.log('res',response)
+        // 成功提示
+        useTaskStore.getState().addPendingTask(taskId, data.platform)
+
+        return response.data
+    } catch (e: any) {
+        console.error("❌ 请求出错", e)
+
+        // 错误提示
+        toast.error(
+             "笔记生成失败，请稍后重试"
+        )
+
+        throw e // 抛出错误以便调用方处理
+    }
+}
+
+
+
+export const delete_task = async ({video_id, platform}) => {
+    try {
+        const data={
+            video_id,platform
+        }
+        const res = await request.post("/delete_task",
+            data
+        )
+
+        if (res.data.code === 0) {
+            toast.success("任务已成功删除")
+            return res.data
+        } else {
+            toast.error(res.data.message || "删除失败")
+            throw new Error(res.data.message || "删除失败")
+        }
+    } catch (e) {
+        toast.error("请求异常，删除任务失败")
+        console.error("❌ 删除任务失败:", e)
+        throw e
+    }
+}
+
+
+export const get_task_status=async (task_id:string)=>{
+    try {
+        const response = await request.get("/task_status/"+task_id)
+
+        if (response.data.code==0 && response.data.status=='SUCCESS') {
+            // toast.success("笔记生成成功")
+        }
+        console.log('res',response)
+        // 成功提示
+
+        return response.data
+    }
+    catch (e){
+        console.error("❌ 请求出错", e)
+
+        // 错误提示
+        toast.error(
+            "笔记生成失败，请稍后重试"
+        )
+
+        throw e // 抛出错误以便调用方处理
+    }
+}
--- a/BillNote_frontend/src/store/taskStore/index.ts
+++ b/BillNote_frontend/src/store/taskStore/index.ts
@@ -0,0 +1,124 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import {delete_task} from "@/services/note.ts";
+
+export type TaskStatus = 'PENDING' | 'RUNNING' | 'SUCCESS' | 'FAILD'
+
+export interface AudioMeta {
+    cover_url: string
+    duration: number
+    file_path: string
+    platform: string
+    raw_info: any
+    title: string
+    video_id: string
+}
+
+export interface Segment {
+    start: number
+    end: number
+    text: string
+}
+
+export interface Transcript {
+    full_text: string
+    language: string
+    raw: any
+    segments: Segment[]
+}
+
+export interface Task {
+    id: string
+    markdown: string
+    transcript: Transcript
+    status: TaskStatus
+    audioMeta: AudioMeta
+    createdAt: string
+}
+
+interface TaskStore {
+    tasks: Task[]
+    currentTaskId: string | null
+    platform:string|null
+    addPendingTask: (taskId: string, platform: string) => void
+    updateTaskContent: (id: string, data: Partial<Omit<Task, "id" | "createdAt">>) => void
+    removeTask: (id: string) => void
+    clearTasks: () => void
+    setCurrentTask: (taskId: string | null) => void
+    getCurrentTask: () => Task | null
+}
+
+export const useTaskStore = create<TaskStore>()(
+    persist(
+        (set,get) => ({
+            tasks: [],
+            currentTaskId: null,
+
+            addPendingTask: (taskId: string,platform: string) =>
+                set((state) => ({
+                    tasks: [
+                        {
+                            id: taskId,
+                            status: "PENDING",
+                            markdown: "",
+                            platform:platform,
+                            transcript: {
+                                full_text: "",
+                                language: "",
+                                raw: null,
+                                segments: [],
+                            },
+                            createdAt: new Date().toISOString(),
+                            audioMeta: {
+                                cover_url: "",
+                                duration: 0,
+                                file_path: "",
+                                platform: '',
+                                raw_info: null,
+                                title: "",
+                                video_id: "",
+                            },
+                        },
+                        ...state.tasks,
+                    ],
+                    currentTaskId: taskId, // 默认设置为当前任务
+                })),
+
+            updateTaskContent: (id, data) =>
+                set((state) => ({
+                    tasks: state.tasks.map((task) =>
+                        task.id === id ? { ...task, ...data } : task
+                    ),
+                })),
+            getCurrentTask: () => {
+                const currentTaskId = get().currentTaskId
+                return get().tasks.find((task) => task.id === currentTaskId) || null
+            },
+            removeTask: async (id) => {
+                const task = get().tasks.find((t) => t.id === id)
+
+                // 更新 Zustand 状态
+                set((state) => ({
+                    tasks: state.tasks.filter((task) => task.id !== id),
+                    currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
+                }))
+
+                // 调用后端删除接口（如果找到了任务）
+                if (task) {
+                    await delete_task({
+                        video_id: task.audioMeta.video_id,
+                        platform: task.platform,
+                    })
+                }
+            },
+
+
+            clearTasks: () => set({ tasks: [], currentTaskId: null }),
+
+            setCurrentTask: (taskId) => set({ currentTaskId: taskId }),
+        }),
+        {
+            name: 'task-storage',
+        }
+    )
+)
--- a/BillNote_frontend/src/utils/request.ts
+++ b/BillNote_frontend/src/utils/request.ts
@@ -0,0 +1,8 @@
+import axios from "axios"
+
+const request = axios.create({
+    baseURL: "/api", // 默认请求路径前缀
+    timeout: 10000,
+})
+
+export default request
--- a/BillNote_frontend/src/vite-env.d.ts
+++ b/BillNote_frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/BillNote_frontend/tailwind.config.cjs
+++ b/BillNote_frontend/tailwind.config.cjs
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		'./index.html',
+		'./src/**/*.{vue,js,ts,js,jsx,tsx}'
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
--- a/BillNote_frontend/tsconfig.app.json
+++ b/BillNote_frontend/tsconfig.app.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": ["src"]
+}
--- a/BillNote_frontend/tsconfig.json
+++ b/BillNote_frontend/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/BillNote_frontend/tsconfig.node.json
+++ b/BillNote_frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/BillNote_frontend/vite.config.ts
+++ b/BillNote_frontend/vite.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd() + '/../')
+
+  const apiBaseUrl = env.VITE_API_BASE_URL
+
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 5173,
+      proxy: {
+        '/api': {
+          target: apiBaseUrl,
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/api/, '/api'),
+        },
+      },
+    },
+  }
+})
--- a/0
+++ b/0
--- a/README.md
+++ b/README.md
@@ -0,0 +1,149 @@
+<div style="display: flex; justify-content: center; align-items: center; gap: 10px;
+">
+    <p align="center">
+  <img src="./doc/icon.svg" alt="BiliNote Banner" width="50" height="50"  />
+</p>
+<h1 align="center" > BiliNote</h1>
+</div>
+
+<p align="center"><i>AI 视频笔记生成工具 让 AI 为你的视频做笔记</i></p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/license-MIT-blue.svg" />
+  <img src="https://img.shields.io/badge/frontend-react-blue" />
+  <img src="https://img.shields.io/badge/backend-fastapi-green" />
+  <img src="https://img.shields.io/badge/GPT-openai%20%7C%20deepseek%20%7C%20qwen-ff69b4" />
+  <img src="https://img.shields.io/badge/docker-compose-blue" />
+  <img src="https://img.shields.io/badge/status-active-success" />
+  <img src="https://img.shields.io/github/stars/jefferyhcool/BiliNote?style=social" />
+</p>
+
+
+
+## ✨ 项目简介
+
+BiliNote 是一个开源的 AI 视频笔记助手，支持通过哔哩哔哩、YouTube 等视频链接，自动提取内容并生成结构清晰、重点明确的 Markdown 格式笔记。支持插入截图、原片跳转等功能。
+
+## 🔧 功能特性
+
+- 支持多平台：Bilibili、YouTube（后续会加入更多平台）
+- 本地模型音频转写（支持 Fast-Whisper）
+- GPT 大模型总结视频内容（支持 OpenAI、DeepSeek、Qwen）
+- 自动生成结构化 Markdown 笔记
+- 可选插入截图（自动截取）
+- 可选内容跳转链接（关联原视频）
+- 任务记录与历史回看
+
+## 📸 截图预览
+![screenshot](./doc/image1.png)
+![screenshot](./doc/image2.png)
+![screenshot](./doc/image3.png)
+
+## 🚀 快速开始
+
+### 1. 克隆仓库
+
+```bash
+git clone https://github.com/JefferyHcool/BiliNote.git
+cd BiliNote
+mv .env.example .env
+```
+
+### 2. 启动后端（FastAPI）
+
+```bash
+cd backend
+pip install -r requirements.txt
+uvicorn app.main:app --reload
+```
+
+### 3. 启动前端（Vite + React）
+
+```bash
+cd BiliNote_frontend
+pnpm install
+pnpm dev
+```
+
+访问：`http://localhost:5173`
+
+## ⚙️ 依赖说明
+### 🎬 FFmpeg
+本项目依赖 ffmpeg 用于音频处理与转码，必须安装：
+```bash
+# Mac (brew)
+brew install ffmpeg
+
+# Ubuntu / Debian
+sudo apt install ffmpeg
+
+# Windows
+# 请从官网下载安装：https://ffmpeg.org/download.html
+```
+> ⚠️ 若系统无法识别 ffmpeg，请将其加入系统环境变量 PATH
+
+### 🚀 CUDA 加速（可选）
+若你希望更快地执行音频转写任务，可使用具备 NVIDIA GPU 的机器，并启用 fast-whisper + CUDA 加速版本：
+
+具体 `fast-whisper` 配置方法，请参考：[fast-whisper 项目地址](http://github.com/SYSTRAN/faster-whisper#requirements)
+
+### 🐳 使用 Docker 一键部署
+
+确保你已安装 Docker 和 Docker Compose：
+
+#### 1. 克隆本项目
+```bash
+git clone https://github.com/JefferyHcool/BiliNote.git
+cd BiliNote
+mv .env.example .env
+```
+#### 2. 启动 Docker Compose
+``` bash
+docker compose up --build
+```
+默认端口：
+
+前端：http://localhost:${FRONTEND_PORT}
+
+后端：http://localhost:${BACKEND_PORT}
+
+.env 文件中可自定义端口与环境配置。
+
+
+## ⚙️ 环境变量配置
+
+后端 `.env` 示例：
+
+```ini
+API_BASE_URL=http://localhost:8000
+OUT_DIR=note_results
+IMAGE_BASE_URL=/static/screenshots
+MODEl_PROVIDER=openai
+OPENAI_API_KEY=sk-xxxxxx
+DEEP_SEEK_API_KEY=xxx
+QWEN_API_KEY=xxx
+```
+
+## 🧠 TODO
+
+- [ ] 支持抖音及快手等视频平台
+- [ ] 支持前端设置切换 AI 模型切换、语音转文字模型
+- [ ] AI 摘要风格自定义（学术风、口语风、重点提取等）
+- [ ] 笔记导出为 PDF / Word / Notion
+- [ ] 加入更多模型支持
+- [ ] 加入更多音频转文本模型支持
+
+### Contact and Join-联系和加入社区
+- BiliNote 交流QQ群：785367111
+- BiliNote 交流微信群:
+  
+  <img src="./doc/wechat.png" alt="wechat" style="zoom:33%;" />
+
+## 📜 License
+
+MIT License
+
+---
+
+💬 你的支持与反馈是我持续优化的动力！欢迎 PR、提 issue、Star ⭐️
+
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -0,0 +1,23 @@
+
+# 通用
+ENV=production
+API_BASE_URL=http://127.0.0.1:8000
+SCREENSHOT_BASE_URL=http://127.0.0.1:8000/static/screenshots
+STATIC=/static # 外部访问路径（URL 前缀）
+OUT_DIR=./static/screenshots    # 本地输出目录
+IMAGE_BASE_URL=/static/screenshots  # 图片访问 URL
+DATA_DIR=data
+
+# 后端专用
+
+# AI 相关配置
+OPENAI_API_KEY = ""
+OPENAI_API_BASE_URL = ""
+OPENAI_MODEL = ""
+DEEP_SEEK_API_KEY = ""
+DEEP_SEEK_API_BASE_URL = ""
+DEEP_SEEK_MODEL = ""
+QWEN_API_KEY = ""
+QWEN_API_BASE_URL = ""
+QWEN_MODEL = ""
+
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,20 @@
+FROM python:3.11-slim
+
+
+RUN rm -f /etc/apt/sources.list && \
+    rm -rf /etc/apt/sources.list.d/* && \
+    echo "deb https://mirrors.tuna.tsinghua.edu.cn/debian bookworm main contrib non-free non-free-firmware" > /etc/apt/sources.list && \
+    echo "deb https://mirrors.tuna.tsinghua.edu.cn/debian bookworm-updates main contrib non-free non-free-firmware" >> /etc/apt/sources.list && \
+    echo "deb https://mirrors.tuna.tsinghua.edu.cn/debian-security bookworm-security main contrib non-free non-free-firmware" >> /etc/apt/sources.list && \
+    apt-get update && \
+    apt-get install -y ffmpeg && \
+    rm -rf /var/lib/apt/lists/*
+
+# 确保 PATH 中包含 ffmpeg 路径（可选）
+ENV PATH="/usr/bin:${PATH}"
+
+WORKDIR /app
+COPY ./backend /app
+RUN pip install --no-cache-dir -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt
+
+CMD ["python", "main.py"]
--- a/backend/app/init.py
+++ b/backend/app/init.py
@@ -0,0 +1,8 @@
+from fastapi import FastAPI
+from .routers import note
+
+
+def create_app() -> FastAPI:
+    app = FastAPI(title="BiliNote")
+    app.include_router(note.router, prefix="/api")
+    return app
--- a/backend/app/db/init.py
+++ b/backend/app/db/init.py
--- a/backend/app/db/sqlite_client.py
+++ b/backend/app/db/sqlite_client.py
@@ -0,0 +1,4 @@
+import sqlite3
+
+def get_connection():
+    return sqlite3.connect("note_tasks.db")
--- a/backend/app/db/video_task_dao.py
+++ b/backend/app/db/video_task_dao.py
@@ -0,0 +1,52 @@
+from .sqlite_client import get_connection
+
+def init_video_task_table():
+    conn = get_connection()
+    cursor = conn.cursor()
+    cursor.execute("""
+        CREATE TABLE IF NOT EXISTS video_tasks (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            video_id TEXT NOT NULL,
+            platform TEXT NOT NULL,
+            task_id TEXT NOT NULL UNIQUE,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    """)
+    conn.commit()
+    conn.close()
+
+def insert_video_task(video_id: str, platform: str, task_id: str):
+    conn = get_connection()
+    cursor = conn.cursor()
+    cursor.execute("""
+        INSERT INTO video_tasks (video_id, platform, task_id)
+        VALUES (?, ?, ?)
+    """, (video_id, platform, task_id))
+    conn.commit()
+    conn.close()
+
+
+def get_task_by_video(video_id: str, platform: str):
+    conn = get_connection()
+    cursor = conn.cursor()
+    cursor.execute("""
+        SELECT task_id FROM video_tasks
+        WHERE video_id = ? AND platform = ?
+        ORDER BY created_at DESC
+        LIMIT 1
+    """, (video_id, platform))
+    result = cursor.fetchone()
+    conn.close()
+    return result[0] if result else None
+
+
+def delete_task_by_video(video_id: str, platform: str):
+    conn = get_connection()
+    cursor = conn.cursor()
+    cursor.execute("""
+        DELETE FROM video_tasks
+        WHERE video_id = ? AND platform = ?
+    """, (video_id, platform))
+
+    conn.commit()
+    conn.close()
--- a/backend/app/decorators/init.py
+++ b/backend/app/decorators/init.py
--- a/backend/app/decorators/timeit.py
+++ b/backend/app/decorators/timeit.py
@@ -0,0 +1,13 @@
+import time
+import functools
+
+def timeit(func):
+    @functools.wraps(func)
+    def wrapper(*args, **kwargs):
+        start = time.perf_counter()
+        result = func(*args, **kwargs)
+        end = time.perf_counter()
+        duration = end - start
+        print(f"⏱️ {func.__name__} executed in {duration:.4f} seconds")
+        return result
+    return wrapper
--- a/backend/app/downloaders/init.py
+++ b/backend/app/downloaders/init.py
--- a/backend/app/downloaders/base.py
+++ b/backend/app/downloaders/base.py
@@ -0,0 +1,38 @@
+import enum
+
+from abc import ABC, abstractmethod
+from typing import Optional, Union
+
+from app.enmus.note_enums import DownloadQuality
+from app.models.notes_model import AudioDownloadResult
+from os import getenv
+QUALITY_MAP = {
+    "fast": "32",
+    "medium": "64",
+    "slow": "128"
+}
+
+
+class Downloader(ABC):
+    def __init__(self):
+        #TODO 需要修改为可配置
+        self.quality = QUALITY_MAP.get('fast')
+        self.cache_data=getenv('DATA_DIR')
+
+    @abstractmethod
+    def download(self, video_url: str, output_dir: str = None,
+                 quality: DownloadQuality = "fast", need_video: Optional[bool] = False) -> AudioDownloadResult:
+        '''
+
+        :param need_video:
+        :param video_url: 资源链接
+        :param output_dir: 输出路径 默认根目录data
+        :param quality: 音频质量 fast | medium | slow
+        :return:返回一个 AudioDownloadResult 类
+        '''
+        pass
+
+    @staticmethod
+    def download_video(self, video_url: str,
+                       output_dir: Union[str, None] = None) -> str:
+        pass
--- a/backend/app/downloaders/bilibili_downloader.py
+++ b/backend/app/downloaders/bilibili_downloader.py
@@ -0,0 +1,104 @@
+import os
+from abc import ABC
+from typing import Union, Optional
+
+import yt_dlp
+
+from app.downloaders.base import Downloader, DownloadQuality, QUALITY_MAP
+from app.models.notes_model import AudioDownloadResult
+from app.utils.path_helper import get_data_dir
+
+
+class BilibiliDownloader(Downloader, ABC):
+    def __init__(self):
+        super().__init__()
+
+    def download(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+        quality: DownloadQuality = "fast",
+        need_video:Optional[bool]=False
+    ) -> AudioDownloadResult:
+        if output_dir is None:
+            output_dir = get_data_dir()
+        if not output_dir:
+            output_dir=self.cache_data
+        os.makedirs(output_dir, exist_ok=True)
+
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'bestaudio[ext=m4a]/bestaudio/best',
+            'outtmpl': output_path,
+            'postprocessors': [
+                {
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '64',
+                }
+            ],
+            'noplaylist': True,
+            'quiet': False,
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            title = info.get("title")
+            duration = info.get("duration", 0)
+            cover_url = info.get("thumbnail")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")
+
+        return AudioDownloadResult(
+            file_path=audio_path,
+            title=title,
+            duration=duration,
+            cover_url=cover_url,
+            platform="bilibili",
+            video_id=video_id,
+            raw_info=info,
+            video_path=None  # ❗音频下载不包含视频路径
+        )
+
+    def download_video(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+    ) -> str:
+        """
+        下载视频，返回视频文件路径
+        """
+        if output_dir is None:
+            output_dir = get_data_dir()
+
+        os.makedirs(output_dir, exist_ok=True)
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'bv*[ext=mp4]/bestvideo+bestaudio/best',
+            'outtmpl': output_path,
+            'noplaylist': True,
+            'quiet': False,
+            'merge_output_format': 'mp4',  # 确保合并成 mp4
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            video_path = os.path.join(output_dir, f"{video_id}.mp4")
+
+        if not os.path.exists(video_path):
+            raise FileNotFoundError(f"视频文件未找到: {video_path}")
+
+        return video_path
+
+    def delete_video(self, video_path: str) -> str:
+        """
+        删除视频文件
+        """
+        if os.path.exists(video_path):
+            os.remove(video_path)
+            return f"视频文件已删除: {video_path}"
+        else:
+            return f"视频文件未找到: {video_path}"
--- a/backend/app/downloaders/common.py
+++ b/backend/app/downloaders/common.py
@@ -0,0 +1 @@
+# def download():
--- a/backend/app/downloaders/douyin_downloader.py
+++ b/backend/app/downloaders/douyin_downloader.py
@@ -0,0 +1,90 @@
+import os
+from abc import ABC
+from typing import Union, Optional
+
+import yt_dlp
+
+from app.downloaders.base import Downloader, DownloadQuality
+from app.models.notes_model import AudioDownloadResult
+from app.utils.path_helper import get_data_dir
+
+
+class DouyinDownloader(Downloader, ABC):
+    def download(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+        quality: DownloadQuality = "fast",
+        need_video:Optional[bool]=False
+    ) -> AudioDownloadResult:
+        if output_dir is None:
+            output_dir = get_data_dir()
+
+        os.makedirs(output_dir, exist_ok=True)
+
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'bestaudio[ext=m4a]/bestaudio/best',
+            'outtmpl': output_path,
+            'postprocessors': [
+                {
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '64',
+                }
+            ],
+            'noplaylist': True,
+            'quiet': False,
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            title = info.get("title")
+            duration = info.get("duration", 0)
+            cover_url = info.get("thumbnail")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")
+
+        return AudioDownloadResult(
+            file_path=audio_path,
+            title=title,
+            duration=duration,
+            cover_url=cover_url,
+            platform="douyin",
+            video_id=video_id,
+            raw_info={'tags':info.get('tags')}, #全部返回会报错
+            video_path=None  # ❗音频下载不包含视频路径
+        )
+
+    def download_video(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+    ) -> str:
+        """
+        下载视频，返回视频文件路径
+        """
+        if output_dir is None:
+            output_dir = get_data_dir()
+
+        os.makedirs(output_dir, exist_ok=True)
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'worst[ext=mp4]/worst',
+            'outtmpl': output_path,
+            'noplaylist': True,
+            'quiet': False,
+            'merge_output_format': 'mp4',  # 确保合并成 mp4
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            video_path = os.path.join(output_dir, f"{video_id}.mp4")
+
+        if not os.path.exists(video_path):
+            raise FileNotFoundError(f"视频文件未找到: {video_path}")
+
+        return video_path
--- a/backend/app/downloaders/youtube_downloader.py
+++ b/backend/app/downloaders/youtube_downloader.py
@@ -0,0 +1,95 @@
+import os
+from abc import ABC
+from typing import Union, Optional
+
+import yt_dlp
+
+from app.downloaders.base import Downloader, DownloadQuality
+from app.models.notes_model import AudioDownloadResult
+from app.utils.path_helper import get_data_dir
+
+
+class YoutubeDownloader(Downloader, ABC):
+    def __init__(self):
+
+        super().__init__()
+
+    def download(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+        quality: DownloadQuality = "fast",
+        need_video:Optional[bool]=False
+    ) -> AudioDownloadResult:
+        if output_dir is None:
+            output_dir = get_data_dir()
+        if not output_dir:
+            output_dir=self.cache_data
+        os.makedirs(output_dir, exist_ok=True)
+
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'bestaudio[ext=m4a]/bestaudio/best',
+            'outtmpl': output_path,
+            'postprocessors': [
+                {
+                    'key': 'FFmpegExtractAudio',
+                    'preferredcodec': 'mp3',
+                    'preferredquality': '64',
+                }
+            ],
+            'noplaylist': True,
+            'quiet': False,
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            title = info.get("title")
+            duration = info.get("duration", 0)
+            cover_url = info.get("thumbnail")
+            audio_path = os.path.join(output_dir, f"{video_id}.mp3")
+
+        return AudioDownloadResult(
+            file_path=audio_path,
+            title=title,
+            duration=duration,
+            cover_url=cover_url,
+            platform="youtube",
+            video_id=video_id,
+            raw_info={'tags':info.get('tags')}, #全部返回会报错
+            video_path=None  # ❗音频下载不包含视频路径
+        )
+
+    def download_video(
+        self,
+        video_url: str,
+        output_dir: Union[str, None] = None,
+    ) -> str:
+        """
+        下载视频，返回视频文件路径
+        """
+        if output_dir is None:
+            output_dir = get_data_dir()
+
+        os.makedirs(output_dir, exist_ok=True)
+        output_path = os.path.join(output_dir, "%(id)s.%(ext)s")
+
+        ydl_opts = {
+            'format': 'worst[ext=mp4]/worst',
+            'outtmpl': output_path,
+            'noplaylist': True,
+            'quiet': False,
+            'merge_output_format': 'mp4',  # 确保合并成 mp4
+        }
+
+        with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+            info = ydl.extract_info(video_url, download=True)
+            video_id = info.get("id")
+            video_path = os.path.join(output_dir, f"{video_id}.mp4")
+
+        if not os.path.exists(video_path):
+            raise FileNotFoundError(f"视频文件未找到: {video_path}")
+
+        return video_path
--- a/backend/app/enmus/note_enums.py
+++ b/backend/app/enmus/note_enums.py
@@ -0,0 +1,7 @@
+import enum
+
+
+class DownloadQuality(str, enum.Enum):
+    fast = "fast"
+    medium = "medium"
+    slow = "slow"
--- a/backend/app/gpt/init.py
+++ b/backend/app/gpt/init.py
--- a/backend/app/gpt/base.py
+++ b/backend/app/gpt/base.py
@@ -0,0 +1,13 @@
+from abc import ABC,abstractmethod
+
+from app.models.gpt_model import GPTSource
+
+
+class GPT(ABC):
+    def summarize(self, source:GPTSource )->str:
+        '''
+
+        :param source: 
+        :return:
+        '''
+        pass
--- a/backend/app/gpt/deepseek_gpt.py
+++ b/backend/app/gpt/deepseek_gpt.py
@@ -0,0 +1,59 @@
+from typing import List
+from app.gpt.base import GPT
+from openai import OpenAI
+from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT
+from app.gpt.utils import fix_markdown
+from app.models.gpt_model import GPTSource
+from app.models.transcriber_model import TranscriptSegment
+from datetime import timedelta
+
+
+class DeepSeekGPT(GPT):
+    def __init__(self):
+        from os import getenv
+        self.api_key = getenv("DEEP_SEEK_API_KEY")
+        self.base_url = getenv("DEEP_SEEK_API_BASE_URL")
+        self.model=getenv('DEEP_SEEK_MODEL')
+        print(self.model)
+        self.client = OpenAI(api_key=self.api_key, base_url=self.base_url)
+        self.screenshot = False
+
+    def _format_time(self, seconds: float) -> str:
+        return str(timedelta(seconds=int(seconds)))[2:]  # e.g., 03:15
+
+    def _build_segment_text(self, segments: List[TranscriptSegment]) -> str:
+        return "\n".join(
+            f"{self._format_time(seg.start)} - {seg.text.strip()}"
+            for seg in segments
+        )
+
+    def ensure_segments_type(self, segments) -> List[TranscriptSegment]:
+        return [
+            TranscriptSegment(**seg) if isinstance(seg, dict) else seg
+            for seg in segments
+        ]
+
+    def create_messages(self, segments: List[TranscriptSegment], title: str,tags:str):
+        content = BASE_PROMPT.format(
+            video_title=title,
+            segment_text=self._build_segment_text(segments),
+            tags=tags
+        )
+        if self.screenshot:
+            print(":需要截图")
+            content += SCREENSHOT
+        print(content)
+        return [{"role": "user", "content": content + AI_SUM}]
+
+    def summarize(self, source: GPTSource) -> str:
+        self.screenshot = source.screenshot
+        source.segment = self.ensure_segments_type(source.segment)
+        messages = self.create_messages(source.segment, source.title,source.tags)
+        response = self.client.chat.completions.create(
+            model=self.model,
+            messages=messages,
+            temperature=0.7
+        )
+        return response.choices[0].message.content.strip()
+
+
--- a/backend/app/gpt/openai_gpt.py
+++ b/backend/app/gpt/openai_gpt.py
@@ -0,0 +1,65 @@
+from typing import List
+from app.gpt.base import GPT
+from openai import OpenAI
+from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT, LINK
+from app.gpt.utils import fix_markdown
+from app.models.gpt_model import GPTSource
+from app.models.transcriber_model import TranscriptSegment
+from datetime import timedelta
+
+
+class OpenaiGPT(GPT):
+    def __init__(self):
+        from os import getenv
+        self.api_key = getenv("OPENAI_API_KEY")
+        self.base_url = getenv("OPENAI_API_BASE_URL")
+        self.model=getenv('OPENAI_MODEL')
+        print(self.model)
+        self.client = OpenAI(api_key=self.api_key, base_url=self.base_url)
+        self.screenshot = False
+        self.link=False
+
+    def _format_time(self, seconds: float) -> str:
+        return str(timedelta(seconds=int(seconds)))[2:]  # e.g., 03:15
+
+    def _build_segment_text(self, segments: List[TranscriptSegment]) -> str:
+        return "\n".join(
+            f"{self._format_time(seg.start)} - {seg.text.strip()}"
+            for seg in segments
+        )
+
+    def ensure_segments_type(self, segments) -> List[TranscriptSegment]:
+        return [
+            TranscriptSegment(**seg) if isinstance(seg, dict) else seg
+            for seg in segments
+        ]
+
+    def create_messages(self, segments: List[TranscriptSegment], title: str,tags:str):
+        content = BASE_PROMPT.format(
+            video_title=title,
+            segment_text=self._build_segment_text(segments),
+            tags=tags
+        )
+        if self.screenshot:
+            print(":需要截图")
+            content += SCREENSHOT
+        if self.link:
+            print(":需要链接")
+            content += LINK
+
+        print(content)
+        return [{"role": "user", "content": content + AI_SUM}]
+
+    def summarize(self, source: GPTSource) -> str:
+        self.screenshot = source.screenshot
+        self.link = source.link
+        source.segment = self.ensure_segments_type(source.segment)
+        messages = self.create_messages(source.segment, source.title,source.tags)
+        response = self.client.chat.completions.create(
+            model=self.model,
+            messages=messages,
+            temperature=0.7
+        )
+        return response.choices[0].message.content.strip()
+
+
--- a/backend/app/gpt/prompt.py
+++ b/backend/app/gpt/prompt.py
@@ -0,0 +1,56 @@
+BASE_PROMPT = '''
+You are a professional note-taking assistant who excels at summarizing video transcripts into clear, structured, and information-rich notes.
+
+🎯 Language Requirement:
+- The notes must be written in **Chinese**.
+- Proper nouns, technical terms, brand names, and personal names should remain in **English** where appropriate.
+
+📌 Video Title:
+{video_title}
+
+📎 Video Tags:
+{tags}
+
+📝 Your Task:
+Based on the segmented transcript below, generate structured notes in standard **Markdown format**, and follow these principles:
+
+1. **Complete information**: Record as much relevant detail as possible to ensure comprehensive coverage.
+2. **Clear structure**: Organize content with logical sectioning. Use appropriate heading levels (`##`, `###`) to summarize key points in each section.
+3. **Concise wording**: Use accurate, clear, and professional Chinese expressions.
+4. **Remove irrelevant content**: Omit advertisements, filler words, casual greetings, and off-topic remarks.
+5. **Keep critical details**: Preserve important facts, examples, conclusions, and recommendations.
+6. **Readable layout**: Use bullet points where needed, and keep paragraphs reasonably short to enhance readability.
+7. **Table of Contents**: Generate a table of contents at the top based on the `##` level headings.
+
+
+⚠️ Output Instructions:
+- Only return the final **Markdown content**.
+- Do **not** wrap the output in code blocks like ```` ```markdown ```` or ```` ``` ````.
+
+
+🎬 Transcript Segments (Format: Start Time - Text):
+
+---
+{segment_text}
+---
+'''
+
+LINK='''
+9. **Add time markers**: THIS IS IMPORTANT For every main heading (`##`), append the starting time of that segment using the format ,start with *Content ,eg: `*Content-[mm:ss]`.
+
+
+'''
+AI_SUM='''
+
+🧠 Final Touch:
+At the end of the notes, add a professional **AI Summary** in Chinese – a brief conclusion summarizing the whole video.
+
+
+
+'''
+
+SCREENSHOT='''
+8. **Screenshot placeholders**: If a section involves **visual demonstrations, code walkthroughs, UI interactions**, or any content where visuals aid understanding, insert a screenshot cue at the end of that section:
+   - Format: `*Screenshot-[mm:ss]`
+   - Only use it when truly helpful.
+'''
--- a/backend/app/gpt/qwen_gpt.py
+++ b/backend/app/gpt/qwen_gpt.py
@@ -0,0 +1,59 @@
+from typing import List
+from app.gpt.base import GPT
+from openai import OpenAI
+from app.gpt.prompt import BASE_PROMPT, AI_SUM, SCREENSHOT
+from app.gpt.utils import fix_markdown
+from app.models.gpt_model import GPTSource
+from app.models.transcriber_model import TranscriptSegment
+from datetime import timedelta
+
+
+class QwenGPT(GPT):
+    def __init__(self):
+        from os import getenv
+        self.api_key = getenv("QWEN_API_KEY")
+        self.base_url = getenv("QWEN_API_BASE_URL")
+        self.model=getenv('QWEN_MODEL')
+        print(self.model)
+        self.client = OpenAI(api_key=self.api_key, base_url=self.base_url)
+        self.screenshot = False
+
+    def _format_time(self, seconds: float) -> str:
+        return str(timedelta(seconds=int(seconds)))[2:]  # e.g., 03:15
+
+    def _build_segment_text(self, segments: List[TranscriptSegment]) -> str:
+        return "\n".join(
+            f"{self._format_time(seg.start)} - {seg.text.strip()}"
+            for seg in segments
+        )
+
+    def ensure_segments_type(self, segments) -> List[TranscriptSegment]:
+        return [
+            TranscriptSegment(**seg) if isinstance(seg, dict) else seg
+            for seg in segments
+        ]
+
+    def create_messages(self, segments: List[TranscriptSegment], title: str,tags:str):
+        content = BASE_PROMPT.format(
+            video_title=title,
+            segment_text=self._build_segment_text(segments),
+            tags=tags
+        )
+        if self.screenshot:
+            print(":需要截图")
+            content += SCREENSHOT
+        print(content)
+        return [{"role": "user", "content": content + AI_SUM}]
+
+    def summarize(self, source: GPTSource) -> str:
+        self.screenshot = source.screenshot
+        source.segment = self.ensure_segments_type(source.segment)
+        messages = self.create_messages(source.segment, source.title,source.tags)
+        response = self.client.chat.completions.create(
+            model=self.model,
+            messages=messages,
+            temperature=0.7
+        )
+        return response.choices[0].message.content.strip()
+
+
--- a/backend/app/gpt/tools.py
+++ b/backend/app/gpt/tools.py
--- a/backend/app/gpt/utils.py
+++ b/backend/app/gpt/utils.py
@@ -0,0 +1,4 @@
+import codecs
+
+def fix_markdown(markdown: str) -> str:
+    return codecs.decode(markdown, 'unicode_escape')
--- a/backend/app/models/init.py
+++ b/backend/app/models/init.py
--- a/backend/app/models/audio_model.py
+++ b/backend/app/models/audio_model.py
@@ -0,0 +1,15 @@
+from dataclasses import dataclass
+from typing import Optional
+
+
+@dataclass
+class AudioDownloadResult:
+    file_path: str               # 本地音频路径
+    title: str                   # 视频标题
+    duration: float              # 视频时长（秒）
+    cover_url: Optional[str]     # 视频封面图
+    platform: str                # 平台，如 "bilibili"
+    video_id: str                # 唯一视频ID
+    raw_info: dict               # yt-dlp 的原始 info 字典
+    video_path: Optional[str] = None  # ✅ 新增字段：可选视频文件路径
+
--- a/backend/app/models/gpt_model.py
+++ b/backend/app/models/gpt_model.py
@@ -0,0 +1,14 @@
+from dataclasses import dataclass
+from typing import List, Union, Optional
+
+from app.models.transcriber_model import TranscriptSegment
+
+
+@dataclass
+class GPTSource:
+    segment: Union[List[TranscriptSegment], List]
+    title: str
+    tags:str
+    screenshot: Optional[bool] = False
+    link: Optional[bool] = False
+
--- a/backend/app/models/notes_model.py
+++ b/backend/app/models/notes_model.py
@@ -0,0 +1,12 @@
+from dataclasses import dataclass
+from typing import Optional
+
+from app.models.audio_model import AudioDownloadResult
+from app.models.transcriber_model import TranscriptResult
+
+
+@dataclass
+class NoteResult:
+    markdown: str                  # GPT 总结的 Markdown 内容
+    transcript: TranscriptResult                # Whisper 转写结果
+    audio_meta: AudioDownloadResult  # 音频下载的元信息（title、duration、封面等）
--- a/backend/app/models/transcriber_model.py
+++ b/backend/app/models/transcriber_model.py
@@ -0,0 +1,16 @@
+
+from dataclasses import dataclass
+from typing import List, Optional
+
+@dataclass
+class TranscriptSegment:
+    start: float               # 开始时间（秒）
+    end: float                 # 结束时间（秒）
+    text: str                  # 该段文字
+
+@dataclass
+class TranscriptResult:
+    language: Optional[str]         # 检测语言（如 "zh"、"en"）
+    full_text: str                  # 完整合并后的文本（用于摘要）
+    segments: List[TranscriptSegment]  # 分段结构，适合前端显示时间轴字幕等
+    raw: Optional[dict] = None      # 原始响应数据，便于调试或平台特性处理
--- a/backend/app/models/video_record.py
+++ b/backend/app/models/video_record.py
--- a/backend/app/routers/init.py
+++ b/backend/app/routers/init.py
--- a/backend/app/routers/note.py
+++ b/backend/app/routers/note.py
@@ -0,0 +1,139 @@
+# app/routers/note.py
+import json
+import os
+import uuid
+from typing import Optional
+
+from fastapi import APIRouter, HTTPException, BackgroundTasks
+from pydantic import BaseModel, validator
+from dataclasses import asdict
+
+from app.db.video_task_dao import get_task_by_video
+from app.enmus.note_enums import DownloadQuality
+from app.services.note import NoteGenerator
+from app.utils.response import ResponseWrapper as R
+from app.utils.url_parser import extract_video_id
+from app.validators.video_url_validator import is_supported_video_url
+from fastapi import APIRouter, Request, HTTPException
+from fastapi.responses import StreamingResponse
+import httpx
+
+# from app.services.downloader import download_raw_audio
+# from app.services.whisperer import transcribe_audio
+
+router = APIRouter()
+
+
+class RecordRequest(BaseModel):
+    video_id: str
+    platform: str
+
+
+class VideoRequest(BaseModel):
+    video_url: str
+    platform: str
+    quality: DownloadQuality
+    screenshot: Optional[bool] = False
+    link: Optional[bool] = False
+
+    @validator("video_url")
+    def validate_supported_url(cls, v):
+        url = str(v)
+        # 支持平台校验
+        if not is_supported_video_url(url):
+            raise ValueError("暂不支持该视频平台或链接格式无效")
+        return v
+
+
+NOTE_OUTPUT_DIR = "note_results"
+
+
+def save_note_to_file(task_id: str, note):
+    os.makedirs(NOTE_OUTPUT_DIR, exist_ok=True)
+    with open(os.path.join(NOTE_OUTPUT_DIR, f"{task_id}.json"), "w", encoding="utf-8") as f:
+        json.dump(asdict(note), f, ensure_ascii=False, indent=2)
+
+
+def run_note_task(task_id: str, video_url: str, platform: str, quality: DownloadQuality, link: bool = False,screenshot: bool = False):
+    try:
+        note = NoteGenerator().generate(
+            video_url=video_url,
+            platform=platform,
+            quality=quality,
+            task_id=task_id,
+            link=link,
+            screenshot=screenshot
+        )
+        print('Note 结果',note)
+        save_note_to_file(task_id, note)
+    except Exception as e:
+        save_note_to_file(task_id, {"error": str(e)})
+
+
+@router.post('/delete_task')
+def delete_task(data:RecordRequest):
+    try:
+
+        NoteGenerator().delete_note(video_id=data.video_id,platform=data.platform)
+        return R.success(msg='删除成功')
+    except Exception as e:
+        return R.error(msg=e)
+
+
+@router.post("/generate_note")
+def generate_note(data: VideoRequest, background_tasks: BackgroundTasks):
+    try:
+
+        video_id = extract_video_id(data.video_url, data.platform)
+        if not video_id:
+            raise HTTPException(status_code=400, detail="无法提取视频 ID")
+        existing = get_task_by_video(video_id, data.platform)
+        if existing:
+            return R.error(
+                msg='笔记已生成，请勿重复发起',
+
+            )
+
+        task_id = str(uuid.uuid4())
+
+        background_tasks.add_task(run_note_task, task_id, data.video_url, data.platform, data.quality,data.link ,data.screenshot)
+        return R.success({"task_id": task_id})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/task_status/{task_id}")
+def get_task_status(task_id: str):
+    path = os.path.join(NOTE_OUTPUT_DIR, f"{task_id}.json")
+    if not os.path.exists(path):
+        return R.success({"status": "PENDING"})
+
+    with open(path, "r", encoding="utf-8") as f:
+        content = json.load(f)
+
+    if "error" in content:
+        return R.error(content["error"], code=500)
+    content['id'] = task_id
+    return R.success({
+        "status": "SUCCESS",
+        "result": content
+    })
+
+
+@router.get("/image_proxy")
+async def image_proxy(request: Request, url: str):
+    headers = {
+        "Referer": "https://www.bilibili.com/",  # 模拟B站来源
+        "User-Agent": request.headers.get("User-Agent", ""),
+    }
+
+    try:
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            resp = await client.get(url, headers=headers)
+            if resp.status_code != 200:
+                raise HTTPException(status_code=resp.status_code, detail="图片获取失败")
+
+            content_type = resp.headers.get("Content-Type", "image/jpeg")
+            return StreamingResponse(resp.aiter_bytes(), media_type=content_type)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
--- a/backend/app/services/init.py
+++ b/backend/app/services/init.py
--- a/backend/app/services/note.py
+++ b/backend/app/services/note.py
@@ -0,0 +1,184 @@
+import os
+from typing import Union
+
+from pydantic import HttpUrl
+
+from app.db.video_task_dao import insert_video_task, delete_task_by_video
+from app.downloaders.base import Downloader
+from app.downloaders.bilibili_downloader import BilibiliDownloader
+from app.downloaders.douyin_downloader import DouyinDownloader
+from app.downloaders.youtube_downloader import YoutubeDownloader
+from app.gpt.base import GPT
+from app.gpt.deepseek_gpt import DeepSeekGPT
+from app.gpt.openai_gpt import OpenaiGPT
+from app.gpt.qwen_gpt import QwenGPT
+from app.models.gpt_model import GPTSource
+from app.models.notes_model import NoteResult
+from app.models.notes_model import AudioDownloadResult
+from app.enmus.note_enums import DownloadQuality
+from app.models.transcriber_model import TranscriptResult
+from app.transcriber.base import Transcriber
+from app.transcriber.transcriber_provider import get_transcriber
+from app.transcriber.whisper import WhisperTranscriber
+import re
+
+from app.utils.note_helper import replace_content_markers
+from app.utils.video_helper import generate_screenshot
+
+# from app.services.whisperer import transcribe_audio
+# from app.services.gpt import summarize_text
+from dotenv import load_dotenv
+
+load_dotenv()
+BACKEND_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8000")
+
+output_dir = os.getenv('OUT_DIR')
+image_base_url = os.getenv('IMAGE_BASE_URL')
+print(output_dir)
+
+
+class NoteGenerator:
+    def __init__(self):
+        self.model_size: str = 'base'
+        self.device: Union[str, None] = None
+        self.transcriber_type = 'fast-whisper'
+        self.transcriber = self.get_transcriber()
+        # TODO 需要更换为可调节
+
+        self.provider = os.getenv('MODEl_PROVIDER','openai')
+        self.video_path = None
+
+    def get_gpt(self) -> GPT:
+        if self.provider == 'openai':
+            return OpenaiGPT()
+        elif self.provider == 'deepSeek':
+            return DeepSeekGPT()
+        elif self.provider == 'qwen':
+            return QwenGPT()
+        else:
+            raise ValueError(f"不支持的AI提供商：{self.provider}")
+
+    def get_downloader(self, platform: str) -> Downloader:
+        if platform == "bilibili":
+            return BilibiliDownloader()
+        elif platform == "youtube":
+            return YoutubeDownloader()
+        elif platform == 'douyin':
+            return DouyinDownloader()
+        else:
+            raise ValueError(f"不支持的平台：{platform}")
+
+    def get_transcriber(self) -> Transcriber:
+        '''
+
+        :param transcriber: 选择的转义器
+        :return:
+        '''
+        if self.transcriber_type == 'fast-whisper':
+            return get_transcriber()
+        else:
+            raise ValueError(f"不支持的转义器：{self.transcriber}")
+
+    def save_meta(self, video_id, platform, task_id):
+        insert_video_task(video_id=video_id, platform=platform, task_id=task_id)
+
+    def insert_screenshots_into_markdown(self, markdown: str, video_path: str, image_base_url: str,
+                                         output_dir: str) -> str:
+        """
+        扫描 markdown 中的 *Screenshot-xx:xx，生成截图并插入 markdown 图片
+        :param markdown:
+        :param image_base_url: 最终返回给前端的路径前缀（如 /static/screenshots）
+        """
+        matches = self.extract_screenshot_timestamps(markdown)
+        new_markdown = markdown
+
+        for idx, (marker, ts) in enumerate(matches):
+            image_path = generate_screenshot(video_path, output_dir, ts, idx)
+            image_relative_path = os.path.join(image_base_url, os.path.basename(image_path)).replace("\\", "/")
+            image_url = f"{BACKEND_BASE_URL.rstrip('/')}/{image_relative_path.lstrip('/')}"
+            replacement = f"![]({image_url})"
+            new_markdown = new_markdown.replace(marker, replacement, 1)
+
+        return new_markdown
+
+    @staticmethod
+    def delete_note(video_id: str, platform: str):
+        return delete_task_by_video(video_id, platform)
+
+    import re
+
+    def extract_screenshot_timestamps(self, markdown: str) -> list[tuple[str, int]]:
+        """
+        从 Markdown 中提取 Screenshot 时间标记（如 *Screenshot-03:39 或 Screenshot-[03:39]），
+        并返回匹配文本和对应时间戳（秒）
+        """
+        pattern = r"(?:\*Screenshot-(\d{2}):(\d{2})|Screenshot-\[(\d{2}):(\d{2})\])"
+        matches = list(re.finditer(pattern, markdown))
+        results = []
+        for match in matches:
+            mm = match.group(1) or match.group(3)
+            ss = match.group(2) or match.group(4)
+            total_seconds = int(mm) * 60 + int(ss)
+            results.append((match.group(0), total_seconds))
+        return results
+
+    def generate(
+            self,
+
+            video_url: Union[str, HttpUrl],
+            platform: str,
+            quality: DownloadQuality = DownloadQuality.medium,
+            task_id: Union[str, None] = None,
+            link: bool = False,
+            screenshot: bool = False,
+            path: Union[str, None] = None
+
+    ) -> NoteResult:
+
+        # 1. 选择下载器
+        downloader = self.get_downloader(platform)
+        gpt = self.get_gpt()
+
+        if screenshot:
+            video_path = downloader.download_video(video_url)
+            self.video_path = video_path
+            print(video_path)
+
+        # 2. 下载音频
+        audio: AudioDownloadResult = downloader.download(
+            video_url=video_url,
+            quality=quality,
+            output_dir=path,
+            need_video=screenshot
+
+        )
+
+        # 3. Whisper 转写
+        transcript: TranscriptResult = self.transcriber.transcript(file_path=audio.file_path)
+
+        # 4. GPT 总结
+        source = GPTSource(
+            title=audio.title,
+            segment=transcript.segments,
+            tags=audio.raw_info.get('tags'),
+            screenshot=screenshot,
+            link=link
+        )
+        markdown: str = gpt.summarize(source)
+        print("markdown结果", markdown)
+
+        markdown = replace_content_markers(markdown=markdown, video_id=audio.video_id, platform=platform)
+        if self.video_path:
+            markdown = self.insert_screenshots_into_markdown(markdown, self.video_path, image_base_url, output_dir)
+        self.save_meta(video_id=audio.video_id, platform=platform, task_id=task_id)
+        # 5. 返回结构体
+        return NoteResult(
+            markdown=markdown,
+            transcript=transcript,
+            audio_meta=audio
+        )
+
+
+if __name__ == '__main__':
+    note = NoteGenerator()
+    print(note.audio_meta)
--- a/backend/app/transcriber/init.py
+++ b/backend/app/transcriber/init.py
--- a/backend/app/transcriber/base.py
+++ b/backend/app/transcriber/base.py
@@ -0,0 +1,14 @@
+from abc import ABC, abstractmethod
+
+from app.models.transcriber_model import TranscriptResult
+
+
+class Transcriber(ABC):
+    @abstractmethod
+    def transcript(self,file_path:str)->TranscriptResult:
+        '''
+
+        :param file_path:音频路径
+        :return: 返回一个 TranscriptResult 类
+        '''
+        pass
--- a/backend/app/transcriber/transcriber_provider.py
+++ b/backend/app/transcriber/transcriber_provider.py
@@ -0,0 +1,11 @@
+from app.transcriber.whisper import WhisperTranscriber
+print('实例化transcriber')
+# TODO:后面需要加入逻辑选择
+_transcriber = None
+
+def get_transcriber(model_size="base", device="cuda"):
+    global _transcriber
+    if _transcriber is None:
+        print('加载_transcriber')
+        _transcriber = WhisperTranscriber(model_size=model_size, device=device)
+    return _transcriber
--- a/backend/app/transcriber/whisper.py
+++ b/backend/app/transcriber/whisper.py
@@ -0,0 +1,92 @@
+from faster_whisper import WhisperModel
+
+from app.decorators.timeit import timeit
+from app.models.transcriber_model import TranscriptSegment, TranscriptResult
+from app.transcriber.base import Transcriber
+from app.utils.env_checker import is_cuda_available, is_torch_installed
+from app.utils.path_helper import get_model_dir
+
+'''
+ Size of the model to use (tiny, tiny.en, base, base.en, small, small.en, distil-small.en, medium, medium.en, distil-medium.en, large-v1, large-v2, large-v3, large, distil-large-v2, distil-large-v3, large-v3-turbo, or turbo
+'''
+
+
+class WhisperTranscriber(Transcriber):
+    # TODO:修改为可配置
+    def __init__(
+            self,
+            model_size: str = "base",
+            device: str = 'cpu',
+            compute_type: str = None,
+            cpu_threads: int = 1,
+    ):
+        if device == 'cpu' or device is None:
+            self.device = 'cpu'
+        else:
+            self.device = "cuda" if self.is_cuda() else "cpu"
+            if device == 'cuda' and self.device == 'cpu':
+                print('没有 cuda 使用 cpu进行计算')
+
+        self.compute_type = compute_type or ("float16" if self.device == "cuda" else "int8")
+
+        model_path = get_model_dir("whisper")
+        self.model = WhisperModel(
+            model_size,
+            device=self.device,
+            # compute_type="int8",  # 或 "float16"
+            cpu_threads=cpu_threads,
+            download_root=model_path
+        )
+
+    @staticmethod
+    def is_torch_installed() -> bool:
+        try:
+            import torch
+            return True
+        except ImportError:
+            return False
+
+    @staticmethod
+    def is_cuda() -> bool:
+        try:
+            if is_cuda_available():
+                print("✅ CUDA 可用，使用 GPU")
+                return True
+            elif is_torch_installed():
+                print("⚠️ 只装了 torch，但没有 CUDA，用 CPU")
+                return False
+            else:
+                print("❌ 还没有安装 torch，请先安装")
+                return False
+
+        except ImportError:
+            return False
+
+    @timeit
+    def transcript(self, file_path: str) -> TranscriptResult:
+
+        segments_raw, info = self.model.transcribe(file_path)
+
+        segments = []
+        full_text = ""
+
+        for seg in segments_raw:
+            text = seg.text.strip()
+            full_text += text + " "
+            segments.append(TranscriptSegment(
+                start=seg.start,
+                end=seg.end,
+                text=text
+            ))
+
+        return TranscriptResult(
+            language=info.language,
+            full_text=full_text.strip(),
+            segments=segments,
+            raw=info
+        )
+
+
+if __name__ == '__main__':
+    print(WhisperTranscriber(cpu_threads=8).transcript(
+        '''D:\\data_backup_from_ssd\\02_个人项目\\11_BiliNote\\backend\\data\\BV1vcZ5YQE9X.mp3'''))
--- a/backend/app/utils/env_checker.py
+++ b/backend/app/utils/env_checker.py
@@ -0,0 +1,12 @@
+def is_cuda_available() -> bool:
+    try:
+        import torch
+        return torch.cuda.is_available()
+    except ImportError:
+        return False
+def is_torch_installed() -> bool:
+    try:
+        import torch
+        return True
+    except ImportError:
+        return False
--- a/backend/app/utils/note_helper.py
+++ b/backend/app/utils/note_helper.py
@@ -0,0 +1,32 @@
+import re
+
+
+import re
+
+import re
+
+def replace_content_markers(markdown: str, video_id: str, platform: str = 'bilibili') -> str:
+    """
+    替换 *Content-04:16*、Content-04:16 或 Content-[04:16] 为超链接，跳转到对应平台视频的时间位置
+    """
+    # 匹配三种形式：*Content-04:16*、Content-04:16、Content-[04:16]
+    pattern = r"(?:\*?)Content-(?:\[(\d{2}):(\d{2})\]|(\d{2}):(\d{2}))"
+
+    def replacer(match):
+        mm = match.group(1) or match.group(3)
+        ss = match.group(2) or match.group(4)
+        total_seconds = int(mm) * 60 + int(ss)
+
+        if platform == 'bilibili':
+            url = f"https://www.bilibili.com/video/{video_id}?t={total_seconds}"
+        elif platform == 'youtube':
+            url = f"https://www.youtube.com/watch?v={video_id}&t={total_seconds}s"
+        elif platform == 'douyin':
+            url = f"https://www.douyin.com/video/{video_id}"
+            return f"[原片 @ {mm}:{ss}]({url})"
+        else:
+            return f"({mm}:{ss})"
+
+        return f"[原片 @ {mm}:{ss}]({url})"
+
+    return re.sub(pattern, replacer, markdown)
--- a/backend/app/utils/path_helper.py
+++ b/backend/app/utils/path_helper.py
@@ -0,0 +1,18 @@
+import os
+
+PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), "../../"))
+
+def get_data_dir():
+    data_path = os.path.join(PROJECT_ROOT, "data")
+    os.makedirs(data_path, exist_ok=True)
+    return data_path
+
+def get_model_dir(subdir: str = "whisper") -> str:
+    base = os.path.abspath(os.path.join(os.path.dirname(__file__), "../../models"))
+    path = os.path.join(base, subdir)
+    os.makedirs(path, exist_ok=True)
+    return path
+
+
+if __name__ == '__main__':
+    print(get_data_dir())
--- a/backend/app/utils/response.py
+++ b/backend/app/utils/response.py
@@ -0,0 +1,18 @@
+from app.utils.status_code import StatusCode
+
+class ResponseWrapper:
+    @staticmethod
+    def success(data=None, msg="success", code=StatusCode.SUCCESS):
+        return {
+            "code": int(code),
+            "msg": msg,
+            "data": data
+        }
+
+    @staticmethod
+    def error(msg="error", code=StatusCode.FAIL, data=None):
+        return {
+            "code": int(code),
+            "msg": msg,
+            "data": data
+        }
--- a/backend/app/utils/status_code.py
+++ b/backend/app/utils/status_code.py
@@ -0,0 +1,12 @@
+from enum import IntEnum
+
+class StatusCode(IntEnum):
+    SUCCESS = 0
+    FAIL = 1
+
+    DOWNLOAD_ERROR = 1001
+    TRANSCRIBE_ERROR = 1002
+    GENERATE_ERROR = 1003
+
+    INVALID_URL = 2001
+    PARAM_ERROR = 2002
--- a/backend/app/utils/url_parser.py
+++ b/backend/app/utils/url_parser.py
@@ -0,0 +1,28 @@
+import re
+from typing import Optional
+
+
+def extract_video_id(url: str, platform: str) -> Optional[str]:
+    """
+    从视频链接中提取视频 ID
+
+    :param url: 视频链接
+    :param platform: 平台名（bilibili / youtube / douyin）
+    :return: 提取到的视频 ID 或 None
+    """
+    if platform == "bilibili":
+        # 匹配 BV号（如 BV1vc411b7Wa）
+        match = re.search(r"BV([0-9A-Za-z]+)", url)
+        return f"BV{match.group(1)}" if match else None
+
+    elif platform == "youtube":
+        # 匹配 v=xxxxx 或 youtu.be/xxxxx，ID 长度通常为 11
+        match = re.search(r"(?:v=|youtu\.be/)([0-9A-Za-z_-]{11})", url)
+        return match.group(1) if match else None
+
+    elif platform == "douyin":
+        # 匹配 douyin.com/video/1234567890123456789
+        match = re.search(r"/video/(\d+)", url)
+        return match.group(1) if match else None
+
+    return None
--- a/backend/app/utils/video_helper.py
+++ b/backend/app/utils/video_helper.py
@@ -0,0 +1,26 @@
+import subprocess
+import os
+import uuid
+
+
+def generate_screenshot(video_path: str, output_dir: str, timestamp: int, index: int) -> str:
+    """
+    使用 ffmpeg 生成截图，返回生成图片路径
+    """
+    os.makedirs(output_dir, exist_ok=True)
+    ids=str(uuid.uuid4())
+    output_path = os.path.join(output_dir, f"screenshot_{str(index)+ids}.jpg")
+
+    command = [
+        "ffmpeg",
+        "-ss", str(timestamp),
+        "-i", video_path,
+        "-frames:v", "1",
+        "-q:v", "2",  # 图像质量
+        output_path,
+        "-y"  # 覆盖
+    ]
+
+    subprocess.run(command, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+    return output_path
+
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>