Update app.py
Browse files
app.py
CHANGED
@@ -3,68 +3,193 @@ from utils import *
|
|
3 |
import os
|
4 |
from leaderboard import build_leaderboard
|
5 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6 |
def build_demo():
|
7 |
last_updated_path = 'results/last_updated.txt'
|
8 |
last_updated_str = ''
|
9 |
if os.path.exists(last_updated_path):
|
10 |
with open(last_updated_path, 'r') as f:
|
11 |
date = f.read()
|
12 |
-
|
13 |
|
14 |
-
with gr.Blocks() as demo:
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
audio = gr.Audio(show_download_button = False)
|
32 |
-
|
33 |
-
with gr.Row():
|
34 |
-
real_btn = gr.Button(value="π Real", visible=False, interactive=False)
|
35 |
-
fake_btn = gr.Button(
|
36 |
-
value="π€ Fake", visible=False, interactive=False
|
37 |
-
)
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
btn_list = [fake_btn, real_btn]
|
42 |
-
|
43 |
-
|
44 |
-
fake_btn.click(
|
45 |
-
fake_last_response,
|
46 |
-
inputs=[state],
|
47 |
-
outputs=[fake_btn, real_btn, model_selector]
|
48 |
)
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
54 |
)
|
55 |
-
|
56 |
-
#
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
)
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
headers=[
|
69 |
"π€/ π",
|
70 |
"π³οΈ Num Votes",
|
@@ -81,11 +206,20 @@ def build_demo():
|
|
81 |
height=1200,
|
82 |
column_widths=[200, 100, 100, 100, 100, 100, 100],
|
83 |
wrap=False,
|
84 |
-
|
85 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
86 |
return demo
|
87 |
|
88 |
if __name__ == "__main__":
|
89 |
-
|
90 |
demo = build_demo()
|
91 |
demo.queue(max_size=20).launch(server_name="0.0.0.0")
|
|
|
3 |
import os
|
4 |
from leaderboard import build_leaderboard
|
5 |
|
6 |
+
# Custom CSS styling similar to the reference space
|
7 |
+
css = """
|
8 |
+
/* Custom CSS that works with Ocean theme */
|
9 |
+
.song-arena-header {
|
10 |
+
text-align: center;
|
11 |
+
padding: 20px;
|
12 |
+
margin-bottom: 20px;
|
13 |
+
border-radius: 10px;
|
14 |
+
}
|
15 |
+
.song-arena-logo {
|
16 |
+
max-width: 150px;
|
17 |
+
border-radius: 10px;
|
18 |
+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
19 |
+
}
|
20 |
+
.song-arena-title {
|
21 |
+
font-size: 28px;
|
22 |
+
margin-bottom: 10px;
|
23 |
+
}
|
24 |
+
.song-arena-subtitle {
|
25 |
+
margin-bottom: 15px;
|
26 |
+
}
|
27 |
+
.song-arena-description {
|
28 |
+
font-size: 16px;
|
29 |
+
margin: 0;
|
30 |
+
}
|
31 |
+
/* Resource links styling */
|
32 |
+
.resource-links {
|
33 |
+
display: flex;
|
34 |
+
justify-content: center;
|
35 |
+
flex-wrap: wrap;
|
36 |
+
gap: 8px;
|
37 |
+
margin-bottom: 25px;
|
38 |
+
}
|
39 |
+
.resource-link {
|
40 |
+
background-color: #222222;
|
41 |
+
color: #4aedd6;
|
42 |
+
border: 1px solid #333333;
|
43 |
+
padding: 8px 16px;
|
44 |
+
border-radius: 20px;
|
45 |
+
margin: 5px;
|
46 |
+
text-decoration: none;
|
47 |
+
display: inline-block;
|
48 |
+
font-weight: 500;
|
49 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
50 |
+
transition: all 0.2s ease;
|
51 |
+
}
|
52 |
+
.resource-link:hover {
|
53 |
+
background-color: #333333;
|
54 |
+
transform: translateY(-2px);
|
55 |
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
|
56 |
+
transition: all 0.2s ease;
|
57 |
+
}
|
58 |
+
.resource-link-icon {
|
59 |
+
margin-right: 5px;
|
60 |
+
}
|
61 |
+
/* Footer styling */
|
62 |
+
.song-arena-footer {
|
63 |
+
text-align: center;
|
64 |
+
margin-top: 30px;
|
65 |
+
padding: 15px;
|
66 |
+
}
|
67 |
+
/* Research warning */
|
68 |
+
.research-warning {
|
69 |
+
background-color: #ff4c4c;
|
70 |
+
color: white;
|
71 |
+
text-align: center;
|
72 |
+
padding: 10px;
|
73 |
+
border-radius: 8px;
|
74 |
+
font-weight: bold;
|
75 |
+
margin: 15px 0;
|
76 |
+
}
|
77 |
+
"""
|
78 |
+
|
79 |
def build_demo():
|
80 |
last_updated_path = 'results/last_updated.txt'
|
81 |
last_updated_str = ''
|
82 |
if os.path.exists(last_updated_path):
|
83 |
with open(last_updated_path, 'r') as f:
|
84 |
date = f.read()
|
85 |
+
last_updated_str = f"\nLast Updated: {date}"
|
86 |
|
87 |
+
with gr.Blocks(css=css, theme=gr.themes.Ocean()) as demo:
|
88 |
+
state = gr.State()
|
89 |
+
|
90 |
+
# Header and Paper Information
|
91 |
+
gr.HTML(
|
92 |
+
"""
|
93 |
+
<div class="song-arena-header">
|
94 |
+
<div style="display: flex; justify-content: center; margin-bottom: 20px;">
|
95 |
+
<img src="https://i.postimg.cc/3Jx3yZ5b/real-vs-fake-sonics-w-logo.jpg" class="song-arena-logo">
|
96 |
+
</div>
|
97 |
+
<h1 class="song-arena-title">π΅ Song Arena</h1>
|
98 |
+
<h3 class="song-arena-subtitle">SONICS: Synthetic Or Not - Identifying Counterfeit Songs | ICLR 2025 [Poster]</h3>
|
99 |
+
<p class="song-arena-description">
|
100 |
+
Can you detect if a song is AI-generated or real? Test your skills!
|
101 |
+
</p>
|
102 |
+
</div>
|
103 |
+
"""
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
104 |
)
|
105 |
+
|
106 |
+
# Resource Links
|
107 |
+
gr.HTML(
|
108 |
+
"""
|
109 |
+
<div class="resource-links">
|
110 |
+
<a href="https://openreview.net/forum?id=PY7KSh29Z8" target="_blank" class="resource-link">
|
111 |
+
<span class="resource-link-icon">π</span>Paper
|
112 |
+
</a>
|
113 |
+
<a href="https://huggingface.co/datasets/awsaf49/sonics" target="_blank" class="resource-link">
|
114 |
+
<span class="resource-link-icon">π΅</span>Dataset
|
115 |
+
</a>
|
116 |
+
<a href="https://huggingface.co/collections/awsaf49/sonics-spectttra-67bb6517b3920fd18e409013" target="_blank" class="resource-link">
|
117 |
+
<span class="resource-link-icon">π€</span>Models
|
118 |
+
</a>
|
119 |
+
<a href="https://arxiv.org/abs/2408.14080" target="_blank" class="resource-link">
|
120 |
+
<span class="resource-link-icon">π¬</span>ArXiv
|
121 |
+
</a>
|
122 |
+
<a href="https://github.com/awsaf49/sonics" target="_blank" class="resource-link">
|
123 |
+
<span class="resource-link-icon">π»</span>GitHub
|
124 |
+
</a>
|
125 |
+
</div>
|
126 |
+
"""
|
127 |
)
|
128 |
+
|
129 |
+
# Research purpose warning
|
130 |
+
gr.HTML(
|
131 |
+
"""
|
132 |
+
<div class="research-warning">
|
133 |
+
β οΈ FOR RESEARCH PURPOSES ONLY β οΈ
|
134 |
+
</div>
|
135 |
+
"""
|
136 |
)
|
137 |
+
|
138 |
+
with gr.Tab("Song Generation", id=0):
|
139 |
+
gr.Markdown("# π΅ Song Arena\nCan you detect if a song is AI-generated or real?")
|
140 |
+
with gr.Row():
|
141 |
+
with gr.Column():
|
142 |
+
gr.Markdown("### π Click on **New Round** for a song!")
|
143 |
+
with gr.Row():
|
144 |
+
with gr.Column():
|
145 |
+
model_selector = gr.Markdown("", visible=True)
|
146 |
+
with gr.Row():
|
147 |
+
with gr.Column():
|
148 |
+
# heard_btn = gr.Button(
|
149 |
+
# value="π© Heard this song before", visible=False, interactive=False
|
150 |
+
# )
|
151 |
+
audio = gr.Audio(show_download_button=False)
|
152 |
+
with gr.Row():
|
153 |
+
real_btn = gr.Button(value="π Real", visible=False, interactive=False)
|
154 |
+
fake_btn = gr.Button(
|
155 |
+
value="π€ Fake", visible=False, interactive=False
|
156 |
+
)
|
157 |
+
btn_list = [fake_btn, real_btn]
|
158 |
+
fake_btn.click(
|
159 |
+
fake_last_response,
|
160 |
+
inputs=[state],
|
161 |
+
outputs=[fake_btn, real_btn, model_selector]
|
162 |
+
)
|
163 |
+
real_btn.click(
|
164 |
+
real_last_response,
|
165 |
+
inputs=[state],
|
166 |
+
outputs=[fake_btn, real_btn, model_selector]
|
167 |
+
)
|
168 |
+
# heard_btn.click(generate_songs, state, [state, audio, model_selector])
|
169 |
+
new_round_button = gr.Button("π΅ New Round π΅")
|
170 |
+
new_round_button.click(generate_songs, state, [state, audio, model_selector]).then(
|
171 |
+
enable_buttons_side_by_side,
|
172 |
+
inputs=None,
|
173 |
+
outputs=btn_list
|
174 |
+
)
|
175 |
+
|
176 |
+
# How It Works Section
|
177 |
+
with gr.Accordion("How It Works", open=True):
|
178 |
+
gr.Markdown("""
|
179 |
+
### The SONICS Game
|
180 |
+
|
181 |
+
This interactive game challenges you to distinguish between real songs created by humans and those generated by AI. Your votes help us understand how well humans can detect AI-generated music.
|
182 |
+
|
183 |
+
### Instructions:
|
184 |
+
- Click "New Round" to get a random song
|
185 |
+
- Listen carefully
|
186 |
+
- Vote whether you think it's real (human-created) or fake (AI-generated)
|
187 |
+
- Your scores will be tracked on the leaderboard
|
188 |
+
""")
|
189 |
+
|
190 |
+
with gr.Tab("Leaderboard", id=1):
|
191 |
+
gr.Markdown("# π Leaderboard π" + last_updated_str)
|
192 |
+
gr.Dataframe(
|
193 |
headers=[
|
194 |
"π€/ π",
|
195 |
"π³οΈ Num Votes",
|
|
|
206 |
height=1200,
|
207 |
column_widths=[200, 100, 100, 100, 100, 100, 100],
|
208 |
wrap=False,
|
209 |
+
)
|
210 |
+
|
211 |
+
# Footer
|
212 |
+
gr.HTML(
|
213 |
+
"""
|
214 |
+
<div class="song-arena-footer">
|
215 |
+
<p>SONICS: Synthetic Or Not - Identifying Counterfeit Songs | ICLR 2025</p>
|
216 |
+
<p style="font-size: 12px;">For research purposes only</p>
|
217 |
+
</div>
|
218 |
+
"""
|
219 |
+
)
|
220 |
+
|
221 |
return demo
|
222 |
|
223 |
if __name__ == "__main__":
|
|
|
224 |
demo = build_demo()
|
225 |
demo.queue(max_size=20).launch(server_name="0.0.0.0")
|