[Demo][Website] Rename audio demo to speech

ai.symfony.com/assets/styles/app.css

@@ -215,10 +215,10 @@ button#themeToggle {
     color: white;
 }
 
-.demo-audio .demo-icon { background: linear-gradient(180deg, #42DEEE, #7069B0); }
 .demo-blog .demo-icon { background: linear-gradient(180deg, #433F77, #C43BC2); }
 .demo-crop .demo-icon { background: linear-gradient(180deg, #85A72B, #97BC43); }
 .demo-recipe .demo-icon { background: linear-gradient(180deg, #83A659, #71BCB8); }
+.demo-speech .demo-icon { background: linear-gradient(180deg, #42DEEE, #7069B0); }
 .demo-turbo .demo-icon { background: linear-gradient(180deg, #E94E77, #D68189); }
 .demo-video .demo-icon { background: linear-gradient(180deg, #3B9D87, #35A781); }
 .demo-wikipedia .demo-icon { background: linear-gradient(180deg, #1CA574, #56AB48); }

ai.symfony.com/templates/homepage.html.twig

@@ -256,15 +256,15 @@
                     </div>
 
                     <div class="col-md-6">
-                        <article class="demo-audio sf-ai-card sf-ai-card-hover h-100">
+                        <article class="demo-speech sf-ai-card sf-ai-card-hover h-100">
                             <div class="position-relative card-body p-3 p-lg-4 d-flex gap-3 align-items-start">
                                 <div class="demo-icon bg-success bg-opacity-10 text-success flex-shrink-0">
                                     {{ ux_icon('tabler:microphone', {width: 42, height: 42}) }}
                                 </div>
                                 <div class="flex-grow-1">
                                     <div class="d-flex align-items-start gap-2 mb-1">
                                         <h3 class="h5 ff-title fw-bold mb-0">
-                                            <a href="https://github.com/symfony/ai-demo" class="stretched-link">Audio Bot + Subagent</a>
+                                            <a href="https://github.com/symfony/ai-demo" class="stretched-link">Speech Bot + Subagent</a>
                                         </h3>
                                         {{ ux_icon('tabler:arrow-right', {width: 24, height: 24, class: 'ms-1'}) }}
                                     </div>

demo/assets/app.js

@@ -1,10 +1,10 @@
 import './bootstrap.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './styles/app.css';
-import './styles/audio.css';
 import './styles/blog.css';
 import './styles/crop.css';
 import './styles/recipe.css';
+import './styles/speech.css';
 import './styles/stream.css';
 import './styles/youtube.css';
 import './styles/video.css';

demo/assets/styles/audio.css → demo/assets/styles/speech.css

@@ -1,4 +1,4 @@
-.audio {
+.speech {
     body&, .card-img-top {
         background: #df662f;
         background: linear-gradient(0deg, #df662f 0%, #a80a1d 100%);

demo/config/packages/ai.yaml

@@ -42,7 +42,7 @@ ai:
             tools:
                 - 'Symfony\AI\Agent\Toolbox\Tool\Wikipedia'
             include_sources: true
-        audio:
+        speech:
             platform: 'ai.platform.openai'
             model: 'gpt-4o-mini?temperature=1.0'
             prompt: |
@@ -52,6 +52,7 @@ ai:
                 If you don't know the answer, say so. Keep in mind that you are in a spoken conversation, so keep your
                 answers concise and to the point. They will be read out loud to the user.
             tools:
+                - 'Symfony\AI\Agent\Toolbox\Tool\Clock'
                 # Agent in agent 🤯
                 - agent: 'blog'
                   name: 'symfony_blog'
@@ -105,7 +106,7 @@ services:
         autowire: true
         autoconfigure: true
 
-    # Symfony\AI\Agent\Toolbox\Tool\Clock: ~
+    Symfony\AI\Agent\Toolbox\Tool\Clock: ~
     Symfony\AI\Agent\Toolbox\Tool\Wikipedia: ~
     Symfony\AI\Agent\Toolbox\Tool\SimilaritySearch:
         $vectorizer: '@ai.vectorizer.openai'

demo/config/routes.yaml

@@ -4,13 +4,6 @@ index:
     defaults:
         template:  'index.html.twig'
 
-audio:
-    path: '/audio'
-    controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
-    defaults:
-        template:  'chat.html.twig'
-        context: { chat: 'audio' }
-
 blog:
     path: '/blog'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
@@ -31,6 +24,13 @@ recipe:
         template:  'chat.html.twig'
         context: { chat: 'recipe' }
 
+speech:
+    path: '/speech'
+    controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
+    defaults:
+        template:  'chat.html.twig'
+        context: { chat: 'speech' }
+
 stream:
     path: '/stream'
     controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'

demo/src/Audio/Chat.php → demo/src/Speech/Chat.php

@@ -9,7 +9,7 @@
  * file that was distributed with this source code.
  */
 
-namespace App\Audio;
+namespace App\Speech;
 
 use Symfony\AI\Agent\AgentInterface;
 use Symfony\AI\Platform\Bridge\OpenAi\TextToSpeech\Voice;
@@ -29,7 +29,7 @@ public function __construct(
         #[Autowire(service: 'ai.platform.openai')]
         private readonly PlatformInterface $platform,
         private readonly RequestStack $requestStack,
-        #[Autowire(service: 'ai.agent.audio')]
+        #[Autowire(service: 'ai.agent.speech')]
         private readonly AgentInterface $agent,
     ) {
     }
@@ -66,7 +66,7 @@ public function submitMessage(string $message): void
             'voice' => Voice::CORAL,
             'instructions' => 'Speak in a cheerful and positive tone.',
         ]);
-        $assistantMessage->getMetadata()->add('audio', $result->asDataUri('audio/mpeg'));
+        $assistantMessage->getMetadata()->add('speech', $result->asDataUri('audio/mpeg'));
 
         $this->saveMessages($messages);
     }

demo/src/Audio/TwigComponent.php → demo/src/Speech/TwigComponent.php

@@ -9,15 +9,15 @@
  * file that was distributed with this source code.
  */
 
-namespace App\Audio;
+namespace App\Speech;
 
 use Symfony\AI\Platform\Message\MessageInterface;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
 use Symfony\UX\LiveComponent\Attribute\LiveArg;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsLiveComponent('audio')]
+#[AsLiveComponent('speech')]
 final class TwigComponent
 {
     use DefaultActionTrait;

demo/templates/base.html.twig

@@ -38,7 +38,7 @@
                             <a class="nav-link" href="{{ path('crop') }}">{{ ux_icon('material-symbols:crop', { height: '20px', width: '20px' }) }} Smart Crop</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ path('audio') }}">{{ ux_icon('iconoir:microphone-solid', { height: '20px', width: '20px' }) }} Audio</a>
+                            <a class="nav-link" href="{{ path('speech') }}">{{ ux_icon('iconoir:microphone-solid', { height: '20px', width: '20px' }) }} Speech</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="{{ path('video') }}">{{ ux_icon('tabler:video-filled', { height: '20px', width: '20px' }) }} Video</a>

demo/templates/components/audio.html.twig → demo/templates/components/speech.html.twig

@@ -1,9 +1,9 @@
 {% import "_message.html.twig" as msg %}
 
-<div class="card mx-auto shadow-lg" {{ attributes.defaults(stimulus_controller('audio')) }}>
+<div class="card mx-auto shadow-lg" {{ attributes.defaults(stimulus_controller('speech')) }}>
     <div class="card-header p-2">
         {{ ux_icon('iconoir:microphone-solid', { height: '32px', width: '32px' }) }}
-        <strong class="ms-1 pt-1 d-inline-block">Conversational Bot</strong>
+        <strong class="ms-1 pt-1 d-inline-block">Speech Bot</strong>
         <button id="chat-reset" class="btn btn-sm btn-outline-secondary float-end">{{ ux_icon('material-symbols:cancel') }} Reset Chat</button>
     </div>
     <div id="chat-body" class="card-body p-4 overflow-auto">
@@ -16,14 +16,14 @@
                         {{ ux_icon('fluent:bot-24-filled', { height: '45px', width: '45px' }) }}
                     </div>
                     <div class="ps-2">
-                        <audio class="pt-3" controls {{ loop.last ? 'autoplay' }} src="{{ message.metadata.get('audio') }}"></audio>
+                        <audio class="pt-3" controls {{ loop.last ? 'autoplay' }} src="{{ message.metadata.get('speech') }}"></audio>
                     </div>
                 </div>
             {% endif %}
         {% else %}
             <div id="welcome" class="text-center mt-5 py-5 bg-white rounded-5 shadow-sm w-75 mx-auto">
                 {{ ux_icon('iconoir:microphone-solid', { height: '200px', width: '200px' }) }}
-                <h4 class="mt-5">Audio Bot</h4>
+                <h4 class="mt-5">Speech Bot</h4>
                 <span class="text-muted">Please hit the button below to start talking and again to stop</span>
             </div>
         {% endfor %}

demo/templates/index.html.twig

@@ -92,20 +92,20 @@
         </div>
         <div class="row mt-4">
             <div class="col-md-3">
-                <div class="card audio bg-body shadow-sm">
+                <div class="card speech bg-body shadow-sm">
                     <div class="card-img-top py-2">
                         {{ ux_icon('iconoir:microphone-solid', { height: '150px', width: '150px' }) }}
                     </div>
                     <div class="card-body">
-                        <h5 class="card-title">Audio Bot + Subagent</h5>
+                        <h5 class="card-title">Speech Bot + Subagent</h5>
                         <p class="card-text">Demonstration of speech-to-text & text-to-speech and a subagent, combining 4 models in total.</p>
-                        <a href="{{ path('audio') }}" class="btn btn-outline-dark d-block">Try Audio Bot</a>
+                        <a href="{{ path('speech') }}" class="btn btn-outline-dark d-block">Try Speech Bot</a>
                     </div>
                     {# Profiler route only available in dev #}
                     {% if 'dev' == app.environment %}
                         <div class="card-footer">
                             {{ ux_icon('solar:code-linear', { height: '20px', width: '20px' }) }}
-                            <a href="{{ path('_profiler_open_file', { file: 'src/Audio/Chat.php', line: 25 }) }}">See Implementation</a>
+                            <a href="{{ path('_profiler_open_file', { file: 'src/Speech/Chat.php', line: 25 }) }}">See Implementation</a>
                         </div>
                     {% endif %}
                 </div>