Spaces:

ToKnow-ai
/

shazam-playlist-to-youtube-playlist

Running

App Files Files Community

mckabue commited on Jun 20, 2024

Commit

3636d4e

1 Parent(s): c8ea80c

shazam ui

Browse files

Files changed (2) hide show

app.py +32 -8
index.html +128 -0

app.py CHANGED Viewed

@@ -1,19 +1,43 @@
-from flask import Flask, request
 app = Flask(__name__)
 @app.route('/')
-def hello_world():
     try:
-        return 'Hello, World!'
     except Exception as e:
         return str(e)
 @app.route('/video_id', methods=['POST'])
-def get_video_id():
     try:
-        title = request.json.get('title')
-        artist = request.json.get('artist')
-        return { 'artist': artist, 'title': title }
     except Exception as e:
         return str(e)

+"""Shazam Playlist to Youtube Playlist"""
+import json
+import pandas as pd
+from pytube import Search, YouTube
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from werkzeug.utils import secure_filename
+import os
 app = Flask(__name__)
+def get_youtube_song(title: str, artist: str) -> YouTube | None:
+    search_result = Search(f'{title} by {artist}')
+    return search_result.results[0] if search_result.results else None
 @app.route('/')
+def index():
     try:
+        return send_from_directory('.', 'index.html')
     except Exception as e:
         return str(e)
 @app.route('/video_id', methods=['POST'])
+def video_id() -> str:
+    try:
+        title: str = request.json.get('title')
+        artist: str = request.json.get('artist')
+        youtube: YouTube = get_youtube_song(title, artist)
+        return youtube.video_id
+    except Exception as e:
+        return str(e)
+@app.route('/parse_csv', methods=['POST'])
+def parse_csv():
     try:
+        file = request.files['file']
+        # Process the uploaded file
+        shazamlibrary_df = pd.read_csv(file, header=1)
+        shazamlibrary_df = shazamlibrary_df.drop_duplicates(subset=['TrackKey'])[['Title', 'Artist']]
+        shazamlibrary_df.insert(0, '#', shazamlibrary_df.index + 1)
+        return shazamlibrary_df.to_html(index=False, justify="left")
     except Exception as e:
         return str(e)

index.html ADDED Viewed

	@@ -0,0 +1,128 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shazam Playlist to Youtube Playlist</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://www.youtube.com/iframe_api"></script>
+    <style>
+        #youtube-player, iframe {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="container my-4">
+        <h1 class="text-center">Shazam Playlist to Youtube Playlist</h1>
+        <p class="text-center">
+            Download the CSV of your playlist from
+            <a href="https://www.shazam.com/myshazam" target="_blank">https://www.shazam.com/myshazam</a>.
+        </p>
+        <p class="text-center">Upload your Shazam Playlist CSV file.</p>
+        <div class="row mx-2 justify-content-center">
+            <div class="col-md-6">
+                <input type="file" class="form-control upload-form col-md-6" accept=".csv">
+            </div>
+        </div>
+        <div class="row mt-5">
+            <div class="col-md-12">
+                <div class="object-fit-contain border rounded ratio ratio-16x9">
+                    <div id="youtube-player"></div>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-5">
+            <div class="col-md-12 playlist table-responsive">
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Title</th>
+                            <th>Artist</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <script>
+        let player;
+        let videoIds = [];
+        let currentVideoIndex = 0;
+        function onYouTubeIframeAPIReady() {
+            player = new YT.Player('youtube-player', {
+                height: '100%',
+                width: '100%',
+                playerVars: { autoplay: 1 },
+                events: {
+                    'onReady': onPlayerReady,
+                    'onStateChange': onPlayerStateChange
+                }
+            });
+        }
+        function onPlayerReady(event) {
+            if (videoIds.length > 0) {
+                event.target.loadVideoById(videoIds[0]);
+            }
+        }
+        function onPlayerStateChange(event) {
+            if (event.data == YT.PlayerState.ENDED) {
+                playNextVideo();
+            }
+        }
+        function playNextVideo() {
+            currentVideoIndex++;
+            if (currentVideoIndex >= videoIds.length) {
+                currentVideoIndex = 0;
+            }
+            player.loadVideoById(videoIds[currentVideoIndex]);
+        }
+        function updatePlaylist(playlist) {
+            const tbody = $('#playlist tbody');
+            tbody.empty();
+            playlist.forEach(function (item) {
+                tbody.append(`<tr><td>${item.Title}</td><td>${item.Artist}</td></tr>`);
+            });
+        }
+        document.querySelector('.upload-form').addEventListener('input', function (e) {
+            e.preventDefault();
+            if (e.target.files.length == 0) {
+                return;
+            }
+            const formData = new FormData();
+            formData.append('file', e.target.files[0]);
+            fetch(
+                '/parse_csv',
+                {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.text(), response => response.text())
+                .then(response => {
+                    const playlist = document.querySelector('.playlist');
+                    playlist.innerHTML = response
+                    setTimeout(() => {
+                        playlist.querySelector('table').classList.add(...['table', 'table-striped', 'table-hover']);
+                    }, 100);
+                });
+        });
+    </script>
+</body>
+</html>