feature #851 [Demo] Add smart cropping with Hugging Face to demo (chr-hertel)

This PR was merged into the main branch.

Discussion
----------

[Demo] Add smart cropping with Hugging Face to demo

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Docs?         |
| Issues        |
| License       | MIT

Bringing in the first non-chatbot example - sitting on top of Hugging Face.
The frontend & resampler implementation is rather bad, but will have another look if time permits - and i guess the idea is clear.

https://github.com/user-attachments/assets/95a82a83-ff80-44e9-9405-65ae59a89ef1

Commits
-------

a1bb014 Add smart cropping example to demo

Author: OskarStark

demo/.env

@@ -22,3 +22,4 @@ APP_SECRET=ccb9dca72dce53c683eaaf775bfdb253
 CHROMADB_HOST=chromadb
 CHROMADB_PORT=8080
 OPENAI_API_KEY=sk-...
+HUGGINGFACE_API_KEY=hf-...

demo/assets/app.js

@@ -3,6 +3,7 @@ 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/stream.css';
 import './styles/youtube.css';
 import './styles/video.css';

demo/assets/controllers.json

@@ -1,5 +1,14 @@
 {
     "controllers": {
+        "@symfony/ux-dropzone": {
+            "dropzone": {
+                "enabled": true,
+                "fetch": "eager",
+                "autoimport": {
+                    "@symfony/ux-dropzone/dist/style.min.css": true
+                }
+            }
+        },
         "@symfony/ux-live-component": {
             "live": {
                 "enabled": true,

demo/assets/controllers/dropzone_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        this.element.addEventListener('dropzone:change', this._onChange.bind(this));
+        this.element.addEventListener('dropzone:clear', this._onClear);
+    }
+
+    disconnect() {
+        this.element.removeEventListener('dropzone:change', this._onChange.bind(this));
+        this.element.removeEventListener('dropzone:clear', this._onClear);
+    }
+
+    async _onChange(event) {
+        const cropComponent = document.getElementById('crop-component').__component;
+
+        cropComponent.set('imageData', await this.blobToBase64(event.detail));
+    }
+
+    _onClear(event) {
+        const cropComponent = document.getElementById('crop-component').__component;
+
+        cropComponent.set('imageData', null);
+    }
+
+    blobToBase64(blob) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => resolve(reader.result);
+        });
+    }
+}

demo/assets/icons/material-symbols/crop.svg

@@ -0,0 +1,18 @@
+.crop {
+    body&, .card-img-top {
+        background: rgb(34,34,34);
+        background: linear-gradient(0deg, rgb(209, 14, 205) 0%, rgb(120, 21, 135) 100%);
+    }
+
+    .card-img-top {
+        color: #ffffff;
+    }
+
+    & footer {
+        color: #ffffff;
+
+        a {
+            color: #ffffff;
+        }
+    }
+}

demo/assets/styles/crop.css

@@ -7,6 +7,7 @@
         "php": ">=8.4",
         "ext-ctype": "*",
         "ext-iconv": "*",
+        "ext-gd": "*",
         "codewithkyrian/chromadb-php": "^0.4.0",
         "league/commonmark": "^2.7",
         "mcp/sdk": "@dev",
@@ -22,13 +23,16 @@
         "symfony/dom-crawler": "~7.3.0",
         "symfony/dotenv": "~7.3.0",
         "symfony/flex": "^2.5",
+        "symfony/form": "~7.3.0",
         "symfony/framework-bundle": "~7.3.0",
         "symfony/http-client": "~7.3.0",
         "symfony/mcp-bundle": "@dev",
+        "symfony/mime": "~7.3.0",
         "symfony/monolog-bundle": "^3.10",
         "symfony/runtime": "~7.3.0",
         "symfony/twig-bundle": "~7.3.0",
         "symfony/uid": "~7.3.0",
+        "symfony/ux-dropzone": "^2.31",
         "symfony/ux-icons": "^2.25",
         "symfony/ux-live-component": "^2.25",
         "symfony/ux-turbo": "^2.25",

demo/composer.json

@@ -17,6 +17,7 @@
     Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
     Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
+    Symfony\UX\Dropzone\DropzoneBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
     Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],

demo/config/bundles.php

@@ -2,8 +2,11 @@ ai:
     platform:
         openai:
             api_key: '%env(OPENAI_API_KEY)%'
+        huggingface:
+            api_key: '%env(HUGGINGFACE_API_KEY)%'
     agent:
         blog:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             tools:
                 - 'Symfony\AI\Agent\Toolbox\Tool\SimilaritySearch'
@@ -12,14 +15,17 @@ ai:
                   description: 'Provides the current date and time.'
                   method: 'now'
         stream:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             prompt:
                 file: '%kernel.project_dir%/prompts/stream-chat.txt'
             tools: false
         youtube:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             tools: false
         wikipedia:
+            platform: 'ai.platform.openai'
             model:
                 name: 'gpt-4o-mini'
                 options:
@@ -31,6 +37,7 @@ ai:
                 - 'Symfony\AI\Agent\Toolbox\Tool\Wikipedia'
             include_sources: true
         audio:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini?temperature=1.0'
             prompt: 'You are a friendly chatbot that likes to have a conversation with users and asks them some questions.'
             tools:
@@ -39,14 +46,17 @@ ai:
                   name: 'symfony_blog'
                   description: 'Can answer questions based on the Symfony blog.'
         orchestrator:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             prompt: 'You are an intelligent agent orchestrator that routes user questions to specialized agents.'
             tools: false
         technical:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             prompt: 'You are a technical support specialist. Help users resolve bugs, problems, and technical errors.'
             tools: false
         fallback:
+            platform: 'ai.platform.openai'
             model: 'gpt-4o-mini'
             prompt: 'You are a helpful general assistant. Assist users with any questions or tasks they may have.'
             tools: false
@@ -62,6 +72,7 @@ ai:
                 collection: 'symfony_blog'
     vectorizer:
         openai:
+            platform: 'ai.platform.openai'
             model: 'text-embedding-ada-002'
     indexer:
         blog:

demo/config/packages/ai.yaml

@@ -0,0 +1,11 @@
+# Enable stateless CSRF protection for forms and logins/logouts
+framework:
+    form:
+        csrf_protection:
+            token_id: submit
+
+    csrf_protection:
+        stateless_token_ids:
+            - submit
+            - authenticate
+            - logout