优化详情替换自动带入产品图
This commit is contained in:
Your Name
parent
b33bdc208f
commit
378900e0da
@ -1511,7 +1511,11 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
|
||||
|
||||
{showSceneFusion ? (
|
||||
<div className="flex-1 overflow-hidden relative">
|
||||
<SceneFusionView onBack={() => setShowSceneFusion(false)} />
|
||||
<SceneFusionView
|
||||
onBack={() => setShowSceneFusion(false)}
|
||||
// 直接复用当前编辑器中的图片 URL，进入「详情替换」时自动带入产品图
|
||||
initialProductImage={processedImageUrl ?? originalImageUrl ?? null}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@ -38,9 +38,19 @@ export interface SceneItem {
|
||||
|
||||
interface SceneFusionViewProps {
|
||||
onBack: () => void;
|
||||
/**
|
||||
* 可选：从外部（例如图片编辑器当前图片）传入的初始产品图。
|
||||
* 这样在「详情替换」中就可以自动带入当前正在编辑的图片，
|
||||
* 避免用户重复上传。
|
||||
*/
|
||||
initialProductImage?: string | null;
|
||||
/**
|
||||
* 可选：初始产品名称，便于在进入详情替换时预填文案。
|
||||
*/
|
||||
initialProductName?: string;
|
||||
}
|
||||
|
||||
export function SceneFusionView({ onBack }: SceneFusionViewProps) {
|
||||
export function SceneFusionView({ onBack, initialProductImage, initialProductName }: SceneFusionViewProps) {
|
||||
// 最大自动重试次数
|
||||
const MAX_AUTO_RETRY = 10;
|
||||
|
||||
@ -78,7 +88,7 @@ export function SceneFusionView({ onBack }: SceneFusionViewProps) {
|
||||
|
||||
// 状态管理
|
||||
const [productImage, setProductImage] = useState<string | null>(null);
|
||||
const [productName, setProductName] = useState<string>(""); // 产品名称（如"沙发"）
|
||||
const [productName, setProductName] = useState<string>(initialProductName || ""); // 产品名称（如"沙发"）
|
||||
const [scenes, setScenes] = useState<SceneItem[]>([]);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [aspectRatio, setAspectRatio] = useState<string>("auto"); // 图片比例
|
||||
@ -88,6 +98,13 @@ export function SceneFusionView({ onBack }: SceneFusionViewProps) {
|
||||
const productInputRef = useRef<HTMLInputElement>(null);
|
||||
const sceneInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// 如果外部传入了初始产品图，则在首次挂载或传入值变化时自动带入
|
||||
useEffect(() => {
|
||||
if (initialProductImage) {
|
||||
setProductImage(initialProductImage);
|
||||
}
|
||||
}, [initialProductImage]);
|
||||
|
||||
// 处理产品图上传
|
||||
const handleProductUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
|
||||
137
介绍文档.md
Normal file
137
介绍文档.md
Normal file
@ -0,0 +1,137 @@
|
||||
## 产品概述
|
||||
|
||||
本项目是一个面向企业级场景的 **多模态 AI 创作与知识工作平台**，集成了对话助手、无限画布创作、图片与视频生成、数据分析等能力，支持私有化部署和本地统一素材管理，帮助企业安全、高效地落地 AIGC 能力。
|
||||
|
||||
- **首页体验**：对标并复刻了豆包与既梦的交互和信息架构，支持多轮对话、智能体工作流等体验。
|
||||
- **无限画布**：对标 lovart 的无限画布交互，支持在同一画布上组织灵感、对话、图片与视频结果，适合头脑风暴、项目规划和复杂创意流程。
|
||||
- **企业级部署**：支持在企业自有服务器或云环境中直接部署，所有数据与素材完全可控，便于合规与安全审计。
|
||||
- **统一素材管理**：所有生成的图片、视频、提示词等素材统一本地管理，支持检索、标签与二次复用。
|
||||
- **可视化数据分析**：内置企业可视化出图数据看板，可分析各模型的使用情况、生成质量与成本结构，为业务决策提供数据支撑。
|
||||
|
||||
---
|
||||
|
||||
## 核心功能亮点
|
||||
|
||||
### 1. 类豆包 / 既梦的对话首页
|
||||
|
||||
- **多模型对话**：支持在同一对话界面中切换不同大模型（通义千问、OpenAI、Gemini 等），并根据业务需求选择最优模型。
|
||||
- **多模态输入输出**：支持文本、图片、部分场景下的视频相关指令，满足创作、分析、问答、代码等多种需求。
|
||||
- **会话组织与收藏**：支持对重要会话进行收藏、归档、命名，方便团队复盘与知识沉淀。
|
||||
- **企业知识集成（可扩展）**：可按企业需求对接内部知识库 / 文档系统，实现企业专属知识助手。
|
||||
|
||||
### 2. 类 lovart 的无限画布
|
||||
|
||||
- **无限画布空间**：支持在一个无限扩展的画布中放置对话卡片、图片结果、提示词、标注区域等元素。
|
||||
- **多结果并排对比**：同一提示可以在画布上生成多组结果并进行并排对比，方便挑选与修改。
|
||||
- **视觉工作流编排**：通过拖拽与连线，将 prompt、素材、生成结果组织成视觉工作流，帮助团队理解从灵感到成品的全过程。
|
||||
- **适配多终端大屏展示**：画布可在大屏上进行展示，适合创意评审会、产品评审会等场景。
|
||||
|
||||
### 3. 企业级本地统一素材管理
|
||||
|
||||
- **本地存储与访问控制**：所有生成图片、视频、提示词、工程文件均保存在企业自有存储中，便于审计与权限管控。
|
||||
- **标签与检索**：支持对素材打标签、搜索与过滤，按项目、业务线、时间、模型类型等维度管理。
|
||||
- **版本与迭代记录**：可记录同一创意在不同模型、不同参数下的迭代版本，方便复盘和回滚。
|
||||
|
||||
### 4. 专业级图片处理工具链
|
||||
|
||||
- **一键智能抠图**
|
||||
- 支持人物、产品、场景等多类别主体自动识别与分割。
|
||||
- 保留细节边缘（如头发、半透明物体等），可用于电商主图、海报合成等场景。
|
||||
- 支持对抠出结果进行快速微调与重新导出，方便设计师后续在 PS / Figma 中继续加工。
|
||||
- **高清放大 / 超分辨率**
|
||||
- 支持对低分辨率图片进行 2x / 4x 及以上倍数的高清放大。
|
||||
- 在放大的同时自动进行细节增强与噪点抑制，避免传统插值带来的模糊和锯齿。
|
||||
- 非常适合用于老图修复、物料放大、线下大幅喷绘输出等需求。
|
||||
- **画面拓展 / 延展（Outpainting）**
|
||||
- 在保持主体构图不变的前提下，智能向四周拓展画面，生成更多背景与环境细节。
|
||||
- 可用于制作横版 / 竖版多尺寸适配、增加留白区域、重构构图等。
|
||||
- 支持基于文字描述或参考风格进行拓展，保证整体风格统一。
|
||||
- **3D 视角智能调整**
|
||||
- 支持对产品图进行近似 3D 视角的智能调整与重构（如俯视、仰视、斜侧视等），增强空间感与展示效果。
|
||||
- 适用于需要多角度展示的商品（鞋服、3C、家居等），减少传统 3D 建模与多机位拍摄的成本。
|
||||
- 可与现有素材结合进行补画与修饰，让画面在不同视角下依然保持材质与光影的一致性。
|
||||
- **图生图微调与风格迁移**
|
||||
- 在现有图片的基础上进行风格统一、光影调整、细节增强等二次创作。
|
||||
- 支持将某一张示例图的风格迁移到批量素材中，适合品牌统一视觉风格的场景。
|
||||
- **企业级批量处理能力**
|
||||
- 支持对一批图片进行统一的抠图、放大、拓展等流水线式处理，极大提升设计与运营团队效率。
|
||||
- 所有处理过程与结果都在企业本地环境中完成，可按项目 / 业务线进行归档和审计。
|
||||
- **一键替换电商详情**
|
||||
- 支持针对电商商品详情页的整页长图 / 模块图进行一键替换与升级。
|
||||
- 基于模板与品牌规范自动适配不同平台（如首页、详情页、活动页）的尺寸与排版。
|
||||
- 可结合批量生图能力，对整店详情进行集中焕新，显著降低运营与设计的人力成本。
|
||||
- 支持「批量详情裂变」，可基于同一款商品一键生成多版本详情页（不同卖点组合、文案风格、视觉风格），用于 A/B 测试与多渠道投放。
|
||||
|
||||
### 5. 企业可视化出图数据分析
|
||||
|
||||
- **多维度指标看板**：
|
||||
- **生成量**：按天 / 周 / 月统计各业务线的图片、视频生成数量。
|
||||
- **模型维度**：统计不同模型的调用频次、成功率与平均耗时。
|
||||
- **成本与配额**：可以结合实际计费配置，分析各模型的成本占比（视企业计费接入情况而定）。
|
||||
- **效果对比分析**：
|
||||
- 不同模型在同一任务上的命中率、被采纳率对比。
|
||||
- 不同参数设置（分辨率、风格、步数等）对生成效果的影响分析。
|
||||
- **下载与导出**：支持将数据报表导出，用于管理层汇报或二次 BI 分析（可按企业定制）。
|
||||
|
||||
---
|
||||
|
||||
## 支持与可集成的模型 / 服务
|
||||
|
||||
系统基于统一的动态模型管理与 OpenAI 兼容协议设计，可以灵活接入多种厂商与本地模型。**当前代码结构支持或预留了以下模型类型与服务：**
|
||||
|
||||
- **阿里云 DashScope / 通义千问（provider: `alibaba` / `alibaba-image`）**
|
||||
- 支持文本对话模型（如 `qwen-turbo` 等）。
|
||||
- 支持多模态视觉模型（如 Qwen-VL 系列），用于图文理解与解析。
|
||||
- 支持图片生成与图片编辑模型（如 `qwen-image-edit-plus`、`qwen-image-edit`），适用于文生图、图生图、局部编辑等场景。
|
||||
- **OpenAI 官方模型（provider: `openai`）**
|
||||
- 通过标准 OpenAI API（`https://api.openai.com/v1`）接入。
|
||||
- 可配置接入 GPT-4.x / GPT-4.1 / GPT-4o 等聊天与推理模型（具体型号由企业在后台配置）。
|
||||
- **本地部署模型（provider: `local`，如本地千问 2.5-VL 等）**
|
||||
- 通过自定义本地推理服务接口接入，支持在企业内网 GPU 服务器上运行。
|
||||
- 适合高敏感数据、不出网场景，模型调用不经过第三方云服务。
|
||||
- **Gemini 图像生成与扩展（provider: `gemini` / `huanke-gemini`）**
|
||||
- 支持基于 Gemini 能力的图片生成、图片扩展、局部重绘等（具体功能取决于所配置的 Gemini 服务网关）。
|
||||
- 支持原生 Gemini API 与中转服务两种集成方式。
|
||||
- **通义万相视频 / 千问视频生成（provider: `qianwen-video`）**
|
||||
- 支持图片生成视频（I2V）、文生视频等能力。
|
||||
- 内置异步任务轮询逻辑，可在前端实时展示任务进度与最终结果。
|
||||
- **火山引擎视觉生成（Seedream 等，provider: `volcano-vision`）**
|
||||
- 支持文生图、图生图、多图融合等功能，适合电商、广告、营销等业务场景。
|
||||
- 已对接火山引擎的流式返回与任务状态管理。
|
||||
- **自定义 OpenAI 兼容服务（provider: `custom`）**
|
||||
- 可以接入任意兼容 OpenAI Chat Completions 协议的三方服务或代理，如：
|
||||
- 企业自建推理网关（统一转发到多家厂商）。
|
||||
- 通过代理方式接入 Claude、GPT-5 Nano、**nano-banana-pro** 等第三方模型。
|
||||
- 只需在后台配置 `baseURL`、`apiKey` 与 `modelId` 即可完成对接。
|
||||
|
||||
> **说明**：具体可用的模型清单由企业在后台数据库 / 配置中心中启用与维护，平台会自动读取已启用且可用的模型并在前端展示。所有模型均支持按需开启 / 关闭与设定默认模型。
|
||||
|
||||
---
|
||||
|
||||
## 部署与集成优势
|
||||
|
||||
- **私有化部署**：支持在企业自有机房、云主机或 Kubernetes 集群中部署，满足数据不出域的安全要求。
|
||||
- **多环境配置**：通过环境变量与数据库配置区分开发 / 测试 / 生产环境，支持不同环境使用不同模型与 Key。
|
||||
- **OpenAI 兼容协议**：底层统一使用 OpenAI 兼容的接口协议，降低后续接入新模型的成本。
|
||||
- **可扩展性**：
|
||||
- 新增模型：只需在数据库中新增模型记录并配置对应 provider，即可在前端选择使用。
|
||||
- 新增业务功能：基于现有的聊天 / 画布 / 素材管理能力，可以快速搭建行业垂直解决方案（如电商、游戏、影视、教育等）。
|
||||
|
||||
---
|
||||
|
||||
## 适用场景举例
|
||||
|
||||
- **创意与设计团队**：用无限画布组织灵感、对话和多版本图片结果，替代传统 PPT 与静态文档。
|
||||
- **运营与营销团队**：快速生成与管理大量广告素材，并通过数据看板分析不同模型与风格的效果差异。
|
||||
- **产品与研发团队**：用对话与画布辅助需求梳理、原型构思、接口设计文档生成等工作。
|
||||
- **企业 AI 中台**：作为企业统一的 AIGC 入口，对接多家模型服务商，统一控制成本、权限与合规。
|
||||
|
||||
---
|
||||
|
||||
## 总结卖点（可对外使用文案）
|
||||
|
||||
- **类豆包 / 既梦的顶级对话体验 + 类 lovart 的专业无限画布**，将日常办公与专业创作能力融合在一个平台中。
|
||||
- **支持多家主流大模型与本地自研模型接入**，通过统一协议与动态配置，兼顾效果、成本与合规。
|
||||
- **所有素材本地统一管理 + 可视化出图数据分析**，帮助企业真正把 AIGC 能力“用起来、管得住、算得清”。
|
||||
- **企业级可私有化部署**，既能满足创新业务快速试错，又兼顾数据安全与长期运维成本。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user