Как создать AI-генератор изображений с нуля? 🤔
Разберёмся шаг за шагом, как собрать собственное веб-приложение, которое будет превращать текстовое описание в изображения с помощью API Hugging Face. Всё, что потребуется — немного знаний в HTML, CSS и JavaScript. Это отличный проект для начинающих: простой в реализации и дающий впечатляющий результат!
Скачать весь код проекты вы можете в конце статьи
📚 Содержание
🚀 Зачем делать такой проект?
🛠️ Что мы будем делать?
📁 Структура проекта
1️⃣ HTML (index.html)
2️⃣ CSS (style.css)
3️⃣ JavaScript (script.js)
💡 Результат
📌 Советы и идеи для улучшения
🙋 Часто задаваемые вопросы (FAQ)
✅ Заключение
🚀 Зачем делать такой проект?
Представь, ты всего за пару часов создаёшь веб-приложение, которое превращает текст в изображения с помощью искусственного интеллекта. Звучит как магия? А это всего лишь комбинация HTML, CSS, JavaScript и внешнего API. 🤖✨
Вот почему такой проект — настоящая находка для новичка:
Практика с API — ты научишься отправлять запросы на внешний сервер и обрабатывать ответы. Это ключевой навык современного веб-разработчика!
Крутой визуал — результат твоей работы будет сразу виден. Вводишь текст — получаешь яркое изображение. Это очень увлекает и вдохновляет.
Закрепление знаний — HTML, CSS, JS — всё в одном месте. Причём не в абстрактных примерах, а в настоящем мини-приложении.
Светлая и тёмная тема — тренд последних лет. Мы сделаем кнопку-переключатель между ними — и ты узнаешь, как это реализуется на практике.
Портфолио — такой проект точно не останется незамеченным. Он показывает, что ты умеешь работать с API, создавать интерфейсы и думаешь о пользователе.
Если ты искал проект, который и полезный, и красивый, и действительно интересный — ты его нашёл.
🛠️ Что мы будем делать?
Давай представим: ты открываешь страницу, вводишь фразу вроде "замок на облаках во время заката", нажимаешь кнопку — и через пару секунд получаешь уникальные изображения, созданные ИИ. Именно это мы и будем реализовывать!
Мы создадим полноценное веб-приложение, в котором пользователь сможет:
Вводить текстовое описание (prompt), описывающее воображаемую сцену
Выбирать модель генерации изображений (например, Stable Diffusion)
Настраивать количество изображений — от одной до четырёх
Задавать желаемое соотношение сторон: квадрат, горизонталь или вертикаль
Нажимать кнопку "Сгенерировать" и мгновенно видеть результат
Сохранять изображения на свой компьютер 💾
А ещё — переключать тему между светлой и тёмной. Удобно, современно и красиво.
Такой проект поможет тебе освоить реальные навыки веб-разработки и понять, как работают современные AI-инструменты.
📁 Структура проекта
Прежде чем писать код, нужно правильно организовать проект. Это важный шаг: чёткая структура поможет тебе легче ориентироваться и вносить изменения в будущем.
Создай отдельную папку и назови её, например, ai-image-generator. Внутри этой папки создай 3 основных файла:
index.html— здесь будет находиться основная разметка: структура страницы, кнопки, поля ввода и выпадающие спискиstyle.css— файл со стилями, в котором мы сделаем современный и адаптивный дизайн, а также реализуем тёмную и светлую темуscript.js— JavaScript-файл, который отвечает за логику: обработку данных, подключение к API, генерацию изображений и взаимодействие с интерфейсом
Всё просто и понятно. Уже через несколько минут у тебя будет основа, с которой можно начинать творить!
1️⃣ HTML (index.html)
Начнём с самого главного — с каркаса нашего приложения. Именно HTML отвечает за структуру страницы: как всё выглядит, где расположены кнопки, поля, заголовки. Здесь мы опишем, что пользователь увидит в браузере.
HTML — это основа, на которую затем «надеваются» стили (CSS) и логика (JavaScript).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI Image Generator Kodik APP</title>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</div>
<h1>AI Image Generator</h1>
</div>
<button class="theme-toggle">
<i class="fa-solid fa-moon"></i>
</button>
</header>
<div class="main-content">
<form action="#" class="prompt-form">
<!-- Prompt Textarea Container -->
<div class="prompt-container">
<textarea class="prompt-input" placeholder="Describe your imagination in detail..." spellcheck="false" autofocus required></textarea>
<button type="button" class="prompt-btn" title="Get Random Prompt">
<i class="fa-solid fa-dice"></i>
</button>
</div>
<!-- Prompt Actions / Buttons -->
<div class="prompt-actions">
<div class="select-wrapper">
<select class="custom-select" id="model-select" required>
<option value="" selected disabled>Select Model</option>
<option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev</option>
<option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</option>
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option>
<option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option>
<option value="stabilityai/stable-diffusion-3-medium-diffusers">Stable Diffusion 3</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="count-select" required>
<option value="" selected disabled>Image Count</option>
<option value="1">1 Image</option>
<option value="2">2 Images</option>
<option value="3">3 Images</option>
<option value="4">4 Images</option>
</select>
</div>
<div class="select-wrapper">
<select class="custom-select" id="ratio-select" required>
<option value="" selected disabled>Aspect Ratio</option>
<option value="1/1">Square (1:1)</option>
<option value="16/9">Landscape (16:9)</option>
<option value="9/16">Portrait (9:16)</option>
</select>
</div>
<button type="submit" class="generate-btn">
<i class="fa-solid fa-wand-sparkles"></i>
Generate
</button>
</div>
</form>
<!-- Result Gallery Grid -->
<div class="gallery-grid"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>2️⃣ CSS (style.css)
Теперь, когда у нас есть структура, пора сделать приложение по-настоящему красивым и приятным для глаз. Именно CSS отвечает за внешний вид всех элементов: от кнопок до фона.
В нашем случае мы создадим современный дизайн с:
Плавными анимациями
Адаптивной версткой, чтобы всё выглядело хорошо и на компьютере, и на телефоне
Светлой и тёмной темой, между которыми пользователь может переключаться в один клик
Стильными кнопками, полями ввода и карточками с изображениями
Мы также подключим шрифт Inter с Google Fonts — он выглядит современно и читаемо.
Такой интерфейс приятно использовать, и он ничем не уступает внешне готовым сервисам в интернете!
/* Importing Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--color-primary: #5C56E1;
--color-primary-dark: #5b21b6;
--color-accent: #8B5CF6;
--color-card: #FFFFFF;
--color-input: #F1F1FF;
--color-text: #09090E;
--color-placeholder: #5C5A87;
--color-border: #D4D4ED;
--color-gradient: linear-gradient(135deg, #5C56E1, #8B5CF6);
}
body.dark-theme {
--color-card: #1E293B;
--color-input: #141B2D;
--color-text: #F3F4F6;
--color-placeholder: #A3B6DC;
--color-border: #334155;
background: var(--color-card);
background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
}(Полный код можно взять на github. Ссылка в конце статьи — просто вставь его в style.css)
3️⃣ JavaScript (script.js)
HTML отвечает за структуру, CSS — за внешний вид, а вот JavaScript вдохнёт в наше приложение настоящую жизнь.
С его помощью мы:
Обработаем ввод пользователя — текстовое описание, выбранную модель и параметры генерации
Отправим запрос к API Hugging Face, чтобы получить изображения
Отобразим изображения в красивой сетке с эффектами загрузки
Добавим функциональность кнопки "случайная подсказка", которая автоматически вводит интересные идеи
Реализуем переключение между светлой и тёмной темой
Здесь ты поработаешь с DOM, событиями, асинхронными запросами (fetch) и многим другим. Это отличная тренировка для развития настоящих навыков JavaScript-разработки!
👉 Вставь свой API ключ Hugging Face вместо PASTE-YOUR-API-KEY:
const promptForm = document.querySelector(".prompt-form");
const themeToggle = document.querySelector(".theme-toggle");
const promptBtn = document.querySelector(".prompt-btn");
const promptInput = document.querySelector(".prompt-input");
const generateBtn = document.querySelector(".generate-btn");
const galleryGrid = document.querySelector(".gallery-grid");
const modelSelect = document.getElementById("model-select");
const countSelect = document.getElementById("count-select");
const ratioSelect = document.getElementById("ratio-select");
const API_KEY = "PASTE-YOUR-API-KEY"; // Hugging Face API Key
// Example prompts
const examplePrompts = [
"A magic forest with glowing plants and fairy homes among giant mushrooms",
"An old steampunk airship floating through golden clouds at sunset",
"A future Mars colony with glass domes and gardens against red mountains",
"A dragon sleeping on gold coins in a crystal cave",
"An underwater kingdom with merpeople and glowing coral buildings",
"A floating island with waterfalls pouring into clouds below",
"A witch's cottage in fall with magic herbs in the garden",
"A robot painting in a sunny studio with art supplies around it",
"A magical library with floating glowing books and spiral staircases",
"A Japanese shrine during cherry blossom season with lanterns and misty mountains",
"A cosmic beach with glowing sand and an aurora in the night sky",
"A medieval marketplace with colorful tents and street performers",
"A cyberpunk city with neon signs and flying cars at night",
"A peaceful bamboo forest with a hidden ancient temple",
"A giant turtle carrying a village on its back in the ocean",
];Если у тебя нет ключа, зарегистрируйся бесплатно на huggingface.co и получи его в разделе Access Tokens
(Полный код можно взять на github. Ссылка в конце статьи)
💡 Результат
Когда ты завершишь этот проект, у тебя будет не просто набор файлов — а настоящее мини-приложение, которое выглядит профессионально и работает с реальным искусственным интеллектом.
Ты сможешь:
Ввести любое воображаемое описание — и получить сгенерированное изображение, будто бы из фантазии
Использовать разные модели для генерации, в том числе популярные версии Stable Diffusion
Сохранять понравившиеся картинки и делиться ими с друзьями
Переключать тему оформления, в зависимости от времени суток или настроения 🌞🌙
И главное — ты сам это сделал. От начала и до конца. Такой результат даёт мощный заряд уверенности в себе и мотивации двигаться дальше!
📌 Советы и идеи для улучшения
Проект уже готов, но на этом можно не останавливаться. Вот как ты можешь прокачать его дальше:
Избранное — сделай возможность добавлять лучшие изображения в отдельную галерею
Редактирование запросов — добавь кнопку повторной генерации, где можно изменить prompt без полной перезагрузки формы
История — сохраняй предыдущие запросы и изображения в
localStorage, чтобы пользователь мог вернуться к ним позжеОбратная связь — позволить пользователю оценить результат или оставить комментарий
Поделиться — добавь возможность делиться изображением через ссылку или экспортировать в соцсети
Это отличный способ развивать проект и одновременно прокачивать свои навыки!
🙋 Часто задаваемые вопросы (FAQ)
🔑 Где взять API-ключ Hugging Face?
Перейди на сайт huggingface.co, создай аккаунт (если его ещё нет), затем зайди в раздел Settings > Access Tokens и сгенерируй новый ключ. Вставь его в переменную API_KEY в script.js.
🖼️ Сколько изображений можно сгенерировать за раз?
Ты можешь выбрать от 1 до 4 изображений. Это значение настраивается в выпадающем списке на странице.
⚠️ Почему не загружается изображение?
Возможные причины:
Неверный API-ключ
Нестабильное подключение к интернету
Ошибка на стороне модели (в логах консоли браузера можно увидеть детали)
🌗 Как работает переключение темы?
Сайт запоминает выбранную тему (светлую или тёмную) и сохраняет её в localStorage, а также учитывает системные настройки браузера.
📱 Работает ли это на мобильных?
Да, интерфейс адаптирован для мобильных устройств. Все элементы масштабируются, а галерея изображений перестраивается под экран.
📤 Могу ли я делиться результатами?
Конечно! Нажми на иконку скачивания под изображением — файл сохранится, и ты сможешь отправить его друзьям или опубликовать в соцсетях.
✅ Заключение
Вот и всё — ты только что прошёл путь от пустой папки до готового AI-приложения, которое генерирует изображения из текста. 🔥
Ты разобрался с тем, как:
использовать HTML для построения интерфейса
применять CSS для создания адаптивного и современного дизайна
подключить JavaScript и взаимодействовать с внешним API
Этот проект — не просто учебный. Он выглядит достойно, работает стабильно и показывает, что ты умеешь строить настоящие веб-инструменты.
Продолжай экспериментировать:
пробуй новые модели
меняй интерфейс
добавляй новые функции
Каждое улучшение будет делать тебя сильнее как разработчика. Удачи в твоём пути! 🚀
Скачать исходный код можно из нашего GitHub
Проходи практические уроки!
Получи сертификат!
Не нашли нужной статьи?
Напишите нам и ее сделаем!
Проходи практические уроки!
Получи сертификат!