Перестаем платить за создание WhitePage и пишем собственный генератор на Python!

D2

D2

Администратор
Регистрация
19 Фев 2025
Сообщения
4,380
Реакции
0
Всем приветствую! Поздравляю вас с наступающим 2025 годом! Пусть он принесет вам много ярких моментов, новых свершений и, конечно же, удачи во всех начинаниях. Желаю каждому из вас заработать побольше денег, чтобы в новом году не было ни финансовых проблем, ни лишних забот. Пусть удача всегда будет на вашей стороне, а вы не попадете в неприятные ситуации, особенно не встретите на своем пути товарища майора. Главное, конечно, желаю всем вам здоровья — оно всегда на первом месте, ведь без него все остальное теряет смысл. Пусть в новом году ваши близкие будут рядом, а жизнь будет полна радости и благополучия!
Это уже моя третья статья за все время, и, несмотря на опыт, я понимаю, что всегда есть над чем работать и чему учиться. Поэтому, если вдруг в процессе чтения вы заметите какие-то грамматические или логические ошибки, прошу не судить меня слишком строго. Мы все учимся, и каждый новый опыт делает нас только лучше! Начнем!

Введение
Наверное, каждый, кто хоть раз столкнулся с таргетированным трафиком и работал с рекламой в таких системах, как Google Ads или Facebook Ads (и им подобные), задавал себе один и тот же вопрос: где же можно найти качественную WhitePage для своего проекта? Вопрос этот на самом деле не так уж прост, ведь от того, насколько грамотно будет построена эта страница, зависит успех всей рекламной кампании. Поэтому поиски готовых решений или готовых шаблонов не всегда оправданы. Хотя, конечно, можно попробовать воспользоваться уже существующими вариантами: взять готовые шаблоны, написать что-то самостоятельно, заказать разработку у специалистов. Однако, каждый из этих путей имеет свои недостатки. На поиск и адаптацию шаблонов уходит немало времени, а самостоятельная разработка требует знаний и навыков в программировании, что не всегда бывает под рукой. В некоторых случаях все это также может повлечь за собой дополнительные расходы, особенно если речь идет о заказе работы у профессионалов.
К тому же, частенько возникающая проблема - это необходимость гибко адаптировать контент под конкретные нужды и сделать так, чтобы он соответствовал всем техническим требованиям для того, чтобы привлекать нужную аудиторию и эффективно выполнять рекламную задачу.
Именно поэтому, чтобы решить все эти вопросы и значительно упростить процесс, мы предлагаем более удобный и эффективный подход. Вместо того чтобы заниматься поиском готовых шаблонов или тратить время и деньги на разработку, ниже мы создадим свой генератор WhitePage. Итак, приступим:


Начало: установка необходимых ресурсов.
Первым делом нам необходимо установить Python 3.13.1 с официального сайта.
  1. Переходим по ссылке https://www.python.org/ftp/python/3.13.1/python-3.13.1-amd64.exe и скачиваем инсталлятор Питона нужной нам версии.
  2. После скачивания запускаем инсталлятор и следуем всем инструкциям по установке. Не забываем добавить Python в PATH (если вы забыли это сделать в установщике, то это не беда, можно добавить Python в PATH вручную).
  3. После успешной установки проверим, корректно ли мы установили Python. Переходим в CMD (WIN + R -> CMD) и пишем py --version, если установка прошла корректно, то вам придет ответ с вашей версией Python.
Регистрация на сайте Pexels и получение API ключа
  1. Переходим по ссылке https://www.pexels.com/api/ и нажимаем на кнопку "Get Started" и проходим простую регистрацию.
  2. После прохождения регистрации возвращаемся обратно сюда https://www.pexels.com/api/ и нажимаем на кнопку "Your API key"
  3. Создаем свою компанию и после этого вас переносит на страницу с вашим API ключом.
5cn20UP.png


Установка необходимых зависимостей для нашего скрипта
Откройте CMD и выполните следующую команду: pip install requests g4f jinja2
  • requests - для работы с изображениями через Pexels API.
  • g4f - для использования GPT-4 через gpt4free.
  • jinja2 - для работы с шаблонами HTML.

Создание скрипта для генерации WhitePage страниц

1. Импорт необходимых библиотек:
Ни один скрипт не обходится без импорта необходимых библиотек, поэтому давайте сделаем это:
Python: Скопировать в буфер обмена
Код: 
import os
import random
import requests
import g4f
from jinja2 import Template
  • os: используется для работы с операционной системой.
  • random: используется для генерации случайных цветов в формате hex
  • requests: библиотека для выполнения HTTP-запросов, используется для работы с Pexels API
  • g4f: это модуль для работы с GPT-4 через альтернативные бесплатные провайдеры
  • jinja2: используется для рендеринга шаблонов HTML с данными.
2. Функция get_openai_response(prompt)
Эта функция генерирует ответ с помощью claude-3.5-sonnet (через g4f) на основе переданного запроса (prompt)
Python: Скопировать в буфер обмена
Код: 
def get_openai_response(prompt):
    """Генерация контента с помощью gpt4free."""
    try:
        response = g4f.ChatCompletion.create(
            model="claude-3.5-sonnet",
            messages=[{"role": "user", "content": prompt}],
            provider=g4f.Provider.Blackbox
        )
        return response if response else "Извините, произошла ошибка при генерации текста."
    except Exception as e:
        print("Ошибка генерации контента:", e)
        return "Извините, произошла ошибка при генерации текста."
  • используется модель claude-3.5-sonnet для генерации текста.
  • запрос отправляется в виде сообщения с ролью "user".
  • функция возвращает сгенерированный ответ или сообщение об ошибке, если генерация не удалась.
Можно заняться кастомизацией этого скрипта на этом моменте: вы можете использовать любой доступный провайдер и модуль в библиотеке g4f (gpt4free). Список всех доступных провайдеров и моделей доступен в репозитории Gpt4Free на Github https://github.com/xtekky/gpt4free/blob/main/docs/providers-and-models.md. Для замены провайдера необходимо поменять значение в пункте provider=g4f.Provider.СЮДА-ВВОДИТЕ-ЗНАЧЕНИЕ-ПРОВАЙДЕРА. Для замены модели необходимо поменять значение в пункте model="название-вашей-модели".

3. Функция generate_random_color()
Генерирует случайный цвет в шестнадцатеричном формате.
Python: Скопировать в буфер обмена
Код: 
def generate_random_color():
    """Генерация случайного цвета в формате hex."""
    return "#" + ''.join(random.choices('0123456789ABCDEF', k=6))
  • используется метод random.choices(), чтобы выбрать 6 случайных символов из набора 0123456789ABCDEF (которые представляют возможные символы для цвета).
  • генерируется строка в формате #XXXXXX.
4. Функция search_images_via_pexels(query)
Функция выполняет поиск изображений через API Pexels по заданному запросу.
Python: Скопировать в буфер обмена
Код: 
def search_images_via_pexels(query):
    """Поиск изображений через Pexels API."""
    api_key = "your api key"  # Замените на ваш ключ API Pexels
    url = f"https://api.pexels.com/v1/search?query={query}&per_page=5"
    headers = {'Authorization': api_key}
 
    response = requests.get(url, headers=headers)
 
    if response.status_code == 200:
        data = response.json()
        image_urls = [photo['src']['original'] for photo in data.get('photos', [])]
        return image_urls
    else:
        print(f"Ошибка при поиске изображений: {response.status_code}")
        return []
  • формируется запрос к API Pexels для поиска изображений по ключевому слову (query).
  • отправляется GET-запрос с авторизацией через ключ API.
  • если запрос успешен (код состояния 200), извлекаются URL изображений из ответа и возвращаются как список.
  • в случае ошибки возвращается пустой список.
5. Функция generate_html(title, content, images, company_name)
Эта функция генерирует HTML-страницу на основе шаблона Jinja2.
Python: Скопировать в буфер обмена
Код: 
def generate_html(title, content, images, company_name):
    """Генерация HTML контента с использованием шаблона Jinja2."""
    primary_color = generate_random_color()
    secondary_color = generate_random_color()
    background_color = generate_random_color()
 
    # Шаблон HTML с улучшенным расположением изображений рядом с текстом
    template = Template(
        """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
        /* Здесь находится стиль для страницы */
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>{{ company_name }} - {{ title }}</h1>
    </header>
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        <a href="#">About Us</a>
    </div>
    <div class="container">
        <h2>About {{ company_name }}</h2>
     
        {% for section in content %}
            <div class="content-section">
                <div>
                    <h3>{{ section.title }}</h3>
                    <p>{{ section.text }}</p>
                </div>
                <img src="{{ images[loop.index0] }}" alt="Image related to {{ section.title }}">
            </div>
        {% endfor %}
     
        <a href="#" class="cta">Learn More</a>
    </div>
    <footer>
        <p>&copy; 2024 {{ company_name }}. All rights reserved.</p>
    </footer>
</body>
</html>
        """
    )

    return template.render(
        title=title,
        content=content,
        images=images,
        primary_color=primary_color,
        secondary_color=secondary_color,
        background_color=background_color,
        company_name=company_name
    )
  • генерируются случайные цвета для элементов страницы.
  • используется шаблон HTML, который включает динамическую вставку контента, изображений, и стилей.
  • вставляются параметры:
    • title: заголовок страницы.
    • content: содержимое страницы, разделенное на части.
    • images: изображения, полученные с Pexels.
    • company_name: название компании.
  • рендеринг шаблона с помощью template.render(), который заполняет шаблон реальными данными.
6. Функция save_html_to_file(html_content, title)
Сохраняет сгенерированный HTML-контент в файл.
Python: Скопировать в буфер обмена
Код: 
def save_html_to_file(html_content, title):
    """Сохранение HTML контента в файл."""
    folder_path = "folder_result"
    os.makedirs(folder_path, exist_ok=True)
    file_path = os.path.join(folder_path, f"{title.replace(' ', '_').lower()}.html")
    with open(file_path, "w", encoding="utf-8") as file:
        file.write(html_content)
    return file_path
  • cоздается папка folder_result, если ее нет
  • формируется путь к файлу, где будет сохранен HTML (с именем файла на основе title) (путь по умолчанию: C:\Users\YOURPCNAME\folder_result)
  • открывается файл для записи и записывается HTML-контент.
7. Основная функция main()
Основная логика нашего скрипта.
Python: Скопировать в буфер обмена
Код: 
def main():
    """Основная функция для генерации белых страниц."""
    company_name = input("Введите название вашей компании: ")
    topic = input("Введите тему для белой страницы: ")
    print("Генерация контента, подождите...")
 
    # Генерация контента с GPT-4
    prompt = f"Write professional, topic-specific, and visually appealing content for a landing page about '{topic}'. Ensure the content is broken down into sections such as Introduction, Details, Features, etc., and is clearly structured."
    generated_content = get_openai_response(prompt)

    # Структурирование контента
    content = [
        {"title": "Introduction", "text": generated_content[:300]},
        {"title": "Details", "text": generated_content[300:600]},
        {"title": "Features", "text": generated_content[600:900]}
    ]

    # Поиск изображений
    images = search_images_via_pexels(topic)

    # Генерация HTML
    html_content = generate_html(topic, content, images, company_name)

    # Сохранение в файл
    file_path = save_html_to_file(html_content, topic)

    print(f"Белая страница успешно сгенерирована и сохранена по адресу {file_path}")
  • при запуске запрашивает название компании и тему страницы.
  • генерирует контент для лендинга с помощью библиотеки gf4 (Gpt4Free)
  • структурирует полученный контент на несколько разделов (например, введение, детали, особенности).
  • выполняет поиск изображений через Pexels.
  • генерирует HTML-контент с помощью функции generate_html.
  • сохраняет результат в файл и выводит путь к файлу.

Тестирование:

Спойлер: ИСХОДНЫЙ КОД СКРИПТА
Python: Скопировать в буфер обмена
Код: 
import os
import random
import requests
import g4f
from jinja2 import Template

def get_openai_response(prompt):
    """Генерация контента с помощью gpt4free."""
    try:
        response = g4f.ChatCompletion.create(
            model="claude-3.5-sonnet",
            messages=[{"role": "user", "content": prompt}],
            provider=g4f.Provider.Blackbox  # Замените на другого провайдера, если требуется
        )
        return response if response else "Извините, произошла ошибка при генерации текста."
    except Exception as e:
        print("Ошибка генерации контента:", e)
        return "Извините, произошла ошибка при генерации текста."

def generate_random_color():
    """Генерация случайного цвета в формате hex."""
    return "#" + ''.join(random.choices('0123456789ABCDEF', k=6))

def search_images_via_pexels(query):
    """Поиск изображений через Pexels API."""
    api_key = "your api key"  # Замените на ваш ключ API Pexels
    url = f"https://api.pexels.com/v1/search?query={query}&per_page=5"
    headers = {'Authorization': api_key}
 
    response = requests.get(url, headers=headers)
 
    if response.status_code == 200:
        data = response.json()
        image_urls = [photo['src']['original'] for photo in data.get('photos', [])]
        return image_urls
    else:
        print(f"Ошибка при поиске изображений: {response.status_code}")
        return []

def generate_html(title, content, images, company_name):
    """Генерация HTML контента с использованием шаблона Jinja2."""
    primary_color = generate_random_color()
    secondary_color = generate_random_color()
    background_color = generate_random_color()

    # Шаблон HTML с улучшенным расположением изображений рядом с текстом
    template = Template(
        """<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: {{ background_color }};
            color: {{ primary_color }};
        }
        header {
            background-color: {{ primary_color }};
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
        }
        .navbar {
            display: flex;
            justify-content: center;
            background-color: {{ secondary_color }};
            padding: 10px 0;
        }
        .navbar a {
            text-decoration: none;
            color: white;
            padding: 10px 20px;
            margin: 0 10px;
            font-weight: bold;
        }
        .navbar a:hover {
            background-color: {{ primary_color }};
        }
        .container {
            max-width: 1000px;
            margin: 40px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: {{ secondary_color }};
        }
        h2 {
            color: {{ primary_color }};
            margin-bottom: 20px;
        }
        p {
            margin-bottom: 15px;
            line-height: 1.8;
        }
        footer {
            text-align: center;
            padding: 10px 0;
            background-color: {{ primary_color }};
            color: white;
            font-size: 0.9em;
        }
        .cta {
            display: block;
            width: fit-content;
            margin: 20px auto;
            padding: 10px 20px;
            background-color: {{ secondary_color }};
            color: white;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.2em;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .cta:hover {
            background-color: {{ primary_color }};
        }
        .content-section {
            display: flex;
            align-items: center;
            margin-bottom: 40px;
            justify-content: space-between;
        }
        .content-section img {
            max-width: 48%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .content-section div {
            flex: 1;
            margin-right: 20px;
        }
        .content-section h3 {
            color: {{ primary_color }};
            font-size: 1.5em;
            margin-bottom: 15px;
        }
        .content-section p {
            font-size: 1.1em;
        }
        .icon-box {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }
        .icon-box div {
            text-align: center;
            width: 30%;
        }
        .icon-box img {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
        }
        .icon-box h4 {
            font-size: 1.2em;
            color: {{ primary_color }};
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>{{ company_name }} - {{ title }}</h1>
    </header>
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
        <a href="#">About Us</a>
    </div>
    <div class="container">
        <h2>About {{ company_name }}</h2>
     
        {% for section in content %}
            <div class="content-section">
                <div>
                    <h3>{{ section.title }}</h3>
                    <p>{{ section.text }}</p>
                </div>
                <img src="{{ images[loop.index0] }}" alt="Image related to {{ section.title }}">
            </div>
        {% endfor %}
     
        <div class="icon-box">
            <div>
                <img src="https://img.icons8.com/ios-filled/50/000000/idea.png" alt="Idea Icon">
                <h4>Innovative Ideas</h4>
                <p>We focus on delivering creative and out-of-the-box solutions.</p>
            </div>
            <div>
                <img src="https://img.icons8.com/ios-filled/50/000000/time.png" alt="Time Icon">
                <h4>Time Efficiency</h4>
                <p>We deliver projects within deadlines, ensuring quality and efficiency.</p>
            </div>
            <div>
                <img src="https://img.icons8.com/ios-filled/50/000000/rocket.png" alt="Rocket Icon">
                <h4>Fast Growth</h4>
                <p>Our methods drive fast growth for your business.</p>
            </div>
        </div>

        <a href="#" class="cta">Learn More</a>
    </div>
    <footer>
        <p>&copy; 2024 {{ company_name }}. All rights reserved.</p>
    </footer>
</body>
</html>
        """
    )

    return template.render(
        title=title,
        content=content,
        images=images,
        primary_color=primary_color,
        secondary_color=secondary_color,
        background_color=background_color,
        company_name=company_name
    )

def save_html_to_file(html_content, title):
    """Сохранение HTML контента в файл."""
    folder_path = "folder_result"
    os.makedirs(folder_path, exist_ok=True)
    file_path = os.path.join(folder_path, f"{title.replace(' ', '_').lower()}.html")
    with open(file_path, "w", encoding="utf-8") as file:
        file.write(html_content)
    return file_path

def main():
    """Основная функция для генерации белых страниц."""
    company_name = input("Введите название вашей компании: ")
    topic = input("Введите тему для белой страницы: ")
    print("Генерация контента, подождите...")

    # Генерация контента с GPT-4
    prompt = f"Write professional, topic-specific, and visually appealing content for a landing page about '{topic}'. Ensure the content is broken down into sections such as Introduction, Details, Features, etc., and is clearly structured."
    generated_content = get_openai_response(prompt)

    # Структурирование контента
    # Пример разделения текста на части. Вам нужно будет обработать полученный текст вручную или использовать парсинг.
    content = [
        {"title": "Introduction", "text": generated_content[:300]},
        {"title": "Details", "text": generated_content[300:600]},
        {"title": "Features", "text": generated_content[600:900]}
    ]

    # Поиск изображений
    images = search_images_via_pexels(topic)

    # Генерация HTML
    html_content = generate_html(topic, content, images, company_name)

    # Сохранение в файл
    file_path = save_html_to_file(html_content, topic)

    print(f"Белая страница успешно сгенерирована и сохранена по адресу {file_path}")

if __name__ == "__main__":
    main()

Соберем наш скрипт воедино, запустим его с помощью командной строки и приступим к тестированию.
  1. открываем CMD в том месте, где расположен наш скрипт (если это рабочий стол, то WIN + R -> CMD) и вводим следующую команду: py yournamescript.py .
  2. если вы не допустили никаких ошибок при написании скрипта, то скрипт выдаст вам результат:
    ALyqpYX.png
  3. вводим название нашей компании и жмем ENTER
  4. следующий этап: ввод тематики нашей whitepage:
    epOCTvW.png
  5. нажимаем ENTER и ждем результат генерации нашей whitepage. этот процесс занимает не более минуты.
  6. после успешной генерации контента вы получите следующий результат:
    GUt5WCs.png


    ВАЖНО! ПРИ РАБОТЕ СО СКРИПТОМ НЕОБХОДИМО ИСПОЛЬЗОВАТЬ VPN (если вы в РФ), т.к. Pexels не работает в России. В противном случае вы будете получать ошибку 522.
Давайте посмотрим на сгенерированный результат:
nl7GYdF.png



Не плохо, не правда ли? Даже на стадии чернового исполнения скрипт уже предоставляет множество возможностей, позволяя легко генерировать контент, интегрировать изображения и стилизовать страницы с помощью случайных цветов и шаблонов. Однако его потенциал далеко не исчерпан — это всего лишь базовая версия, которую можно кастомизировать и развивать по своему усмотрению.
Для начала, один из очевидных путей для улучшения этого скрипта — добавление проверки на генерируемые цвета. В текущем виде цвета создаются случайным образом, что, безусловно, может быть интересно для случайных экспериментов. Однако для коммерческих или более серьезных проектов важно учитывать читаемость и эстетику. С помощью дополнительных проверок можно гарантировать, что цвета, такие как фон, шрифты и кнопки, будут гармонично сочетаться друг с другом и обеспечивать хороший контраст, чтобы текст был всегда легко читаем. Это можно достичь, например, при помощи алгоритмов, которые проверяют разницу яркости между цветами и предупреждают о слишком близких оттенках.
Кроме того, данный скрипт можно легко адаптировать для различных нужд, добавляя новые элементы и функции. Например, можно внедрить анимации — как для визуальных элементов (кнопки, изображения, текстовые блоки), так и для переходов между разделами страницы. Анимации и переходы могут не только сделать страницу более динамичной, но и улучшить взаимодействие с пользователем, сделав его более приятным и плавным. Для этого можно использовать библиотеки, такие как CSS3 Animations или GSAP, которые позволят добавить красивые эффекты с минимальными усилиями.
Ещё один аспект, который можно развить — это расширение функционала контента. В текущей версии предусмотрено деление контента на несколько разделов (например, "Introduction", "Details", "Features"), но можно добавить возможность более сложной структуры. Например, можно реализовать поддержку видео, отзывов клиентов, интерактивных элементов, таких как формы обратной связи или калькуляторы. Это откроет новые горизонты для кастомизации лендингов.
Помимо этого, можно добавить поддержку различных типов контента и источников. Например, интеграция с другими API (такими как Unsplash для поиска изображений) или использование динамических данных (например, информация из базы данных или внешнего источника) позволят создавать страницы, которые будут обновляться и адаптироваться под изменяющиеся требования.
Не стоит забывать и о возможности интеграции с аналитикой и SEO-оптимизацией. С помощью простых изменений в коде можно добавить поддержку мета-тегов, описание для социальных сетей, генерацию карты сайта и других элементов, которые помогут улучшить видимость страницы в поисковых системах и ускорить загрузку.
В общем, этот скрипт — не просто инструмент для генерации белых страниц, это мощная база для создания высококачественных, динамических веб-страниц. Возможности для кастомизации безграничны, и с каждым новым шагом можно улучшать внешний вид, функциональность и взаимодействие с пользователем.

Заключение:

Данный скрипт представляет собой мощный инструмент для создания динамических веб-страниц с минимальными усилиями. Благодаря своей гибкости и возможности кастомизации, он становится отличной отправной точкой для разработки красивых и функциональных лендингов, которые легко адаптируются под любые нужды. Улучшение визуальных элементов, добавление анимаций, настройка цветовой схемы и расширение функционала открывают широкие горизонты для дальнейшей работы. Используя эту базу, вы сможете создавать страницы, которые не только привлекут внимание, но и обеспечат высокий уровень взаимодействия с пользователями, улучшая опыт и производительность вашего сайта. К сожалению, я не трафер и не занимаюсь проливом таргетированной рекламы через ADS площадки, поэтому не могу проверить этот инструмент в боевых условиях, но я уверен, что при должной кастомизации он будет с легкостью проходить проверки модерации. Всем спасибо за прочтение, надеюсь эта статья была для вас полезной. Еще раз, с наступающим 2025 годом друзья!

Авторство AGN
Специально для https://xss.is/
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу