We animate tg gifts

Всем привет, извиняюсь заранее, раньше топики не писал)

Не так давно взял заказ по кодингу, где нужно было парсить нужные подарки и на моем сайте выводить их с анимацией, не понимал как сделать, минут 20 мучался и в итоге с ИИшкой за минут 10 разобрался (Она сначала тоже не вдупляла, сидели вместе выделывали)

К сути:

Как спарсить подарки тг и получить их анимации
Допустим разберем подарок по ссылке: https://t.me/nft/CandyCane-18951 где CandyCane это название подарка, - разделитель, 18951 номер подарка

Все данные о подарке лежат в html коде на подобных страницах.

Заходишь на любую ссылку

Telegram Messenger

Быстрый и безопасный мессенджер.

t.me

Жмешь F12 или ПКМ --> посмотреть код

Оттуда достаем:
Фон, градиент, узоры, саму анимацию подарка

Фон:

Ищешь в коде строку типа:

<canvas id="tgme_background" data-colors="dbddbb,6ba587,d5d88d,88b884"></canvas>

data-colors это цвета для анимации фона.

Копируешь их и втыкаешь в библиотеку TWallpaper от телеги:
https://telegram.org/js/tgwallpaper.min.js

Пример кода:
new TWallpaper(canvas, {
colors: ['#dbddbb', '#6ba587', '#d5d88d', '#88b884']
});

Все, фон крутится сам. Телега молодцы кста, либу норм запилили


Градиент:

Дальше в SVG коде найдешь такое:

<radialGradient>
<stop offset="0%" stop-color="#b77a77"></stop>
<stop offset="100%" stop-color="#814c52"></stop>
</radialGradient>

Два цвета - один в центре карточки, второй по краям. Копируешь их и всё


Узор:
Вот тут прикол. Телега хранит эти картинки на своем CDN. Ищи строку:

<image id="giftPattern" xlink:href="https://cdn4.telesco.pe/file/CMDk...">

Копируешь ПОЛНУЮ ссылку из xlink:href и вставляешь в свой код. Картинка подгрузится автоматом с серваков телеги.

Пример полной ссылки:
https://cdn4.telesco.pe/file/CMDkBwVvi5HY9tbgdocvslwRtu_K9xDIcR3kVBKOo05EaUiXsOmx1VKeqPCJWN-nkgIhDP7MX2heacSa6O9nM28O4PabQZDN_UJ47QqHcOsPEdLTles3OVNAfRy5PIQ0bkO10v4HulFI8H1oXQicJih2eyj-w7HR5IqDJRdP4TZZv50OFognHNs2YUY0jfWAqAHHsilk9OdrVm3b31wKHQTBqug3n9ji4-aVQXPw-Obk2MGRNSWC7uV6tHxP5qn-m9UXuut-lUucAf9DkgjT2n3Y6a4_DFutKbkUx3C65RNRavxMRNwmA-j3SqRito4EuyjcWhlsUvM0pmhUkAjBdg


Самое интересное, анимация подарка:

В коде ищешь:

<picture class="js-gift_model">
<source type="application/x-tgsticker"
srcset="https://cdn4.telesco.pe/file/sticker.tgs?token=AOTT9...">
</picture>

Файлы .tgs - это типа стикеры телеги, но на самом деле это просто Lottie JSON запакованный в GZIP

мне кажется самый простой способ конвертнуть это:

import gzip
import requests

url = "ссылка на tgs"
response = requests.get(url)
json_data = gzip.decompress(response.content)

with open('gift.json', 'wb') as f:
f.write(json_data)


Исходник скрипта для парсинга подарка(дада, сначала долистайте до сюда xDD ):

import requests
from bs4 import BeautifulSoup

def parse_gift(gift_slug):
url = f"

Telegram Messenger

Быстрый и безопасный мессенджер.

t.me

html = requests.get(url).text
soup = BeautifulSoup(html, 'html.parser')

#фон
canvas = soup.find('canvas', id='tgme_background')
colors = canvas['data-colors'].split(',')

#градиент
stops = soup.find_all('stop')
gradient = [stops[0]['stop-color'], stops[1]['stop-color']]

#паттерн
pattern = soup.find('image', id='giftPattern')
pattern_url = pattern['xlink:href']

#тгс
tgs = soup.find('source', {'type': 'application/x-tgsticker'})
tgs_url = tgs['srcset']

return {
'colors': colors,
'gradient': gradient,
'pattern': pattern_url,
'tgs': tgs_url
}

n = input("Введите название подарка с номером, формат CandyCane-18951: ")
print(parse_gift(n))

обработку ссылок не делал, ес чо

Установка библы:
pip install requests beautifulsoup4


TWallpaper: https://telegram.org/js/tgwallpaper.min.js
Lottie Player: https://lottiefiles.com/web-player


Если вам не жалко, то воткните симпу, хотя бы за старание)
Всем бобра