Integrate Demo Application

.php-cs-fixer.dist.php

@@ -42,7 +42,7 @@
     ->setRiskyAllowed(true)
     ->setFinder(
         (new PhpCsFixer\Finder())
-            ->in([__DIR__.'/src', __DIR__.'/examples', __DIR__.'/fixtures'])
+            ->in([__DIR__.'/demo', __DIR__.'/examples', __DIR__.'/fixtures', __DIR__.'/src'])
             ->append([__FILE__])
             ->notPath('#/Fixtures/#')
     )

demo/.env

@@ -0,0 +1,23 @@
+# In all environments, the following files are loaded if they exist,
+# the latter taking precedence over the former:
+#
+#  * .env                contains default values for the environment variables needed by the app
+#  * .env.local          uncommitted file with local overrides
+#  * .env.$APP_ENV       committed environment-specific defaults
+#  * .env.$APP_ENV.local uncommitted environment-specific overrides
+#
+# Real environment variables win over .env files.
+#
+# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
+# https://symfony.com/doc/current/configuration/secrets.html
+#
+# Run "composer dump-env prod" to compile .env files for production use (requires symfony/flex >=1.2).
+# https://symfony.com/doc/current/best_practices.html#use-environment-variables-for-infrastructure-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=ccb9dca72dce53c683eaaf775bfdb253
+###< symfony/framework-bundle ###
+
+CHROMADB_HOST=chromadb
+OPENAI_API_KEY=sk-...

demo/.env.test

@@ -0,0 +1,7 @@
+# define your env variables for the test env here
+KERNEL_CLASS='App\Kernel'
+APP_SECRET='$ecretf0rt3st'
+SYMFONY_DEPRECATIONS_HELPER=999999
+PANTHER_APP_ENV=panther
+PANTHER_ERROR_SCREENSHOT_DIR=./var/error-screenshots
+OPENAI_API_KEY=sk-proj-testing1234

demo/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+Please do not submit any Pull Requests here. They will be closed.
+---
+
+Please submit your PR here instead:
+https://github.com/symfony/ai
+
+This repository is what we call a "subtree split": a read-only subset of that main repository.
+We're looking forward to your PR there!

demo/.github/workflows/close-pull-request.yml

@@ -0,0 +1,20 @@
+name: Close Pull Request
+
+on:
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: superbrothers/close-pull-request@v3
+        with:
+          comment: |
+            Thanks for your Pull Request! We love contributions.
+
+            However, you should instead open your PR on the main repository:
+            https://github.com/symfony/ai
+
+            This repository is what we call a "subtree split": a read-only subset of that main repository.
+            We're looking forward to your PR there!

demo/.gitignore

@@ -0,0 +1,30 @@
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/dev/dev.decrypt.private.php
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###
+
+###> php-cs-fixer/shim ###
+/.php-cs-fixer.php
+/.php-cs-fixer.cache
+###< php-cs-fixer/shim ###
+
+###> phpstan/phpstan ###
+phpstan.neon
+###< phpstan/phpstan ###
+
+###> phpunit/phpunit ###
+.phpunit.cache
+###< phpunit/phpunit ###
+
+chromadb
+coverage

demo/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2025-present Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

demo/README.md

@@ -0,0 +1,92 @@
+# Symfony AI - Demo Application
+
+Symfony application demoing Symfony AI components.
+
+## Examples
+
+![demo.png](demo.png)
+
+## Requirements
+
+What you need to run this demo:
+
+* Internet Connection
+* Terminal & Browser
+* [Git](https://git-scm.com/) & [GitHub Account](https://github.com)
+* [Docker](https://www.docker.com/) with [Docker Compose Plugin](https://docs.docker.com/compose/)
+* Your Favorite IDE or Editor
+* An [OpenAI API Key](https://platform.openai.com/docs/api-reference/create-and-export-an-api-key)
+
+## Technology
+
+This small demo sits on top of following technologies:
+
+* [PHP >= 8.4](https://www.php.net/releases/8.4/en.php)
+* [Symfony 7.3 incl. Twig, Asset Mapper & UX](https://symfony.com/)
+* [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
+* [OpenAI's GPT & Embeddings](https://platform.openai.com/docs/overview)
+* [ChromaDB Vector Store](https://www.trychroma.com/)
+* [FrankenPHP](https://frankenphp.dev/)
+
+## Setup
+
+The setup is split into three parts, the Symfony application, the OpenAI configuration, and initializing the Chroma DB.
+
+### 1. Symfony App
+
+Checkout the repository, start the docker environment and install dependencies:
+
+```shell
+git clone git@github.com:symfony/ai-demo.git
+cd ai-demo
+docker compose up -d
+docker compose run composer install
+```
+
+Now you should be able to open https://localhost/ in your browser,
+and the chatbot UI should be available for you to start chatting.
+
+> [!NOTE]
+> You might have to bypass the security warning of your browser with regard to self-signed certificates.
+
+### 2. OpenAI Configuration
+
+For using GPT and embedding models from OpenAI, you need to configure an OpenAI API key as environment variable.
+This requires you to have an OpenAI account, create a valid API key and set it as `OPENAI_API_KEY` in `.env.local` file.
+
+```shell
+echo "OPENAI_API_KEY='sk-...'" > .env.local
+```
+
+Verify the success of this step by running the following command:
+
+```shell
+docker compose exec app bin/console debug:dotenv
+```
+
+You should be able to see the `OPENAI_API_KEY` in the list of environment variables.
+
+### 3. Chroma DB Initialization
+
+The [Chroma DB](https://www.trychroma.com/) is a vector store that is used to store embeddings of the chatbot's context.
+
+To initialize the Chroma DB, you need to run the following command:
+
+```shell
+docker compose exec app bin/console app:blog:embed -vv
+```
+
+Now you should be able to run the test command and get some results:
+
+```shell
+docker compose exec app bin/console app:blog:query
+```
+
+**Don't forget to set up the project in your favorite IDE or editor.**
+
+## Functionality
+
+* The chatbot application is a simple and small Symfony 7.3 application.
+* The UI is coupled to a [Twig LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html), that integrates different `Chat` implementations on top of the user's session.
+* You can reset the chat context by hitting the `Reset` button in the top right corner.
+* You find three different usage scenarios in the upper navbar.

demo/assets/app.js

@@ -0,0 +1,8 @@
+import './bootstrap.js';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/app.css';
+import './styles/audio.css';
+import './styles/blog.css';
+import './styles/youtube.css';
+import './styles/video.css';
+import './styles/wikipedia.css';

demo/assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

demo/assets/controllers.json

@@ -0,0 +1,30 @@
+{
+    "controllers": {
+        "@symfony/ux-live-component": {
+            "live": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-live-component/dist/live.min.css": true
+                }
+            }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        },
+        "@symfony/ux-typed": {
+            "typed": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}

demo/assets/controllers/audio_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async initialize() {
+        this.component = await getComponent(this.element);
+        this.scrollToBottom();
+
+        const resetButton = document.getElementById('chat-reset');
+        resetButton.addEventListener('click', (event) => {
+            this.component.action('reset');
+        });
+
+        const startButton = document.getElementById('micro-start');
+        const stopButton = document.getElementById('micro-stop');
+        const botThinkingButton = document.getElementById('bot-thinking');
+
+        startButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            startButton.classList.add('d-none');
+            stopButton.classList.remove('d-none');
+            this.startRecording();
+        });
+        stopButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            stopButton.classList.add('d-none');
+            botThinkingButton.classList.remove('d-none');
+            this.mediaRecorder.stop();
+        });
+
+        this.component.on('loading.state:started', (e,r) => {
+            if (r.actions.includes('reset')) {
+                return;
+            }
+            document.getElementById('welcome')?.remove();
+            document.getElementById('loading-message').removeAttribute('class');
+            this.scrollToBottom();
+        });
+
+        this.component.on('loading.state:finished', () => {
+            document.getElementById('loading-message').setAttribute('class', 'd-none');
+            botThinkingButton.classList.add('d-none');
+            startButton.classList.remove('d-none');
+        });
+
+        this.component.on('render:finished', () => {
+            this.scrollToBottom();
+        });
+    };
+
+    async startRecording() {
+        const stream = await navigator.mediaDevices.getUserMedia({audio: true});
+        this.mediaRecorder = new MediaRecorder(stream);
+        let audioChunks = [];
+
+        this.mediaRecorder.ondataavailable = (event) => {
+            audioChunks.push(event.data);
+        };
+
+        this.mediaRecorder.onstop = async () => {
+            const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});
+            this.mediaRecorder.stream.getAudioTracks().forEach(track => track.stop());
+
+            const base64String = await this.blobToBase64(audioBlob);
+            this.component.action('submit', { audio: base64String });
+        };
+
+        this.mediaRecorder.start();
+    }
+
+    scrollToBottom() {
+        const chatBody = document.getElementById('chat-body');
+        chatBody.scrollTop = chatBody.scrollHeight;
+    }
+
+    blobToBase64(blob) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => resolve(reader.result.split(',')[1]);
+        });
+    }
+}