Как перевести блоки кода в SPA приложении?

Question

[WhiteHat]

Есть SPA-сайт, состоит из блоков JS кода с html содержимым.

Мне нужно перевести все подобные блоки. Количество символов >100.000

Пример кода.

window.article_ios_connect = `
<div class="page-block" id="article_ios_connect" data-section>
	<div class="article">
		<div class="div-article-into center">
			<a href="#" onclick="handleScrollToParam('blog', 'articles');" class="button-grey round-200 w-inline-block">
				<img src="/index_files/images/arrow-left.png" loading="lazy" alt="Вернуться назад" class="icon-height" />
				<div>Назад</div>
			</a>
		</div>
		<div class="article-naw shadow-black">
			<div class="block-article-image">
				<img src="/index_files/images/article-apple.png" loading="lazy" alt="Фон у статьи" class="image-full article" />
				<div class="block-badge-article">
					<div class="badge white-all-time"><div>iOS</div></div>
				</div>
				<div class="article-name"><h1 class="text-header-big article-80">Как подключить VPN на iOS</h1></div>
			</div>
			<div class="div-article-into padding-30 back-black">
				<h2 class="text-header-normal">Подключение на iOS</h2>
				<p class="text-body-high">1. <a href="#">Скачайте приложение</a> для подключения.<br /></p>
				<p class="text-body-high">2. Скопируйте сервер в <a href="#" onclick="handleScrollToParam('cabinet', 'login');">личном кабинете</a> на сайте.</p>
				<p class="text-body-high">3. Перейдите в приложение и вставьте скопированный сервер.</p>
				<h2 class="text-header-normal">Важно</h2>
				<p class="text-body-high">Инструкции для всех устройств идентичны. Если вы не разобрались, подробную инструкцию по подключению вы можете найти на сайте приложения.</p>
				<p class="text-body-high">Сервер для подключения можно вставить в любое время, но работать подключение будет только после оплаченной подписки.</p>
				<p class="text-body-high">Подключиться можно одновременно со всех своих устройств без ограничений.</p>
				<div class="article-column">
					<a href="#" onclick="handleScrollToParam('blog', 'articles');" class="button-grey article-button w-inline-block">
						<img src="/index_files/images/arrow-left.png" loading="lazy" alt="Стрелка влево" class="icon-height" />
						<div>К статьям</div>
					</a>
					<a href="#" onclick="handleScrollToParam('contact');" class="button-grey article-button w-inline-block">
						<div>Нужна помощь</div>
						<img src="/index_files/images/arrow-right.png" loading="lazy" alt="Стрелка вправо" class="icon-height" />
					</a>
				</div>
			</div>
		</div>
	</div>
</div
`

1. У переводчиков, которые правильно обрабатывают такой текст ограничения 5000 символов на Python - deep-translator.
2. Через chatGPT ограничение 35.000 символов и уж очень долго по времени.
3. Сделать словарь и заменить переменные в тексте не вариант.

Подскажите кто знает как можно решить эту задачу.

Comments

[Refguser]

А почему 3- не вариант?

И откуда про ограничения chatGPT? Там можно и большие объёмы обрабатывать (но для этого нужно покупать АПИ).

[Aetae]

По логике тебе нужна функция которая пропарсит твой текст и на выходе выдаст массив фраз и шаблон вида <div title="__0__">__1__</div> в который можно обратно запихнуть переведённое. Самому конечно покоавряться можно, но проще погуглить что-то типа i18n html extract - наверняка уже есть готовая либа которая это умеет.

Answer 1

[Vindicar]

1. Регулярками выдернуть содержимое переменных
2. Для поиска текстовых фрагментов можно использовать модуль xml.dom.pulldom, хотя тут может и BeautifulSoup справится.
3. Фрагменты уже отправляешь в желаемый сервис переводчик. Возможно, стоит их отправлять группами с разделителем.
4. Конструируешь итоговый код - хоть поиском-заменой, хоть постепенной записью нового XML. А может, сгенерируешь сразу код с поддержкой локализации, на будущее.

Comments

[WhiteHat]

Пробовал, выдергивал текст внутри id, переводил и перезаписывал, но есть проблема. При инициализации BeautifulSoup код оптимизируется и приводится к стандартизированному формату.

Но если встречается подобный код, он ломается.

Object.defineProperty(window, 'push', {
    get() {
        return `
            <div class="page-block gdpr" id="push";>
                ${localStorage.getItem("cookieAgreementClosed") === "true" ? ``:
                `
                <div class="push-block padding-30 round-30 background ${localStorage.getItem("cookieAgreementClosed") === "true" ? `hide`:`show`}" id="cookie-agreement" style="opacity: ${localStorage.getItem("cookieAgreementClosed") === "true" ? `0`:`100`};">
                    <p class="text-body-medium white-all-time">Мы используем cookies для улучшения работы нашего сайта. Продолжая пользоваться этим сайтом, вы соглашаетесь на <a href="#" class="link-light white-under white-all-time">использование</a> cookies.</p>
                    <a href="#" onclick="closeCookieAgreement();" id="close-cookie-agreement" class="link-block-2 w-inline-block">
                        <img src="/index_files/images/close.svg" loading="lazy" alt="Принять Cookies" class="img-pish-widget" />
                    </a>
                </div>
                `}
            </div> 
        `;   
    }
});

[Vindicar]

WhiteHat, ну вот за этим и нужны регулярки. Лови пары бэктиков (``) и собирай строки между ними.