5.4 做一个带后端服务的页面

git clone https://github.com/microsoft/markitdown.git
cd markitdown
pip install -r requirements.txt

# 测试命令行工具
python -m markitdown test.docx
 
# 应该输出 Markdown 格式的文本

请基于 Markitdown 库创建一个 FastAPI 后端服务：

## 核心功能
1. 文件上传接口：支持上传 .docx、.pptx、.pdf、.xlsx、.jpg/.png 等文件
2. URL 转换接口：提供 URL，服务端下载后转换
3. 转换结果处理：
   - 生成 Markdown 文件
   - 存储到 /public/output 目录
   - 返回可下载的链接（如 /download/{file_id}.md）
   - 30 分钟后自动清理文件

## 技术架构
- 使用 FastAPI 框架
- 支持异步处理（大文件转换可能较慢）
- 文件 ID 使用 UUID 生成
- 添加 /docs 路由（自动生成的 Swagger 文档）

## 接口设计
POST /convert/file
- 请求：multipart/form-data，包含文件
- 响应：{file_id, download_url, status}

POST /convert/url
- 请求：{url: "https://example.com/file.pdf"}
- 响应：{file_id, download_url, status}

GET /download/{file_id}
- 返回 Markdown 文件
- 设置 Content-Disposition 头让浏览器下载

GET /health
- 健康检查接口
- 返回：{status: "ok", version: "1.0.0"}

## 错误处理
- 文件类型不支持：返回 400 Bad Request
- 文件过大（>10MB）：返回 413 Payload Too Large
- 转换失败：返回 500 并记录详细错误日志

请生成完整的可运行代码，包括 main.py 和必要的配置文件。

uvicorn main:app --host 0.0.0.0 --port 8000 --reload

https://your-repl.username.repl.co/docs

# 上传文件
curl -X POST https://your-repl.username.repl.co/convert/file \
  -F "[email protected]"
 
# 响应示例
{
  "file_id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
  "download_url": "/download/a1b2c3d4-5678-90ab-cdef-1234567890ab.md",
  "status": "success"
}
 
# 下载结果
curl https://your-repl.username.repl.co/download/a1b2c3d4-5678-90ab-cdef-1234567890ab.md \
  -o output.md

import requests
 
# 上传文件
with open('test.docx', 'rb') as f:
    response = requests.post(
        'https://your-repl.username.repl.co/convert/file',
        files={'file': f}
    )
    print(response.json())

from fastapi.middleware.cors import CORSMiddleware
 
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境改为具体域名
    allow_methods=["*"],
    allow_headers=["*"],
)

from fastapi import Header, HTTPException
 
async def verify_api_key(x_api_key: str = Header(...)):
    if x_api_key != os.getenv("API_KEY"):
        raise HTTPException(status_code=401, detail="Invalid API Key")
    return x_api_key
 
@app.post("/convert/file", dependencies=[Depends(verify_api_key)])
async def convert_file(...):
    ...

API_KEY=your_secret_key_here

fetch('/convert/file', {
  headers: {
    'X-API-Key': 'your_secret_key_here'
  },
  ...
})

import logging
from datetime import datetime
 
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
 
@app.post("/convert/file")
async def convert_file(file: UploadFile, request: Request):
    client_ip = request.client.host
    logger.info(f"[{datetime.now()}] {client_ip} - Upload: {file.filename}")
 
    # 转换逻辑
    ...
 
    logger.info(f"[{datetime.now()}] {client_ip} - Success: {file_id}")

pip install slowapi

from slowapi import Limiter, _rate_limit_exceeded_handler
from slowapi.util import get_remote_address
 
limiter = Limiter(key_func=get_remote_address)
app.state.limiter = limiter
app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
 
@app.post("/convert/file")
@limiter.limit("5/minute")  # 每分钟最多 5 次请求
async def convert_file(request: Request, ...):
    ...

npx create-next-app@latest markitdown-frontend
cd markitdown-frontend

请创建一个文件转换的前端界面，使用 Next.js + Tailwind CSS：

## 功能需求
1. 文件上传区域：
   - 支持拖拽上传
   - 显示文件名、大小、类型
   - 限制文件大小（最大 10MB）
   - 支持的格式：.docx, .pptx, .pdf, .xlsx, .jpg, .png

2. URL 输入区域：
   - 输入框 + 提交按钮
   - 验证 URL 格式

3. 进度显示：
   - 上传进度条
   - 转换状态（上传中/转换中/完成/失败）
   - 预计剩余时间（可选）

4. 结果展示：
   - 转换成功：显示下载按钮 + 预览区（显示 Markdown 内容）
   - 转换失败：显示错误原因

5. 历史记录：
   - 显示最近 10 次转换记录
   - 支持重新下载

## 技术要求
- 使用 Next.js App Router
- Tailwind CSS 样式
- 调用 API：`https://your-backend.repl.co`
- API Key 存储在 .env.local
- 响应式设计，支持移动端

请生成完整的代码。

NEXT_PUBLIC_API_URL=https://your-backend.repl.co
NEXT_PUBLIC_API_KEY=your_secret_key_here

# 确保前端可以正常构建
pnpm run build
 
# 初始化 Git
git init
git add .
git commit -m "feat: frontend for markitdown service"
 
# 推送到 GitHub
gh repo create markitdown-frontend --public --source=. --push
 
# 在 Vercel 部署
# 登录 https://vercel.com/ → New Project → 选择仓库 → Deploy

NEXT_PUBLIC_API_URL=https://your-backend.repl.co
NEXT_PUBLIC_API_KEY=your_secret_key_here

import requests
 
@app.post("/convert/file")
async def convert_file(file: UploadFile, callback_url: str = None):
    # 转换逻辑
    ...
 
    # 完成后回调
    if callback_url:
        requests.post(callback_url, json={
            "file_id": file_id,
            "status": "success",
            "download_url": download_url
        })

from supabase import create_client
 
supabase = create_client(
    os.getenv("SUPABASE_URL"),
    os.getenv("SUPABASE_KEY")
)
 
@app.post("/convert/file")
async def convert_file(...):
    ...
 
    # 记录到数据库
    supabase.table("conversion_logs").insert({
        "file_id": file_id,
        "filename": file.filename,
        "file_size": file.size,
        "client_ip": request.client.host,
        "created_at": datetime.now().isoformat()
    }).execute()