Spaces:
Sleeping
Sleeping
| <!--[if lt IE 7]> | |
| <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> | |
| <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> | |
| <html lang="en" class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <html lang="en" class="no-js"> | |
| <!--<![endif]--> | |
| <head> | |
| <!-- meta charec set --> | |
| <meta charset="utf-8"> | |
| <!-- Always force latest IE rendering engine or request Chrome Frame --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <!-- Page Title --> | |
| <title>CarveKit</title> | |
| <link rel="icon" href="img/icon.png" type="image/x-icon"> | |
| <!-- Mobile Specific Meta --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Google Font --> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> | |
| <link href='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' rel='stylesheet' type='text/css'> | |
| <!-- CSS | |
| ================================================== --> | |
| <!-- Fontawesome Icon font --> | |
| <link rel="stylesheet" href="css/font-awesome.min.css"> | |
| <!-- Twitter Bootstrap css --> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <!-- jquery.fancybox --> | |
| <link rel="stylesheet" href="css/jquery.fancybox.css"> | |
| <!-- animate --> | |
| <link rel="stylesheet" href="css/animate.css"> | |
| <!-- Main Stylesheet --> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <!-- media-queries --> | |
| <link rel="stylesheet" href="css/media-queries.css"> | |
| <link rel="stylesheet" href="css/particles.css"> | |
| <!-- Modernizer Script for old Browsers --> | |
| <script src="js/modernizr-2.6.2.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></script> | |
| </head> | |
| <body id="body" class=""> | |
| <div id="particles-js"></div> | |
| <!-- preloader --> | |
| <div id="preloader"> | |
| <img src="img/preloader.gif" alt="Preloader"> | |
| </div> | |
| <!-- end preloader --> | |
| <!-- | |
| Fixed Navigation | |
| ==================================== --> | |
| <header id="navigation" class="navbar-fixed-top navbar"> | |
| <div class="container" style="padding-top: 10px; padding-bottom: 30px;"> | |
| <div class="navbar-header"> | |
| <!-- responsive nav button --> | |
| <!-- | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <i class="fa fa-bars fa-2x"></i> | |
| </button> | |
| --> | |
| <!-- /responsive nav button --> | |
| <!-- logo --> | |
| <a class="navbar-brand " href="#body" style="padding: 5px"> | |
| <h1 id="logo"> | |
| <img src="img\CarveKit_logo_main.png" style="width: 230px; height: 40px; margin: 6pt; " alt="logo-razres"> | |
| </h1> | |
| </a> | |
| <!-- /logo --> | |
| </div> | |
| <!-- main nav --> | |
| <!-- | |
| <nav class="collapse navbar-collapse navbar-dark bg-dark" role="navigation"> | |
| <ul id="nav" class="nav navbar-nav"> | |
| <li class="#tryBySelf" style="background:rgba(2, 19, 35, 0.7);"><a href="#tryBySelf">Попробуйте</a></li> | |
| <li><a href="#features" style="background:rgba(2, 19, 35, 0.7);">Подробнее</a></li> | |
| <li><a href="#contact" style="background:rgba(2, 19, 35, 0.7)">Обратная связь</a></li> | |
| </ul> | |
| </nav> | |
| --> | |
| <!-- /main nav --> | |
| </div> | |
| </header> | |
| <!-- | |
| End Fixed Navigation | |
| ==================================== --> | |
| <!-- | |
| Top Section | |
| ==================================== --> | |
| <section id="top" class="top"> | |
| <div class="parallax-overlay"> | |
| <div class="container"> | |
| <div class="row number-counters"> | |
| <div class="item" data-wow-duration="1000ms"> | |
| <div class="caption text-center" data-wow-duration="1000ms"> | |
| <h2 data-wow-duration="1ms" class="wow bounceInDown animated" style="color:white"> | |
| Introducing<span style="color:white"> CarveKit</span>!</h2> | |
| <h3 data-wow-duration="1ms" class="wow slideInLeft animated" style="color:white"><span | |
| class="color">Background Removal</span> Tool</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- | |
| End Top Section | |
| ==================================== --> | |
| <!-- | |
| Try yourself | |
| ==================================== --> | |
| <section id="tryBySelf" class="tryBySelf"> | |
| <div class="container text-center" style="width: 100%; "> | |
| <div style=" backdrop-filter: blur(1px); | |
| padding: 32px; | |
| border-radius: 20px; | |
| width: fit-content; | |
| position: relative; | |
| margin: auto;"> | |
| <div class="row"> | |
| <div class="sec-title text-center mb50 wow bounceInDown animated" data-wow-duration="500ms"> | |
| <h2>Try yourself</h2> | |
| <div class="devider"><i class="fa fa-heart-o fa-lg"></i></div> | |
| </div> | |
| <div class="form-container"> | |
| <form id="image_form" name="image_form" enctype="multipart/form-data" method="POST"> | |
| <div class="panel-container"> | |
| <img id="image_preview" src="" style="max-width: 100vw; max-height: 70vh"> | |
| <div class="img-cont" style="flex-direction: column;"> | |
| <div class="fileupload fileupload-new" data-provides="fileupload"> | |
| <span class="btn btn-primary btn-file"><span class="fileupload-new">Choose file</span> | |
| <span class="fileupload-exists">Choose other</span> <input name="image_file" type="file" /></span> | |
| <span class="fileupload-preview"></span> | |
| <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a> | |
| </div> | |
| <input class="form-input" style="z-index: 0" id="token" placeholder="API token"> | |
| <button class="btn btn-primary" style="z-index: 0; | |
| margin-top: 16px" id="butn" type="submit"><i class="fa fa-download"> | |
| </i> Remove background | |
| <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- | |
| End Try yourself | |
| ==================================== --> | |
| <!-- | |
| End Contact Us | |
| ==================================== --> | |
| <footer id="footer" class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <p class="text-center"> | |
| Copyright © 2022 <a href="https://github.com/OPHoperHPO/image-background-remove-tool">CarveKit</a>. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <a href="javascript:void(0);" id="back-top"><i class="fa fa-angle-up fa-3x"></i></a> | |
| <!-- Essential jQuery Plugins | |
| ================================================== --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> | |
| <!-- Main jQuery --> | |
| <script src="js/jquery-1.11.1.min.js"></script> | |
| <!-- Single Page Nav --> | |
| <script src="js/jquery.singlePageNav.min.js"></script> | |
| <!-- Twitter Bootstrap --> | |
| <script src="js/bootstrap.min.js"></script> | |
| <!-- jquery.fancybox.pack --> | |
| <script src="js/jquery.fancybox.pack.js"></script> | |
| <!-- jquery.mixitup.min --> | |
| <script src="js/jquery.mixitup.min.js"></script> | |
| <!-- jquery.parallax --> | |
| <script src="js/jquery.parallax-1.1.3.js"></script> | |
| <!-- jquery.countTo --> | |
| <script src="js/jquery-countTo.js"></script> | |
| <!-- jquery.appear --> | |
| <script src="js/jquery.appear.js"></script> | |
| <!-- Contact form validation --> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script> | |
| <!-- Google Map --> | |
| <script type="text/javascript" | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU&libraries=places"></script> | |
| <!-- jquery easing --> | |
| <script src="js/jquery.easing.min.js"></script> | |
| <!-- jquery easing --> | |
| <script src="js/wow.min.js"></script> | |
| <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script> | |
| <script src="js/particles.js"></script> | |
| <script> | |
| var wow = new WOW({ | |
| boxClass: 'wow', // animated element css class (default is wow) | |
| animateClass: 'animated', // animation css class (default is animated) | |
| offset: 120, // distance to the element when triggering the animation (default is 0) | |
| mobile: false, // trigger animations on mobile devices (default is true) | |
| live: true // act on asynchronously loaded content (default is true) | |
| }); | |
| wow.init(); | |
| !function(e){var t=function(t,n){this.$element=e(t),this.type=this.$element.data("uploadtype")||(this.$element.find(".thumbnail").length>0?"image":"file"),this.$input=this.$element.find(":file");if(this.$input.length===0)return;this.name=this.$input.attr("name")||n.name,this.$hidden=this.$element.find('input[type=hidden][name="'+this.name+'"]'),this.$hidden.length===0&&(this.$hidden=e('<input type="hidden" />'),this.$element.prepend(this.$hidden)),this.$preview=this.$element.find(".fileupload-preview");var r=this.$preview.css("height");this.$preview.css("display")!="inline"&&r!="0px"&&r!="none"&&this.$preview.css("line-height",r),this.original={exists:this.$element.hasClass("fileupload-exists"),preview:this.$preview.html(),hiddenVal:this.$hidden.val()},this.$remove=this.$element.find('[data-dismiss="fileupload"]'),this.$element.find('[data-trigger="fileupload"]').on("click.fileupload",e.proxy(this.trigger,this)),this.listen()};t.prototype={listen:function(){this.$input.on("change.fileupload",e.proxy(this.change,this)),e(this.$input[0].form).on("reset.fileupload",e.proxy(this.reset,this)),this.$remove&&this.$remove.on("click.fileupload",e.proxy(this.clear,this))},change:function(e,t){if(t==="clear")return;var n=e.target.files!==undefined?e.target.files[0]:e.target.value?{name:e.target.value.replace(/^.+\\/,"")}:null;if(!n){this.clear();return}this.$hidden.val(""),this.$hidden.attr("name",""),this.$input.attr("name",this.name);if(this.type==="image"&&this.$preview.length>0&&(typeof n.type!="undefined"?n.type.match("image.*"):n.name.match(/\.(gif|png|jpe?g)$/i))&&typeof FileReader!="undefined"){var r=new FileReader,i=this.$preview,s=this.$element;r.onload=function(e){i.html('<img src="'+e.target.result+'" '+(i.css("max-height")!="none"?'style="max-height: '+i.css("max-height")+';"':"")+" />"),s.addClass("fileupload-exists").removeClass("fileupload-new")},r.readAsDataURL(n)}else this.$preview.text(n.name),this.$element.addClass("fileupload-exists").removeClass("fileupload-new")},clear:function(e){this.$hidden.val(""),this.$hidden.attr("name",this.name),this.$input.attr("name","");if(navigator.userAgent.match(/msie/i)){var t=this.$input.clone(!0);this.$input.after(t),this.$input.remove(),this.$input=t}else this.$input.val("");this.$preview.html(""),this.$element.addClass("fileupload-new").removeClass("fileupload-exists"),e&&(this.$input.trigger("change",["clear"]),e.preventDefault())},reset:function(e){this.clear(),this.$hidden.val(this.original.hiddenVal),this.$preview.html(this.original.preview),this.original.exists?this.$element.addClass("fileupload-exists").removeClass("fileupload-new"):this.$element.addClass("fileupload-new").removeClass("fileupload-exists")},trigger:function(e){this.$input.trigger("click"),e.preventDefault()}},e.fn.fileupload=function(n){return this.each(function(){var r=e(this),i=r.data("fileupload");i||r.data("fileupload",i=new t(this,n)),typeof n=="string"&&i[n]()})},e.fn.fileupload.Constructor=t,e(document).on("click.fileupload.data-api",'[data-provides="fileupload"]',function(t){var n=e(this);if(n.data("fileupload"))return;n.fileupload(n.data());var r=e(t.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]');r.length>0&&(r.trigger("click.fileupload"),t.preventDefault())})}(window.jQuery) | |
| </script> | |
| <!-- Custom Functions --> | |
| <script src="js/custom.js"></script> | |
| <script type="text/javascript"> | |
| document.getElementById("image_form").addEventListener("submit", async (event) => { | |
| console.log(event) | |
| event.preventDefault() | |
| let formdata = new FormData(event.target) | |
| console.log(formdata) | |
| const response = await fetch("/api/removebg", { | |
| method: 'POST', | |
| headers: new Headers({ | |
| 'X-API-Key': document.getElementById("token").value | |
| }), | |
| body: formdata | |
| }); | |
| const image_blob = await response.blob() | |
| imageurl = URL.createObjectURL(image_blob) | |
| document.getElementById("image_preview").src = imageurl | |
| }) | |
| </script> | |
| </body> | |
| </html> | |