awsaf49 commited on
Commit
1262daf
Β·
verified Β·
1 Parent(s): bf42b35

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +189 -55
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
- last_updated_str = f"\nLast Updated : {date}"
13
 
14
- with gr.Blocks() as demo:
15
- state = gr.State()
16
- with gr.Tab("Song Generation", id=0):
17
- gr.Markdown("# 🎡 Song Arena\nCan you detect if a song is AI-generated or real?")
18
-
19
- with gr.Row():
20
- with gr.Column():
21
- gr.Markdown("### πŸ‘‡ Click on **New Round** for a song!")
22
- with gr.Row():
23
- with gr.Column():
24
- model_selector = gr.Markdown("", visible=True)
25
-
26
- with gr.Row():
27
- with gr.Column():
28
- # heard_btn = gr.Button(
29
- # value="🚩 Heard this song before", visible=False, interactive=False
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
- real_btn.click(
51
- real_last_response,
52
- inputs=[state],
53
- outputs=[fake_btn, real_btn, model_selector]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54
  )
55
-
56
- # heard_btn.click(generate_songs, state, [state, audio, model_selector])
57
-
58
- new_round_button = gr.Button("🎡 New Round 🎡")
59
- new_round_button.click(generate_songs, state, [state, audio, model_selector]).then(
60
- enable_buttons_side_by_side,
61
- inputs=None,
62
- outputs=btn_list
63
  )
64
-
65
- with gr.Tab("Leaderboard", id=1):
66
- gr.Markdown("# πŸ† Leaderboard πŸ†" + last_updated_str)
67
- gr.Dataframe(
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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")