deeploy/computer-vision-demo

1:root {2     --background: 0 0% 100%;3     --foreground: 222.2 84% 4.9%;4     --card: 0 0% 100%;5     --card-foreground: 222.2 84% 4.9%;6     --popover: 0 0% 100%;7     --popover-foreground: 222.2 84% 4.9%;8     --primary: 221.2 83.2% 53.3%;9     --primary-foreground: 210 40% 98%;10     --secondary: 210 40% 96.1%;11     --secondary-foreground: 222.2 47.4% 11.2%;12     --muted: 210 40% 96.1%;13     --muted-foreground: 215.4 16.3% 46.9%;14     --accent: 210 40% 96.1%;15     --accent-foreground: 222.2 47.4% 11.2%;16     --destructive: 0 84.2% 60.2%;17     --destructive-foreground: 210 40% 98%;18     --border: 214.3 31.8% 91.4%;19     --input: 214.3 31.8% 91.4%;20     --ring: 221.2 83.2% 53.3%;21     --radius: 0.5rem;22 }23 24 25 * {26     margin: 0;27     padding: 0;28     box-sizing: border-box;29 }30 31 body {32     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",33         Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",34         "Helvetica Neue", sans-serif;35     background-color: hsl(var(--background));36     color: hsl(var(--foreground));37     line-height: 1.5;38     min-height: 100vh;39     transition: background-color 0.2s;40     overflow-y: scroll;41 }42 43 .container {44     max-width: 1400px;45     margin: 0 auto;46     padding: 1rem;47 }48 49 header {50     display: flex;51     justify-content: space-between;52     align-items: center;53     padding: 1rem 0;54     border-bottom: 1px solid hsl(var(--border));55     margin-bottom: 2rem;56 }57 58 h1 {59     font-size: 1.5rem;60     font-weight: 600;61 }62 63 .grid {64     display: grid;65     gap: 1.5rem;66 }67 68 .grid-cols-2 {69     grid-template-columns: repeat(2, minmax(0, 1fr));70 }71 72 .mb-2 {73    margin-bottom: 2rem;74 }75 76 .card {77     background-color: hsl(var(--card));78     border: 1px solid hsl(var(--border));79     border-radius: var(--radius);80     padding: 1.5rem;81     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);82 }83 84 .card-header {85     margin-bottom: 1rem;86 }87 88 .card-title {89     font-size: 1.25rem;90     font-weight: 600;91     margin-bottom: 0.5rem;92 }93 94 .card-description {95     color: hsl(var(--muted-foreground));96     font-size: 0.875rem;97 }98 99 .preview-area {100     position: relative;101     width: 100%;102     height: 300px;103     border: 2px dashed hsl(var(--border));104     border-radius: var(--radius);105     display: flex;106     flex-direction: column;107     justify-content: center;108     align-items: center;109     overflow: hidden;110     margin-bottom: 1rem;111 }112 113 .text-output-area {114     width: 100%;115     height: 500px;116     border: 2px dashed hsl(var(--border));117     border-radius: var(--radius);118     display: flex;119     flex-direction: column;120     justify-content: center;121     align-items: center;122     overflow: scroll;123 }124 125 .preview-area.has-image {126     border: none;127 }128 129 .preview-area img {130     max-width: 100%;131     max-height: 100%;132     object-fit: contain;133 }134 135 .preview-placeholder {136     text-align: center;137     color: hsl(var(--muted-foreground));138 }139 140 .preview-placeholder svg {141     width: 3rem;142     height: 3rem;143     margin-bottom: 1rem;144     color: hsl(var(--muted-foreground));145 }146 147 .btn {148     display: inline-flex;149     align-items: center;150     justify-content: center;151     border-radius: var(--radius);152     font-size: 0.875rem;153     font-weight: 500;154     transition: all 0.2s;155     padding: 0.5rem 1rem;156     cursor: pointer;157     border: 1px solid transparent;158 }159 160 .btn-primary {161     background-color: hsl(var(--primary));162     color: hsl(var(--primary-foreground));163 }164 165 .btn-primary:hover {166     background-color: hsl(var(--primary) / 0.9);167 }168 169 .btn-secondary {170     background-color: hsl(var(--secondary));171     color: hsl(var(--secondary-foreground));172     border-color: hsl(var(--border));173 }174 175 .btn-secondary:hover {176     background-color: hsl(var(--secondary) / 0.9);177 }178 179 .btn-group {180     display: flex;181     gap: 0.5rem;182 }183 184 .tabs {185     display: flex;186     border-bottom: 1px solid hsl(var(--border));187     margin-bottom: 1rem;188 }189 190 .tab {191     padding: 0.5rem 1rem;192     cursor: pointer;193     border-bottom: 2px solid transparent;194     font-size: 0.875rem;195     font-weight: 500;196     color: hsl(var(--muted-foreground));197 }198 199 .tab.active {200     color: hsl(var(--primary));201     border-bottom-color: hsl(var(--primary));202 }203 204 .results {205     margin-top: 1rem;206     border-top: 1px solid hsl(var(--border));207     padding-top: 1rem;208 }209 210 .result-item {211     padding: 0.5rem;212     border-radius: var(--radius);213     margin-bottom: 0.5rem;214     background-color: hsl(var(--secondary));215 }216 217 .result-label {218     font-weight: 500;219 }220 221 .result-confidence {222     color: hsl(var(--muted-foreground));223     font-size: 0.75rem;224 }225 226 .bounding-box {227     position: absolute;228     border: 2px solid hsl(var(--primary));229     background-color: hsl(var(--primary) / 0.2);230 }231 232 233 /* Updated tabs styling for collapsible applications */234 .applications-container {235     display: flex;236     flex-direction: column;237     gap: 1rem;238     margin-bottom: 1rem;239 }240 241 .application-tab {242     border: 1px solid hsl(var(--border));243     border-radius: var(--radius);244     overflow: hidden;245 }246 247 .application-header {248     display: flex;249     justify-content: space-between;250     align-items: center;251     padding: 0.75rem 1rem;252     background-color: hsl(var(--secondary));253     cursor: pointer;254     user-select: none;255 }256 257 .application-header:hover {258     background-color: hsl(var(--secondary) / 0.9);259 }260 261 .application-title {262     font-weight: 500;263     display: flex;264     align-items: center;265     gap: 0.5rem;266 }267 268 .application-icon {269     width: 1.25rem;270     height: 1.25rem;271 }272 273 .application-content {274     padding: 0 1rem;275     max-height: 0;276     overflow: hidden;277     transition: max-height 0.1s ease-out;278 }279 280 .application-tab.active .application-content {281     padding: 1rem;282     max-height: 2000px;283     transition: max-height 0.2s ease-in;284 }285 286 .application-arrow {287     transition: transform 0.2s ease;288 }289 290 .application-tab.active .application-arrow {291     transform: rotate(180deg);292 }293 294 /* -- */295 296 @media (max-width: 768px) {297     .grid-cols-2 {298         grid-template-columns: 1fr;299     }300 }301 302  303  .input-group {304    margin-bottom: 4px;305  }306  307  .input-group label {308    display: block;309    margin-bottom: 4px;310    font-weight: 500;311    font-size: 0.875rem;312    color: var(--foreground);313  }314  315  .input-group input {316    width: 100%;317    padding: 10px 12px;318    font-size: 0.9375rem;319    border: 1px solid hsl(var(--border));320    border-radius: var(--radius);321    transition: var(--transition);322    box-shadow: var(--shadow-sm);323  }324  325  .input-group input::placeholder {326    color: #9ca3af; /* Placeholder text color */327  }328  329  .input-group input:focus {330    outline: none;331    border-color: #6b7280;332    box-shadow: var(--shadow-focus), var(--shadow-sm);333  }334  335  .helper-text {336    margin-top: 6px;337    font-size: 0.75rem;338    color: #6b7280; /* Muted gray for helper text */339  }340 341  .hidden {342    display: none;343  }344 345  .confidence-slider input[type="range"] {346    width: 100%;347    appearance: none;348    height: 6px;349    background: hsl(var(--border));350    border-radius: var(--radius);351    outline: none;352    transition: background 0.2s;353}354 355.confidence-slider input[type="range"]::-webkit-slider-thumb {356    appearance: none;357    width: 16px;358    height: 16px;359    border-radius: 50%;360    background: hsl(var(--primary));361    cursor: pointer;362    transition: background 0.2s;363}364 365.confidence-slider input[type="range"]::-webkit-slider-thumb:hover {366    background: hsl(var(--primary) / 0.9);367}368 369/* Sample images collapsible section */370.sample-images-container {371    border-top: 1px solid hsl(var(--border));372    margin-top: 1rem;373}374 375.collapsible-header {376    display: flex;377    justify-content: space-between;378    align-items: center;379    padding: 0.75rem 0;380    cursor: pointer;381    font-weight: 500;382    user-select: none;383}384 385.collapsible-header:hover {386    color: hsl(var(--primary));387}388 389.transition-transform {390    transition: transform 0.2s ease;391}392 393.rotate-180 {394    transform: rotate(180deg);395}396 397.sample-images-content {398    padding-bottom: 0.5rem;399}400 401.sample-image-grid {402    display: flex;403    flex-wrap: wrap;404    gap: 1rem;405}406 407.sample-image {408    cursor: pointer;409    text-align: center;410    transition: transform 0.2s;411}412 413.sample-image:hover {414    transform: scale(1.05);415}416 417.sample-image-thumb {418    width: 80px;419    height: 80px;420    border-radius: var(--radius);421    overflow: hidden;422    border: 1px solid hsl(var(--border));423    margin-bottom: 0.25rem;424}425 426.sample-image-thumb img {427    width: 100%;428    height: 100%;429    object-fit: cover;430}431 432.sample-image p {433    font-size: 0.75rem;434    margin-top: 0.25rem;435}436 437.mt-2 {438    margin-top: 2rem;439}440 441 442