Skip to content

Commit

Permalink
Web_update
Browse files Browse the repository at this point in the history
  • Loading branch information
@codemkim
codemkim committed Oct 12, 2021
1 parent b125113 commit 28d850b
Show file tree
Hide file tree
Showing 16 changed files with 147 additions and 112 deletions.
2 changes: 1 addition & 1 deletion Web/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

<title>시GAN 여행</title>
<meta name="title" content="시GAN 여행" />
<meta name="title" content="TIME MaCHiNE" />

<meta
property="og:image"
Expand Down
120 changes: 66 additions & 54 deletions Web/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<link rel="" href="{% static 'upload.svg' %}">
<body>
<nav class="p-3 container navbar navbar-expand-lg navbar-light" id="main">
<a class="navbar-brand scroll" style="position: fixed;" href="#main">시GAN 여행</a>
<a class="navbar-brand scroll" style="visibility: hidden;;" href="#main">시GAN 여행</a>
<a class="navbar-brand scroll" style="position: fixed;" href="#main">TIME MaCHiNE</a>
<a class="navbar-brand scroll" style="visibility: hidden;;" href="#main">TIME MaCHiNE</a>
<button
class="navbar-toggler"
type="button"
Expand All @@ -25,30 +25,42 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link scroll" href="#test">시GAN 여행 시작!
<a class="nav-link scroll" href="#test">Go !
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link scroll" href="#galleries">갤러리</a>
<a class="nav-link scroll" href="#galleries">Galleries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">도움말</a>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Team</a>
</li>

</ul>
</div>
</nav>

<section class="section">
<h1 class="title">시GAN 여행</h1>
<h1 class="title">TIME M<span style="color:#A47D5E;">a</span>CH<span style="color:#A47D5E;">i</span>NE</h1>
<h2 class="subtitle">볼 수 없어 그리운, 보고싶은 사람과<br/>만나볼 수 있는 기회!</h2>
</section>
<script
class="jsbin"
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
></script>
<div class="mt-2 container file-upload" style="padding-top: 100px;" id="test">
<div class="mt-2 container file-upload" style="padding-top: 30px; margin-top:100px;" id="test">
<div class="d-flex justify-content-center" style="padding-bottom: 20px;">
<h3 class="d-flex align-items-center pr-3">Smile</h3>
<div>
<input type="checkbox" id="gender">
<label for="gender">
<span class="knob">
<i></i>
</span>
</label>
</div>
<h3 class="d-flex align-items-center pl-3">ThankYou!</h3>
</div>
<div class="image-upload-wrap">
<form method="POST" id="ajax" enctype="multipart/form-data">
{% csrf_token %}
Expand All @@ -59,9 +71,11 @@ <h2 class="subtitle">볼 수 없어 그리운, 보고싶은 사람과<br/>만나
onchange="readURL(this);"
accept="image/*"
name="img"


/>
<div class="drag-text">
<img src="../../static/upload.svg" class="mt-5 pt-5"/>
<img src="../../static/image/upload.svg" class="mt-5 pt-5"/>
<h3 class="mb-5 pb-5 pt-4 upload-text">
얼굴 사진을 올려놓거나<br/>
눌러서 업로드하세요!
Expand All @@ -70,17 +84,19 @@ <h3 class="mb-5 pb-5 pt-4 upload-text">
</form>
</div>
<div class="file-upload-content">
<img class="file-upload-image" id="face-image" src="#" alt="your image"/>
<img class="file-upload-image" id="face-image" src="#" style="width: 350px; height: 300px;"
alt="your image"/>
<div id="loading" class="animated bounce">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<p class="text-center">AI가 시간 여행을 시도중입니다.<br>30초 가량 소요됩니다.</p>
<h4 class="text-center">AI가 시간 여행을 시도중입니다.</h4>
</div>
<div id="insert_video" style="display: flex; justify-content: center;"></div>

<p class="result-message"></p>
<div id="label-container" class="d-flex flex-column justify-content-around"></div>
<div id="addThis" class="addthis_inline_share_toolbox_6lz1"></div>

<div class="pt-3 image-title-wrap">
<button
type="button p-2"
Expand All @@ -91,23 +107,23 @@ <h3 class="mb-5 pb-5 pt-4 upload-text">
</button>
</div>
</div>
<div id="insert_video"></div>

</div>

{# 갤리러 모달 #}
<div class="gallery-wrap" id="galleries">
<div class="row justify-content-center">
<button class="btn btn-lg video" data-video="../../static/output.mp4"
<button class="btn btn-lg video" data-video="../../static/video/01.mp4"
data-toggle="modal" data-target="#videoModal">
<img src="../../static/01.jpg" style="width: 350px; height: 400px;" class="img-fluid rounded">
<img src="../../static/image/01.jpg" style="width: 350px; height: 400px;" class="img-fluid rounded">
</button>
<button class="btn btn-lg video" data-video="../../static/output.mp4"
<button class="btn btn-lg video" data-video="../../static/video/02.mp4"
data-toggle="modal" data-target="#videoModal">
<img src="../../static/02.jpg" style="width: 350px; height: 400px;" class="img-fluid rounded">
<img src="../../static/image/02.png" style="width: 350px; height: 400px;" class="img-fluid rounded">
</button>
<button class="btn btn-lg video" data-video="../../static/output.mp4"
<button class="btn btn-lg video" data-video="../../static/video/03.mp4"
data-toggle="modal" data-target="#videoModal">
<img src="../../static/03.jpg" style="width: 350px; height: 400px;" class="img-fluid rounded">
<img src="../../static/image/03.jpg" style="width: 350px; height: 400px;" class="img-fluid rounded">
</button>

</div>
Expand All @@ -129,21 +145,21 @@ <h3 class="mb-5 pb-5 pt-4 upload-text">
</div>
</div>
</div>
</div>


{# 도움말 모달#}
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="logInModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>&nbsp 참새방앗GAN</h1>
<h1 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>&nbsp 참새에방아GAN</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="font-size: 2rem;">
GAN을 활용한 웹 서비스 프로젝트<br>· 곽수연(팀장) : GAN 모델링<br>· 곽희원 : GAN 모델링
AI를 활용한 웹 서비스 프로젝트<br>· 곽수연(팀장) : 모델링<br>· 곽희원 : 모델링
<br>· 정현경 : 웹 개발<br>· 김현우 : 웹 개발
</div>
<div class="modal-footer">
Expand All @@ -152,10 +168,9 @@ <h1 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>&
</div>
</div>
</div>

<footer class="footer pt-5 container d-flex justify-content-center mt-5">
<div>
<p>&copy; 참새에방앗GAN 2021. All Rights Reserved.</p>
<p>&copy; 참새에방아GAN 2021. All Rights Reserved.</p>
</div>
</footer>

Expand Down Expand Up @@ -190,8 +205,8 @@ <h1 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>&

{# 이미지 업로드#}
<script>
function readURL(input) {

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
Expand All @@ -205,48 +220,45 @@ <h1 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i>&
e.preventDefault();

var data = new FormData($('#ajax').get(0));
console.log(data)
$.ajax({
url: '/make_ani/',
type: 'POST',
data: data,
contentType: 'multipart/form-data',
processData: false,
contentType: false,
success: function (data) {
// alert('gd job');
$("#photo").html('<h2> {{'+data.title+'}}</h2> <img src="{{'+data.img.url+ '}}" alt="{{ photo.title }}">')
}
});

if (document.getElementById('gender').checked) {
$.ajax({

url: '/make_ani_1/',
type: 'POST',
data: data,
contentType: 'multipart/form-data',
processData: false,
contentType: false,
});
} else {
$.ajax({
url: '/make_ani_2/',
type: 'POST',
data: data,
contentType: 'multipart/form-data',
processData: false,
contentType: false,

});
}
;
};

reader.readAsDataURL(input.files[0]);

setTimeout(function () {
var 템플릿 = '<video width="900px" height="600px" src="../../static/result/generated_result.mp4" class="result_video" controls></video>'
var 템플릿 = '<video width="700px" height="450px" src="../../static/result/generated_result.mp4" class="result_video" controls></video>'
$("#insert_video").html(템플릿);
{#$('.result_video').show();#}
$('.image-upload-wrap').hide();
$('#loading').hide();
$('.file-upload-image').hide();
$('.file-upload-content').hide();
}, 30000);
{#$('.file-upload-content').hide();#}
}, 3000);
}
}
</script>

{##}
{# <script> $(document).ready(function () {#}
{# $("input:checkbox").on('click', function () {#}
{# if ($(this).prop('checked')) {#}
{# $(this).parent().addClass("selected");#}
{# } else {#}
{# $(this).parent().removeClass("selected");#}
{# }#}
{# });#}
{# });#}
{# </script>#}


</body>


Expand Down
3 changes: 2 additions & 1 deletion Web/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@

urlpatterns = [
path('', views.predict, name='predict_page'),
path('make_ani/', views.make_ani, name ="make_ani"),
path('make_ani_1/', views.make_ani_1, name ="make_ani_1"),
path('make_ani_2/', views.make_ani_2, name ="make_ani_2"),
]
31 changes: 26 additions & 5 deletions Web/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,42 @@
from Web.model.main_model import start
warnings.filterwarnings("ignore")

from moviepy.editor import *

def muvi():
# print(os.getcwd())
videoclip = VideoFileClip("static/result/generated_result_1.mp4")
audioclip = AudioFileClip("static/bgm.mp3")
new_audioclip = CompositeAudioClip([audioclip])
videoclip.audio = new_audioclip
videoclip.write_videofile("static/result/generated_result.mp4")


#
@csrf_exempt
def predict(request):

return render(request, 'index.html')


@csrf_exempt
def make_ani_1(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
prediction = start(image, 'Web/inputdata/고생했어.mp4')
imageio.mimsave('static/result/generated_result_1.mp4', [img_as_ubyte(frame) for frame in prediction])
muvi()

return render(request, 'index.html')

@csrf_exempt
def make_ani(request):
photo = Result()
def make_ani_2(request):
if request.method == 'POST':
if request.is_ajax():
image = request.FILES.get('img')
prediction = start(image, 'Web/inputdata/1.mp4')
imageio.mimsave('static/result/generated_result.mp4', [img_as_ubyte(frame) for frame in prediction])
prediction = start(image, 'Web/inputdata/웃음_최종.mp4')
imageio.mimsave('static/result/generated_result_1.mp4', [img_as_ubyte(frame) for frame in prediction])
muvi()

return render(request, 'index.html')

Expand Down
Binary file removed static/02.jpg
View file
Binary file not shown.
Binary file removed static/03.jpg
View file
Binary file not shown.
Loading

0 comments on commit 28d850b

Please sign in to comment.