veo3-api/dist/index.esm.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.

import e,{useState as r,useRef as t,useCallback as n}from"react";import{useDropzone as a}from"react-dropzone";import{HelpCircle as s,Upload as o,X as l,Download as i}from"lucide-react";import{PulseLoader as c,PuffLoader as u,ClockLoader as f,ClipLoader as d}from"react-spinners";import p from"axios";import{toast as m,Toaster as y}from"react-hot-toast";import{createPortal as g}from"react-dom";var x,h={exports:{}},v={};var b,j={};
/**
 * @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?h.exports=function(){if(x)return v;x=1;var r=e,t=Symbol.for("react.element"),n=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,o={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,n){var l,i={},c=null,u=null;for(l in void 0!==n&&(c=""+n),void 0!==r.key&&(c=""+r.key),void 0!==r.ref&&(u=r.ref),r)a.call(r,l)&&!o.hasOwnProperty(l)&&(i[l]=r[l]);if(e&&e.defaultProps)for(l in r=e.defaultProps)void 0===i[l]&&(i[l]=r[l]);return{$$typeof:t,type:e,key:c,ref:u,props:i,_owner:s.current}}return v.Fragment=n,v.jsx=l,v.jsxs=l,v}():h.exports=(b||(b=1,"production"!==process.env.NODE_ENV&&function(){var r,t=e,n=Symbol.for("react.element"),a=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"),f=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),m=Symbol.for("react.lazy"),y=Symbol.for("react.offscreen"),g=Symbol.iterator,x=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=x.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(r+="%s",t=t.concat([n]));var a=t.map((function(e){return String(e)}));a.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,a)}("error",e,t)}function v(e){return e.displayName||"Context"}function b(e){if(null==e)return null;if("number"==typeof e.tag&&h("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 a:return"Portal";case l:return"Profiler";case o:return"StrictMode";case f:return"Suspense";case d:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return v(e)+".Consumer";case i:return v(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var a=r.displayName||r.name||"";return""!==a?t+"("+a+")":t}(e,e.render,"ForwardRef");case p:var r=e.displayName||null;return null!==r?r:b(e.type)||"Memo";case m:var t=e,n=t._payload,y=t._init;try{return b(y(n))}catch(e){return null}}return null}r=Symbol.for("react.module.reference");var w,N,k,_,S,P,O,E=Object.assign,R=0;function T(){}T.__reactDisabledLog=!0;var C,$=x.ReactCurrentDispatcher;function D(e,r,t){if(void 0===C)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);C=n&&n[1]||""}return"\n"+C+e}var F,I=!1,U="function"==typeof WeakMap?WeakMap:Map;function z(e,r){if(!e||I)return"";var t,n=F.get(e);if(void 0!==n)return n;I=!0;var a,s=Error.prepareStackTrace;Error.prepareStackTrace=void 0,a=$.current,$.current=null,function(){if(0===R){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:T,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}R++}();try{if(r){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){t=e}Reflect.construct(e,[],o)}else{try{o.call()}catch(e){t=e}e.call(o.prototype)}}else{try{throw Error()}catch(e){t=e}e()}}catch(r){if(r&&t&&"string"==typeof r.stack){for(var l=r.stack.split("\n"),i=t.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{I=!1,$.current=a,function(){if(0===--R){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:E({},e,{value:w}),info:E({},e,{value:N}),warn:E({},e,{value:k}),error:E({},e,{value:_}),group:E({},e,{value:S}),groupCollapsed:E({},e,{value:P}),groupEnd:E({},e,{value:O})})}R<0&&h("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 B(e,r,t){if(null==e)return"";if("function"==typeof e)return z(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case f:return D("Suspense");case d:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return z(e.render,!1);case p:return B(e.type,r,t);case m:var a=e,s=a._payload,o=a._init;try{return B(o(s),r,t)}catch(e){}}return""}F=new U;var M=Object.prototype.hasOwnProperty,W={},A=x.ReactDebugCurrentFrame;function L(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);A.setExtraStackFrame(t)}else A.setExtraStackFrame(null)}var G=Array.isArray;function V(e){return G(e)}function J(e){return""+e}function Y(e){if(function(e){try{return J(e),!1}catch(e){return!0}}(e))return h("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)),J(e)}var K,q,H=x.ReactCurrentOwner,X={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,r,t,a,s){var o,l={},i=null,c=null;for(o in void 0!==t&&(Y(t),i=""+t),function(e){if(M.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(r)&&(Y(r.key),i=""+r.key),function(e){if(M.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}(r)&&(c=r.ref,function(e){"string"==typeof e.ref&&H.current}(r)),r)M.call(r,o)&&!X.hasOwnProperty(o)&&(l[o]=r[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,r){var t=function(){K||(K=!0,h("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(l,f),c&&function(e,r){var t=function(){q||(q=!0,h("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}(l,f)}return function(e,r,t,a,s,o,l){var i={$$typeof:n,type:e,key:r,ref:t,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:a}),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,a,H.current,l)}var Z,ee=x.ReactCurrentOwner,re=x.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);re.setExtraStackFrame(t)}else re.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}function ae(){if(ee.current){var e=b(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var se={};function oe(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=ae();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}(r);if(!se[t]){se[t]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+b(e._owner.type)+"."),te(e),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),te(null)}}}function le(e,r){if("object"==typeof e)if(V(e))for(var t=0;t<e.length;t++){var n=e[t];ne(n)&&oe(n,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var a=function(e){if(null===e||"object"!=typeof e)return null;var r=g&&e[g]||e["@@iterator"];return"function"==typeof r?r:null}(e);if("function"==typeof a&&a!==e.entries)for(var s,o=a.call(e);!(s=o.next()).done;)ne(s.value)&&oe(s.value,r)}}function ie(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==p)return;r=t.propTypes}if(r){var n=b(t);!function(e,r,t,n,a){var s=Function.call.bind(M);for(var o in e)if(s(e,o)){var l=void 0;try{if("function"!=typeof e[o]){var i=Error((n||"React class")+": "+t+" 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](r,o,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){l=e}!l||l instanceof Error||(L(a),h("%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).",n||"React class",t,o,typeof l),L(null)),l instanceof Error&&!(l.message in W)&&(W[l.message]=!0,L(a),h("Failed %s type: %s",t,l.message),L(null))}}(r,e.props,"prop",n,e)}else void 0===t.PropTypes||Z||(Z=!0,h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",b(t)||"Unknown"));"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var ce={};function ue(e,t,a,g,x,v){var j=function(e){return"string"==typeof e||"function"==typeof e||e===s||e===l||e===o||e===f||e===d||e===y||"object"==typeof e&&null!==e&&(e.$$typeof===m||e.$$typeof===p||e.$$typeof===i||e.$$typeof===c||e.$$typeof===u||e.$$typeof===r||void 0!==e.getModuleId)}(e);if(!j){var w,N="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).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+=ae(),null===e?w="null":V(e)?w="array":void 0!==e&&e.$$typeof===n?(w="<"+(b(e.type)||"Unknown")+" />",N=" Did you accidentally export a JSX literal instead of a component?"):w=typeof e,h("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(e,t,a,x,v);if(null==k)return k;if(j){var _=t.children;if(void 0!==_)if(g)if(V(_)){for(var S=0;S<_.length;S++)le(_[S],e);Object.freeze&&Object.freeze(_)}else h("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(_,e)}if(M.call(t,"key")){var P=b(e),O=Object.keys(t).filter((function(e){return"key"!==e})),E=O.length>0?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}";ce[P+E]||(h('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} />',E,P,O.length>0?"{"+O.join(": ..., ")+": ...}":"{}",P),ce[P+E]=!0)}return e===s?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){te(e),h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),te(null);break}}null!==e.ref&&(te(e),h("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}(k):ie(k),k}var fe=function(e,r,t){return ue(e,r,t,!1)},de=function(e,r,t){return ue(e,r,t,!0)};j.Fragment=s,j.jsx=fe,j.jsxs=de}()),j);var w=h.exports;const N={sm:"px-3 py-1.5 text-xs",md:"px-4 py-2 text-sm",lg:"px-6 py-3 text-base"},k=({children:e,variant:r="primary",size:t="md",disabled:n=!1,loading:a=!1,className:s="",onClick:o})=>{const l="primary"===r?"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=N[t],c=n||a?"opacity-50 cursor-not-allowed":"cursor-pointer";return w.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:()=>{n||a||!o||o()},disabled:n||a,children:[a&&w.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:[w.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),w.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]})},_=(...e)=>e.filter(Boolean).join(" "),S=({children:e,content:a,maxWidth:s="w-64"})=>{const[o,l]=r(!1),[i,c]=r({x:0,y:0}),u=t(null),f=n((()=>{if(u.current){const e=u.current.getBoundingClientRect();c({x:e.left+e.width/2,y:e.top-8}),l(!0)}}),[]),d=n((()=>{l(!1)}),[]);return w.jsxs(w.Fragment,{children:[w.jsx("div",{ref:u,onMouseEnter:f,onMouseLeave:d,className:"inline-block",children:e}),o&&g(w.jsxs("div",{className:_("fixed z-[99999] mb-2 rounded-lg bg-gray-800 px-3 py-2 text-xs text-white shadow-lg",s),style:{left:i.x,top:i.y,transform:"translate(-50%, -100%)"},children:[a,w.jsx("div",{className:"absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-800"})]}),document.body)]})},P=(...e)=>e.filter(Boolean).join(" "),O=({className:e="",style:g,putFile:x,downloadFile:h,apiKey:v,defaultContent:b})=>{const[j,N]=r("image"),[_,O]=r(""),[E,R]=r(!1),[T,C]=r(null),[$,D]=r(!1),[F,I]=r(!1),[U,z]=r(0),[B,M]=r(""),[W,A]=r(!1),L=t(null),G=n((async e=>{if(e.size>5242880)return void m.error("Image size cannot exceed 5MB");if(["image/png","image/jpeg","image/jpg","image/webp"].includes(e.type)){R(!0);try{const r=await x(e,"veo3-video");O(r),m.success("Image uploaded successfully")}catch(e){console.error("Error uploading file:",e),m.error("Upload failed, please try again")}finally{R(!1)}}else m.error("Only PNG, JPG, JPEG and WEBP image formats are supported")}),[x]),{getRootProps:V,getInputProps:J,isDragActive:Y}=a({onDrop:e=>{e.length>0&&G(e[0])},accept:{"image/*":[".png",".jpg",".jpeg",".webp"]},multiple:!1,disabled:E}),K=async()=>{if(!h)return;const e=H();if(e){I(!0);try{await h(e),m.success("Download successful")}catch(e){console.error("Download error:",e),m.error("Download failed")}finally{I(!1)}}},q=e=>{W&&"image"===e||(M(""),N(e),O(""))},H=()=>{if(T&&"success"===T.state){const e=T.videoInfo;if(e&&e.videoUrl)return e.videoUrl;if(T.response&&T.response.resultUrls&&T.response.resultUrls.length>0)return T.response.resultUrls[0]}return""},X=async e=>{try{const r=await p({headers:{Authorization:`Bearer ${v}`,"Content-Type":"application/x-www-form-urlencoded"},url:`https://kieai.erweima.ai/api/v1/veo/record-info?taskId=${e}`,method:"GET"});if(200===r.data.code){const t=r.data.data,n={...t,state:0===t.successFlag?"generating":1===t.successFlag?"success":"fail",videoInfo:t.response?{videoUrl:t.response.resultUrls&&t.response.resultUrls.length>0?t.response.resultUrls[0]:void 0}:void 0};if(C(n),0===t.successFlag){if(L.current){const e=Date.now()-L.current,r=24e4,t=Math.min(e/r*99,99);z(Math.floor(t))}setTimeout((()=>{X(e)}),1500)}else D(!1),1===t.successFlag?(z(100),m.success("Video generated successfully!")):m.error("Video generation failed")}else setTimeout((()=>{X(e)}),1500)}catch(r){console.log(r),setTimeout((()=>{X(e)}),1500)}};return w.jsxs(w.Fragment,{children:[w.jsx("div",{className:P("relative h-full w-full",e),style:g,children:w.jsx("div",{className:"h-full w-full",children:w.jsxs("div",{className:"flex h-full w-full flex-col items-start lg:flex-row",children:[w.jsx("div",{className:"mt-6 w-full text-sm lg:mt-0 lg:h-full lg:w-[30%]",children:w.jsxs("div",{className:"w-full flex-col bg-gray-50 lg:flex lg:h-full",children:[w.jsx("div",{className:"flex flex-col gap-2 p-4 pb-2",children:w.jsx("div",{className:"w-full rounded-lg bg-white p-2.5",children:w.jsxs("div",{className:"flex w-full items-center justify-between gap-2",children:[w.jsxs("div",{className:"flex flex-1 items-center gap-1",children:[w.jsx("label",{className:"text-sm font-medium text-gray-700",children:"Fast Generation"}),w.jsx(S,{content:"Fast generation mode is only supports text-to-video generation.",children:w.jsx(s,{className:"h-4 w-4 cursor-help text-gray-400"})})]}),w.jsx("button",{className:P("relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none",W?"bg-blue-500":"bg-gray-200"),onClick:()=>{return A(e=!W),void(e&&"image"===j&&(N("text"),O(""),M("")));var e},children:w.jsx("span",{className:P("inline-block h-4 w-4 transform rounded-full bg-white transition-transform",W?"translate-x-6":"translate-x-1")})})]})})}),w.jsx("div",{className:"flex flex-col gap-2 p-4 pt-0",children:w.jsxs("div",{className:"grid w-full cursor-pointer grid-cols-2 rounded-full bg-white",children:[w.jsxs("div",{onClick:()=>q("image"),className:P("group relative flex w-full items-center justify-center gap-1 rounded-full p-2 text-sm font-medium transition duration-500","image"===j?"bg-blue-600 text-white":W?"cursor-not-allowed text-gray-400":"cursor-pointer text-gray-600 hover:text-gray-900"),children:[w.jsx(o,{className:"h-4 w-4"}),w.jsx("span",{className:"line-clamp-1 max-w-[80%]",children:"Image to Video"})]}),w.jsx("div",{onClick:()=>q("text"),className:P("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"===j?"bg-blue-600 text-white":"text-gray-600 hover:text-gray-900"),children:w.jsx("span",{className:"line-clamp-1 max-w-[80%]",children:"Text to Video"})})]})}),w.jsxs("div",{className:"flex flex-col items-start gap-2 overflow-auto p-4 pt-1",children:["image"===j&&w.jsx("div",{className:"flex w-full flex-col items-start space-y-2",children:w.jsxs("div",{className:"w-full rounded-lg bg-white p-2.5",children:[w.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"}),w.jsxs("div",{...V(),className:P("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",Y?"border-blue-500 bg-blue-50":_?"border-blue-500":"border-gray-200 hover:border-blue-500"),children:[w.jsx("input",{...J()}),_?w.jsxs("div",{className:"relative flex h-full w-full items-center justify-center",children:[w.jsx("img",{src:_,alt:"Preview",className:"h-auto max-h-full w-auto max-w-full rounded-lg"}),w.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(),O("")},children:w.jsx(l,{className:"h-4 w-4"})})]}):w.jsx("div",{className:"flex flex-col items-center justify-center gap-2 py-6",children:E?w.jsx(c,{color:"#3b82f6",size:10}):w.jsxs(w.Fragment,{children:[w.jsx(o,{className:"mx-auto h-10 w-10 text-gray-400"}),w.jsx("p",{className:"text-sm text-gray-600",children:Y?"Drop files to upload":"Click or drag image here"}),w.jsx("p",{className:"text-xs text-gray-500",children:"Supports PNG, JPG, JPEG, WEBP formats, max 5MB"})]})})]})]})}),w.jsx("div",{className:"flex w-full flex-col items-start space-y-2",children:w.jsxs("div",{className:"w-full rounded-lg bg-white p-2.5",children:[w.jsx("label",{className:"mb-2 w-full gap-1 text-sm font-medium text-gray-700",children:"image"===j?"Motion Prompt":"Video Description"}),w.jsx("div",{className:"relative w-full",children:w.jsx("textarea",{value:B,onChange:e=>M(e.target.value),placeholder:"image"===j?"Describe the motion and changes in the image...":"Describe the video content you want to generate...",className:P("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"===j?"h-20 lg:h-24":"h-24 lg:h-36")})})]})})]}),w.jsx("div",{className:"flex flex-col gap-2 px-4 pb-4",children:w.jsx(k,{onClick:async()=>{if(!v)return void m.error("API Key cannot be empty");if(!B)return void m.error("Prompt cannot be empty");if($)return;T&&C(null),z(0),D(!0);let e=[];if("image"===j){if(!_)return D(!1),void m.error("Please upload an image first.");if(!(e=>{if(!e||"string"!=typeof e)return!1;try{const r=new URL(e);return"http:"===r.protocol||"https:"===r.protocol}catch{return!1}})(_))return D(!1),void m.error("Please provide a valid HTTP or HTTPS URL.");e=[_]}const r={prompt:B,callBackUrl:"playground",waterMark:""};"image"===j&&e.length>0&&(r.imageUrls=e);try{const e=await p({headers:{Authorization:`Bearer ${v}`,"Content-Type":"application/json"},url:"https://kieai.erweima.ai/api/v1/veo/generate",method:"POST",data:r});200===e.data.code?(X(e.data.data.taskId),L.current=Date.now(),m.success("Starting video generation...")):(D(!1),m.error(e.data.msg||"Generation failed"))}catch(e){console.log(e),D(!1),m.error("Service error, please try again")}},disabled:$,className:"w-full py-3 text-base font-semibold",variant:"primary",children:$?w.jsxs("div",{className:"flex items-center justify-center gap-2",children:[w.jsx(c,{color:"white",size:6}),w.jsx("span",{children:"Generating..."})]}):"Generate Video"})})]})}),w.jsx("div",{className:"relative m-auto flex w-full flex-col items-center justify-center lg:h-[80vh] lg:w-[70%]",children:w.jsx("div",{className:"relative flex h-full w-full items-center justify-center p-4 lg:p-2",children:(()=>{if(T)switch(T.state){case"success":return w.jsx("div",{className:"flex w-full flex-col items-center justify-center",children:w.jsxs("div",{className:"relative",children:[w.jsx("video",{className:"m-0 max-h-[200px] rounded-xl lg:max-h-[450px]",autoPlay:!0,muted:!0,controls:!0,children:w.jsx("source",{src:H(),type:"video/mp4"})}),h&&w.jsx("div",{className:`absolute bottom-5 right-5 aspect-square w-8 rounded-xl bg-blue-600 backdrop-blur-md ${F?"cursor-not-allowed":"group cursor-pointer transition duration-500 hover:bg-blue-700"} inline-flex items-center justify-center`,onClick:F?void 0:K,children:F?w.jsx(d,{color:"white",size:14}):w.jsx(i,{className:"h-4 w-4 text-white"})})]})});case"wait":return w.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[w.jsx("div",{className:"flex h-20 w-20 animate-bounce items-center justify-center rounded-full bg-blue-100",children:w.jsx("div",{className:"h-8 w-8 rounded-full bg-blue-600"})}),w.jsxs("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:["Waiting to start generation...",w.jsx(c,{color:"#3b82f6",size:4})]})]});case"queuing":return w.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[w.jsx("div",{className:"flex h-20 w-20 animate-bounce items-center justify-center rounded-full bg-blue-100",children:w.jsx("div",{className:"h-8 w-8 rounded-full bg-blue-600"})}),w.jsxs("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:["Queuing...",w.jsx(f,{color:"#3b82f6",size:18})]})]});case"generating":return w.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-2",children:[w.jsxs("div",{className:"relative w-2/3 overflow-hidden rounded-xl",children:[w.jsx("div",{className:"aspect-video w-full rounded-xl bg-gray-200 opacity-20"}),w.jsx("div",{className:"absolute left-1/2 top-1/2 inline-block -translate-x-1/2 -translate-y-1/2",children:w.jsx(u,{size:60,color:"#3b82f6"})})]}),w.jsxs("p",{className:"flex w-full items-center justify-center gap-2 text-gray-700",children:["Generation Progress:",w.jsxs("span",{className:"font-semibold text-blue-600",children:[U,"%"]})]})]});case"fail":return w.jsxs("div",{className:"flex h-full w-full flex-col items-center justify-center gap-4",children:[w.jsx("div",{className:"flex h-20 w-20 items-center justify-center rounded-full bg-amber-100",children:w.jsx(l,{className:"h-8 w-8 text-amber-500"})}),w.jsx("p",{className:"text-amber-500",children:"Generation Failed"})]});default:return null}return w.jsx("div",{className:"mt-[10vh] flex h-full w-full flex-col items-center justify-start gap-8 p-4 lg:p-8",children:b||w.jsxs("div",{className:"flex w-full flex-col items-center justify-center gap-4",children:[w.jsx("div",{className:"flex h-24 w-24 items-center justify-center rounded-full bg-blue-100",children:w.jsx("div",{className:"h-12 w-12 rounded-full bg-blue-600"})}),w.jsx("p",{className:"flex w-full items-center justify-center gap-1 text-gray-700",children:"Start creating your video content"})]})})})()})})]})})}),w.jsx(y,{position:"top-center"})]})};export{k as Button,S as Tooltip,O as default};
//# sourceMappingURL=index.esm.js.map