make my ui user frindly "<template>
  <v-app>
    <v-container>
      <v-row justify="center">
        <v-col cols="2">
          <!-- List of Images -->
          <v-list>
            <v-subheader>Images</v-subheader>
            <v-list-item v-for="(img, index) in images" :key="index" @click="selectImage(index)"
              :class="{ 'active': selectedImageIndex === index }" style="cursor: pointer;">
              <v-list-item-content>
                <v-list-item-title>Image {{ index + 1 }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>

          <!-- Image Upload -->
          <v-file-input label="Upload Images" accept="image/*" @change="onImageUpload" multiple
            prepend-icon="mdi-upload"></v-file-input>
        </v-col>

        <v-col cols="10">
          <v-row>
            <v-col cols="8" md="8">
              <!-- Button to Log Rectangles -->
              <v-btn color="primary" @click="exportToJson" class="mt-3">
                Export Annotated Data with Images
              </v-btn>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="8">
              <v-card class="my-4">
                <v-card-text>
                  <!-- Canvas for Image Drawing -->
                  <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight" @wheel.prevent="onMouseWheel"
                    @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove"
                    style="border: 1px solid black;"></canvas>
                </v-card-text>
              </v-card>
              <!-- Labels Below the Canvas -->

              <v-chip-group v-if="labels.length" mandatory style="cursor: pointer;">
                <v-chip v-for="(label, index) in labels" :key="label.name" @click="selectLabel(label)"
                  :class="{ 'bg-white': selectedLabel === label.name }">
                  <v-badge :color="label.color" :content="index + 1" inline></v-badge>
                  <v-label style="cursor: pointer;">{{ label.name }}</v-label>
                </v-chip>
              </v-chip-group>
            </v-col>

            <v-col cols="4">
              <v-file-input label="Import Annotated Data" accept=".json" @change="importJsonData"
                prepend-icon="mdi-folder-open"></v-file-input>



              <v-list v-if="rectangles.length">
                <v-subheader>Rectangles</v-subheader>
                <v-list-item v-for="(rect, index) in rectangles" :key="index"
                  @click="toggleRectangleSelection(index, $event)"
                  :class="{ active: selectedRectangles.includes(rect) }" style="cursor: pointer;">
                  <template v-slot:prepend>
                    <v-icon :style="{ color: rect.color }">mdi-circle</v-icon>
                  </template>
                  <template v-slot:append>
                    <v-btn icon @click.stop="removeRectangle(index)" color="red" variant="tonal" density="comfortable">
                      <v-icon>mdi-delete</v-icon>
                    </v-btn>
                  </template>
                  <v-list-item-content>
                    <v-list-item-title>
                      {{ rect.label }}
                    </v-list-item-title>
                    <v-list-item-subtitle>
                      [x: {{ rect.x }}, y: {{ rect.y }}, w: {{ rect.width }}, h: {{ rect.height }}]
                    </v-list-item-subtitle>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
    <v-btn color="primary" @click="exportToZip" class="mt-3">
      Export Annotations and Images as ZIP
    </v-btn>
  </v-app>
</template>"