Merge pull request #6 from HumeAI/zg/updates-for-launch

src/app.py

@@ -87,7 +87,7 @@ class App:
         character_description: str,
         text: str,
         generated_text_state: str,
-    ) -> Tuple[gr.Audio, gr.Audio, OptionMap, bool, str, str]:
+    ) -> Tuple[gr.Audio, gr.Audio, OptionMap, bool, str, str, bool]:
         """
         Synthesizes two text-to-speech outputs, updates UI state components, and returns additional TTS metadata.
 
@@ -113,6 +113,7 @@ class App:
                 - bool: Flag indicating whether the text was modified.
                 - str: The original text that was synthesized.
                 - str: The original character description.
+                - bool: Flag indicating whether the vote buttons should be enabled
 
         Raises:
             gr.Error: If any API or unexpected errors occur during the TTS synthesis process.
@@ -147,12 +148,13 @@ class App:
             options_map: OptionMap = create_shuffled_tts_options(option_a, option_b)
 
             return (
-                gr.update(value=options_map["option_a"]["audio_file_path"], visible=True, autoplay=True),
-                gr.update(value=options_map["option_b"]["audio_file_path"], visible=True),
+                gr.update(value=options_map["option_a"]["audio_file_path"], autoplay=True),
+                gr.update(value=options_map["option_b"]["audio_file_path"]),
                 options_map,
                 text_modified,
                 text,
                 character_description,
+                True,
             )
         except ElevenLabsError as ee:
             logger.error(f"ElevenLabsError while synthesizing speech from text: {ee!s}")
@@ -287,7 +289,7 @@ class App:
             gr.update(interactive=False), # disable Select B Button
         )
 
-    def _enable_ui(self) -> Tuple[
+    def _enable_ui(self, should_enable_vote_buttons) -> Tuple[
         gr.Button,
         gr.Dropdown,
         gr.Textbox,
@@ -307,8 +309,8 @@ class App:
             gr.update(interactive=True), # enable Generate Text button
             gr.update(interactive=True), # enable Input Text input
             gr.update(interactive=True), # enable Synthesize Speech Button
-            gr.update(interactive=True), # enable Select A Button
-            gr.update(interactive=True), # enable Select B Button
+            gr.update(interactive=should_enable_vote_buttons), # enable Select A Button
+            gr.update(interactive=should_enable_vote_buttons), # enable Select B Button
         )
 
     def _reset_voting_ui(self) -> Tuple[
@@ -319,7 +321,8 @@ class App:
         gr.Textbox,
         gr.Textbox,
         OptionMap,
-        bool
+        bool,
+        bool,
     ]:
         """
         Resets voting UI state and clear audio players
@@ -337,6 +340,7 @@ class App:
             gr.update(visible=False, elem_classes=[]), # hide vote result B and clear custom styling
             default_option_map, # Reset option_map_state as a default OptionMap
             False, # Reset vote_submitted_state
+            False, # Reset should_enable_vote_buttons state
         )
 
     def _build_heading_section(self) -> Tuple[gr.HTML, gr.Button, gr.HTML]:
@@ -345,7 +349,29 @@ class App:
         """
         with gr.Row():
             with gr.Column(scale=5):
-                title = gr.HTML("<h1>Expressive TTS Arena</h1>")
+                title_with_social_links = gr.HTML(
+                    """
+                    <div class="title-container">
+                        <h1>Expressive TTS Arena</h1>
+                        <div class="social-links">
+                            <a
+                                href="https://discord.com/invite/humeai"
+                                target="_blank"
+                                id="discord-link"
+                                title="Join our Discord"
+                                aria-label="Join our Discord server"
+                            ></a>
+                            <a
+                                href="https://github.com/HumeAI/expressive-tts-arena"
+                                target="_blank"
+                                id="github-link"
+                                title="View on GitHub"
+                                aria-label="View project on GitHub"
+                            ></a>
+                        </div>
+                    </div>
+                    """
+                )
             randomize_all_button = gr.Button("🎲 Randomize All", variant="primary", scale=1)
         instructions = gr.HTML(
             """
@@ -371,7 +397,7 @@ class App:
             </ol>
             """
         )
-        return (title, randomize_all_button, instructions)
+        return (title_with_social_links, randomize_all_button, instructions)
 
     def _build_input_section(self) -> Tuple[gr.Dropdown, gr.Textbox, gr.Button, gr.Textbox, gr.Button]:
         """
@@ -474,7 +500,7 @@ class App:
             # --- UI components ---
 
             (
-                title,
+                title_with_social_links,
                 randomize_all_button,
                 instructions,
             ) = self._build_heading_section()
@@ -508,6 +534,8 @@ class App:
             option_map_state = gr.State({})  # OptionMap state as a dictionary
             # Track whether the user has voted for an option
             vote_submitted_state = gr.State(False)
+            # Track whether the vote buttons should be enabled
+            should_enable_vote_buttons = gr.State(False)
 
             # --- Register event handlers ---
 
@@ -543,6 +571,7 @@ class App:
                     vote_result_b,
                     option_map_state,
                     vote_submitted_state,
+                    should_enable_vote_buttons,
                 ],
             ).then(
                 fn=self._randomize_character_description,
@@ -562,10 +591,11 @@ class App:
                     text_modified_state,
                     text_state,
                     character_description_state,
+                    should_enable_vote_buttons,
                 ],
             ).then(
                 fn=self._enable_ui,
-                inputs=[],
+                inputs=[should_enable_vote_buttons],
                 outputs=[
                     randomize_all_button,
                     sample_character_description_dropdown,
@@ -606,7 +636,7 @@ class App:
                 outputs=[text_input, generated_text_state],
             ).then(
                 fn=self._enable_ui,
-                inputs=[],
+                inputs=[should_enable_vote_buttons],
                 outputs=[
                     randomize_all_button,
                     sample_character_description_dropdown,
@@ -642,7 +672,7 @@ class App:
                 outputs=[text_input, generated_text_state],
             ).then(
                 fn=self._enable_ui,
-                inputs=[],
+                inputs=[should_enable_vote_buttons],
                 outputs=[
                     randomize_all_button,
                     sample_character_description_dropdown,
@@ -685,6 +715,7 @@ class App:
                     vote_result_b,
                     option_map_state,
                     vote_submitted_state,
+                    should_enable_vote_buttons,
                 ],
             ).then(
                 fn=self._synthesize_speech,
@@ -696,10 +727,11 @@ class App:
                     text_modified_state,
                     text_state,
                     character_description_state,
+                    should_enable_vote_buttons,
                 ],
             ).then(
                 fn=self._enable_ui,
-                inputs=[],
+                inputs=[should_enable_vote_buttons],
                 outputs=[
                     randomize_all_button,
                     sample_character_description_dropdown,

src/assets/styles.css

@@ -1,14 +1,78 @@
-/* Remove Gradio footer from UI */
+/* Remove Gradio footer */
 footer.svelte-1byz9vf {
   display: none !important;
 }
 
+/* Remove unnecessary padding from HTML containers */
+.html-container.svelte-phx28p.padding {
+  padding: 0px !important;
+}
+
+/* Title container styling */
+.title-container {
+  display: flex;
+  align-items: center;
+  height: 40px !important;
+  overflow: visible !important;
+}
+
+.title-container h1 {
+  margin: 0 !important;
+  margin-right: auto !important;
+}
+
+/* Social links container */
+.social-links {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 8px;
+  overflow: visible !important;
+}
+
+/* Social media icons common styles */
+#github-link, 
+#discord-link {
+  display: inline-block !important;
+  width: 30px !important;
+  height: 30px !important;
+  background-size: cover !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  transition: transform 0.2s ease-in-out !important;
+  border-radius: 50% !important;
+  flex-shrink: 0 !important;
+}
+
+/* Hover effect for social media icons */
+#github-link:hover, 
+#discord-link:hover {
+  transform: scale(1.1);
+}
+
+/* Discord icon specific styling */
+#discord-link {
+  background-image: url(
+    'https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png'
+  ) !important;
+  background-size: 90% !important;
+}
+
+/* GitHub icon specific styling */
+#github-link {
+  background-image: url(
+    'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
+  ) !important;
+}
+
+/* Vote result styling */
 #vote-result-a textarea,
 #vote-result-b textarea {
   font-size: 16px !important;
   font-weight: bold !important;
 }
 
+/* Winner styling */
 #vote-result-a.winner textarea,
 #vote-result-b.winner textarea {
   background: #EA580C;

src/constants.py

@@ -47,8 +47,8 @@ SAMPLE_CHARACTER_DESCRIPTIONS: dict = {
         "auditory experience."
     ),
     "🎬 Noir Detective": (
-        "A film portrayal of a 1940s private investigator narrating with a low, gravelly voice and deliberate pacing. "
-        "Speaks with a cynical, world-weary tone that drops lower when delivering key observations."
+        "A noir film portrayal of a 1940s private investigator narrating with a low, gravelly voice and deliberate "
+        "pacing. Speaks with a cynical, world-weary tone that drops lower when delivering key observations."
     ),
     "🕯️ Victorian Ghost Storyteller": (
         "The speaker is a Victorian-era raconteur speaking with a refined British accent and formal, precise diction. "