Spaces:

tommy811
/

mine

Running

App Files Files Community

tommy811 commited on Jul 18, 2025

Commit

e84d3db

verified ·

1 Parent(s): 706ed00

‏לא ניתן היה למצוא את כתובת ה-IP של השרת של ytdl-proxy.example.com. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +313 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mine
-emoji: 📚
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mine
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,313 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube to MP3 Converter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
+        }
+        .download-btn {
+            transition: all 0.3s ease;
+        }
+        .download-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen flex flex-col">
+    <div class="container mx-auto px-4 py-12 flex-grow flex flex-col">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">YouTube to MP3 Converter</h1>
+            <p class="text-xl text-white opacity-90">Extract audio from YouTube videos</p>
+        </header>
+        <main class="max-w-2xl mx-auto w-full">
+            <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
+                <div class="p-6 md:p-8">
+                    <div class="flex items-center mb-6">
+                        <i class="fas fa-lock text-gray-600 text-4xl mr-4"></i>
+                        <h2 class="text-2xl font-semibold text-gray-800">Enter Media URL</h2>
+                    </div>
+                    <div class="mb-6">
+                        <div class="flex">
+                            <input
+                                type="text"
+                                id="youtubeUrl"
+                                placeholder="Paste YouTube video URL here..."
+                                class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                            >
+                            <button
+                                id="checkBtn"
+                                class="bg-gray-700 hover:bg-gray-800 text-white px-6 py-3 rounded-r-lg transition duration-300"
+                            >
+                                <i class="fas fa-search mr-2"></i> Check
+                            </button>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-2">Secure audio extraction in progress</p>
+                    </div>
+                    <div id="videoInfo" class="hidden mb-6">
+                        <div class="flex items-start border border-gray-200 rounded-lg p-4">
+                            <div class="mr-4">
+                                <div id="thumbnail" class="w-20 h-20 bg-gray-200 rounded-lg overflow-hidden">
+                                    <img id="thumbnailImg" src="" alt="Video thumbnail" class="w-full h-full object-cover">
+                                </div>
+                            </div>
+                            <div>
+                                <h3 id="videoTitle" class="font-semibold text-gray-800"></h3>
+                                <p id="videoDuration" class="text-sm text-gray-600 mt-1"></p>
+                                <p id="videoChannel" class="text-sm text-gray-600 mt-1"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="downloadSection" class="hidden">
+                        <div class="bg-purple-50 rounded-lg p-4 mb-6">
+                            <div class="flex items-center">
+                                <i class="fas fa-music text-purple-600 mr-3 text-xl"></i>
+                                <div>
+                                    <h3 class="font-medium text-gray-800">Audio Quality Options</h3>
+                                    <p class="text-sm text-gray-600">Select your preferred quality</p>
+                                </div>
+                            </div>
+                            <div class="mt-4 grid grid-cols-2 gap-3">
+                                <button class="quality-btn bg-white border border-purple-200 rounded-lg px-4 py-2 text-sm font-medium hover:bg-purple-100 transition" data-quality="128">
+                                    <i class="fas fa-headphones-alt text-purple-600 mr-2"></i> 128 kbps
+                                </button>
+                                <button class="quality-btn bg-white border border-purple-200 rounded-lg px-4 py-2 text-sm font-medium hover:bg-purple-100 transition" data-quality="192">
+                                    <i class="fas fa-headphones-alt text-purple-600 mr-2"></i> 192 kbps
+                                </button>
+                                <button class="quality-btn bg-white border border-purple-200 rounded-lg px-4 py-2 text-sm font-medium hover:bg-purple-100 transition" data-quality="256">
+                                    <i class="fas fa-headphones-alt text-purple-600 mr-2"></i> 256 kbps
+                                </button>
+                                <button class="quality-btn bg-white border border-purple-200 rounded-lg px-4 py-2 text-sm font-medium hover:bg-purple-100 transition" data-quality="320">
+                                    <i class="fas fa-headphones-alt text-purple-600 mr-2"></i> 320 kbps
+                                </button>
+                            </div>
+                        </div>
+                        <button
+                            id="downloadBtn"
+                            class="download-btn w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold py-4 px-6 rounded-lg shadow-lg pulse"
+                        >
+                            <span class="download-text"><i class="fas fa-download mr-2"></i> Download MP3</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
+                    <div class="flex items-center justify-between">
+                        <p class="text-sm text-gray-600">
+                            <i class="fas fa-info-circle mr-1"></i> No files are stored on our servers
+                        </p>
+                        <p class="text-sm text-gray-600">
+                            <i class="fas fa-shield-alt mr-1"></i> Secure connection
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <footer class="bg-white bg-opacity-10 py-6">
+        <div class="container mx-auto px-4 text-center text-white">
+            <p>© 2023 YouTube MP3 Converter</p>
+            <p class="text-sm opacity-80 mt-2">For personal use only. No files are stored on our servers.</p>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const youtubeUrlInput = document.getElementById('youtubeUrl');
+            const checkBtn = document.getElementById('checkBtn');
+            const videoInfo = document.getElementById('videoInfo');
+            const downloadSection = document.getElementById('downloadSection');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const qualityBtns = document.querySelectorAll('.quality-btn');
+            let currentVideoId = '';
+            let selectedQuality = '192';
+            // YouTube thumbnail and download URLs
+            function getYouTubeThumbnail(videoId, quality = 'mqdefault') {
+                return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
+            }
+            function getDownloadUrl(videoId, quality) {
+                // This is just a placeholder for demo purposes
+                // In a real implementation, replace with your actual backend endpoint
+                console.warn("Demo mode: No actual download service is connected");
+                return '';
+            }
+            // Check button click handler
+            checkBtn.addEventListener('click', function() {
+                const url = youtubeUrlInput.value.trim();
+                if (!url) {
+                    showError("Please enter a YouTube URL");
+                    return;
+                }
+                // Simple URL validation
+                if (!url.includes('youtube.com') && !url.includes('youtu.be')) {
+                    showError("Please enter a valid YouTube URL");
+                    return;
+                }
+                // Extract video ID (simplified for demo)
+                const videoIdMatch = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
+                if (!videoIdMatch || videoIdMatch.length < 2) {
+                    showError("Could not extract video ID from URL");
+                    return;
+                }
+                currentVideoId = videoIdMatch[1];
+                // Simulate API call with timeout
+                checkBtn.disabled = true;
+                checkBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Checking...';
+                setTimeout(() => {
+                    // In a real app, you would make an API call here to get video info
+                    // Display video info with actual YouTube data
+                    document.getElementById('videoTitle').textContent = "Loading video info...";
+                    document.getElementById('videoDuration').textContent = "";
+                    document.getElementById('videoChannel').textContent = "";
+                    // Set thumbnail from YouTube
+                    const thumbnailImg = document.getElementById('thumbnailImg');
+                    thumbnailImg.src = getYouTubeThumbnail(currentVideoId);
+                    // Simulate fetching actual metadata
+                    document.getElementById('videoTitle').textContent = "Selected Video";
+                    document.getElementById('videoDuration').textContent = "Duration: 3:45";
+                    document.getElementById('videoChannel').textContent = "Channel: Example Channel";
+                    videoInfo.classList.remove('hidden');
+                    downloadSection.classList.remove('hidden');
+                    checkBtn.disabled = false;
+                    checkBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Check';
+                    // Scroll to download section
+                    downloadSection.scrollIntoView({ behavior: 'smooth' });
+                }, 1500);
+            });
+            // Quality selection
+            qualityBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    qualityBtns.forEach(b => b.classList.remove('bg-purple-100', 'border-purple-400'));
+                    this.classList.add('bg-purple-100', 'border-purple-400');
+                    selectedQuality = this.dataset.quality;
+                });
+            });
+            // Download button click handler
+            downloadBtn.addEventListener('click', function() {
+                if (!currentVideoId) {
+                    showError("No video selected");
+                    return;
+                }
+                // In a real app, you would make an API call here to get the download link
+                // For demo purposes, we'll simulate a download
+                downloadBtn.disabled = true;
+                downloadBtn.querySelector('.download-text').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Preparing download...';
+                setTimeout(() => {
+                    try {
+                        // In a real implementation, this would call your backend service
+                        const downloadUrl = getDownloadUrl(currentVideoId, selectedQuality);
+                        // Verify the URL is valid before attempting download
+                        if (!downloadUrl || downloadUrl.includes('example.com')) {
+                            throw new Error("Download service is not available in this demo");
+                        }
+                        // Create download link
+                        const a = document.createElement('a');
+                        a.href = downloadUrl;
+                        a.download = `youtube_audio_${currentVideoId}_${selectedQuality}kbps.mp3`;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        // Show success message
+                        showSuccess("Download started! Your audio will be saved shortly.");
+                    } catch (error) {
+                        showError("Demo limitation: This is a frontend demo only. In a real implementation, this would connect to a backend service.");
+                    } finally {
+                        downloadBtn.disabled = false;
+                        downloadBtn.querySelector('.download-text').innerHTML = '<i class="fas fa-download mr-2"></i> Download MP3';
+                    }
+                }, 2000);
+            });
+            // Helper functions
+            function showError(message) {
+                const existingAlert = document.querySelector('.alert-error');
+                if (existingAlert) existingAlert.remove();
+                const alert = document.createElement('div');
+                alert.className = 'alert-error fixed top-4 right-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded max-w-md z-50';
+                alert.innerHTML = `
+                    <div class="flex items-center">
+                        <i class="fas fa-exclamation-circle mr-2"></i>
+                        <span>${message}</span>
+                    </div>
+                `;
+                document.body.appendChild(alert);
+                setTimeout(() => {
+                    alert.remove();
+                }, 5000);
+            }
+            function showSuccess(message) {
+                const existingAlert = document.querySelector('.alert-success');
+                if (existingAlert) existingAlert.remove();
+                const alert = document.createElement('div');
+                alert.className = 'alert-success fixed top-4 right-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded max-w-md z-50';
+                alert.innerHTML = `
+                    <div class="flex items-center">
+                        <i class="fas fa-check-circle mr-2"></i>
+                        <span>${message}</span>
+                    </div>
+                `;
+                document.body.appendChild(alert);
+                setTimeout(() => {
+                    alert.remove();
+                }, 5000);
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tommy811/mine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>