Блог

Я хочу, чтобы мое веб — приложение показывало набор образцов изображений (образцы изображений я дам сам), и пользователь может выбрать одно из этих изображений для использования для кнопок «загрузить» и «отправить» на экране.

В основном я развертываю свою модель ML, которая делает прогнозы, отличные от изображения, загружаемого пользователем. Я хочу вместо этого привести несколько примеров изображений, чтобы пользователь мог лучше понять перспективу моделей.

Я не профессионал на стороне разработчиков, и мне очень трудно найти что-то похожее на это. Мой интерфейс-это HTML, CSS, JS, а мой бэкэнд-на Flask.

Самый простой способ отображения изображений-это иметь дивы с фоновыми изображениями и использовать flex для укладки. Div будет более гибким, когда дело доходит до масштабирования ваших стилей.

// 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;  } 

 lt;div class="container"gt;  lt;div class="imageContainer"gt;lt;/divgt;  lt;div class="imageContainer"gt;lt;/divgt;  lt;div class="imageContainer"gt;lt;/divgt;  lt;div class="imageContainer"gt;lt;/divgt;  lt;div class="imageContainer"gt;lt;/divgt; lt;divgt; 

Затем вы можете добавить дополнительные стили в свой div «imageContainer» по мере добавления кнопок загрузки.