Hugging Face's logo

Spaces:
MySafeCode
/
SunoCovers
Running

App Files Community
SunoCovers
File size: 4,083 Bytes 
ea72427
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
598011b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ea72427
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repurposed Suno Cover Player</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 40px;
            text-align: center;
        }
        h1 {
            margin: 0;
            font-size: 2.5em;
        }
        .description {
            color: rgba(255,255,255,0.9);
            max-width: 600px;
            margin: 10px auto 0;
            line-height: 1.6;
        }
        .app-frame {
            padding: 20px;
            background: #f8f9fa;
        }
        iframe {
            width: 100%;
            height: 600px;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 0.9em;
            border-top: 1px solid #eee;
        }
        @media (max-width: 768px) {
            iframe {
                height: 500px;
            }
            h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🎵 Repurposed Suno Cover Player</h1>
            <p class="description">
                A creative tool for generating and playing AI-powered music covers.
                This interface wraps the original Gradio application in a cleaner HTML layout.
            </p>
        </header>
        
        <div class="app-frame">
            <iframe src=""></iframe>
        </div>
        
        <footer>
            <p>Powered by Hugging Face Spaces | Original Gradio app hosted within this HTML wrapper</p>
        </footer>
    </div>

    <script>
    // Get the current URL
    const currentUrl = window.location.href;
    const iframe = document.querySelector('iframe');
    
    // Option 1: If you want to load an external URL (your https://1hit.no/audio/suno/)
    iframe.src = 'https://1hit.no/audio/suno/';
    
    // Option 2: If you want to load your Gradio app (running in the same Space)
    // iframe.src = currentUrl; // This would load the current page in the iframe (might create a loop)
    // iframe.src = currentUrl + 'app'; // Try this if Gradio is at /app endpoint
    
    // Option 3: If your Gradio app runs on a specific port within the Space
    // iframe.src = 'https://huggingface.co/spaces/MySafeCode/RepurposedSunoCoverPlayer/app';
    
    // Handle iframe loading messages for dynamic height
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'gradio_height') {
            iframe.style.height = event.data.height + 'px';
        }
    });
    
    // Add error handling
    iframe.onload = function() {
        console.log('Iframe loaded successfully');
    };
    
    iframe.onerror = function() {
        console.error('Failed to load iframe content');
        // Show a fallback message
        document.querySelector('.app-frame').innerHTML = 
            '<div style="padding: 40px; text-align: center; color: #666;">' +
            '<h3>⚠️ Content Failed to Load</h3>' +
            '<p>The embedded application could not be loaded.</p>' +
            '<p><a href="https://1hit.no/audio/suno/" target="_blank">Click here to open in a new tab</a></p>' +
            '</div>';
    };
</script>
</body>
</html>