update for random btns

templates/arena.html

@@ -7,13 +7,22 @@
 {% block content %}
     <div class="tabs">
         <div class="tab active" data-tab="tts">TTS</div>
-        {#    <div class="tab" data-tab="conversational">Conversational</div>#}
     </div>
 
     <div id="tts-tab" class="tab-content active">
         <form class="input-container">
             <div class="input-group">
-                <label for="voice-file">Upload reference voice:</label>
+                <button type="button" class="segmented-btn random-voice-btn" title="Roll random voice">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="lucide lucide-shuffle-icon lucide-shuffle">
+                        <path d="m18 14 4 4-4 4"/>
+                        <path d="m18 2 4 4-4 4"/>
+                        <path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"/>
+                        <path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"/>
+                        <path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"/>
+                    </svg>
+                </button>
                 <input type="file" id="voice-file" accept="audio/*">
                 <audio id="voice-preview" controls style="display:none;"></audio>
             </div>
@@ -123,6 +132,37 @@
             overflow: hidden;
         }
 
+        .voice-input-container {
+            display: flex;
+            align-items: center;
+            margin-top: 8px;
+            position: relative;
+        }
+
+        .random-voice-btn {
+            height: 36px;
+            width: 36px;
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius);
+            margin-right: 10px;
+            flex-shrink: 0;
+        }
+
+        .random-voice-btn:hover {
+            background-color: var(--light-gray);
+        }
+
+        .random-voice-btn svg {
+            color: var(--primary-color);
+        }
+
+        /* 保持音频控件在按钮旁边显示 */
+        #voice-preview {
+            margin-left: 10px;
+        }
+
+
         /* Override base styles to remove duplicate borders */
         .input-group .text-input {
             flex: 1;