Image Classifier - Upload Images and Get Predictions

.button:hover { background-color: rgb(16, 110, 190); }

.button.disabled { pointer-events: none; background-color: #cccccc; color: #666666; }

/* Main section */

.main { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; /* Added background color / padding: 2rem; / Added padding */ }

.main .title h3 { font-size: 2.3rem; font-weight: 300; margin: 0.8rem 0; }

.hidden { display: none; }

.reveal { opacity: 0; }

.reveal:hover { opacity: 0.2; }

/* Upload box / .upload-box { font-size: 0.8rem; color: #666666; cursor: pointer; width: 20rem; / Increased width / height: 15rem; / Increased height */ background: #fff; border: 0.1rem dashed #838388; border-radius: 0.4rem; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 1rem 0 2rem 0; }

.upload-box.dragover { /* background-color: grey; */ color: #eeeeee; border: 0.1rem solid rgb(0, 120, 212); box-shadow: inset 0 0 0 0.1rem rgb(0, 120, 212); }

.upload-box:hover { border-color: rgb(0, 120, 212); }

.upload-box #image-preview { max-width: 18rem; /* Increased max width / max-height: 12rem; / Increased max height */ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); }

#image-result { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-height: 20rem; }

#image-box { position: relative; width: auto; float: left; margin-bottom: 2rem; }

#image-display { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-height: 20rem; }

#image-display.loading { filter: brightness(30%); }

#pred-result { color: white; font-size: 1.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; margin: 0 auto; }

/* Animation */ #spinner { box-sizing: border-box; stroke: #cccccc; stroke-width: 3px; transform-origin: 50%; animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(450deg); } } @keyframes line { 0% { stroke-dasharray: 2, 85.964; transform: rotate(0); } 50% { stroke-dasharray: 65.973, 21.9911; stroke-dashoffset: 0; } 100% { stroke-dasharray: 2, 85.964; stroke-dashoffset: -65.973; transform: rotate(90deg); } }