Использование 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 без подключения шаблона сайта

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

Bitrix выполнить произвольный sql запрос

В статье приведен пример как выполнить произвольный sql запрос используя стандартные средства Bitrix

Битрикс 24 удалить сделку

В статье приводятся способы удаления сделки.

Bitrix регистрация своего события

В статье приводится пример регистрации собственного события в bitrix и добавления на него обработчика.

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

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

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

В статье приводится пример кода для получения директории в которой находится файл компонента.

Комментарии

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