使用 Django（Python）和 React 构建 AI 驱动的文档洞察工具

I’m happy to translate the article for you, but I need the full text of the article (the content you’d like translated) in order to do so. Could you please paste the article’s body here? I’ll keep the source link exactly as you provided and preserve all formatting, markdown, and code blocks while translating the rest into Simplified Chinese.

概述

管理合同、协议或任何业务文档可能既耗时又容易出错。如果可以自动从 PDF 中提取关键信息——当事方、重要日期、条款等，并且全部由 AI 驱动，会怎样？

在本教程中，我将向您展示如何使用以下技术构建一个 Document Insights 工具：

• 后端: Django + Django REST Framework
• 前端: React + Axios
• 数据库: SQLite
• AI: OpenAI GPT API
• PDF 解析: PyPDF2

后端

步骤 1 – 安装依赖

pip install django djangorestframework PyPDF2 openai

步骤 2 – 文档的 Django 模型

api/models.py

from django.db import models

class Document(models.Model):
    file = models.FileField(upload_to='documents/')
    uploaded_at = models.DateTimeField(auto_now_add=True)
    extracted_text = models.TextField(blank=True, null=True)
    insights = models.JSONField(blank=True, null=True)

运行迁移：

python manage.py makemigrations
python manage.py migrate

步骤 3 – 序列化器

api/serializers.py

from rest_framework import serializers
from .models import Document

class DocumentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Document
        fields = ['id', 'file', 'uploaded_at', 'extracted_text', 'insights']

步骤 4 – 使用 OpenAI GPT 的 Django API 视图

api/views.py

from rest_framework.views import APIView
from rest_framework.response import Response
from .models import Document
from .serializers import DocumentSerializer
from PyPDF2 import PdfReader
from openai import OpenAI

# Initialize OpenAI client
client = OpenAI(api_key="YOUR_OPENAI_API_KEY")

class UploadDocument(APIView):
    def post(self, request):
        file = request.FILES['file']
        doc = Document.objects.create(file=file)

        # Extract text from PDF
        reader = PdfReader(file)
        text = ""
        for page in reader.pages:
            text += page.extract_text() or ""
        doc.extracted_text = text

        # Prepare AI prompt
        prompt = f"""
        You are an AI assistant that extracts structured information from documents.
        For the following document text, provide:
        1. Parties involved
        2. Important dates
        3. Key clauses
        4. Any missing or inconsistent information
        Return as JSON.

        Document:
        {text}
        """

        # Call OpenAI API
        response = client.chat.completions.create(
            model="gpt-5-nano",          # use gpt-3.5-turbo or gpt-4 if you have access
            messages=[{"role": "user", "content": prompt}]
        )

        # Save AI insights
        doc.insights = response.choices[0].message.content
        doc.save()

        serializer = DocumentSerializer(doc)
        return Response(serializer.data)

步骤 5 – URL 配置

api/urls.py

from django.urls import path
from .views import UploadDocument

urlpatterns = [
    path('upload-document/', UploadDocument.as_view(), name='upload-document'),
]

将应用的 URL 添加到项目中：

project/urls.py

from django.urls import path, include

urlpatterns = [
    path('api/', include('api.urls')),
]

前端（React）

安装 Axios

npm install axios

DocumentInsights 组件

src/pages/DocumentInsights.jsx

import React, { useState } from 'react';
import axios from 'axios';

export default function DocumentInsights() {
  const [file, setFile] = useState(null);
  const [insights, setInsights] = useState(null);

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const { data } = await axios.post(
        'http://127.0.0.1:8000/api/upload-document/',
        formData
      );
      setInsights(JSON.parse(data.insights));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>AI 文档洞察</h1>
      <input type="file" onChange={e => setFile(e.target.files[0])} />
      <button onClick={handleUpload}>上传</button>

      {insights && (
        <div>
          <h2>当事方：</h2>
          {insights.parties?.join(', ')}

          <h2>日期：</h2>
          {insights.dates?.join(', ')}

          <h2>关键条款：</h2>
          {insights.key_clauses?.join(', ')}

          <h2>缺失信息：</h2>
          {insights.missing_info?.join(', ')}
        </div>
      )}
    </div>
  );
}

应用入口点

src/App.js

import DocumentInsights from "./pages/DocumentInsights";
import "./App.css";

function App() {
  return (
    <div className="App">
      <DocumentInsights />
    </div>
  );
}

export default App;

🎉 一切就绪！

运行 Django 服务器 (python manage.py runserver) 和 React 开发服务器 (npm start)。通过 UI 上传 PDF，后端将返回 AI 生成的洞察，并在前端显示。祝编码愉快！

在 Django 中启用 CORS

确保你的后端允许 CORS：

pip install django-cors-headers

在 settings.py 中添加以下内容：

INSTALLED_APPS = [
    # …
    'corsheaders',
]

MIDDLEWARE = [
    # …
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOW_ALL_ORIGINS = True

第7步：测试

运行 Django

python manage.py runserver

运行 React

npm run dev

验证

打开浏览器，上传 PDF，查看 AI 驱动的结构化洞察。