ascii art generator
1.0.0
Это генератор изображений ascii из текста с использованием htmx и Spring Boot. Это приложение можно использовать для создания символов ASCII из текста. Приложение создано с использованием Spring Boot и Htmx. Приложение использует htmx, чтобы сделать приложение интерактивным и выполнить весеннюю загрузку для обслуживания приложения.
Добро пожаловать, коллеги-разработчики, в путешествие в увлекательный мир веб-разработки, где мы собираемся приступить к созданию чего-то действительно увлекательного — нашего собственного генератора изображений ASCII! Представьте себе: берём обычный текст и превращаем его в увлекательное визуальное искусство. Захватывающе, правда? В этой статье мы погрузимся в магию совместной работы HTMX и Spring Boot, чтобы воплотить эту идею в жизнь.
HTMX — это волшебная палочка современной веб-разработки, известная своей простотой и удобством для пользователя. Он плавно соединяет интерфейсную и серверную части, что делает его идеальным помощником для создания интерактивных впечатлений. Теперь объедините это с надежностью платформы Spring Boot, и вы получите мощную комбинацию, готовую раскрыть творческий потенциал. Чтобы узнать больше о HTMX, вы можете посетить https://htmx.org/.
Наша главная цель? Создать генератор изображений ASCII, который придаст изюминку обычному тексту. Представьте себе, что вы вводите свою любимую цитату или простое сообщение и наблюдаете, как оно превращается в потрясающее произведение искусства ASCII. Речь идет не только о кодировании — речь идет о создании опыта, который приносит пользователю радость и творчество.
В ходе этого исследования мы раскроем тонкости этого динамичного сотрудничества. Мы устраним разрыв между сервером и браузером, продемонстрировав, как эти технологии работают рука об руку для создания уникального интерактивного веб-приложения. Мы сосредоточимся на том, чтобы сделать этот процесс доступным, приятным и, самое главное, удобным для пользователя.
Итак, приступим! Давайте перейдем к start.spring.io и настроим проект, как показано ниже:
Мы собираемся использовать Java 17 для этого проекта. Зависимости, которые мы здесь используем:
**Spring Web: **Он предоставляет такие важные компоненты, как контроллеры, DispatcherServlet и View Resolver, упрощая организацию обработки HTTP-запросов и реализацию архитектуры модель-представление-контроллер (MVC).
Thymeleaf : Thymeleaf, серверный механизм шаблонов Java, является ключевой зависимостью, часто связанной с веб-разработкой Spring Boot. Функционируя как механизм шаблонов представлений, Thymeleaf позволяет разработчикам создавать динамические и интерактивные веб-страницы, встраивая выразительные конструкции непосредственно в шаблоны HTML.
Мы собираемся использовать библиотеку Banana , которая представляет собой утилиту Figlet для Java, которая генерирует текстовые баннеры в различных шрифтах, состоящие из букв, состоящих из скоплений более мелких символов ASCII. Вы можете проверить это здесь: https://github.com/yihleego/banana
Теперь давайте откроем проект в выбранной вами IDE. Я собираюсь использовать Intellij Idea.
Добавьте также зависимость библиотеки Banana в ваш pom.xml.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Теперь приступим к написанию кода приложения. Для справки используйте приведенную ниже структуру папок.
Я создал шаблон пользовательского интерфейса в каталоге шаблонов, который выглядит примерно так (index.html)
<!doctype html >
< html lang =" en " >
< head >
< title > ASCII Art Generator </ title >
< link
href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css "
rel =" stylesheet "
/>
< script
src =" https://unpkg.com/[email protected] "
integrity =" sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC "
crossorigin =" anonymous "
> </ script >
</ head >
< body class =" bg-gray-100 " >
< div class =" container mx-auto p-8 " >
< h1 class =" mb-8 text-center text-4xl font-bold " > ASCII Art Generator </ h1 >
< div class =" mb-6 flex justify-center " >
< form id =" input-form " class =" text-center " >
< label for =" input-text " class =" mb-2 block " > Enter Text: </ label >
< input
type =" text "
id =" input-text "
name =" input-text "
required
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
/>
< br />
< label for =" font-select " class =" mb-2 mt-4 block " > Select Font: </ label >
< select
id =" font-select "
name =" font-select "
class =" w-full rounded-md border px-4 py-2 focus:border-blue-500 focus:outline-none "
> </ select >
< div hx-get =" /api/fonts " hx-trigger =" load " hx-target =" #font-select " > </ div >
< br />
< button
class =" mt-6 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
hx-post =" /api/ascii-art "
hx-target =" #ascii-art "
hx-swap =" outerHTML "
>
Generate ASCII Art
</ button >
</ form >
</ div >
< div class =" mt-10 flex justify-center " >
< pre id =" ascii-art " class =" text-center " > </ pre >
</ div >
< div class =" mt-8 flex justify-center space-x-4 " >
< button
class =" rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 "
id =" copyButton "
onclick =" copyToClipboard() "
style =" display: none; "
>
Copy
</ button >
< button
class =" rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700 "
id =" downloadButton "
onclick =" downloadFile() "
style =" display: none; "
>
Download
</ button >
</ div >
</ div >
< script >
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}
document . body . addEventListener ( 'htmx:afterSwap' , adjustButtonVisibility )
</ script >
</ body >
</ html >Этот файл представляет собой веб-страницу для генератора изображений ASCII, включающую платформу CSS Tailwind для стилизации и библиотеку HTMX для плавного взаимодействия между интерфейсом и сервером. Давайте разберем ключевые компоненты и функциональность кода:
Таблица стилей CSS Tailwind связана с CDN для целей стилизации.
Библиотека HTMX связана с CDN. HTMX используется для выполнения динамических запросов и обновления содержимого страницы без полной перезагрузки страницы.
Здесь мы используем несколько тегов HTMX, начиная сверху.
hx-get : атрибут hx-get указывает URL-адрес (/api/fonts) для выполнения запроса HTTP GET при возникновении события, указанного hx-trigger.
hx-trigger : этот hx-trigger="load" указывает, что запрос GET должен запускаться при загрузке страницы.
hx-target : Thehx-target="#font-select" обозначает элемент HTML с идентификатором font-select в качестве цели для обновления с помощью ответа на запрос GET. В этом случае параметры шрифта динамически загружаются в раскрывающийся список.
hx-post : атрибут hx-post указывает URL-адрес (/api/ascii-art) для выполнения запроса HTTP POST при нажатии кнопки.
hx-swap : hx-swap="outerHTML" указывает, что все содержимое целевого элемента должно быть заменено ответом на запрос POST.
Это теги, которые мы использовали здесь, а также приведенные ниже функции JavaScript для изменения поведения страницы.
function copyToClipboard ( ) {
const el = document . createElement ( 'textarea' )
el . value = document . getElementById ( 'ascii-art' ) . textContent
document . body . appendChild ( el )
el . select ( )
document . execCommand ( 'copy' )
console . log ( 'Copied to clipboard' )
document . body . removeChild ( el )
}Эта функция отвечает за копирование текстового содержимого изображения ASCII в буфер обмена.
Он создает новый элемент textarea , присваивает его значение текстовому содержимому элемента #ascii-art , добавляет textarea к телу документа, выбирает содержимое, выполняет команду «копировать», записывает сообщение на консоль и удаляет textarea из тела документа.
function downloadFile ( ) {
const asciiArtContent = document . getElementById ( 'ascii-art' ) . textContent
const blob = new Blob ( [ asciiArtContent ] , { type : 'text/plain' } )
const downloadLink = document . createElement ( 'a' )
downloadLink . href = window . URL . createObjectURL ( blob )
downloadLink . download = 'ascii_art.txt'
document . body . appendChild ( downloadLink )
downloadLink . click ( )
document . body . removeChild ( downloadLink )
}Эта функция отвечает за создание загружаемого файла, содержащего изображение ASCII.
Он извлекает текстовое содержимое элемента #ascii-art , создает Blob (большой двоичный объект), содержащий текст, создает ссылку ( <a> ) с URL-адресом, указывающим на Blob, устанавливает атрибут загрузки в ascii_art.txt. ', добавляет ссылку к телу документа, запускает щелчок по ссылке и удаляет ссылку из тела документа.
function adjustButtonVisibility ( ) {
const asciiArt = document . getElementById ( 'ascii-art' )
const copyButton = document . getElementById ( 'copyButton' )
const downloadButton = document . getElementById ( 'downloadButton' )
copyButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
downloadButton . style . display = asciiArt . textContent . trim ( ) ? 'inline-block' : 'none'
}Эта функция динамически настраивает видимость кнопок копирования и загрузки в зависимости от содержимого ASCII-изображения.
Он проверяет, не пусто ли обрезанное текстовое содержимое элемента #ascii-art . Если да, то кнопки отображаются ( 'inline-block' ), в противном случае они скрываются ( 'none' ).
Теперь у нас готов пользовательский интерфейс, который нам нужен для создания API /api/ascii-art и /api/fonts. Для этого мы будем использовать PageController, как показано ниже:
package dev . maheshbabu11 . asciiartgenerator ;
import io . leego . banana . BananaUtils ;
import io . leego . banana . Font ;
import org . springframework . web . bind . annotation .*;
import java . util . List ;
@ RestController
@ RequestMapping ( "/api" )
public class PageController {
@ GetMapping ( "/fonts" )
public String getFonts () {
List < String > options = Font . values (). stream (). map ( Font :: getName ). toList ();
StringBuilder optionList = new StringBuilder ();
options . forEach (
option -> {
String optionString = "<option value= " " + option + " " >" + option + "</option>" ;
optionList . append ( optionString );
}
);
return optionList . toString ();
}
@ PostMapping ( "/ascii-art" )
public String asciiArt ( @ RequestParam ( "input-text" ) String inputText ,
@ RequestParam ( "font-select" ) String font ) {
return "<pre id= " ascii-art " >" + BananaUtils . bananaify ( inputText , Font . get ( font )) + "</pre>" ;
}
}Конечно! Давайте разберем функциональность обоих API, определенных в предоставленном Java-коде:
/api/fonts: этот API вызывается для предоставления списка параметров шрифта, которые можно использовать в генераторе изображений ASCII. Он получает список названий шрифтов из перечисления Font , которое является частью библиотеки Banana. Используя API Java Stream, он сопоставляет каждое имя шрифта с элементом HTML <option> и добавляет их в StringBuilder. Метод возвращает объединение этих элементов <option> в одну строку HTML.
/api/ascii-art: этот API принимает введенный пользователем текст и выбранный шрифт в качестве параметров и соответствующим образом генерирует изображение ASCII. Он использует метод BanaUtils.bananaify, который затем используется для создания изображений ASCII на основе входного текста и выбранного шрифта. Сгенерированное изображение ASCII заключено в HTML-тег <pre> .
Теперь, когда у нас есть код, давайте запустим приложение. После запуска приложения вы можете перейти по адресу http://localhost:8080/ и опробовать приложение.
Вы можете проверить полный исходный код приложения здесь? GitHub — MaheshBabu11/ascii-art-generator: это генератор изображений ascii из текста с использованием htmx и…
Кроме того, он развернут при рендеринге, если вы хотите его попробовать https://ascii-art-generator.maheshbabu11.dev/
В этой статье мы создали генератор изображений ASCII с использованием HTMX и Spring Boot. HTMX делает наши веб-страницы более интерактивными, а Spring Boot обеспечивает надежную серверную часть. С их помощью мы создали инструмент, с помощью которого пользователи могут вводить текст, выбирать шрифты и мгновенно создавать изображения ASCII. Этот проект демонстрирует простоту и эффективность сочетания HTMX и Spring Boot для создания динамичных и привлекательных веб-приложений.
Приятного кодирования?!!! Оставить? если вам понравилось это читать.
