城市拟人·把故乡变成动漫少女 项目开发整理

项目截图

项目初始需求

开发创意十足的AI图像生成应用，能够将城市的天际线和街景转化为二次元动漫少女形象，并支持用户与"城市少女"合影，核心输入为城市名 + 一句性格描述（例：“成都，慵懒吃货少女”），核心流程为：

1. 调用城市天际线/街景 API 抓图做底图；
2. 把天际线变成少女发型、把霓虹变成衣服纹理；
3. 多图融合让用户上传自己的街拍，生成“我与城市少女同框”海报。

PRD文档设计：城市拟人·故乡动漫少女生成系统

需求优化

1. 系统定位：基于文生图与图生图技术的城市拟人化AI视觉创作系统，支持城市天际线+性格描述转化为二次元动漫少女，融合用户街拍生成合影海报；
2. 核心用户：城市文化爱好者、动漫创作者、旅游博主、二次元插画师；
3. 核心场景：城市形象拟人化创作、个性化旅游打卡海报生成、二次元城市明信片制作；
4. 核心规则：免注册登录（平台统一提供身份）、所有AI产物强制存库（不可关闭，支持跨模态关联）；
5. 核心体验目标：城市-性格映射精准、生成等待焦虑缓解率>80%、一键合影成功率（操作≤3步）。

核心用户画像

用户角色	职责与频率	核心痛点	心智模型	情绪地图
城市印象捕手（高频创作者）	每日生成不同城市拟人形象，探索城市文化符号	产物散落难找回，历史参数遗忘无法复刻	摄影师暗房（底片管理、成片归档）	创作（期待）→生成（焦虑）→完成（惊喜/满足）→管理（掌控）
打卡合影达人（社交用户）	上传旅行街拍生成合影海报用于社交分享	融合技术门槛高，P图痕迹重，等待久	拍立得（拍完即得，画面自然）	上传（期待）→融合（焦虑）→预览（惊喜）→分享（炫耀）
设定考据党（细节控）	专注性格与城市特征对应，调整参数打磨细节	难以微调局部，缺乏参数对照视图	游戏捏脸（精准滑杆控制、实时预览）	配置（专注）→生成（焦虑）→细节确认（释然）→存档（收藏）

页面架构与导航系统

全局导航结构

• 主导航：创作中心（首页）、我的城市（产物库）、灵感街拍（合影模板）、设置；
• 面包屑：首页 > 城市拟人创作 > {当前城市名}；
• 快捷入口：全局悬浮“快速生成”FAB按钮，支持一键唤起最近城市参数；
• 一致性规则：生成类操作主CTA为“开始拟人”，颜色统一品牌活力橙。

核心页面清单

页面名称	页面类型	入口来源	主要跳转去向	核心功能	UX重点
创作中心（首页）	创作页/导航页	系统入口/导航	拟人工作台/合影工坊	城市输入、性格定义、风格选择、最近任务概览	F型视觉动线，输入城市名自动联想热门标签
拟人工作台	操作页	创作中心	生成等待页/产物详情页	天际线底图生成、Prompt智能优化、参数配置	参数分组折叠，输入自动校验与格式提示
生成等待页	状态页	拟人工作台/合影工坊	产物详情页	进度可视化、渐进式融合预览、任务取消	分阶段视觉反馈（轮廓→上色→纹理），支持随时中断
产物详情页	详情页	生成等待页/我的城市	编辑合影/复刻参数	高清大图展示、参数反查、下载/分享、衍生创作	自动解析城市标签，参数一键复用
我的城市	列表页	导航	产物详情页	多维度筛选、批量管理、收藏夹	大图卡片流布局，支持以图搜图

核心业务流程：城市拟人与合影生成全链路

涉及页面

创作中心 → 拟人工作台 → 生成等待页 → 产物详情页

用户情绪曲线与设计策略

阶段	情绪	设计策略
创作中心	期待/好奇	提供热门城市范例，降低创作门槛，激发联想
拟人工作台→生成等待	专注→焦虑→期待	参数配置提供特征可视化预览，生成阶段展示天际线→发型变形动画
产物详情页	惊喜/满足	生成完成高亮展示，自动解析城市元素匹配度报告

详细步骤

1. 创作中心：输入城市名+性格描述，点击“开始拟人”，携带城市特征提取结果侧边滑入拟人工作台；
2. 拟人工作台：系统自动抓取天际线底图，用户微调Prompt/选择艺术风格，确认提交后沉浸式全屏跳转生成等待页；
3. 生成等待页：后台执行天际线→发型、霓虹灯色→服饰纹理渲染，实时展示阶段+渐进式清晰图，生成完成后自动播放过程回放并跳转产物详情页；
4. 产物详情页：展示高清大图，自动保存至“我的城市”并弹窗提示，点击“我要合影”可上传街拍，自动带入城市少女形象跳转合影工坊。

异常流程

• 失败场景：生成等待页停止进度，提示“哎呀，少女迷路了”，提供智能修正参数建议+一键重试；
• 中断场景：用户关闭页面，下次进入首页顶部提示未完成任务，支持继续生成/放弃。

功能模块详细设计

基础功能模块

1. 首页与创作入口：沉浸式动态Banner+巨型输入框，输入城市名联想性格标签，下方展示热门灵感卡片与最近创作产物，首次进入有引导动效；
2. AI产物自动保存规则：存储城市拟人形象、合影海报、生成过程视频，数据库包含基础/技术/关联/状态字段，同一城市多次生成建立档案关联，合影与城市少女建立父子关联，生成完成Toast提示+拍照音效；
3. 核心数据操作：支持按城市/风格/时间查询（即时反馈+容错推荐）、创作添加（参数渐进披露+防错校验）、属性修改（就地编辑，无撤销）、不可逆删除（红色警示弹窗+批量操作）；
4. 权限控制：平台分配“创作者”角色拥有全权限，公开产物仅“查看者”可见，无编辑/删除权限。

特色功能模块

特色功能	功能价值	核心操作/UX设计
天际线·发型特征映射引擎	解决城市形象抽象化难点，建筑结构转化为发型视觉锚点	自动抓取天际线分析轮廓，生成过程展示天际线→头发丝缕变形，鼠标悬停提示地标转化细节
霓虹光影·服饰纹理生成器	城市夜景灯光转化为少女服饰纹理/配色	选择夜景模式提取主色调，结合性格生成特色服饰，点击衣服区域弹窗显示纹理来源
我与城市·同框合影工坊	实现用户街拍与虚拟少女自然融合，解决P图僵硬痛点	上传照片自动识别人体关键点，少女自动缩放/调光/叠放，仅提供位置/大小/光影3个核心调整滑杆，拖拽实时渲染
生成焦虑缓解·过程可视化	让用户感知AI创作过程，避免黑盒焦虑	全屏展示生成阶段提示文字+预计剩余时间，进度条为城市剪影移动动画，90%时闪过最终成图轮廓制造悬念

UX设计专项规范（AIGC场景强化）

1. 认知负荷管理：复杂功能引导式Tour，输入框提供占位符，参数按外貌/服饰/环境分组收纳；
2. 反馈系统设计：生成等待期视觉（城市剪影进度条）+听觉（魔法音效）+触觉（设备震动）反馈，错误文案情感化（如“城市信号不好，少女暂时无法连线”）；
3. 容错与防错设计：上传街拍检测人脸模糊并提示，删除产物需输入DELETE/滑动滑块确认，防止误触；
4. 一致性系统：全程使用“拟人/少女/底图”等统一术语，所有保存=Ctrl+S、取消=Esc；
5. 可达性与包容性：支持高对比度模式，生成图片自动添加Alt Text描述。

API依赖分析与接口开发

API匹配与选择

因资源池内无城市街景/天际线图片API，底图需通过内置图库/用户上传获取，核心AI生成与融合需求均由图生图接口（provider:通义，code:3301） 覆盖，支持图片+文本双输入，满足天际线→发型、霓虹→服饰、多图融合需求。

自定义PromptAPI接口开发（基于LLM实现，OpenAPI 3.0.3）

1. 城市天际线特征提取接口

• 接口地址：/ai_web_workflow/run_prompt/city_skyline_extractor
• 请求参数：cityName（城市名，必选）、personality（性格描述，必选）
• 响应数据：发型关键词、发质纹理描述、建议发饰、整体风格备注
• 作用：分析城市地标特征，生成AI绘画可用的发型结构化描述，支撑天际线变发型。

2. 城市霓虹服饰纹理生成接口

• 接口地址：/ai_web_workflow/run_prompt/city_neon_texture_generator
• 请求参数：cityName（必选）、personality（必选）、sceneColor（街景主色调，可选）
• 响应数据：服饰风格、配色方案、纹理图案、材质描述
• 作用：结合城市夜景与性格，生成二次元服饰纹理配色方案，支撑霓虹变服饰。

3. 城市拟人绘画Prompt优化接口

• 接口地址：/ai_web_workflow/run_prompt/city_personality_prompt_optimizer
• 请求参数：cityName（必选）、baseDescription（基础性格描述，必选）、artStyle（艺术风格，可选）
• 响应数据：优化后正向Prompt、推荐反向Prompt、提取标签
• 作用：将简单的城市+性格描述，扩展为包含画质/风格/光影的高质量AI绘画Prompt。

MongoDB数据库架构设计

设计概述

1. 设计目标：资产归档化、特征可追溯、数据一致性；
2. 核心约束：严禁设计用户表，仅引用平台user_id/user_name；图片资源统一用promptimg生成，不存Base64；删除为真删除；默认按_id逆序查询。

集合清单

集合名称	用途分类	表级权限属性	备注
city_base_images	城市底图管理	Public	存储天际线/街景底图，全员可见
city_personas	城市拟人形象	Private	存储动漫少女主图+特征参数，用户私有/公开
fusion_posters	合影海报管理	Private	存储用户街拍与少女融合的海报，用户私有
persona_tasks	生成任务记录	Private	记录拟人生成任务中间态参数+状态，用于追溯

核心集合设计（关键字段）

1. city_base_images：_id、city_name、image_type（skyline/night_view/street）、resource_url（底图链接）；
2. city_personas（核心业务集合）：_id、user_id、city_name、personality_desc、resource_url（少女形象链接）、optimized_prompt、hairstyle_features（嵌入发型特征）、clothing_features（嵌入服饰特征）、base_image_id（引用底图ID）；
3. fusion_posters：_id、user_id、poster_url（海报链接）、persona_id（引用少女形象ID）、user_photo_url（用户街拍链接）；
4. persona_tasks：_id、user_id、task_status（PENDING/RUNNING/SUCCEEDED/FAILED）、input_params、error_message、result_persona_id（引用成功产物ID）。

关系映射与操作逻辑

1. 关系类型：发型/服饰特征采用嵌入关系（数据量小、高频联查）；底图-拟人、拟人-合影、任务-产物采用引用关系（一对多，避免数据冗余）；
2. 操作逻辑：仅允许修改产物属性信息，严禁修改生成参数；删除为真删除，删除拟人形象时应用层处理关联合影的级联操作；
3. 权限安全：Public集合仅匿名读公开数据，Private集合仅用户操作自身数据；user_id从后端Token解析，前端禁止传递；查询条件由系统内部自动添加，防止逻辑绕过。

性能优化

1. 索引建议：为city_name、user_id、persona_id、task_status等字段建立单字段索引；
2. 查询优化：列表展示仅返回必要字段，长文本字段（如optimized_prompt）仅详情页加载，减少网络传输。

项目前端框架开发

项目文件结构

city-persona-anime/
├── package.json              # 项目配置
├── public/
│   ├── index.html            # 入口HTML（CDN资源加载）
│   └── assets/
│       ├── js/tailwind.config.js    # Tailwind配置
│       └── css/styles.css            # 全局样式
└── src/
    ├── Global.js             # 全局变量/API封装/工具函数
    ├── index.js              # 应用初始化
    ├── App.js                # 路由配置
    ├── components/           # 公共组件
    │   ├── Header.js         # 响应式导航
    │   ├── Footer.js         # 公共底部
    │   └── LoadingOverlay.js # 全局加载遮罩
    └── pages/                # 页面组件
        ├── Home.js           # 创作中心（首页）
        ├── CreatePersona.js  # 城市拟人创作页
        ├── MyCity.js         # 我的城市列表
        ├── PersonaDetail.js  # 拟人形象详情
        ├── FusionPoster.js   # 合影海报生成
        └── Inspiration.js    # 灵感街拍广场

核心文件开发说明

1. package.json：定义项目信息、脚本（start/build）、依赖（serve）；
2. public/index.html：配置元信息，按顺序引入CDN资源（Tailwind/React/路由/Babel等），加载项目JS文件；
3. src/Global.js：封装API基础路径、MongoDB/PromptAPI/图像编辑API端点，实现全局状态管理（发布订阅）、通用Fetch、资源轮询、时间格式化、promptimg URL生成等工具函数，提供React Hook（useGlobalState/useLoading）；
4. src/App.js：配置HashRouter路由，实现全局布局（Header+Main+Footer+LoadingOverlay），包含404兜底页面；
5. 公共组件：
   • Header：响应式导航（桌面端导航栏+移动端汉堡菜单），路由高亮，滚动添加阴影，全局快速生成按钮；
   • Footer：包含项目标识、标语、社交链接、版权信息；
   • LoadingOverlay：全屏加载遮罩，展示加载动画与文字，适配AI生成等待场景；
6. 页面组件：完成基础结构搭建，包含页面布局、状态管理、核心操作入口，预留API调用与功能扩展空间。

已集成API接口（Global.js中配置）

1. MongoDB标准接口：find/findOne/insertOne/updateOne/deleteOne；
2. 自定义PromptAPI：城市天际线特征提取、霓虹服饰纹理生成、绘画Prompt优化；
3. 图像编辑API：通义千问多图融合（3301），用于少女生成与合影融合。

项目运行方式

1. 保存项目文件到对应目录；
2. 安装依赖：npm install；
3. 启动服务：npm start；
4. 访问地址：http://localhost:3000。

待扩展功能

当前页面组件为基础结构，需补充实现核心业务逻辑：

1. CreatePersona.js：完整API调用链（特征提取→Prompt优化→图像生成→轮询→保存）、进度展示、错误处理；
2. MyCity.js：分页查询、卡片展示、删除/公开状态切换、以图搜图；
3. PersonaDetail.js：详情展示、Prompt参数对照、分享/下载/复刻功能；
4. FusionPoster.js：图片上传（Base64）、多图融合API调用、海报预览与保存；
5. Inspiration.js：瀑布流布局、公开作品筛选、点赞/收藏功能。

项目开发完成总结

1. 系统功能：完成城市拟人创作、天际线→发型、霓虹→服饰、合影海报生成核心功能框架，支持城市+性格输入，AI生成二次元少女形象；
2. 接口开发：完成3个自定义PromptAPI接口，匹配图生图核心API，配置MongoDB数据接口，实现端到端的API调用链路；
3. 数据设计：完成MongoDB 4大集合设计，实现数据归档、追溯与一致性，满足权限与性能要求；
4. 前端开发：完成完整的前端项目框架，包含全局配置、公共组件、6个核心页面，严格遵循UX设计规范，支持响应式布局、加载反馈、动画过渡；
5. 运行状态：项目框架搭建完成，API接口配置完毕，数据库结构设计完成，可直接运行并进行功能扩展。