Hugging Face's logo

Spaces:
MySafeCode
/
getwavefromsuno
Sleeping

App Files Community
MySafeCode commited on
Commit
17e5332
·
verified ·
1 Parent(s): b6bdcd0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +179 -19
index.html CHANGED
@@ -1,19 +1,179 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+ import os
3
+
4
+ # Load secrets from environment variables
5
+ API_KEY = os.environ.get("SUNO_API_KEY", "")
6
+ CALLBACK_URL = os.environ.get("CALLBACK_URL", "")
7
+
8
+ # Serve the HTML page
9
+ with gr.Blocks() as demo:
10
+ gr.HTML(f"""
11
+ <!DOCTYPE html>
12
+ <html lang="en">
13
+ <head>
14
+ <meta charset="UTF-8">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+ <title>Suno API Video Generator</title>
17
+ <style>
18
+ body {{
19
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
20
+ max-width: 800px;
21
+ margin: 0 auto;
22
+ padding: 20px;
23
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
+ min-height: 100vh;
25
+ }}
26
+ .container {{
27
+ background: white;
28
+ border-radius: 20px;
29
+ padding: 40px;
30
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
31
+ }}
32
+ h1 {{
33
+ color: #333;
34
+ text-align: center;
35
+ margin-bottom: 30px;
36
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
37
+ -webkit-background-clip: text;
38
+ -webkit-text-fill-color: transparent;
39
+ }}
40
+ .form-group {{
41
+ margin-bottom: 20px;
42
+ }}
43
+ label {{
44
+ display: block;
45
+ margin-bottom: 8px;
46
+ font-weight: 600;
47
+ color: #555;
48
+ }}
49
+ input, textarea {{
50
+ width: 100%;
51
+ padding: 12px;
52
+ border: 2px solid #e0e0e0;
53
+ border-radius: 10px;
54
+ font-size: 16px;
55
+ transition: border-color 0.3s;
56
+ box-sizing: border-box;
57
+ }}
58
+ input:focus, textarea:focus {{
59
+ outline: none;
60
+ border-color: #667eea;
61
+ }}
62
+ button {{
63
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
64
+ color: white;
65
+ border: none;
66
+ padding: 15px 30px;
67
+ border-radius: 10px;
68
+ font-size: 16px;
69
+ font-weight: 600;
70
+ cursor: pointer;
71
+ width: 100%;
72
+ transition: transform 0.2s, box-shadow 0.2s;
73
+ }}
74
+ button:hover {{
75
+ transform: translateY(-2px);
76
+ box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
77
+ }}
78
+ button:disabled {{
79
+ opacity: 0.6;
80
+ cursor: not-allowed;
81
+ }}
82
+ .result {{
83
+ margin-top: 30px;
84
+ padding: 20px;
85
+ background: #f8f9fa;
86
+ border-radius: 10px;
87
+ display: none;
88
+ }}
89
+ .result.show {{
90
+ display: block;
91
+ }}
92
+ .loading {{
93
+ text-align: center;
94
+ margin: 20px 0;
95
+ display: none;
96
+ }}
97
+ .loading.show {{
98
+ display: block;
99
+ }}
100
+ .spinner {{
101
+ border: 4px solid #f3f3f3;
102
+ border-top: 4px solid #667eea;
103
+ border-radius: 50%;
104
+ width: 40px;
105
+ height: 40px;
106
+ animation: spin 1s linear infinite;
107
+ margin: 0 auto;
108
+ }}
109
+ @keyframes spin {{
110
+ 0% {{ transform: rotate(0deg); }}
111
+ 100% {{ transform: rotate(360deg); }}
112
+ }}
113
+ .status {{
114
+ padding: 10px;
115
+ border-radius: 5px;
116
+ margin: 10px 0;
117
+ display: none;
118
+ }}
119
+ .status.success {{
120
+ background: #d4edda;
121
+ color: #155724;
122
+ border: 1px solid #c3e6cb;
123
+ display: block;
124
+ }}
125
+ .status.error {{
126
+ background: #f8d7da;
127
+ color: #721c24;
128
+ border: 1px solid #f5c6cb;
129
+ display: block;
130
+ }}
131
+ </style>
132
+ </head>
133
+ <body>
134
+ <div class="container">
135
+ <h1>🎵 Suno AI Audio Generator</h1>
136
+
137
+ <div class="form-group">
138
+ <label for="taskId">Task ID:</label>
139
+ <input type="text" id="taskId" placeholder="Enter task ID (e.g., 5c79****be8e)" value="5c79****be8e">
140
+ </div>
141
+
142
+ <div class="form-group">
143
+ <label for="audioId">Audio ID:</label>
144
+ <input type="text" id="audioId" placeholder="Enter audio ID" value="e231****-****-****-****-****8cadc7dc">
145
+ </div>
146
+
147
+ <button onclick="generateAudio()" id="generateBtn">Generate Audio</button>
148
+
149
+ <div class="loading" id="loading">
150
+ <div class="spinner"></div>
151
+ <p>Generating audio... Please wait</p>
152
+ </div>
153
+
154
+ <div class="status" id="status"></div>
155
+
156
+ <div class="result" id="result">
157
+ <h3>Response:</h3>
158
+ <pre id="response"></pre>
159
+ </div>
160
+ </div>
161
+
162
+ <script>
163
+ // Secrets loaded from Python backend
164
+ const API_KEY = "{API_KEY}";
165
+ const CALLBACK_URL = "{CALLBACK_URL}";
166
+
167
+ // Make them available globally
168
+ window.config = {{
169
+ apiKey: API_KEY,
170
+ callbackUrl: CALLBACK_URL
171
+ }};
172
+ </script>
173
+ <script src="script.js"></script>
174
+ </body>
175
+ </html>
176
+ """)
177
+
178
+ if __name__ == "__main__":
179
+ demo.launch()