Quiero que mi aplicación web muestre un conjunto de imágenes de muestra (imágenes de muestra que me daré a mí mismo), y el usuario puede seleccionar entre esas imágenes para usar para el botón 'cargar' y 'enviar' en la pantalla.
Básicamente, estoy implementando mi modelo ML que hace diferentes predicciones a partir de la imagen que carga el usuario. Quiero dar algunas imágenes de muestra para usar en su lugar para que el usuario pueda comprender mejor la perspectiva de los modelos.
No soy un profesional en el lado de los desarrolladores y tengo muchas dificultades para encontrar algo similar. Mi interfaz es HTML, CSS, JS y mi backend está en Flask.
La forma más sencilla de mostrar imágenes es tener divs con imágenes de fondo y usar flex para diseñar. Un div será más flexible cuando se trata de escalar tus estilos.
// CSS
.container{ display: flex; gap: 5%; flex-wrap: wrap; } .imageContainer { flex: 1 1 200px; background-image: url('https://source.unsplash.com/random'); background-size: contain; background-repeat: no-repeat; background-position: center; } <div class="container"> <div class="imageContainer"></div> <div class="imageContainer"></div> <div class="imageContainer"></div> <div class="imageContainer"></div> <div class="imageContainer"></div> <div>Luego puede agregar más estilos a su div 'imageContainer' a medida que agrega los botones de carga.