veo3-api/dist/index.js

An open-source React plugin that uses Veo3 to generate videos via kie.ai's API. Bring AI-powered video creation to your web applications.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=require("react-dropzone"),a=require("lucide-react"),n=require("react-spinners"),s=require("axios"),o=require("react-hot-toast"),l=require("react-dom"),i={exports:{}},c={};var u,f={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */"production"===process.env.NODE_ENV?i.exports=function(){if(e)return c;e=1;var r=t,a=Symbol.for("react.element"),n=Symbol.for("react.fragment"),s=Object.prototype.hasOwnProperty,o=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function i(e,t,r){var n,i={},c=null,u=null;for(n in void 0!==r&&(c=""+r),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)s.call(t,n)&&!l.hasOwnProperty(n)&&(i[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===i[n]&&(i[n]=t[n]);return{$$typeof:a,type:e,key:c,ref:u,props:i,_owner:o.current}}return c.Fragment=n,c.jsx=i,c.jsxs=i,c}():i.exports=(u||(u=1,"production"!==process.env.NODE_ENV&&function(){var e,r=t,a=Symbol.for("react.element"),n=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),l=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),m=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),g=Symbol.for("react.offscreen"),x=Symbol.iterator,h=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),a=1;a<t;a++)r[a-1]=arguments[a];!function(e,t,r){var a=h.ReactDebugCurrentFrame.getStackAddendum();""!==a&&(t+="%s",r=r.concat([a]));var n=r.map((function(e){return String(e)}));n.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,n)}("error",e,r)}function b(e){return e.displayName||"Context"}function j(e){if(null==e)return null;if("number"==typeof e.tag&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case s:return"Fragment";case n:return"Portal";case l:return"Profiler";case o:return"StrictMode";case d:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return b(e)+".Consumer";case i:return b(e._context)+".Provider";case u:return function(e,t,r){var a=e.displayName;if(a)return a;var n=t.displayName||t.name||"";return""!==n?r+"("+n+")":r}(e,e.render,"ForwardRef");case m:var t=e.displayName||null;return null!==t?t:j(e.type)||"Memo";case y:var r=e,a=r._payload,f=r._init;try{return j(f(a))}catch(e){return null}}return null}e=Symbol.for("react.module.reference");var w,N,k,_,S,P,O,R=Object.assign,E=0;function C(){}C.__reactDisabledLog=!0;var T,$=h.ReactCurrentDispatcher;function D(e,t,r){if(void 0===T)try{throw Error()}catch(e){var a=e.stack.trim().match(/\n( *(at )?)/);T=a&&a[1]||""}return"\n"+T+e}var F,U=!1,I="function"==typeof WeakMap?WeakMap:Map;function z(e,t){if(!e||U)return"";var r,a=F.get(e);if(void 0!==a)return a;U=!0;var n,s=Error.prepareStackTrace;Error.prepareStackTrace=void 0,n=$.current,$.current=null,function(){if(0===E){w=console.log,N=console.info,k=console.warn,_=console.error,S=console.group,P=console.groupCollapsed,O=console.groupEnd;var e={configurable:!0,enumerable:!0,value:C,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}E++}();try{if(t){var o=function(){throw Error()};if(Object.defineProperty(o.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(o,[])}catch(e){r=e}Reflect.construct(e,[],o)}else{try{o.call()}catch(e){r=e}e.call(o.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&"string"==typeof t.stack){for(var l=t.stack.split("\n"),i=r.stack.split("\n"),c=l.length-1,u=i.length-1;c>=1&&u>=0&&l[c]!==i[u];)u--;for(;c>=1&&u>=0;c--,u--)if(l[c]!==i[u]){if(1!==c||1!==u)do{if(c--,--u<0||l[c]!==i[u]){var f="\n"+l[c].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&F.set(e,f),f}}while(c>=1&&u>=0);break}}}finally{U=!1,$.current=n,function(){if(0===--E){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:R({},e,{value:w}),info:R({},e,{value:N}),warn:R({},e,{value:k}),error:R({},e,{value:_}),group:R({},e,{value:S}),groupCollapsed:R({},e,{value:P}),groupEnd:R({},e,{value:O})})}E<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=s}var d=e?e.displayName||e.name:"",p=d?D(d):"";return"function"==typeof e&&F.set(e,p),p}function L(e,t,r){if(null==e)return"";if("function"==typeof e)return z(e,!(!(a=e.prototype)||!a.isReactComponent));var a;if("string"==typeof e)return D(e);switch(e){case d:return D("Suspense");case p:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return z(e.render,!1);case m:return L(e.type,t,r);case y:var n=e,s=n._payload,o=n._init;try{return L(o(s),t,r)}catch(e){}}return""}F=new I;var B=Object.prototype.hasOwnProperty,M={},W=h.ReactDebugCurrentFrame;function A(e){if(e){var t=e._owner,r=L(e.type,e._source,t?t.type:null);W.setExtraStackFrame(r)}else W.setExtraStackFrame(null)}var G=Array.isArray;function q(e){return G(e)}function V(e){return""+e}function J(e){if(function(e){try{return V(e),!1}catch(e){return!0}}(e))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),V(e)}var Y,H,K=h.ReactCurrentOwner,X={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,t,r,n,s){var o,l={},i=null,c=null;for(o in void 0!==r&&(J(r),i=""+r),function(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(t)&&(J(t.key),i=""+t.key),function(e){if(B.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(t)&&(c=t.ref,function(e){"string"==typeof e.ref&&K.current}(t)),t)B.call(t,o)&&!X.hasOwnProperty(o)&&(l[o]=t[o]);if(e&&e.defaultProps){var u=e.defaultProps;for(o in u)void 0===l[o]&&(l[o]=u[o])}if(i||c){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;i&&function(e,t){var r=function(){Y||(Y=!0,v("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(l,f),c&&function(e,t){var r=function(){H||(H=!0,v("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}(l,f)}return function(e,t,r,n,s,o,l){var i={$$typeof:a,type:e,key:t,ref:r,props:l,_owner:o,_store:{}};return Object.defineProperty(i._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(i,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(i,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(i.props),Object.freeze(i)),i}(e,i,c,s,n,K.current,l)}var Z,ee=h.ReactCurrentOwner,te=h.ReactDebugCurrentFrame;function re(e){if(e){var t=e._owner,r=L(e.type,e._source,t?t.type:null);te.setExtraStackFrame(r)}else te.setExtraStackFrame(null)}function ae(e){return"object"==typeof e&&null!==e&&e.$$typeof===a}function ne(){if(ee.current){var e=j(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var se={};function oe(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=ne();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!se[r]){se[r]=!0;var a="";e&&e._owner&&e._owner!==ee.current&&(a=" It was passed a child from "+j(e._owner.type)+"."),re(e),v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,a),re(null)}}}function le(e,t){if("object"==typeof e)if(q(e))for(var r=0;r<e.length;r++){var a=e[r];ae(a)&&oe(a,t)}else if(ae(e))e._store&&(e._store.validated=!0);else if(e){var n=function(e){if(null===e||"object"!=typeof e)return null;var t=x&&e[x]||e["@@iterator"];return"function"==typeof t?t:null}(e);if("function"==typeof n&&n!==e.entries)for(var s,o=n.call(e);!(s=o.next()).done;)ae(s.value)&&oe(s.value,t)}}function ie(e){var t,r=e.type;if(null!=r&&"string"!=typeof r){if("function"==typeof r)t=r.propTypes;else{if("object"!=typeof r||r.$$typeof!==u&&r.$$typeof!==m)return;t=r.propTypes}if(t){var a=j(r);!function(e,t,r,a,n){var s=Function.call.bind(B);for(var o in e)if(s(e,o)){var l=void 0;try{if("function"!=typeof e[o]){var i=Error((a||"React class")+": "+r+" type `"+o+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[o]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw i.name="Invariant Violation",i}l=e[o](t,o,a,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){l=e}!l||l instanceof Error||(A(n),v("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",a||"React class",r,o,typeof l),A(null)),l instanceof Error&&!(l.message in M)&&(M[l.message]=!0,A(n),v("Failed %s type: %s",r,l.message),A(null))}}(t,e.props,"prop",a,e)}else void 0===r.PropTypes||Z||(Z=!0,v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",j(r)||"Unknown"));"function"!=typeof r.getDefaultProps||r.getDefaultProps.isReactClassApproved||v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var ce={};function ue(t,r,n,f,x,h){var b=function(t){return"string"==typeof t||"function"==typeof t||t===s||t===l||t===o||t===d||t===p||t===g||"object"==typeof t&&null!==t&&(t.$$typeof===y||t.$$typeof===m||t.$$typeof===i||t.$$typeof===c||t.$$typeof===u||t.$$typeof===e||void 0!==t.getModuleId)}(t);if(!b){var w,N="";(void 0===t||"object"==typeof t&&null!==t&&0===Object.keys(t).length)&&(N+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),N+=ne(),null===t?w="null":q(t)?w="array":void 0!==t&&t.$$typeof===a?(w="<"+(j(t.type)||"Unknown")+" />",N=" Did you accidentally export a JSX literal instead of a component?"):w=typeof t,v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",w,N)}var k=Q(t,r,n,x,h);if(null==k)return k;if(b){var _=r.children;if(void 0!==_)if(f)if(q(_)){for(var S=0;S<_.length;S++)le(_[S],t);Object.freeze&&Object.freeze(_)}else v("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else le(_,t)}if(B.call(r,"key")){var P=j(t),O=Object.keys(r).filter((function(e){return"key"!==e})),R=O.length>0?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}";ce[P+R]||(v('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',R,P,O.length>0?"{"+O.join(": ..., ")+": ...}":"{}",P),ce[P+R]=!0)}return t===s?function(e){for(var t=Object.keys(e.props),r=0;r<t.length;r++){var a=t[r];if("children"!==a&&"key"!==a){re(e),v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",a),re(null);break}}null!==e.ref&&(re(e),v("Invalid attribute `ref` supplied to `React.Fragment`."),re(null))}(k):ie(k),k}var fe=function(e,t,r){return ue(e,t,r,!1)},de=function(e,t,r){return ue(e,t,r,!0)};f.Fragment=s,f.jsx=fe,f.jsxs=de}()),f);var d=i.exports;const p={sm:"px-3 py-1.5 text-xs",md:"px-4 py-2 text-sm",lg:"px-6 py-3 text-base"},m=({children:e,variant:t="primary",size:r="md",disabled:a=!1,loading:n=!1,className:s="",onClick:o})=>{const l="primary"===t?"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm":"border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-blue-500 shadow-sm",i=p[r],c=a||n?"opacity-50 cursor-not-allowed":"cursor-pointer";return d.jsxs("button",{type:"button",className:`inline-flex items-center justify-center rounded-full font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${l} ${i} ${c} ${s}`,onClick:()=>{a||n||!o||o()},disabled:a||n,children:[n&&d.jsxs("svg",{className:"-ml-1 mr-2 h-4 w-4 animate-spin",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[d.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),d.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),e]})},y=(...e)=>e.filter(Boolean).join(" "),g=({children:e,content:r,maxWidth:a="w-64"})=>{const[n,s]=t.useState(!1),[o,i]=t.useState({x:0,y:0}),c=t.useRef(null),u=t.useCallback((()=>{if(c.current){const e=c.current.getBoundingClientRect();i({x:e.left+e.width/2,y:e.top-8}),s(!0)}}),[]),f=t.useCallback((()=>{s(!1)}),[]);return d.jsxs(d.Fragment,{children:[d.jsx("div",{ref:c,onMouseEnter:u,onMouseLeave:f,className:"inline-block",children:e}),n&&l.createPortal(d.jsxs("div",{className:y("fixed z-[99999] mb-2 rounded-lg bg-gray-800 px-3 py-2 text-xs text-white shadow-lg",a),style:{left:o.x,top:o.y,transform:"translate(-50%, -100%)"},children:[r,d.jsx("div",{className:"absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-800"})]}),document.body)]})},x=(...e)=>e.filter(Boolean).join(" ");exports.Button=m,exports.Tooltip=g,exports.default=({className:e="",style:l,putFile:i,downloadFile:c,apiKey:u,defaultContent:f})=>{const[p,y]=t.useState("image"),[h,v]=t.useState(""),[b,j]=t.useState(!1),[w,N]=t.useState(null),[k,_]=t.useState(!1),[S,P]=t.useState(!1),[O,R]=t.useState(0),[E,C]=t.useState(""),[T,$]=t.useState(!1),D=t.useRef(null),F=t.useCallback((async e=>{if(e.size>5242880)return void o.toast.error("Image size cannot exceed 5MB");if(["image/png","image/jpeg","image/jpg","image/webp"].includes(e.type)){j(!0);try{const t=await i(e,"veo3-video");v(t),o.toast.success("Image uploaded successfully")}catch(e){console.error("Error uploading file:",e),o.toast.error("Upload failed, please try again")}finally{j(!1)}}else o.toast.error("Only PNG, JPG, JPEG and WEBP image formats are supported")}),[i]),{getRootProps:U,getInputProps:I,isDragActive:z}=r.useDropzone({onDrop:e=>{e.length>0&&F(e[0])},accept:{"image/*":[".png",".jpg",".jpeg",".webp"]},multiple:!1,disabled:b}),L=async()=>{if(!c)return;const e=M();if(e){P(!0);try{await c(e),o.toast.success("Download successful")}catch(e){console.error("Download error:",e),o.toast.error("Download failed")}finally{P(!1)}}},B=e=>{T&&"image"===e||(C(""),y(e),v(""))},M=()=>{if(w&&"success"===w.state){const e=w.videoInfo;if(e&&e.videoUrl)return e.videoUrl;if(w.response&&w.response.resultUrls&&w.response.resultUrls.length>0)return w.response.resultUrls[0]}return""},W=async e=>{try{const t=await s({headers:{Authorization:`Bearer ${u}`,"Content-Type":"application/x-www-form-urlencoded"},url:`https://kieai.erweima.ai/api/v1/veo/record-info?taskId=${e}`,method:"GET"});if(200===t.data.code){const r=t.data.data,a={...r,state:0===r.successFlag?"generating":1===r.successFlag?"success":"fail",videoInfo:r.response?{videoUrl:r.response.resultUrls&&r.response.resultUrls.length>0?r.response.resultUrls[0]:void 0}:void 0};if(N(a),0===r.successFlag){if(D.current){const e=Date.now()-D.current,t=24e4,r=Math.min(e/t*99,99);R(Math.floor(r))}setTimeout((()=>{W(e)}),1500)}else _(!1),1===r.successFlag?(R(100),o.toast.success("Video generated successfully!")):o.toast.error("Video generation failed")}else setTimeout((()=>{W(e)}),1500)}catch(t){console.log(t),setTimeout((()=>{W(e)}),1500)}};return d.jsxs(d.Fragment,{children:[d.jsx("div",{className:x("relative h-full w-full",e),style:l,children:d.jsx("div",{className:"h-full w-full",children:d.jsxs("div",{className:"flex h-full w-full flex-col items-start lg:flex-row",children:[d.jsx("div",{className:"mt-6 w-full text-sm lg:mt-0 lg:h-full lg:w-[30%]",children:d.jsxs("div",{className:"w-full flex-col bg-gray-50 lg:flex lg:h-full",children:[d.jsx("div",{className:"flex flex-col gap-2 p-4 pb-2",children:d.jsx("div",{className:"w-full rounded-lg bg-white p-2.5",children:d.jsxs("div",{className:"flex w-full items-center justify-between gap-2",children:[d.jsxs("div",{className:"flex flex-1 items-center gap-1",children:[d.jsx("label",{className:"text-sm font-medium text-gray-700",children:"Fast Generation"}),d.jsx(g,{content:"Fast generation mode is only supports text-to-video generation.",children:d.jsx(a.HelpCircle,{className:"h-4 w-4 cursor-help text-gray-400"})})]}),d.jsx("button",{className:x("relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none",T?"bg-blue-500":"bg-gray-200"),onClick:()=>{return $(e=!T),void(e&&"image"===p&&(y("text"),v(""),C("")));var e},children:d.jsx("span",{className:x("inline-block h-4 w-4 transform rounded-full bg-white transition-transform",T?"translate-x-6":"translate-x-1")})})]})})}),d.jsx("div",{className:"flex flex-col gap-2 p-4 pt-0",children:d.jsxs("div",{className:"grid w-full cursor-pointer grid-cols-2 rounded-full bg-white",children:[d.jsxs("div",{onClick:()=>B("image"),className:x("group relative flex w-full items-center justify-center gap-1 rounded-full p-2 text-sm font-medium transition duration-500","image"===p?"bg-blue-600 text-white":T?"cursor-not-allowed text-gray-400":"cursor-pointer text-gray-600 hover:text-gray-900"),children:[d.jsx(a.Upload,{className:"h-4 w-4"}),d.jsx("span",{className:"line-clamp-1 max-w-[80%]",children:"Image to Video"})]}),d.jsx("div",{onClick:()=>B("text"),className:x("group relative flex w-full cursor-pointer items-center justify-center gap-1 rounded-full p-2 text-sm font-medium transition duration-500","text"===p?"bg-blue-600 text-white":"text-gray-600 hover:text-gray-900"),children:d.jsx("span",{className:"line-clamp-1 max-w-[80%]",children:"Text to Video"})})]})}),d.jsxs("div",{className:"flex flex-col items-start gap-2 overflow-auto p-4 pt-1",children:["image"===p&&d.jsx("div",{className:"flex w-full flex-col items-start space-y-2",children:d.jsxs("div",{className:"w-full rounded-lg bg-white p-2.5",children:[d.jsx("label",{className:"mb-2 inline-flex w-full items-center justify-between gap-1 text-sm font-medium text-gray-700",children:"Upload Image"}),d.jsxs("div",{...U(),className:x("relative flex aspect-[2/1] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed text-center transition duration-500",z?"border-blue-500 bg-blue-50":h?"border-blue-500":"border-gray-200 hover:border-blue-500"),children:[d.jsx("input",{...I()}),h?d.jsxs("div",{className:"relative flex h-full w-full items-center justify-center",children:[d.jsx("img",{src:h,alt:"Preview",className:"h-auto max-h-full w-auto max-w-full rounded-lg"}),d.jsx("button",{className:"absolute right-1 top-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 text-white shadow-md transition duration-500 hover:opacity-80",onClick:e=>{e.stopPropagation(),v("")},children:d.jsx(a.X,{className:"h-4 w-4"})})]}):d.jsx("div",{className:"flex flex-col items-center justify-center gap-2 py-6",children:b?d.jsx(n.PulseLoader,{color:"#3b82f6",size:10}):d.jsxs(d.Fragment,{children:[d.jsx(a.Upload,{className:"mx-auto h-10 w-10 text-gray-400"}),d.jsx("p",{className:"text-sm text-gray-600",children:z?"Drop files to upload":"Click or drag image here"}),d.jsx("p",{className:"text-xs text-gray-500",children:"Supports PNG, JPG, JPEG, WEBP formats, max 5MB"})]})})]})]})}),d.jsx("div",{className:"flex w-full flex-col items-start space-y-2",children:d.jsxs("div",{className:"w-full rounded-lg bg-white p-2.5",children:[d.jsx("label",{className:"mb-2 w-full gap-1 text-sm font-medium text-gray-700",children:"image"===p?"Motion Prompt":"Video Description"}),d.jsx("div",{className:"relative w-full",children:d.jsx("textarea",{value:E,onChange:e=>C(e.target.value),placeholder:"image"===p?"Describe the motion and changes in the image...":"Describe the video content you want to generate...",className:x("w-full resize-none overflow-y-auto rounded-lg border border-gray-200 p-2 text-sm placeholder:text-xs placeholder:text-gray-400 focus:border-blue-500 focus:outline-none","image"===p?"h-20 lg:h-24":"h-24 lg:h-36")})})]})})]}),d.jsx("div",{className:"flex flex-col gap-2 px-4 pb-4",children:d.jsx(m,{onClick:async()=>{if(!u)return void o.toast.error("API Key cannot be empty");if(!E)return void o.toast.error("Prompt cannot be empty");if(k)return;w&&N(null),R(0),_(!0);let e=[];if("image"===p){if(!h)return _(!1),void o.toast.error("Please upload an image first.");if(!(e=>{if(!e||"string"!=typeof e)return!1;try{const t=new URL(e);return"http:"===t.protocol||"https:"===t.protocol}catch{return!1}})(h))return _(!1),void o.toast.error("Please provide a valid HTTP or HTTPS URL.");e=[h]}const t={prompt:E,callBackUrl:"playground",waterMark:""};"image"===p&&e.length>0&&(t.imageUrls=e);try{const e=await s({headers:{Authorization:`Bearer ${u}`,"Content-Type":"application/json"},url:"https://kieai.erweima.ai/api/v1/veo/generate",method:"POST",data:t});200===e.data.code?(W(e.data.data.taskId),D.current=Date.now(),o.toast.success("Starting video generation...")):(_(!1),o.toast.error(e.data.msg||"Generation failed"))}catch(e){console.log(e),_(!1),o.toast.error("Service error, please try again")}},disabled:k,className:"w-full py-3 text-base font-semibold",variant:"primary",children:k?d.jsxs("div",{className:"flex items-center justify-center gap-2",children:[d.jsx(n.PulseLoader,{color:"white",size:6}),d.jsx("span",{children:"Generating..."})]}):"Generate Video"})})]})}),d.jsx("div",{className:"relative m-auto flex w-full flex-col items-center justify-center lg:h-[80vh] lg:w-[70%]",children:d.jsx("div",{className:"relative flex h-full w-full items-center justify-center p-4 lg:p-2",children:(()=>{if(w)switch(w.state){case"success":return d.jsx("div",{className:"flex w-full flex-col items-center justify-center",children:d.jsxs("div",{className:"relative",children:[d.jsx("video",{className:"m-0 max-h-[200px] rounded-xl lg:max-h-[450px]",autoPlay:!0,muted:!0,controls:!0,children:d.jsx("source",{src:M(),type:"video/mp4"})}),c&&d.jsx("div",{className:`absolute bottom-5 right-5 aspect-square w-8 rounded-xl bg-blue-600 backdrop-blur-md ${S?"cursor-not-allowed":"group cursor-pointer transition duration-500 hover:bg-blue-700"} inline-flex items-center justify-center`,onClick:S?void 0:L,children:S?d.jsx(n.ClipLoader,{color:"white",size:14}):d.jsx(a.Download,{className:"h-4 w-4 text-white"})})]})});case"wait":return d.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[d.jsx("div",{className:"flex h-20 w-20 animate-bounce items-center justify-center rounded-full bg-blue-100",children:d.jsx("div",{className:"h-8 w-8 rounded-full bg-blue-600"})}),d.jsxs("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:["Waiting to start generation...",d.jsx(n.PulseLoader,{color:"#3b82f6",size:4})]})]});case"queuing":return d.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[d.jsx("div",{className:"flex h-20 w-20 animate-bounce items-center justify-center rounded-full bg-blue-100",children:d.jsx("div",{className:"h-8 w-8 rounded-full bg-blue-600"})}),d.jsxs("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:["Queuing...",d.jsx(n.ClockLoader,{color:"#3b82f6",size:18})]})]});case"generating":return d.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[d.jsxs("div",{className:"relative w-2/3 overflow-hidden rounded-xl",children:[d.jsx("div",{className:"aspect-video w-full rounded-xl bg-gray-200 opacity-20"}),d.jsx("div",{className:"absolute left-1/2 top-1/2 inline-block -translate-x-1/2 -translate-y-1/2",children:d.jsx(n.PuffLoader,{size:60,color:"#3b82f6"})})]}),d.jsxs("p",{className:"flex w-full items-center justify-center gap-2 text-gray-700",children:["Generation Progress:",d.jsxs("span",{className:"font-semibold text-blue-600",children:[O,"%"]})]})]});case"fail":return d.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-4",children:[d.jsx("div",{className:"flex h-20 w-20 items-center justify-center rounded-full bg-amber-100",children:d.jsx(a.X,{className:"h-8 w-8 text-amber-500"})}),d.jsx("p",{className:"text-amber-500",children:"Generation Failed"})]});default:return null}return d.jsx("div",{className:"mt-[10vh] flex h-full w-full flex-col items-center justify-start gap-8 p-4 lg:p-8",children:f||d.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-4",children:[d.jsx("div",{className:"flex h-24 w-24 items-center justify-center rounded-full bg-blue-100",children:d.jsx("div",{className:"h-12 w-12 rounded-full bg-blue-600"})}),d.jsx("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:"Start creating your video content"})]})})})()})})]})})}),d.jsx(o.Toaster,{position:"top-center"})]})};
//# sourceMappingURL=index.js.map