Skip to content

Commit 84c5b27

Browse files
chr-hertelchr-hertel
committed
feat: audio example
1 parent de88933 commit 84c5b27

File tree

10 files changed

+200
-0
lines changed

10 files changed

+200
-0
lines changed

‎assets/controllers/conversational_controller.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
import { getComponent } from '@symfony/ux-live-component';
3+
4+
export default class extends Controller {
5+
async initialize() {
6+
this.component = await getComponent(this.element);
7+
8+
const resetButton = document.getElementById('chat-reset');
9+
resetButton.addEventListener('click', (event) => {
10+
this.component.action('reset');
11+
});
12+
13+
const startButton = document.getElementById('micro-start');
14+
const stopButton = document.getElementById('micro-stop');
15+
const botThinkingButton = document.getElementById('bot-thinking');
16+
const botSpeakingButton = document.getElementById('bot-speaking');
17+
18+
startButton.addEventListener('click', (event) => {
19+
event.preventDefault();
20+
startButton.classList.add('d-none');
21+
stopButton.classList.remove('d-none');
22+
this.startRecording();
23+
});
24+
stopButton.addEventListener('click', (event) => {
25+
event.preventDefault();
26+
stopButton.classList.add('d-none');
27+
botThinkingButton.classList.remove('d-none');
28+
this.mediaRecorder.stop();
29+
});
30+
};
31+
32+
async startRecording() {
33+
const stream = await navigator.mediaDevices.getUserMedia({audio: true});
34+
this.mediaRecorder = new MediaRecorder(stream);
35+
let audioChunks = [];
36+
37+
this.mediaRecorder.ondataavailable = (event) => {
38+
audioChunks.push(event.data);
39+
};
40+
41+
this.mediaRecorder.onstop = async () => {
42+
const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
43+
44+
const base64String = await this.blobToBase64(audioBlob);
45+
this.component.action('speak', { audio: base64String });
46+
this.playBase64Audio(base64String);
47+
};
48+
49+
this.mediaRecorder.start();
50+
}
51+
52+
blobToBase64(blob) {
53+
return new Promise((resolve) => {
54+
const reader = new FileReader();
55+
reader.readAsDataURL(blob);
56+
reader.onloadend = () => resolve(reader.result.split(',')[1]);
57+
});
58+
}
59+
60+
playBase64Audio(base64String) {
61+
const audioSrc = "data:audio/wav;base64," + base64String;
62+
const audio = new Audio(audioSrc);
63+
64+
audio.play().catch(error => console.error("Playback error:", error));
65+
}
66+
}

‎assets/icons/iconoir/microphone-mute-solid.svg

+1
Loading

‎assets/icons/iconoir/microphone-solid.svg

+1
Loading

‎assets/icons/iconoir/sound-high-solid.svg

+1
Loading

‎assets/icons/iconoir/timer-solid.svg

+1
Loading

‎config/packages/llm_chain.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ llm_chain:
3737
system_prompt: 'Please answer the users question based on Wikipedia and provide a link to the article.'
3838
tools:
3939
- 'PhpLlm\LlmChain\Chain\ToolBox\Tool\Wikipedia'
40+
conversational:
41+
model:
42+
name: 'GPT'
43+
version: 'gpt-4o-audio-preview'
44+
system_prompt: 'You are a friendly chatbot that likes to have a conversation with users and asks them some questions.'
45+
tools: false
4046
store:
4147
chroma_db:
4248
symfonycon:

‎config/routes.yaml

+7
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ blog:
1111
template: 'chat.html.twig'
1212
context: { chat: 'blog' }
1313

14+
conversational:
15+
path: '/conversational'
16+
controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'
17+
defaults:
18+
template: 'chat.html.twig'
19+
context: { chat: 'conversational' }
20+
1421
youtube:
1522
path: '/youtube'
1623
controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController'

‎src/Conversational/Chat.php

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace App\Conversational;
6+
7+
use PhpLlm\LlmChain\ChainInterface;
8+
use PhpLlm\LlmChain\Model\Message\Content\Audio;
9+
use PhpLlm\LlmChain\Model\Message\Message;
10+
use PhpLlm\LlmChain\Model\Message\MessageBag;
11+
use PhpLlm\LlmChain\Model\Response\TextResponse;
12+
use Symfony\Component\DependencyInjection\Attribute\Autowire;
13+
use Symfony\Component\HttpFoundation\RequestStack;
14+
15+
final class Chat
16+
{
17+
private const SESSION_KEY = 'conversational-chat';
18+
19+
public function __construct(
20+
private readonly RequestStack $requestStack,
21+
#[Autowire(service: 'llm_chain.chain.conversational')]
22+
private readonly ChainInterface $chain,
23+
) {
24+
}
25+
26+
public function loadMessages(): MessageBag
27+
{
28+
return $this->requestStack->getSession()->get(self::SESSION_KEY, new MessageBag());
29+
}
30+
31+
public function submitMessage(Audio $audio): void
32+
{
33+
$messages = $this->loadMessages();
34+
35+
$messages->add(Message::ofUser($audio));
36+
$response = $this->chain->call($messages);
37+
38+
assert($response instanceof TextResponse);
39+
40+
$messages->add(Message::ofAssistant($response->getContent()));
41+
42+
$this->saveMessages($messages);
43+
}
44+
45+
public function reset(): void
46+
{
47+
$this->requestStack->getSession()->remove(self::SESSION_KEY);
48+
}
49+
50+
private function saveMessages(MessageBag $messages): void
51+
{
52+
$this->requestStack->getSession()->set(self::SESSION_KEY, $messages);
53+
}
54+
}

‎src/Conversational/TwigComponent.php

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace App\Conversational;
6+
7+
use PhpLlm\LlmChain\Model\Message\Content\Audio;
8+
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
9+
use Symfony\UX\LiveComponent\Attribute\LiveAction;
10+
use Symfony\UX\LiveComponent\Attribute\LiveArg;
11+
use Symfony\UX\LiveComponent\DefaultActionTrait;
12+
13+
#[AsLiveComponent('conversational')]
14+
final class TwigComponent
15+
{
16+
use DefaultActionTrait;
17+
18+
public function __construct(
19+
private readonly Chat $chat,
20+
) {
21+
}
22+
23+
#[LiveAction]
24+
public function speak(#[LiveArg] string $audio): void
25+
{
26+
$this->chat->submitMessage(
27+
new Audio(sprintf('data:audio/wav;base64,%s', $audio))
28+
);
29+
}
30+
}

‎templates/components/conversational.html.twig

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="card mx-auto shadow-lg" {{ attributes.defaults(stimulus_controller('conversational')) }}>
2+
<div class="card-header p-2">
3+
{{ ux_icon('iconoir:microphone-solid', { height: '32px', width: '32px' }) }}
4+
<strong class="ms-1 pt-1 d-inline-block">Conversational Bot</strong>
5+
<button id="chat-reset" class="btn btn-sm btn-outline-secondary float-end">{{ ux_icon('material-symbols:cancel') }} Reset Chat</button>
6+
</div>
7+
<div id="chat-body" class="card-body p-4 overflow-auto">
8+
<div id="welcome" class="text-center mt-5 py-5 bg-white rounded-5 shadow-sm w-75 mx-auto">
9+
{{ ux_icon('iconoir:microphone-solid', { height: '200px', width: '200px' }) }}
10+
<h4 class="mt-5">Conversational Bot</h4>
11+
<span class="text-muted">Please hit the button below to start talking and again to stop</span>
12+
<div class="text-center mt-5">
13+
<button id="micro-start" class="btn btn-primary" type="button">
14+
{{ ux_icon('iconoir:microphone-solid', { height: '32px', width: '32px' }) }}
15+
<strong>Say something</strong>
16+
</button>
17+
<button id="micro-stop" class="btn btn-danger d-none" type="button">
18+
{{ ux_icon('iconoir:microphone-mute-solid', { height: '32px', width: '32px' }) }}
19+
<strong>Stop</strong>
20+
</button>
21+
<button id="bot-thinking" class="btn btn-secondary disabled d-none" type="button">
22+
{{ ux_icon('iconoir:timer-solid', { height: '32px', width: '32px' }) }}
23+
<strong>Bot is thinking</strong>
24+
</button>
25+
<button id="bot-speaking" class="btn btn-dark disabled d-none" type="button">
26+
{{ ux_icon('iconoir:sound-high-solid', { height: '32px', width: '32px' }) }}
27+
<strong>Bot is speaking</strong>
28+
</button>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="card-footer p-2"></div>
33+
</div>

0 commit comments

Comments
 (0)