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

🌈 个人主页：十二月的猫-CSDN博客
🔥 系列专栏： 🏀大模型实战训练营_十二月的猫的博客-CSDN博客

💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光

目录

一. 前言

二. 前端模板介绍

1. TypeScript + React简要介绍

1.1 TypeScript是什么？

1.2 React 是什么？

1.3 TS + React 组合是什么？

2. Open-Resume模板介绍

2.1 项目定位

2.2 核心代码介绍

2.2.1 Home Page

2.2.2 Resume-Import Page

2.2.3 Resume-Builder Page

三. 后端模板介绍

1. FastAPI简要介绍

1. 技术定位

2. 核心功能

1）异步支持（ASGI）

2）自动交互文档

3）数据验证与序列化

4）依赖注入系统

3. 技术架构

4. 适用场景

2. 基础代码介绍

1. main.py

2. config.py

3. router/pdf_upload.py

---

一. 前言

        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><ResumeDropzoneonFileUrlChange={onFileUrlChange}className="mt-5"/>{!hasAddedResume && (<><OrDivider /><SectionWithHeadingAndCreateButtonheading="Don't have a resume yet?"buttonText="Create from scratch"/></>)}</>) : (<>{!hasAddedResume && (<><SectionWithHeadingAndCreateButtonheading="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><ResumeDropzoneonFileUrlChange={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 BaseSettingsclass Settings(BaseSettings):# 必须参数PROJECT_NAME: str = "PosterGenius"ENVIRONMENT: str = "development"  # development/staging/production# 可选参数API_PREFIX: str = "/api/v1"class Config:env_file = "../.env"  # 根据实际位置调整case_sensitive = Truesettings = 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 osrouter = 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进行解析等）

四、总结

本篇文章带大家深入了解了PosterGenius项目的前后端框架，后面在此方面也将继续撰写文章，欢迎大家继续支持猫猫呀！！

 【如果想学习更多深度学习文章，可以订阅一下热门专栏】

• 《PyTorch科研加速指南：即插即用式模块开发》_十二月的猫的博客-CSDN博客
• 《深度学习理论直觉三十讲》_十二月的猫的博客-CSDN博客
• 《AI认知筑基三十讲》_十二月的猫的博客-CSDN博客

如果想要学习更多pyTorch/python编程的知识，大家可以点个关注并订阅，持续学习、天天进步你的点赞就是我更新的动力，如果觉得对你有帮助，辛苦友友点个赞，收个藏呀~~~

本文撰写人：正在努力zhong   正在努力zhong的博客-CSDN博客