5 lines
18 KiB
JavaScript
5 lines
18 KiB
JavaScript
import{a as z,_ as pe,b as me}from"./index-2fb4354b.js";import{aA as fe,r as k,c as q,X as he,z as h,A as y,B as t,aD as K,D as B,P as R,M as E,Q as ye,a4 as be,K as D,aj as ke,aE as Q,ae as X}from"./vue-vendor-164775a6.js";import{i as _e}from"./imageToVideo-6b02abdd.js";import{o as we}from"./promptOptimizer-dc3175a2.js";import{E as l}from"./element-plus-4a19e5e8.js";import"./utils-edfcd65b.js";const J=async U=>z.post("/storyboard-video/create",U),j=async U=>z.get(`/storyboard-video/task/${U}`),Te=async(U=0,V=10)=>z.get("/storyboard-video/tasks",{params:{page:U,size:V}}),Ie=async U=>z.post(`/storyboard-video/task/${U}/start-video`),Ue=Object.freeze(Object.defineProperty({__proto__:null,createStoryboardTask:J,getStoryboardTask:j,getUserStoryboardTasks:Te,startVideoGeneration:Ie},Symbol.toStringTag,{value:"Module"}));const Ce={class:"storyboard-video-create-page"},Ee={class:"main-content"},Se={class:"left-panel"},Pe={class:"left-panel-content"},Re={class:"storyboard-steps"},xe={key:0,class:"storyboard-section"},Ae={key:0,class:"image-count"},Le={key:1,class:"image-count",style:{color:"#ef4444"}},Ve={key:0,class:"images-preview-grid"},Me=["src","alt"],De=["onClick"],Oe={class:"image-index"},Ge={class:"text-input-section"},Ne={class:"optimize-btn"},Fe=["disabled"],ze={key:1,class:"storyboard-section"},$e={class:"generated-image-preview"},Be=["src"],je={key:1,class:"placeholder-text"},We={class:"video-settings"},He={class:"setting-item"},qe={class:"setting-item"},Ke={class:"setting-item"},Qe={class:"hd-setting"},Xe={class:"generate-section floating"},Je=["disabled"],Ye={class:"right-panel"},Ze={class:"preview-area"},ea={class:"status-checkbox"},aa={class:"preview-content"},ta={key:0,class:"preview-video"},sa=["src"],oa={key:1,class:"preview-image"},la=["src"],ra={key:0,class:"video-progress-overlay"},na={key:0,class:"progress-text"},ia={key:2,class:"preview-loading"},ua={class:"loading-text"},va={key:0,class:"progress-text"},ca={key:3,class:"preview-placeholder"},da={__name:"StoryboardVideoCreate",setup(U){const V=fe(),_=k(""),x=k("16:9"),O=k("5"),A=k(!1),g=k(!1),u=k("generate"),p=k([]),i=k(""),S=k(""),m=k(null),G=k(!1),w=q(()=>{var r;return p.value.length>0&&((r=p.value[0])!=null&&r.url)?p.value[0].url:""}),L=q(()=>p.value.length>0),Y=k(""),f=k(null),C=k(""),N=k(""),I=k(0),Z=()=>{V.back()},ee=()=>{V.push("/text-to-video/create")},ae=()=>{V.push("/image-to-video/create")},te=()=>{u.value="generate"},se=()=>{w.value||i.value?u.value="video":l.warning("请先上传分镜图或生成分镜图")},oe=()=>u.value==="video"?i.value&&S.value?"开始生成视频":(L.value,"生成视频"):L.value?"使用上传图片生成视频":_.value.trim()?"开始生成分镜图":"开始生成",le=()=>{if(console.log("handleGenerateClick 被调用，当前步骤:",u.value),u.value==="video"){H();return}if(L.value){i.value=w.value,u.value="video",setTimeout(()=>{H()},100);return}if(_.value.trim()){ve();return}l.warning("请上传分镜图或输入提示词")},re=()=>{if(p.value.length>=6){l.warning("最多只能上传6张图片");return}ne()},ne=()=>{const r=document.createElement("input");r.type="file",r.accept="image/*",r.multiple=!0,r.onchange=e=>{const s=Array.from(e.target.files||[]),a=p.value.length,v=6-a;if(s.length===0)return;if(s.length>v){l.warning(`最多只能上传6张图片，您已上传${a}张，还可以上传${v}张`);return}const d=100*1024*1024;if(s.filter(b=>b.size>d).length>0){l.error("图片文件大小不能超过100MB");return}if(s.filter(b=>!b.type.startsWith("image/")).length>0){l.error("请选择有效的图片文件");return}const n=a===0;let o=0;s.forEach((b,P)=>{const M=new FileReader;M.onload=$=>{p.value.push({url:$.target.result,file:b,name:b.name}),o++,o===s.length&&(n&&p.value.length>0&&(i.value=p.value[0].url),l.success(`成功上传 ${s.length} 张图片`))},M.readAsDataURL(b)})},r.click()},ie=r=>{if(r>=0&&r<p.value.length){const e=p.value[r];p.value.splice(r,1),i.value===e.url&&(p.value.length>0?i.value=p.value[0].url:i.value=""),l.success("已删除图片")}},ue=async()=>{var r,e,s;if(!_.value.trim()){l.warning("请输入提示词");return}if(_.value.length>2e3){l.warning("提示词过长，请控制在2000字符以内");return}try{G.value=!0;const a=ElLoading.service({lock:!1,text:"正在优化提示词，请稍候...",background:"rgba(0, 0, 0, 0.3)"}),v=await we(_.value.trim(),"storyboard");if(a.close(),v.data&&v.data.success){const d=v.data.data,c=d.optimizedPrompt;d.optimized&&c!==_.value.trim()?(_.value=c,l.success("提示词优化成功！")):l.warning("提示词已优化，但可能无明显变化")}else l.error(((r=v.data)==null?void 0:r.message)||"优化失败")}catch(a){console.error("优化提示词失败:",a);let v="优化提示词失败";if(a.response){const d=a.response.status;d===400?v=((e=a.response.data)==null?void 0:e.message)||"请求参数错误":d===408||a.code==="ECONNABORTED"?v="请求超时，请稍后重试":d>=500?v="服务器错误，请稍后重试":v=((s=a.response.data)==null?void 0:s.message)||"优化失败"}else a.request?v="网络错误，请检查网络连接":v=a.message||"优化失败";l.error(v)}finally{G.value=!1}},ve=async()=>{var r,e,s;if(console.log("startGenerate 被调用"),!_.value.trim()){l.warning("请输入描述文字");return}try{console.log("开始创建任务，参数:",{prompt:_.value,aspectRatio:x.value,hdMode:A.value,imageUrl:w.value||null}),g.value=!0,l.info("开始生成分镜图...");const a=await J({prompt:_.value,aspectRatio:x.value,hdMode:A.value,imageUrl:w.value||null});console.log("API响应:",a),a.data&&a.data.success?(l.success("分镜图任务创建成功！"),S.value=a.data.data.taskId,console.log("Task created:",a.data.data),W(a.data.data.taskId)):(console.error("创建任务失败，响应:",a.data),l.error(((r=a.data)==null?void 0:r.message)||"创建任务失败"),g.value=!1)}catch(a){console.error("生成分镜图失败，完整错误:",a),console.error("错误详情:",{message:a.message,response:a.response,stack:a.stack}),l.error("生成分镜图失败: "+(((s=(e=a.response)==null?void 0:e.data)==null?void 0:s.message)||a.message)),g.value=!1}},W=async r=>{m.value&&(clearTimeout(m.value),m.value=null);const e=90;let s=0,a=2e4;const v=async()=>{if(s>=e){m.value&&(clearTimeout(m.value),m.value=null),g.value=!1,l.warning("任务超时，请稍后查看");return}s++;try{const d=await j(r);if(d.data.success&&d.data.data){const c=d.data.data,T=String(c.status||"").toUpperCase(),n=Number(c.progress)||0,o=c.resultUrl||"",b=n<50||o&&o.startsWith("data:image")&&n<100,P=b?2e4:12e4;if(P!==a&&(a=P,console.log(`轮询间隔已调整为: ${a/1e3}秒 (${b?"分镜图生成阶段":"视频生成阶段"})`)),console.log("轮询任务状态:",{status:T,progress:n,hasResultUrl:!!o,resultUrlLength:o?o.length:0,resultUrlPrefix:o?o.substring(0,50):"无",interval:a/1e3+"秒"}),o&&o.trim().length>0&&o.startsWith("data:image"))if(!i.value||i.value!==o){if(console.log("✓ 检测到分镜图已生成（通过resultUrl判断）！"),console.log(" - resultUrl长度:",o.length),console.log(" - resultUrl前缀:",o.substring(0,30)+"..."),console.log(" - 当前progress:",n),console.log(" - 当前status:",T),i.value=o,g.value=!1,n<100){m.value&&(clearTimeout(m.value),m.value=null),console.log("✓ 分镜图生成完成！停止轮询，等待用户点击生成视频"),console.log(" - 设置 generatedImageUrl，长度:",o.length),console.log(" - 设置 inProgress = false"),console.log(" - 切换到 video 步骤"),u.value="video",setTimeout(()=>{l.success('分镜图生成完成！请点击"开始生成"按钮生成视频'),console.log("✓ UI状态更新完成，generatedImageUrl:",i.value?"已设置("+i.value.length+"字符)":"未设置")},100);return}u.value==="generate"&&(u.value="video")}else console.log("分镜图已处理过，跳过");if(T==="COMPLETED"&&n>=100){m.value&&(clearTimeout(m.value),m.value=null),console.log("✓ 视频生成完成，视频URL:",o?"已获取":"未获取"),o&&(o.startsWith("data:image")?i.value=o:N.value=o),C.value="COMPLETED",I.value=100,g.value=!1,l.success("视频生成完成！"),u.value==="generate"&&(u.value="video");return}if(T==="FAILED"||T==="CANCELLED"){m.value&&(clearTimeout(m.value),m.value=null),g.value=!1,l.error("任务失败: "+(c.errorMessage||"未知错误"));return}T==="PROCESSING"&&n>50&&(I.value=n,C.value="PROCESSING",o&&o.startsWith("data:image")&&(!i.value||i.value!==o)&&(i.value=o,u.value==="generate"&&(u.value="video"))),T==="PROCESSING"&&n<50&&console.log("分镜图生成中，进度:",n+"%")}}catch(d){console.error("轮询任务状态失败:",d)}m.value=setTimeout(v,a)};m.value=setTimeout(v,a)},ce=async(r,e)=>{try{let s;if(r.startsWith("data:image")){const a=await fetch(r);if(!a.ok)throw new Error(`HTTP错误: ${a.status}`);return s=await a.blob(),new File([s],e,{type:s.type})}else try{const a=await fetch(r);if(!a.ok)throw new Error(`HTTP错误: ${a.status}`);return s=await a.blob(),new File([s],e,{type:s.type||"image/jpeg"})}catch(a){throw console.error("直接获取图片失败，可能是CORS问题:",a),new Error("无法加载图片，请确保图片URL可以访问")}}catch(s){throw console.error("转换图片URL失败:",s),new Error("无法加载图片: "+(s.message||"未知错误"))}},H=async()=>{var s,a,v,d,c,T;if(console.log("startVideoGenerate 被调用"),S.value&&i.value){try{g.value=!0,C.value="PROCESSING",I.value=50,l.info("开始生成视频..."),console.log("调用开始生成视频API，任务ID:",S.value);const{startVideoGeneration:n}=await me(()=>Promise.resolve().then(()=>Ue),void 0),o=await n(S.value);console.log("开始生成视频API响应:",o),o.data&&o.data.success?(l.success("视频生成任务已启动，请稍候..."),console.log("视频生成任务已启动，任务ID:",S.value),u.value!=="video"&&(u.value="video"),W(S.value)):(console.error("启动视频生成失败，响应:",o.data),l.error(((s=o.data)==null?void 0:s.message)||"启动视频生成失败"),g.value=!1)}catch(n){console.error("启动视频生成失败，完整错误:",n),l.error("启动视频生成失败: "+(((v=(a=n.response)==null?void 0:a.data)==null?void 0:v.message)||n.message)),g.value=!1}return}const r=w.value;if(!r){l.warning("请先上传分镜图或生成分镜图");return}let e=_.value.trim();!e&&w.value&&(e="根据图片生成视频");try{g.value=!0,l.info("开始生成视频..."),console.log("转换图片URL:",r);let n;if(r.startsWith("data:image")){const b=r.split(",")[1],P=atob(b),M=new Array(P.length);for(let F=0;F<P.length;F++)M[F]=P.charCodeAt(F);const $=new Uint8Array(M),ge=new Blob([$],{type:"image/jpeg"});n=new File([ge],"storyboard-image.jpg",{type:"image/jpeg"})}else n=await ce(r,"storyboard-image.jpg");console.log("调用图生视频API，参数:",{prompt:e,aspectRatio:x.value,hdMode:A.value,duration:O.value,firstFrame:n});const o=await _e.createTask({firstFrame:n,prompt:e,aspectRatio:x.value,duration:parseInt(O.value),hdMode:A.value});if(console.log("图生视频API响应:",o),o.data&&o.data.success){const b=o.data.data.taskId;Y.value=b,C.value="PROCESSING",I.value=0,l.success("视频任务创建成功，开始处理..."),console.log("视频任务创建成功，任务ID:",b),de(b)}else console.error("创建视频任务失败，响应:",o.data),l.error(((d=o.data)==null?void 0:d.message)||"创建视频任务失败"),g.value=!1}catch(n){console.error("生成视频失败，完整错误:",n),console.error("错误详情:",{message:n.message,response:n.response,stack:n.stack}),l.error("生成视频失败: "+(((T=(c=n.response)==null?void 0:c.data)==null?void 0:T.message)||n.message)),g.value=!1}},de=async r=>{f.value&&(clearTimeout(f.value),f.value=null);const e=30;let s=0;const a=12e4,v=async()=>{if(s>=e){f.value&&(clearTimeout(f.value),f.value=null),g.value=!1,C.value="TIMEOUT",l.warning("视频任务超时，请稍后查看");return}s++;try{const d=await j(r);if(console.log("轮询视频任务状态:",d.data),d.data.success&&d.data.data){const c=d.data.data;if(C.value=c.status||"PROCESSING",I.value=c.progress||0,console.log("视频任务状态:",c.status,"进度:",c.progress,"视频URL:",c.resultUrl),c.status==="COMPLETED"&&c.resultUrl){f.value&&(clearTimeout(f.value),f.value=null),console.log("视频生成完成，视频URL:",c.resultUrl),c.resultUrl.startsWith("data:image")||(N.value=c.resultUrl),g.value=!1,I.value=100,l.success("视频生成完成！");return}else if(c.status==="FAILED"||c.status==="CANCELLED"){f.value&&(clearTimeout(f.value),f.value=null),g.value=!1,l.error("视频生成失败: "+(c.errorMessage||"未知错误"));return}}}catch(d){console.error("轮询视频任务状态失败:",d)}f.value=setTimeout(v,a)};f.value=setTimeout(v,a)};return he(()=>{m.value&&(clearTimeout(m.value),m.value=null),f.value&&(clearTimeout(f.value),f.value=null)}),(r,e)=>(h(),y("div",Ce,[t("header",{class:"top-header"},[t("div",{class:"header-left"},[t("button",{class:"back-btn",onClick:Z}," ← 首页 ")]),e[7]||(e[7]=K('<div class="header-right" data-v-03a4e90e><div class="credits-info" data-v-03a4e90e><div class="credits-circle" data-v-03a4e90e>25</div><span data-v-03a4e90e>| 首购优惠</span></div><div class="notification-icon" data-v-03a4e90e> 🔔 <div class="notification-badge" data-v-03a4e90e>5</div></div><div class="user-avatar" data-v-03a4e90e> 👤 </div></div>',1))]),t("div",Ee,[t("div",Se,[t("div",Pe,[t("div",{class:"creation-tabs"},[t("div",{class:"tab",onClick:ee},"文生视频"),t("div",{class:"tab",onClick:ae},"图生视频"),e[8]||(e[8]=t("div",{class:"tab active"},"分镜视频",-1))]),t("div",Re,[t("div",{class:B(["step",{active:u.value==="generate"}]),onClick:te}," 生成分镜图 ",2),t("div",{class:B(["step",{active:u.value==="video",disabled:!i.value&&!L.value}]),onClick:se}," 生成视频 ",2)]),u.value==="generate"?(h(),y("div",xe,[t("div",{class:B(["image-upload-btn",{disabled:p.value.length>=6}]),onClick:re},[e[9]||(e[9]=t("span",null,"+ 上传分镜图 (可直接生成视频)",-1)),p.value.length>0?(h(),y("span",Ae,"已上传 "+R(p.value.length)+"/6",1)):E("",!0),p.value.length>=6?(h(),y("span",Le,"已达上限")):E("",!0)],2),p.value.length>0?(h(),y("div",Ve,[(h(!0),y(ye,null,be(p.value,(s,a)=>(h(),y("div",{class:"image-preview-item",key:a},[t("img",{src:s.url,alt:`上传的图片 ${a+1}`},null,8,Me),t("button",{class:"remove-btn",onClick:v=>ie(a)},"×",8,De),t("div",Oe,R(a+1),1)]))),128))])):E("",!0),t("div",Ge,[D(t("textarea",{"onUpdate:modelValue":e[0]||(e[0]=s=>_.value=s),placeholder:`例如:一个咖啡的广告
|
||
|
||
提示:简单描述即可，AI会自动优化成专业的分镜图
|
||
支持中文或英文输入，系统会自动翻译并优化为专业的分镜图描述`,class:"text-input",rows:"6"},null,512),[[ke,_.value]]),e[10]||(e[10]=t("div",{class:"input-tips"},[t("div",{class:"tip-item"},"💡 AI会根据您的描述自动生成专业分镜图"),t("div",{class:"tip-item"},"🎬 支持多种画面构图和镜头类型描述")],-1)),t("div",Ne,[t("button",{class:"optimize-button",onClick:ue,disabled:!_.value.trim()||G.value}," ✨ "+R(G.value?"优化中...":"一键优化提示词"),9,Fe)])])])):E("",!0),u.value==="video"?(h(),y("div",ze,[t("div",$e,[i.value||w.value?(h(),y("img",{key:0,src:i.value||w.value,alt:"分镜图"},null,8,Be)):(h(),y("div",je,"暂无分镜图"))])])):E("",!0),t("div",We,[t("div",He,[e[12]||(e[12]=t("label",null,"比例",-1)),D(t("select",{"onUpdate:modelValue":e[1]||(e[1]=s=>x.value=s),class:"setting-select"},[...e[11]||(e[11]=[K('<option value="16:9" data-v-03a4e90e>16:9</option><option value="4:3" data-v-03a4e90e>4:3</option><option value="1:1" data-v-03a4e90e>1:1</option><option value="3:4" data-v-03a4e90e>3:4</option><option value="9:16" data-v-03a4e90e>9:16</option>',5)])],512),[[Q,x.value]])]),t("div",qe,[e[14]||(e[14]=t("label",null,"时长",-1)),D(t("select",{"onUpdate:modelValue":e[2]||(e[2]=s=>O.value=s),class:"setting-select"},[...e[13]||(e[13]=[t("option",{value:"5"},"5s",-1),t("option",{value:"10"},"10s",-1)])],512),[[Q,O.value]])]),t("div",Ke,[e[16]||(e[16]=t("label",null,"高清模式 (1080P)",-1)),t("div",Qe,[D(t("input",{type:"checkbox","onUpdate:modelValue":e[3]||(e[3]=s=>A.value=s),class:"hd-switch"},null,512),[[X,A.value]]),e[15]||(e[15]=t("span",{class:"cost-text"},"开启消耗20积分",-1))])])])])]),t("div",Xe,[t("button",{class:"generate-btn",onClick:le,disabled:g.value||u.value==="generate"&&!L.value&&!_.value.trim()||u.value==="video"&&!i.value&&!L.value},R(oe()),9,Je)]),t("div",Ye,[t("div",Ze,[t("div",ea,[D(t("input",{type:"checkbox","onUpdate:modelValue":e[4]||(e[4]=s=>g.value=s),id:"progress-checkbox"},null,512),[[X,g.value]]),e[17]||(e[17]=t("label",{for:"progress-checkbox"},"进行中",-1))]),t("div",aa,[u.value==="video"&&N.value&&C.value==="COMPLETED"?(h(),y("div",ta,[t("video",{src:N.value,controls:"",preload:"metadata",style:{"max-width":"100%","max-height":"100%",width:"auto",height:"auto","object-fit":"contain"}},null,8,sa)])):w.value||i.value?(h(),y("div",oa,[t("img",{src:w.value||i.value,alt:"分镜图",onLoad:e[5]||(e[5]=s=>console.log("图片加载成功:",w.value||i.value?"URL长度="+(w.value||i.value).length:"无URL")),onError:e[6]||(e[6]=s=>console.error("图片加载失败:",w.value||i.value))},null,40,la),u.value==="video"&&C.value==="PROCESSING"?(h(),y("div",ra,[e[18]||(e[18]=t("div",{class:"loading-spinner"},null,-1)),e[19]||(e[19]=t("div",{class:"loading-text"},"正在生成视频，请稍候...",-1)),I.value>0?(h(),y("div",na,"进度: "+R(I.value)+"%",1)):E("",!0)])):E("",!0)])):g.value&&!w.value&&!i.value?(h(),y("div",ia,[e[20]||(e[20]=t("div",{class:"loading-spinner"},null,-1)),t("div",ua,R(u.value==="generate"?"正在生成分镜图，请稍候...":"正在生成视频，请稍候..."),1),u.value==="video"&&I.value>0?(h(),y("div",va,"进度: "+R(I.value)+"%",1)):E("",!0)])):(h(),y("div",ca,[...e[21]||(e[21]=[t("div",{class:"placeholder-text"},"开始创作您的第一个作品吧!",-1)])]))])])])])]))}},ba=pe(da,[["__scopeId","data-v-03a4e90e"]]);export{ba as default};
|