Upload folder using huggingface_hub

a3d6c18 almost 3 years ago

13.5 kB

	<!DOCTYPE html>
	<!--[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>