|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>AI ps</title> |
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> |
|
<style> |
|
|
|
body { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: start; |
|
align-items: center; |
|
min-height: 100vh; |
|
font-family: "Helvetica Neue", sans-serif; |
|
} |
|
|
|
h1 { |
|
margin-top: 20px; |
|
margin-bottom: 30px; |
|
font-size: 36px; |
|
font-weight: bold; |
|
text-align: center; |
|
} |
|
|
|
form { |
|
margin-bottom: 50px; |
|
} |
|
|
|
.form-input { |
|
display: block; |
|
margin: 0 auto; |
|
margin-bottom: 30px; |
|
} |
|
|
|
input[type="file"] { |
|
display: none; |
|
} |
|
|
|
.custom-file-upload { |
|
display: inline-block; |
|
padding: 10px 20px; |
|
cursor: pointer; |
|
background-color: #007bff; |
|
color: #fff; |
|
border-radius: 5px; |
|
font-size: 18px; |
|
font-weight: bold; |
|
} |
|
|
|
.form-img { |
|
display: flex; |
|
justify-content: center; |
|
margin-top: 50px; |
|
margin-bottom: 50px; |
|
} |
|
|
|
.form-img img { |
|
max-width: 45%; |
|
margin-right: 10%; |
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
.d-flex { |
|
display: flex; |
|
justify-content: center; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<h1>ai抠图</h1> |
|
{% if error %} |
|
<div class="alert alert-danger" role="alert">{{ error }}</div> |
|
{% endif %} |
|
<form enctype="multipart/form-data" method="post"> |
|
<div class="d-flex"> |
|
<div class="form-group" style="margin-right: 50px;"> |
|
<label for="file_input" class="custom-file-upload">上传图片</label> |
|
<input type="file" id="file_input" name="file_input" onchange="document.getElementById('file_name').innerHTML=this.value.split('\\').pop();"> |
|
<span id="file_name"></span> |
|
</div> |
|
<div class="ml-3"> |
|
<input name="image" type="submit" class="btn btn-primary btn-lg" value="人像抠图"> |
|
</div> |
|
<div class="ml-3"> |
|
<input name="universal" type="submit" class="btn btn-primary btn-lg" value="通用抠图"> |
|
</div> |
|
</div> |
|
</form> |
|
{% if image_path %} |
|
<hr> |
|
<div class="form-img"> |
|
<img src="{{ image_path }}" alt="上传的图片"> |
|
{% if result_path %} |
|
<img src="{{ result_path }}" alt="人像抠图"> |
|
{% endif %} |
|
</div> |
|
{% endif %} |
|
</div> |
|
</body> |
|
</html> |
