Отправка промта с сайта в телеграм бота, генерация картинок, как реализовать?

shurshur, с чего это в друг, бот фазер не может написать кому угодно ))), все можно.

Отправка промта с сайта в телеграм бота, генерация картинок, как реализовать?

конечно он сам не передает, но можно сделать !

Отправка промта с сайта в телеграм бота, генерация картинок, как реализовать?

Everything_is_bad, я могу с ним взаимодействовать через своего ботфазера.

Отправка промта с сайта в телеграм бота, генерация картинок, как реализовать?

Everything_is_bad, ботфазер? или вы про бота, который генерирует картинки, там есть бот, который генерирует картинки, я вот хочу его использовать, проще конечно найти сайт, и через него делать, по пи ! через бота дешевле, пока сайт не нашел, где запросы дешевые. и на сайтах тариф он месячный, не потратил поинты, все исчезли, а в боте, там купил и тратишь сколько хочешь, они не исчезает. Поинты, которые тратишь на генерацию картинок.

Подключение TonConnect UI CDN, как вывести номер кошелька, как правильно передавать payload?

Everything_is_bad, в том и дело причем тут ajax, я это сделал для того, так как я данные отправляю в контроллер и записываю в бд при оплате и т.д, вот и использую ajax, для получения ошибки и т.д.

Там в основном все доги для реакта и т.д, где импорт библиотек можно делать и все такое, я не использую реакт и подобное, я просто обычным способом пытаюсь сделать, использую cdn.

Столкнулся с проблемами, пытаюсь решить, по этому и задаю вопрос.

Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

Данный метод выводит, но если смотреть код страницы, то в head, не видно.

Как изменить размер svg-иконки в файле img.svg?

такой метод не работает

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, ну разницы нет где собирать, главное формат данного пакета, чтобы подходил, и тогда будет выводить иконки.

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, Понял, то есть, если на сайте иконок много, и на странице 20, то запрос будет один.
Да хочу в рамках vue3 сделать, чтобы все по феншуй было )

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, Все же пришли к тому, что спрайтами лучший вариант )))
И как я понял, для этого, нужно использовать icons.svg, где будет куча иконок и мы вытягивать их можем.

Таким образом:

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

Но и то как у меня щас, тож я так понимаю можно подключить один файл и вытягивать нужные иконки.
Я если верно понял, то подгружаем так:

import MyIcon from './assets/icons/iconsall.svg'

И выводим так: (где #home-icon), имя иконки.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

А или даже так можно выводить: (а он так каждый раз будет лесть и искать, это нагрузку не увеличит ?)

<svg class="icon">
  <use xlink:href="icons.svg#home-icon"></use>
</svg>

Сайт где я собираю иконки в пак, там есть для сохранения разные решения.
Вот думаю что поставить, чтобы сохранил в ...


Хотя смотрю он сохраняет, формат вроде, то что надо для спрайтов.

<symbol id="icon-ogo1l" viewBox="0 0 32 32">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</symbol>

Работает, и стили:

.icon {
width: 30px;
fill: #007bff;
}

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, А как выводить спрайтами, подключив один файл, где много иконок.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

1. Вставка SVG как кода ()
Преимущества:
Гибкость: Вы можете изменять цвет, размер и другие атрибуты SVG с помощью CSS или JavaScript.
Производительность: SVG, встроенные как код, не требуют дополнительных HTTP-запросов, что ускоряет загрузку страницы.
Анимация: Вы можете анимировать элементы SVG с помощью CSS или JavaScript.
Доступность: Можно добавить ARIA-атрибуты для улучшения доступности.

Недостатки:
Усложнение кода: Вставка SVG как кода увеличивает объём HTML-кода, что может сделать его менее читаемым.
Кэширование: SVG не кэшируются отдельно, так как они являются частью HTML.
SEO: Если SVG используется для декоративных целей, это не влияет на SEO. Однако, если SVG содержит текстовую информацию, её можно индексировать.

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
</svg>

2. Вставка SVG как изображения ()
Преимущества:
Простота: Вставка SVG через делает код чище и проще для чтения.
Кэширование: SVG, загруженные как изображения, кэшируются браузером, что улучшает производительность при повторных посещениях.
SEO: Вы можете использовать атрибуты alt и title для описания изображения, что полезно для SEO и доступности.
Удобство: Легко заменять иконки, не изменяя HTML-код.

Недостатки:
Ограниченная гибкость: Вы не можете изменять цвет или анимировать SVG с помощью CSS, если они вставлены через .
Дополнительные HTTP-запросы: Каждое изображение требует отдельного запроса, что может замедлить загрузку страницы.

<img src="/src/assets/icons/02-home-page.svg" alt="Домой" title="Перейти на главную страницу">

3. Альтернативный подход: использование с SVG-спрайтами

Этот подход сочетает в себе преимущества обоих методов. Вы создаёте SVG-спрайт (один файл с несколькими иконками) и используете его через .

Преимущества:
Кэширование: SVG-спрайт кэшируется как один файл.
Гибкость: Вы можете изменять цвет и размер иконок с помощью CSS.
Чистый код: HTML остаётся чистым, так как SVG-код находится в отдельном файле.

Создайте SVG-спрайт:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="home-icon" viewBox="0 0 32 32">
    <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
  </symbol>
</svg>

Используйте иконку в HTML:

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

------------------------
4. Что выбрать?

Используйте встроенный SVG ():
Если вам нужно изменять цвет или анимировать иконку.
Если иконка небольшая и используется один раз на странице.

Используйте :
Если иконка используется многократно и должна кэшироваться.
Если вам важны атрибуты alt и title для SEO.

Используйте SVG-спрайты:
Если у вас много иконок, и вы хотите сохранить гибкость и производительность.
------------------------
5. SEO и доступность
Для SEO всегда добавляйте атрибуты alt и title, если SVG используется как изображение ().
Для встроенного SVG используйте ARIA-атрибуты, такие как aria-label или role="img", чтобы улучшить доступность.
------------------------
Итог
Для простоты и SEO: Используйте .
Для гибкости и анимации: Используйте встроенный SVG ().
Для баланса: Используйте SVG-спрайты с .

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, так как лучше иконку выводить, в img, теге можно писать титле и алт, что плюс для сайта.

Там и класс прописать можно.


А тут как класс прописать?

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, как просто выводить с этим плагином.

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, да там плагин можно поставить, в нем видно ! но вс коде грузиться дольше, чем обычный просмотр фото в винде.

Насчет вывода в картинку, так? (кстати, работает).

<img src="assets/logo-letters.svg?component" alt="" title="">

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, А мне удобно так, я собрал пак и все, есть сайт, где я загружаю пак свой, и там удаляю, меняю, добавляю.

Вообще я подумал, ты прав, куда проще сразу в папке удалять или добавлять, минус, что не видно какая иконка в win10, надо открывать ее, чтоб видно было. Ну либо сразу на сайте выводить, чтоб видно было.

Минус данного модуля, что как картинку нельзя вывести или можно?, img, лучше для seo.

Насчет: (почему-то не заработало у меня)
https://www.npmjs.com/package/vite-svg-loader

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

MaxRyazan, а все понял, я пробовал метод vue-svg-sprite, но так и не вышло.
Значит, указываем папку и там каждая иконка должна отдельно лежать, а не в одном файле.
Хотя в этом есть смысл, скачал иконку и не надо запихивать в пакет иконок и потом все это сохранять, а сразу можно будет закинуть в папку.

Попробую данный метод, который советуешь.
Спасибо.

А в каком формате в файле должны быть иконки? да id есть.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="128" viewBox="0 0 752 128">
<svg id="icon-ogo1l" width="32" height="32" viewBox="0 0 32 32" x="0" y="0">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</svg>

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Антон Антон, так у меня и так собраны, я собираю обычно через сайт один, делаю себе сборку иконок одним файлом.

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

MaxRyazan, я одно понять не могу, почему такие сложности с внедрением таких простых элементов.

А данный модуль,как работает, там можно файл с иконками подключить, ну не где 1 иконка, а пакет целый и потом вытягивать нужные иконки и выводить.

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

а запросы как идти будет, у данного модуля, через http(s)?

Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

это все в рамках vue3? или же нет.