ascii art generator
1.0.0
Il s'agit d'un générateur d'art ascii à partir de texte utilisant HTML et Spring Boot. Cette application peut être utilisée pour générer de l'art ascii à partir de texte. L'application est construite à l'aide de Spring Boot et de HTML. L'application utilise le HTML pour rendre l'application interactive et Spring Boot pour servir l'application.
Bienvenue, amis développeurs, dans un voyage dans le monde fascinant du développement Web, où nous sommes sur le point de nous lancer dans la création de quelque chose de vraiment engageant : notre propre générateur d'art ASCII ! Imaginez ceci : prendre un texte ordinaire et le transformer en un art visuel captivant. Passionnant, non ? Dans cet article, nous plongerons dans la magie collaborative de HTMX et Spring Boot pour faire de cette vision une réalité.
HTMX est comme la baguette magique du développement Web moderne, connu pour sa simplicité et son approche conviviale. Il connecte de manière transparente le front-end et le back-end, ce qui en fait un compagnon idéal pour créer des expériences interactives. Maintenant, associez cela à la robustesse du framework Spring Boot et vous obtenez une combinaison puissante prête à libérer la créativité. Pour en savoir plus sur HTMX, vous pouvez consulter https://htmx.org/
Notre objectif principal ? Créer un générateur artistique ASCII qui ajoute une touche de style au texte brut. Imaginez-vous en train de taper votre citation préférée ou un simple message et de le regarder se transformer en une œuvre d'art ASCII visuellement époustouflante. Il ne s'agit pas seulement de coder, il s'agit de créer une expérience qui apporte joie et créativité à l'utilisateur.
Tout au long de cette exploration, nous découvrirons les subtilités de cette collaboration dynamique. Nous comblerons le fossé entre le serveur et le navigateur, en démontrant comment ces technologies fonctionnent main dans la main pour créer une application Web unique et interactive. Nous nous efforcerons de rendre le processus accessible, agréable et, surtout, convivial.
Alors, commençons ! Passons à start.spring.io et configurons le projet comme indiqué ci-dessous :
Nous allons utiliser Java 17 pour ce projet. Les dépendances que nous utilisons ici sont :
**Spring Web : **Il fournit des composants essentiels tels que des contrôleurs, le DispatcherServlet et View Resolver, facilitant l'organisation du traitement des requêtes HTTP et la mise en œuvre de l'architecture modèle-vue-contrôleur (MVC).
Thymeleaf : Thymeleaf, un moteur de modèles Java côté serveur, est une dépendance clé souvent associée au développement Web de Spring Boot. Fonctionnant comme un moteur de modèles de vue, Thymeleaf permet aux développeurs de créer des pages Web dynamiques et interactives en intégrant des constructions expressives directement dans des modèles HTML.
Nous allons utiliser une bibliothèque appelée Banana qui est un utilitaire FIGlet pour Java qui génère des bannières de texte, dans une variété de polices de caractères, composées de lettres constituées de conglomérats de caractères ASCII plus petits. Vous pouvez le consulter ici : https://github.com/yihleego/banana
Ouvrons maintenant le projet dans l'IDE de votre choix. Je vais utiliser Intellij Idea.
Ajoutez également la dépendance de la bibliothèque Banana à votre pom.xml.
<dependency>
<groupId>io.leego</groupId>
<artifactId>banana</artifactId>
<version>2.1.0</version>
</dependency>
Commençons maintenant par coder l'application. Veuillez utiliser la structure de dossiers ci-dessous pour référence
J'ai créé le modèle d'interface utilisateur dans le répertoire des modèles qui ressemble à ceci (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 >Ce fichier représente la page Web d'un générateur d'art ASCII, intégrant le framework CSS Tailwind pour le style et la bibliothèque HTMX pour une interaction transparente entre le front-end et le back-end. Décomposons les composants clés et les fonctionnalités du code :
La feuille de style CSS Tailwind est liée à partir d'un CDN à des fins de style.
La bibliothèque HTMX est liée à un CDN. HTMX est utilisé pour effectuer des requêtes dynamiques et mettre à jour le contenu de la page sans rechargement complet de la page.
Nous utilisons ici plusieurs balises HTMX en commençant par le haut
hx-get : L'attribut hx-get spécifie une URL (/api/fonts) pour effectuer une requête HTTP GET lorsque l'événement spécifié hx-trigger se produit.
hx-trigger : Ce hx-trigger="load" indique que la requête GET doit être déclenchée au chargement de la page.
hx-target : Thehx-target="#font-select" désigne l'élément HTML avec l'ID font-select comme cible de mise à jour avec la réponse de la requête GET. Dans ce cas, il charge les options de police de manière dynamique dans une liste déroulante.
hx-post : L'attribut hx-post spécifie une URL (/api/ascii-art) pour effectuer une requête HTTP POST lorsque l'on clique sur le bouton.
hx-swap : Le hx-swap="outerHTML" indique que tout le contenu de l'élément cible doit être remplacé par la réponse de la requête POST.
Ce sont les balises que nous avons utilisées ici en plus du fait que nous utilisons les fonctions JavaScript ci-dessous pour modifier le comportement de la page.
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 )
}Cette fonction est chargée de copier le contenu textuel de l'art ASCII dans le presse-papiers.
Il crée un nouvel élément textarea , définit sa valeur sur le contenu textuel de l'élément #ascii-art , ajoute la textarea au corps du document, sélectionne le contenu, exécute la commande « copier », enregistre un message sur la console et supprime la textarea du corps du document.
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 )
}Cette fonction est chargée de générer un fichier téléchargeable contenant l'art ASCII.
Il récupère le contenu textuel de l'élément #ascii-art , crée un Blob (grand objet binaire) contenant le texte, crée un lien ( <a> ) avec une URL pointant vers le Blob, définit l'attribut de téléchargement sur 'ascii_art.txt ', ajoute le lien au corps du document, déclenche un clic sur le lien et supprime le lien du corps du document.
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'
}Cette fonction ajuste dynamiquement la visibilité des boutons de copie et de téléchargement en fonction du contenu de l'art ASCII.
Il vérifie si le contenu textuel coupé de l'élément #ascii-art n'est pas vide. Si tel est le cas, les boutons sont configurés pour être affichés ( 'inline-block' ), sinon, ils sont configurés pour être masqués ( 'none' ).
Nous avons maintenant l'interface utilisateur prête dont nous avons besoin pour créer les API /api/ascii-art et /api/fonts . Nous utiliserons le PageController comme ci-dessous pour cela :
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>" ;
}
}Certainement! Décomposons les fonctionnalités des deux API définies dans le code Java fourni :
/api/fonts : Cette API est appelée pour fournir une liste d'options de police qui peuvent être utilisées dans le générateur d'art ASCII. Il récupère une liste de noms de polices à partir de l'énumération Font , qui fait partie de la bibliothèque Banana. À l'aide de l'API Java Stream, il mappe chaque nom de police à un élément HTML <option> et les ajoute à un StringBuilder. La méthode renvoie la concaténation de ces éléments <option> sous la forme d'une seule chaîne HTML.
/api/ascii-art : Cette API prend le texte saisi par l'utilisateur et la police sélectionnée comme paramètres et génère l'art ASCII en conséquence. Il utilise la méthode BanaUtils.bananaify pour générer des illustrations ASCII basées sur le texte saisi et la police sélectionnée. L'illustration ASCII générée est enveloppée dans une balise HTML <pre> .
Maintenant que nous avons le code, exécutons l'application. Une fois l'application démarrée, vous pouvez accéder à http://localhost:8080/ et essayer l'application.
Vous pouvez consulter le code source complet de l'application ici ? GitHub - MaheshBabu11/ascii-art-generator : Il s'agit d'un générateur d'art ascii à partir de texte utilisant htmx et…
De plus, il est déployé lors du rendu si vous souhaitez l'essayer https://ascii-art-generator.maheshbabu11.dev/
Dans cet article, nous avons créé un générateur d'art ASCII utilisant HTMX et Spring Boot. HTMX rend nos pages Web plus interactives et Spring Boot fournit un backend robuste. Avec ceux-ci, nous avons créé un outil permettant aux utilisateurs de saisir du texte, de choisir des polices et de générer instantanément des illustrations ASCII. Ce projet montre la simplicité et la puissance de la combinaison de HTMX et Spring Boot pour des applications Web dynamiques et attrayantes.
Bon codage ?!!! Laisser un ? si vous avez aimé le lire.
