Classifier App

UI for classifying images for ML

by falldeaf

HTML

<div id="head">
  <div id="">
    <h1>
      Classifier
    </h1>
    <div>
      <span>Host: [192.168.1.188]</span>
      <span>Path: [/training/plant]</span>
    </div>
    
    <img id="lastimg" src="#">
    <span>classed: [fine]</span>

  </div>
  
</div>

<div id="image">
  <img id="mainimg" src="#">
</div>

<div id="foot">
    
  <div id="class_buttons">

      <div class="class_button">
        sitting
      </div>

      <div style="margin-left:25%;" class="class_button">
        standing
      </div>

      <div style="margin-left:50%;" class="class_button">
        laying
      </div>
      
      <div style="margin-left:75%;" class="class_button">
        unknown
      </div>

  </div>

</div>

CSS

body {
  background-color:#222;
}

#head {
  width:100%;
  
}

#mainimg {
  width:20%;
  height:20%;
}

#image {
  margin:10px auto;
  border:1px solid purple;
  height:500px;
  width:500px;
}

#class_buttons {
  width:50%;
  border:1px solid purple;
}

.class_button {
  width:100px;
  height:30px;
  border-radius: 0px 20px;
  background-color: blue;
  margin:4px;
  padding:10px;
  text-align:center;
}