| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>Marks Guitar Assistant - AI</title> |
| <link rel="stylesheet" href="css/model.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>Marks Guitar Assistant</h1> |
|
|
| <div class="btn-row"> |
| <button class="btn" onclick="toggleSection('randomSection')">Random Song Suggestion</button> |
| <button class="btn" onclick="toggleSection('recommendSection')">Skill Based Song Suggestion</button> |
| </div> |
|
|
| |
| <div id="randomSection" class="section"> |
| <h2>Get random songs to practise</h2> |
| <form onsubmit="fetchRandom(); return false;"> |
| <label for="random_genre">Genre:</label> |
| <select id="random_genre" required> |
| <option value="">-- Select Genre --</option> |
| <option value="metal">metal</option> |
| <option value="pop">pop</option> |
| <option value="electronic">electronic</option> |
| <option value="rock">rock</option> |
| <option value="soul">soul</option> |
| <option value="punk">punk</option> |
| <option value="pop rock">pop rock</option> |
| <option value="country">country</option> |
| <option value="alternative">alternative</option> |
| <option value="jazz">jazz</option> |
| <option value="rap">rap</option> |
| <option value="reggae">reggae</option> |
| </select><br><br> |
| <button type="submit">Fetch Random</button> |
| </form> |
| <h3>Results</h3> |
| <div id="randomResults" class="results">No results yet.</div> |
| </div> |
|
|
| |
| <div id="recommendSection" class="section"> |
| <h2>Get songs that matches your skill level</h2> |
| <form onsubmit="fetchRecommendations(); return false;"> |
| <label for="genre">Genre:</label> |
| <select id="genre" required> |
| <option value="">-- Select Genre --</option> |
| <option value="metal">metal</option> |
| <option value="pop">pop</option> |
| <option value="electronic">electronic</option> |
| <option value="rock">rock</option> |
| <option value="soul">soul</option> |
| <option value="punk">punk</option> |
| <option value="pop rock">pop rock</option> |
| <option value="country">country</option> |
| <option value="alternative">alternative</option> |
| <option value="jazz">jazz</option> |
| <option value="rap">rap</option> |
| <option value="reggae">reggae</option> |
| </select><br><br> |
|
|
| <label for="tempo">Tempo:</label> |
| <select id="tempo" required> |
| <option value="">-- Select Tempo --</option> |
| <option value="40">40</option> |
| <option value="50">50</option> |
| <option value="60">60</option> |
| <option value="70">70</option> |
| <option value="80">80</option> |
| <option value="90">90</option> |
| <option value="100">100</option> |
| <option value="125">125</option> |
| <option value="150">150</option> |
| <option value="175">175</option> |
| <option value="200">200</option> |
| </select><br><br> |
|
|
| <label for="exercise_id">Exercise:</label> |
| <select id="exercise_id" required> |
| <option value="">-- Select Exercise --</option> |
| <option value="1">1 - ( G,C,Em,D,D7 )</option> |
| <option value="2">2 - ( Em,C,G,D,D7 )</option> |
| <option value="3">3 - ( C,F,Am,G,G7 )</option> |
| <option value="4">4 - ( Am,F,C,G,G7 )</option> |
| <option value="5">5 - ( D,G,Bm,A,A7 )</option> |
| <option value="6">6 - ( Bm,G,D,A,A7 )</option> |
| <option value="7">7 - ( A,D,F#m,E,E7 )</option> |
| <option value="8">8 - ( F#m,D,A,E,E7 )</option> |
| <option value="9">9 - ( E,A,C#m,B,B7 )</option> |
| <option value="10">10 - ( C#m,A,E,B,B7 )</option> |
| <option value="11">11 - ( F,Bb,Dm,C,C7 )</option> |
| <option value="12">12 - ( Dm,Bb,F,C,C7 )</option> |
| </select><br><br> |
|
|
| <button type="submit">Get Recommendations</button> |
| </form> |
| <h3>Results</h3> |
| <div id="results" class="results">No results yet.</div> |
| </div> |
|
|
| </div> |
|
|
| |
| <script src="js/model.js"></script> |
| </body> |
| </html> |
|
|
