Привет, Хабр.
В прошлой статье я рассказывал о том, что за инструмент Flowise, как поставить его локально или на Render и показал несколько примеров чат-ботов.
В этой статье хочу показать как убрать брендинг Flowise с вашего чата после встраивания. В репозитории FlowiseChatEmbed находится JavaScript-библиотека, которая отвечает за отображение чат-бота на сайте. Небольшие изменения, и брендинга Flowise не будет (или можно будет добавить свой). Покажу 2 способа: как изменить код в редакторе GitHub и с использованием VSCode. Оба сработают. Полезные ссылки: Git: https://git-scm.com/downloads - необходимо установить. Github: https://github.com - понадобится аккаунт на Github. VSCODE: https://code.visualstudio.com
Начнём с простого способа.
В аккаунте Github создайте себе копию репозитория кнопкой Fork
.
![](https://habrastorage.org/getpro/habr/post_images/84a/623/af9/84a623af9595abddb8ca9fb62ea82d0e.jpg)
Выберите имя для репозитория и кликните `Create fork`:
![](https://habrastorage.org/getpro/habr/post_images/11c/5f2/a54/11c5f2a54eab3ca4c4c28ea5527c8254.jpg)
В вашей копии репозитория, которую вы только что создали, найдите папку `src` и кликните по ней.
![](https://habrastorage.org/getpro/habr/post_images/6ac/c7f/271/6acc7f27121b7f3ac0a72bf2195d9cdb.jpg)
Затем открываем папку components и переходим к файлам `Badge.tsx` и `Bot.tsx`. В файле `Badge.tsx` вы найдёте текст брендинга и ссылку. Если ваша задача — просто изменить брендинг, переходите в режим редактирования кликнув по кнопке с карандашом в верхнем правом углу и меняйте на то, что вам нужно:
![](https://habrastorage.org/getpro/habr/post_images/877/10a/aac/87710aaac65bec741618369562daf911.jpg)
Чтобы сохранить изменения, кликните на кнопку `Commit changes` в правом верхнем углу. Заполните поля с описанием изменений.
![](https://habrastorage.org/getpro/habr/post_images/0b4/05c/d75/0b405cd7519dfd6664977ecc30e42a10.jpg)
Вы сможете увидеть изменения в проекте на его странице:
![](https://habrastorage.org/getpro/habr/post_images/9f0/2a5/26c/9f02a526cf1be5e516c579839ba7a981.jpg)
Чтобы удалить брендинг совсем, откройте файл `Bot.tsx` и давайте редактировать его. Удаление или комментирование выделенной строки (она в самом низу) полностью уберёт брендирование. Как редактировать и сохранить изменения, я уже рассказал выше.
![](https://habrastorage.org/getpro/habr/post_images/12d/fff/1e3/12dfff1e3c8e634394f6386e05056778.jpg)
Как только вы внесли изменения в код, необходимо изменить также и код встраивания на сайт. В нём вы найдёте ссылку:
![](https://habrastorage.org/getpro/habr/post_images/5d7/bc4/125/5d7bc4125031e880d1e5d4509492827e.jpg)
Часть npm/flowise-embed
необходимо заменить:
`npm` замените на `gh`, так мы указываем на Github;
`flowise-embed` нужно заменить на путь к репозиторию: откройте свой репозиторий Github и копируете ту часть URL, которая после `https://github.com/`. В моём случае это будет `Vladibik/FlowiseChatEmbed`. Чтобы обновления применились сразу, добавим в конце `@latest`. Так в cdn-сервера будет взята именно последняя версия кода.
Итого, для моего случая:
было: https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js
стало: https://cdn.jsdelivr.net/gh/Vladibik/FlowiseChatEmbed@latest/dist/web.js
После сохранения нового кода встраивания на сайте, именно ваш репозиторий с изменением брендинга будет использоваться.
Теперь при помощи VSCode.
Напомню, у вас есть копия репозитория FlowiseChatEmbed. Скопируйте себе код из репозитория Github на вашу машину. Нажмите `Code` и скопируйте https-ссылку на ваш репозиторий:
![](https://habrastorage.org/getpro/habr/post_images/26a/1e0/a9a/26a1e0a9a3a0990fb0a6ac7156a8f356.jpg)
Для Windows: откройте Проводник и создайте новую папку там, где собираетесь сохранить код. В адресной строке Проводника введите cmd
и нажмите Enter
— откроется командная строка:
![](https://habrastorage.org/getpro/habr/post_images/7fc/663/938/7fc66393892e9c79ac1482dcdc23956f.jpg)
В командной строке вводите: git clone
и в конце вашу ссылку, например: git clone https://github.com/Vladibik/FlowiseChatEmbed.git
и нажмите Enter:
![](https://habrastorage.org/getpro/habr/post_images/6bb/e99/e65/6bbe99e65be2098a0eaf103092ec21fa.jpg)
Далее необходимо установить редактор кода. В примере буду использовать VSCode.
Скачайте, запустите и следуйте инструкциям.
Когда установка закончена, откройте сам инструмент. Предварительно нужно будет установить два дополнительных пакета. Откройте терминал:
![](https://habrastorage.org/getpro/habr/post_images/dd1/01b/28f/dd101b28fdbcfd966bb6acfc993b3335.jpg)
Важно, чтобы терминал был открыт в той папке, где находится ваш код. Если в вашем случае это не так, используйте команду cd
в терминале:
`cd название папки` — перейти в папку, которая находится в текущей;
`cd ..` — вернуться в папку выше (родительскую для текущей).
Чтобы не было больно набирать названия папок целиком, набирайте 2-3 символа и используйте клавишу Tab. Если похожих названий несколько и после нажатия Tab выбрано не то, что нужно, нажимайте ещё раз - названия будут перебираться. В терминале введите `yarn install` - эта команда установит проектные зависимости и позволит нам сделать ребилд, чтобы внести изменения: После окончания инсталляции, потребуется ещё одна команда, вводите там же: `yarn build`. Затем нам нужно найти файлы Badge.tsx и Bot.txs в проекте, они находятся в папке src/components, их и будем менять.
![](https://habrastorage.org/getpro/habr/post_images/44a/fc3/78a/44afc378a067e923eb2788119b9a0ceb.jpg)
Если ваша задача — просто изменить брендинг, открывайте Badge.tsx и ищите текст, обёрнутый в ссылку. Меняете текст и ссылку на свои и готово!
![](https://habrastorage.org/getpro/habr/post_images/95f/5b9/e7b/95f5b9e7b96bbc8ac9515211700c4d55.jpg)
Если вы хотите убрать брендинг совсем, открываете Bot.tsx и ищете строку c Badge (практически в самом низу) и просто удаляете её, или можно закомментировать:
![](https://habrastorage.org/getpro/habr/post_images/4a2/de8/f33/4a2de8f3378773291948845257e23967.jpg)
Теперь все изменения нужно сохранить в наш репозиторий. Для этого снова открываем терминал и выполняем уже знакомое `yarn build`. Чтобы изменения были сохранены в нашем репозитории, необходимо сделать commit, выбираем соответствующий пункт меню, добавляем комментарий, кликаем на иконку "+" (Stage Changes) и затем кликаем "Commit".
![](https://habrastorage.org/getpro/habr/post_images/19b/0a7/fed/19b0a7fed34405d7067595a5a3c3e83f.jpg)
После коммита появится кнопка Sync Changes, кликаем и по ней.
![](https://habrastorage.org/getpro/habr/post_images/8bf/f8e/a8a/8bff8ea8a7a7ac3d48c565a2b1191b13.jpg)
Если вдруг вы получите сообщение о том, что нужно в GIT добавить имя и почту, следует запустить командную строку (или GIT CMD) и выполнить две команды:
git config --global user.name "ваши имя и фамилия"
git config --global user.email "ваш email"
![](https://habrastorage.org/getpro/habr/post_images/d0b/d7a/31b/d0bd7a31b8d7519fb90d5ff10a6bbfa6.jpg)
Как только изменения попадут в GIT, необходимо внести изменения в код встраивания, они описаны в первом способе выше. Повторите их в точности, и всё применится хорошо. Надеюсь, материал будет полезен. Велкам с вопросами и пожеланиями.
milssky
Надеюсь, вы прочитали текст лицензии, под которой распространяется этот продукт и выполнили все его требования. Ведь правда, прочитали?