【全队项目】智能学术海报生成系统PosterGenius--前后端系统介绍-CSDN博客

PosterGenius致力于开发一套依托DeepSeek技术的智能论文海报生成平台。该系统在AI自动化处理的核心框架下，支持用户个性化调整与内容优化。用户仅需上传PDF格式的学术论文，平台即可智能解析文献内容，并生成适配用户选定风格的学术海报。生成的海报不仅能精准提炼论文核心观点，还通过智能图文混排强化视觉表现力。为提升海报设计的多元性与专业性，系统融合多模态自优化机制，持续改进文本摘要与视觉元素的协同效果。

二. 前端模板介绍

1. TypeScript + React简要介绍

1.1 TypeScript是什么？

定位：微软开发的 JavaScript 超集（在 JS 基础上扩展）。
核心能力：通过静态类型检查，为变量、函数、对象等添加明确的类型约束。

let age: number = 25;  // 定义数字类型变量
function greet(name: string): string {  // 输入输出均为字符串
  return `Hello, ${name}!`;
}

特点：写代码时即可发现类型错误，代码更健壮，适合大型项目协作。

1.2 React 是什么？

定位：Meta（原 Facebook）开源的前端 UI 开发库。
核心能力：基于组件化思想，通过声明式语法构建用户界面。

// 定义一个按钮组件
const Button = ({ text }: { text: string }) => {
  return <button>{text}</button>;
};

特点：虚拟 DOM 提升渲染效率，单向数据流简化状态管理。

1.3 TS + React 组合是什么？

本质：用 TypeScript 编写 React 组件，实现类型安全的 UI 开发。
典型代码（TSX 文件）：

interface UserCardProps {  // 定义组件属性的类型
  name: string;
  age: number;
  avatarUrl?: string;      // 可选属性
}

const UserCard: React.FC<UserCardProps> = ({ name, age, avatarUrl }) => {
  return (
    <div>
      {avatarUrl && <img src={avatarUrl} />}
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

总而言之就是，TypeScript + React = 为 JavaScript 添加类型系统 + 组件化 UI 开发，兼顾代码可靠性和开发效率。以上是对TypeScript + React的简要介绍，详细介绍可见新手入门 React .tsx 项目：从零到实战_react tsx-CSDN博客

2. Open-Resume模板介绍

2.1 项目定位

OpenResume 是一款开箱即用的开源简历解决方案，致力于提供： ✓ 现代化专业简历设计 ✓ 智能简历解析能力 ✓ 完全免费的隐私优先服务通过消除简历制作的技术门槛，帮助全球求职者高效打造符合ATS系统的专业简历

2.2 核心代码介绍

2.2.1 Home Page

import { Hero } from "home/Hero";
import { Steps } from "home/Steps";
import { Features } from "home/Features";
import { Testimonials } from "home/Testimonials";
import { QuestionsAndAnswers } from "home/QuestionsAndAnswers";

export default function Home() {
  return (
    <main className="mx-auto max-w-screen-2xl bg-dot px-8 pb-32 text-gray-900 lg:px-12">
      <Hero />
      <Steps />
      <Features />
      <Testimonials />
      <QuestionsAndAnswers />
    </main>
  );
}

这段代码是 OpenResume 项目的主页入口组件，采用模块化设计将页面拆解为五个独立区块（首屏展示、操作流程、功能特性、用户见证、常见问答），通过 Tailwind CSS 实现响应式布局，使用 max-w-screen-2xl 约束最大内容宽度，并采用 bg-dot 背景纹理增强视觉层次，体现了清晰的组件化架构和现代化 CSS 工具链实践。主页效果如下图所示：

2.2.2 Resume-Import Page

return (
    <main>
      <div className="mx-auto mt-14 max-w-3xl rounded-md border border-gray-200 px-10 py-10 text-center shadow-md">
        {!hasUsedAppBefore ? (
          <>
            <h1 className="text-lg font-semibold text-gray-900">
              Import data from an existing resume
            </h1>
            <ResumeDropzone
              onFileUrlChange={onFileUrlChange}
              className="mt-5"
            />
            {!hasAddedResume && (
              <>
                <OrDivider />
                <SectionWithHeadingAndCreateButton
                  heading="Don't have a resume yet?"
                  buttonText="Create from scratch"
                />
              </>
            )}
          </>
        ) : (
          <>
            {!hasAddedResume && (
              <>
                <SectionWithHeadingAndCreateButton
                  heading="You have data saved in browser from prior session"
                  buttonText="Continue where I left off"
                />
                <OrDivider />
              </>
            )}
            <h1 className="font-semibold text-gray-900">
              Override data with a new resume
            </h1>
            <ResumeDropzone
              onFileUrlChange={onFileUrlChange}
              className="mt-5"
            />
          </>
        )}
      </div>
    </main>
  );

这段代码实现了一个 动态简历导入界面，根据用户是否首次使用（hasUsedAppBefore）和是否已上传简历（hasAddedResume）展示不同状态：首次用户显示 PDF 上传拖放区（ResumeDropzone）与「从零创建」按钮的双选项，老用户则优先显示「继续编辑」提示并支持覆盖上传新简历，通过条件渲染和 max-w-3xl 布局约束实现清晰的分步引导流程。简历导入页面效果如下：

2.2.3 Resume-Builder Page

"use client";
import { Provider } from "react-redux";
import { store } from "lib/redux/store";
import { ResumeForm } from "components/ResumeForm";
import { Resume } from "components/Resume";

export default function Create() {
  return (
    <Provider store={store}>
      <main className="relative h-full w-full overflow-hidden bg-gray-50">
        <div className="grid grid-cols-3 md:grid-cols-6">
          <div className="col-span-3">
            <ResumeForm />
          </div>
          <div className="col-span-3">
            <Resume />
          </div>
        </div>
      </main>
    </Provider>
  );
}

这段代码定义了 简历构建器核心页面，采用 Redux 全局状态管理（Provider 包裹），通过 grid-cols-3 实现桌面端双栏布局：左栏为简历表单编辑器（ResumeForm），右栏为实时 PDF 预览（Resume），二者通过 Redux store 数据联动，形成「编辑即预览」的实时交互体验，bg-gray-50 背景色与响应式栅格系统（md:grid-cols-6）确保跨设备适配性。简历编辑页面效果如下：

三. 后端模板介绍

1. FastAPI简要介绍

1. 技术定位

本质：基于 Python 的现代化 Web 框架，专为构建高性能 API 设计。
核心目标：简化开发流程，同时提供企业级性能和强类型安全。

2. 核心功能

1）异步支持（ASGI）

原生支持 async/await，轻松处理高并发请求（如同时处理数千个 API 调用）。
示例：异步数据库查询

@app.get("/user/{id}")  
async def get_user(id: int):  
    user = await database.fetch_one("SELECT * FROM users WHERE id = :id", {"id": id})  
    return user

2）自动交互文档

内置 Swagger UI 和 ReDoc，根据代码自动生成 API 文档，无需手动编写。
访问 /docs 即可查看和测试所有接口。

3）数据验证与序列化

基于 Pydantic 模型，自动校验请求参数和响应数据格式。

from pydantic import BaseModel  
class Item(BaseModel):  
    name: str  
    price: float  
    tax: float = 10.0  # 默认值  

@app.post("/items/")  
def create_item(item: Item):  # 请求体会自动校验为 Item 类型  
    return {"total_price": item.price + item.tax}

4）依赖注入系统

通过依赖声明管理共享逻辑（如数据库连接、权限验证），避免代码冗余。

3. 技术架构

# 典型项目结构  
- `main.py`           # 入口文件（定义路由和核心逻辑）  
- `models.py`         # Pydantic 数据模型  
- `database.py`       # 数据库连接（SQLAlchemy/asyncpg等）  
- `dependencies.py`   # 依赖注入函数  
- `routers/`          # 子路由模块（拆分业务逻辑）

4. 适用场景

微服务 API（高频接口、低延迟需求）
数据密集型应用（如实时分析、机器学习服务化）
快速原型开发（自动文档和类型提示加速协作）

总之，FastAPI = Python 类型提示 + 异步高性能 + 自动文档，是构建现代 API 的“瑞士军刀”，尤其适合追求开发效率与运行时性能兼顾的团队。以上是FastAPI的简要介绍，详细介绍可见【FastAPI】从0开始学FastAPI！一篇搞懂！-CSDN博客

2. 基础代码介绍

1. main.py

from fastapi import FastAPI
from app.config import settings
from app.routers import health, poster,pdf_upload
from fastapi.middleware.cors import CORSMiddleware

# venv\Scripts\activate 激活虚拟环境
# uvicorn app.main:app --reload --port 8000 启动服务

app = FastAPI(title=settings.PROJECT_NAME)

# 允许所有来源（生产环境应指定具体域名）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 添加路由
app.include_router(health.router)
app.include_router(poster.router, prefix="/poster", tags=["poster"])
app.include_router(pdf_upload.router)

@app.on_event("startup")
async def startup():
    print(f"Starting {settings.PROJECT_NAME} in {settings.ENVIRONMENT} mode")

这段代码构建了一个基于 FastAPI 的现代化后端服务框架，通过 app =FastAPI() 初始化应用并集成项目配置，采用模块化路由设计将海报生成（poster）和 PDF 处理（pdf_upload）功能解耦为独立子模块，通过 CORSMiddleware 开放全域名跨域访问以支持前后端分离开发。

同时利用 @app.on_event("startup") 实现服务启动时的环境感知（打印项目名称及运行环境）。代码通过 allow_origins=["*"] 的宽松策略优化开发体验，但保留了生产环境切换为域名白名单的扩展性，路由系统采用 prefix 和 tags 参数实现 API 文档自动分类，整体架构体现了配置中心化、业务模块化、安全分层化的设计理念，可作为 RESTful 微服务的基础模板快速扩展 JWT 鉴权、速率限制等企业级功能。

2. config.py

from pydantic_settings import BaseSettings


class Settings(BaseSettings):
    # 必须参数
    PROJECT_NAME: str = "PosterGenius"
    ENVIRONMENT: str = "development"  # development/staging/production

    # 可选参数
    API_PREFIX: str = "/api/v1"

    class Config:
        env_file = "../.env"  # 根据实际位置调整
        case_sensitive = True


settings = Settings()

这段代码基于 pydantic_settings 库构建了项目的 中心化配置管理系统，通过继承 BaseSettings 定义了三层配置参数：必选参数（PROJECT_NAME 项目标识、ENVIRONMENT 环境模式）、可选参数（API_PREFIX 接口前缀），支持从 .env 文件或系统环境变量动态加载配置，并通过 case_sensitive=True 强制区分变量名大小写，利用 Pydantic 的类型验证和默认值回退机制保障配置安全性，实现开发/生产环境无缝切换，同时通过 Config 类显式声明配置源优先级，为后续扩展日志级别、数据库连接等参数提供标准化接入点。

3. router/pdf_upload.py

from fastapi import APIRouter, File, UploadFile, HTTPException, status
from fastapi.responses import JSONResponse
import os

router = APIRouter(prefix="/api/v1", tags=["文件上传"])

# 创建保存目录（如果不存在）
UPLOAD_DIR = "uploads/pdf"
os.makedirs(UPLOAD_DIR, exist_ok=True)

@router.post("/upload-pdf/", summary="上传PDF文件")
async def upload_pdf(file: UploadFile = File(...)):
    # 验证文件类型
    if file.content_type != "application/pdf":
        raise HTTPException(
            status_code=status.HTTP_415_UNSUPPORTED_MEDIA_TYPE,
            detail="仅支持PDF文件"
        )

    # 验证文件扩展名
    if not file.filename.lower().endswith(".pdf"):
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail="文件名必须以.pdf结尾"
        )

    # 保存文件
    file_path = os.path.join(UPLOAD_DIR, file.filename)
    try:
        contents = await file.read()
        with open(file_path, "wb") as f:
            f.write(contents)
    except Exception as e:
        raise HTTPException(
            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
            detail=f"文件保存失败: {str(e)}"
        )
    finally:
        await file.close()

    return JSONResponse(
        status_code=status.HTTP_200_OK,
        content={
            "filename": file.filename,
            "saved_path": file_path,
            "size": f"{len(contents)/1024:.2f} KB"
        }
    )

这段代码实现了一个 安全可靠的PDF文件上传API端点，通过 APIRouter 挂载到 /api/v1/upload-pdf 路径并归类到「文件上传」标签，采用 双重验证机制（MIME类型检测 + 扩展名校验）拦截非PDF文件，通过异步流式处理将文件保存至预设的 uploads/pdf 目录（自动创建缺失目录），异常处理覆盖文件类型错误、存储失败等场景并返回标准化 HTTP 状态码（如415/500），最终返回包含文件名、存储路径及格式化文件大小的 JSON 响应，同时通过 finally 块确保文件句柄释放，体现了生产级文件上传接口的 健壮性设计 和 RESTful 最佳实践。

通过以上基础框架代码，可以实现pdf上传功能的API，通过前端发送POST请求，可以将pdf上传到后端进行后续处理（如对pdf进行解析等）