Skip to content

Commit

Permalink
feat: add play page
Browse files Browse the repository at this point in the history 
#8
  • Loading branch information
@bsh201
bsh201 committed Jan 25, 2023
1 parent 93b20ef commit e874546
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 1 deletion.
6 changes: 5 additions & 1 deletion app/main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,9 @@
def file_form(request: Request):
return templates.TemplateResponse('index.html', context={'request': request})

@app.get('/play')
def play_form(request:Request) :
return templates.TemplateResponse('play.html', context = {'request': request})

if __name__ == '__main__':
uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
uvicorn.run("main:app", host="0.0.0.0", port=8001, reload=True)
160 changes: 160 additions & 0 deletions app/templates/play.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.104.2">
<title>Maestro::Musical Score to Sound</title>

<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/navbars/">
<link href="{{url_for('static', path='/css/custom.css')}}" rel="stylesheet">

<link href="{{url_for('static', path='/css/bootstrap.min.css')}}" rel="stylesheet">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}

.bi {
vertical-align: -.125em;
fill: currentColor;
}

.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}

.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

.upload {
margin-top: 25px;
}

.upload-box {
width: calc(50% - 15px);
box-sizing: border-box;
margin-right: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.upload-box .drag-file {
width: 100%;
height: 750px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 3px dashed #dbdbdb;
}
.upload-box .drag-file.highlight {
border: 3px dashed red;
}
.upload-box .drag-file .image {
width: 40px;
}
.upload-box .drag-file .message {
margin-bottom: 0;
}
</style>

</head>
<body>

<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-music" viewBox="0 0 16 16"><path d="M10.304 3.13a1 1 0 0 1 1.196.98v1.8l-2.5.5v5.09c0 .495-.301.883-.662 1.123C7.974 12.866 7.499 13 7 13c-.5 0-.974-.134-1.338-.377-.36-.24-.662-.628-.662-1.123s.301-.883.662-1.123C6.026 10.134 6.501 10 7 10c.356 0 .7.068 1 .196V4.41a1 1 0 0 1 .804-.98l1.5-.3z"/><path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/></svg>
<strong>Maestro</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">How to use</h4>
<p class="text-muted">악보를 넣으면 노래로 만들어드립니다 같은 설명 넣기</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">About us</h4>
<ul class="list-unstyled">
<li><a href="https://github.com/boostcampaitech4lv23cv1/level3_productserving-level3-cv-02" target="_blank" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
Github</a></li>
<li><a href="https://www.notion.so/Final-Project-9fc2b15e5a634d96b1cb64b2b2966e0d?p=9ca2069b376e4e5eab95e512a86673c3&pm=s" target="_blank" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: -0.125em;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514c-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233l4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg>
Notion</a></li>
<li><a href="#" target="_blank" class="text-white">
<svg xmlns="http://www.w3.org/2000/svg" style="vertical-align: -0.125em;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18h-2V9.25L12 13L6 9.25V18H4V6h1.2l6.8 4.25L18.8 6H20m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z"/></svg>
Email</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="play music">
<div class="play music-box" onclick="document.getElementById('chooseFile').click();">
<div id="drop-file" class="drag-file">
<midi-player
src="https://bitmidi.com/uploads/98248.mid" sound-font visualizer="#myStaffVisualizer"></midi-player>
<midi-visualizer
type="staff" id="myStaffVisualizer" src="https://bitmidi.com/uploads/98248.mid"></midi-visualizer>
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
</div>
</div>
</div>
</main>

<script src="{{url_for('static', path='/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{url_for('static', path='/js/custom.js')}}"></script>

</body>
</html>

0 comments on commit e874546

Please sign in to comment.