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

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? или же нет.

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

А что в vue3, проблемы, чтобы организовать такое, я сегодня еще пол дня пытался подключить стек svg, и выводить с него нужные иконки ), пока не сделал.

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

Работает кстати, спасибо
Разбираюсь, как добавить кеювордс и дискрипшион и в глобальный вывод хеад стили и т.д, ну и вывести какие-то подключаемые js и стили css.

const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse

// Функция для загрузки шаблонов
function loadTemplate(url) {
	return fetch(url)
		.then(response => response.text())
		.catch(() => '<div>Ошибка загрузки контента</div>')
}

// Компонент для главной страницы
const Home = {
	setup() {
		const title = useTitle('Главная страница') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/main.php')
	},
	template: `<div v-html="content"></div>`,
}

// Компонент для страницы контактов
const Contacts = {
	setup() {
		const title = useTitle('Контакты') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/contacts.php')
	},
	template: `<div v-html="content"></div>`,
}

// Настройка маршрутов
const routes = [
	{ path: '/', component: Home },
	{ path: '/contacts', component: Contacts },
]

// Создание роутера
const router = createRouter({
	history: createWebHistory(),
	routes,
})

// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
	const title = to.meta.title || 'Мой сайт' // Используйте meta-поля в маршрутах
	useTitle(title) // Обновляем заголовок
})

// Создание Vue приложения
createApp({}).use(router).mount('#app')

Пробовал такой вариант, не работает.

const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse

// Функция для загрузки шаблонов
function loadTemplate(url) {
	return fetch(url)
		.then(response => response.text())
		.catch(() => '<div>Ошибка загрузки контента</div>')
}

// Компонент для главной страницы
const Home = {
	setup() {
		const title = useTitle('Главная страница') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/main.php')
	},
	template: `<div v-html="content"></div>`,
}

// Компонент для страницы контактов
const Contacts = {
	setup() {
		const title = useTitle('Контакты') // Устанавливаем заголовок

		// Устанавливаем description и keywords
		const metaDescription = document.querySelector('meta[name="description"]')
		const metaKeywords = document.querySelector('meta[name="keywords"]')

		if (metaDescription) {
			metaDescription.setAttribute('content', 'Описание главной страницы')
		}
		if (metaKeywords) {
			metaKeywords.setAttribute('content', 'нумерология, калькуляторы, главная')
		}

		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/contacts.php')
	},
	template: `<div v-html="content"></div>`,
}

// Настройка маршрутов
const routes = [
	{
		path: '/',
		component: Home,
		meta: {
			title: 'Главная страница',
			description: 'Описание главной страницы',
			keywords: 'нумерология, калькуляторы, главная',
		},
	},
	{
		path: '/contacts',
		component: Contacts,
		meta: {
			title: 'Контакты',
			description: 'Описание страницы контактов',
			keywords: 'нумерология, контакты',
		},
	},
]

// Создание роутера
const router = createRouter({
	history: createWebHistory(),
	routes,
})

// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
	// Устанавливаем заголовок страницы
	const title = to.meta.title || 'Нумерология - калькуляторы'
	useTitle(title)

	// Устанавливаем description и keywords
	const metaDescription = document.querySelector('meta[name="description"]')
	const metaKeywords = document.querySelector('meta[name="keywords"]')

	if (metaDescription) {
		metaDescription.setAttribute(
			'content',
			to.meta.description || 'Описание по умолчанию'
		)
	}
	if (metaKeywords) {
		metaKeywords.setAttribute(
			'content',
			to.meta.keywords || 'ключевые слова по умолчанию'
		)
	}
})

// Создание Vue приложения
createApp({}).use(router).mount('#app')