<MyRusakov.ru />

Создание нейросетей на Python

Создание нейросетей на Python

Этот курс научит Вас созданию нейросетей на Python. Курс рассчитан на начинающих. Вся информация идёт от простого к сложному очень маленькими шажками. При этом глубокое знание математики не требуется. Поскольку в курсе Вы будете получать эти знания по мере необходимости.

Из курса Вы узнаете всю необходимую теорию и терминологию. Научитесь создавать нейросети самых разных архитектур и обучать их. Также Вы создадите собственный фреймворк. Что очень важно проделать для грамотного использования того же PyTorch. Затем Вы изучите и сам PyTorch.

Помимо уроков к курсу идут упражнения для закрепления материала.

Ещё Вы получите Бонусы, дополняющие основной курс: "Распознавание изображений", "Анализ настроения по тексту отзыва", "Программирование на Python с Нуля до Гуру".

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Генератор изображений с текстом на JavaScript

Генератор изображений с текстом на JavaScript

Здравствуйте! Сегодня мы рассмотрим с Вами пример программы на JavaScript, с помощью которой мы сможем создавать простые изображения с текстом.

Код:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Генератор картинок</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        #canvasContainer {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }

        #canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3 class="h3 my-4">Генератор картинок</h3>
        <div class="row">
            <div class="col-md-6 mt-4">
                <div id="canvasContainer">
                    <canvas id="canvas"></canvas>
                </div>
            </div>
            <div class="col-md-6">

                <label for="bgColor">Цвет фона:</label>
                <input type="color" id="bgColor" class="form-control mb-2">
                <label for="text">Текст:</label>
                <input type="text" id="textInput" value="Привет, мир!" class="form-control mb-2">
                <label for="textColor">Цвет текста:</label>
                <input type="color" id="textColor" class="form-control mb-2">
                <label for="fontSize">Размер шрифта:</label>
                <input type="number" id="fontSize" min="1" value="20" class="form-control mb-2">
                <label for="textX">Позиция текста по X:</label>
                <input type="range" id="textX" min="0" max="400" value="200" class="form-control mb-2">
                <label for="textY">Позиция текста по Y:</label>
                <input type="range" id="textY" min="0" max="200" value="100" class="form-control mb-2">
                <button id="generateImageButton" class="btn btn-primary">Сгенерировать изображение</button>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

    <script>

        const el = (selector) => document.querySelector(selector);


        document.addEventListener('DOMContentLoaded', function () {

            const generateButton = el('#generateImageButton');
            const bgColor = el('#bgColor');
            const text = el('#textInput');
            const textColor = el('#textColor');
            const fontSize = el('#fontSize');
            const textX = el('#textX');
            const textY = el('#textY');
            const maxWidth = canvas.width - textX;

            generateButton.addEventListener('click', generateImage);
            textX.addEventListener('change', onTextPositionChange);
            textY.addEventListener('change', onTextPositionChange);
            fontSize.addEventListener('change', onTextPositionChange);

            function onTextPositionChange(e) {
                generateImage();
            }

            // функция, которая рисует 
            function generateImage() {

                const canvas = el('#canvas');
                const ctx = canvas.getContext('2d');

                // Очищаем холст
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // Устанавливаем фоновый цвет
                ctx.fillStyle = bgColor.value;
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Устанавливаем цвет текста и размер шрифта
                ctx.font = parseInt(fontSize.value) / 2 + 'px Arial';
                ctx.fillStyle = textColor.value;

                const words = text.value.split(' ');
                let line = '';
                const lines = [];

                for (let i = 0; i < words.length; i++) {
                    const testLine = line + words[i] + ' ';
                    const metrics = ctx.measureText(testLine);
                    const testWidth = metrics.width;
                    if (testWidth > maxWidth && i > 0) {
                        lines.push(line);
                        line = words[i] + ' ';
                    } else {
                        line = testLine;
                    }
                }
                lines.push(line);

                // Рисуем текст на холсте
                const lineHeight = parseInt(fontSize.value) + 5;
                for (let j = 0; j < lines.length; j++) {
                    ctx.fillText(lines[j], parseInt(textX.value), parseInt(textY.value) + (j * lineHeight));
                }
            }
        });

    </script>
</body>

</html>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.