Использование chatGpt в работе: генерация html

Продолжаем публикацию статей про использование chatGpt в работе разработчика. На этот раз попробуем генерировать html код через нейросети.

Первый запрос

напиши html код в котором будет 3 выпадающих списка, первый со значением: Екатеринбург, второй множественный со значениями: Услуга 1, Услуга 2, третий множественный со значениями: Тариф 1, Тариф 2

Ответ chatGpt

Вот пример HTML кода с тремя выпадающими списками:

<label for="city">Выберите город:</label>
    <select id="city">
        <option value="ekaterinburg">Екатеринбург</option>
    </select>
    <br>
    <label for="services">Выберите услуги:</label>
    <select id="services" multiple>
        <option value="service1">Услуга 1</option>
        <option value="service2">Услуга 2</option>
    </select>
    <br>
    <label for="tariffs">Выберите тарифы:</label>
    <select id="tariffs" multiple>
        <option value="tariff1">Тариф 1</option>
        <option value="tariff2">Тариф 2</option>
    </select>

Этот код создает три выпадающих списка: первый с выбором города (Екатеринбург), второй с множественным выбором услуг (Услуга 1, Услуга 2) и третий с множественным выбором тарифов (Тариф 1, Тариф 2).

Второй запрос

напиши html код в котором будет 9 блоков, блоки должны быть расположены по 3 блока в один ряд, всего 3 ряда. Размер одного блока 150 пикселей. Примени стиль css grid

Ответ chatGpt

Конечно, вот пример HTML кода с использованием CSS Grid для создания 9 блоков

<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 150px);
            grid-template-rows: repeat(3, 150px);
            gap: 5px;
        }

        .block {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

Этот код создаст 9 блоков, каждый из которых будет иметь размер 150x150 пикселей и будет расположены по 3 в ряд, используя свойство `grid` в CSS для создания сетки. Каждый блок будет иметь черную границу толщиной 1 пиксель и небольшой отступ для разделения блоков.

Ответ GigaChat

GigaChat сгенерировал точно такой же html код, даже атрибуты такие же как у chatGpt, поэтому чтобы не занимать место дублировать информацию не будем.

Вывод

С помощью генерации html кода через chatGpt и другие нейросети, можно быстро создать прототип страницы или просто заготовку для дальнейшей доработки. Удобно, что нейросеть сама добавляет атрибуты для элементов, что упрощает дальнейшее использование.
Как видно из примеров можно генерировать не только чистый html, но и добавлять css стили.

Присылайте свои примеры использования нейросетей в комментариях . Это будет полезно для всех нас, ведь так мы сможем узнать что-то новое и расширить свой кругозор

Рубрики: Нейросети

Если есть вопросы, что-то в статье не понятно или нашли ошибку, напишите об этом в комментариях, все комментарии читаются и по возможности материал будет доработан.
Популярные статьи

Bitrix сбросить буфер вывода

Функция RestartBuffer() в Bitrix используется для сброса буфера вывода. Она позволяет прервать вывод страницы на определенном этапе выполнения скрипта и начать вывод заново. В статье рассмотрим основные сценарии использования данной функции, рассмотрим пример кода.

Bitrix подключить класс компонента

В статье приводится пример того как можно подключить только компонент битрикс без подключения его шаблона, чтобы можно было вызвать его метод или получить значения свойств

Команда grep. Примеры использования

grep - удобная и быстрая команда, здесь приведены примеры как произвести рекурсивный поиск в каталоге, поиск среди запущенных процессов и другие.

Bitrix 24 получить ссылку на контакт, сделку, компанию, лид и т.д.

В статье приводится пример кода для получения ссылки на контакт, сделку, компанию, лид и т.д. с помощью метода \CCrmOwnerType::GetEntityShowPath()

Bitrix подключить модуль

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

Подключить bitrix без подключения шаблона сайта

В статье приводится пример кода подключения bitrix без подключения шаблона сайта. Так же описано когда это может пригодится.

Комментарии

Комментариев пока нет
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК