This repository has been archived by the owner on Sep 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(labeler UI): js file into components (#101)
* refactor(labeler): sidebar, image, text match to seperate components * refactor(labeler): add component for rendering 3D mesh * fix(labeler): height of 3D mesh preview
- Loading branch information
Roshan Jossy
authored
Oct 8, 2021
1 parent
bd4cfff
commit d8ff3a5
Showing
7 changed files
with
362 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
finetuner/labeler/ui/js/components/image-match-card.vue.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| const imageMatchCard = { | ||
| props: { | ||
| doc: Object, | ||
| docIdx: Number, | ||
| getContent: Function, | ||
| toggleRelevance: Function, | ||
| invertSelection: Function, | ||
| submitDoc: Function, | ||
| }, | ||
| template: ` | ||
| <div class="card image-card"> | ||
| <div class="card-header"> | ||
| <p class="fs-6 fw-light mb-2">Select all images similar to the image on right</p> | ||
| <img v-bind:src="getContent(doc)" class="img-thumbnail img-fluid my-2"> | ||
| </div> | ||
| <div class="card-body"> | ||
| <div class="image-matches-container"> | ||
| <div class="col compact-img" v-for="(match, matchIndex) in doc.matches"> | ||
| <div class="w-100" v-bind:class="{ 'positive-match': match.tags.finetuner_label }"> | ||
| <img v-bind:src="getContent(match)" class="img-thumbnail img-fluid" | ||
| v-on:click="toggleRelevance(match)"> | ||
| </div> | ||
| <div class="kbd">{{matchIndex}}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="card-footer"> | ||
| <div class="btn-toolbar justify-content-between g-2"> | ||
| <button type="button" class="btn btn-outline-success" | ||
| v-on:click="invertSelection(doc.matches)"> | ||
| Invert | ||
| <div class="kbd">i</div> | ||
| </button> | ||
| <button type="button" class="btn btn-outline-primary" v-on:click="submitDoc(docIdx)"> | ||
| Done | ||
| <div class="kbd">space</div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `, | ||
| mounted() { | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| const meshMatchCard = { | ||
| props: { | ||
| doc: Object, | ||
| docIdx: Number, | ||
| getContent: Function, | ||
| toggleRelevance: Function, | ||
| invertSelection: Function, | ||
| submitDoc: Function, | ||
| }, | ||
| template: ` | ||
| <div class="card mesh-card"> | ||
| <div class="card-header"> | ||
| <p class="fs-6 fw-light mb-2">Select all images similar to the image on right</p> | ||
| <model-viewer | ||
| v-bind:src="getContent(doc)" | ||
| v-on:click="toggleRelevance(match)" | ||
| class="img-thumbnail img-fluid my-2 h-100" | ||
| alt="result mesh" | ||
| ar ar-modes="webxr scene-viewer quick-look" | ||
| environment-image="neutral" | ||
| interaction-policy="allow-when-focused" | ||
| interaction-prompt="when-focused" | ||
| auto-rotate | ||
| rotation-per-second="30deg" | ||
| orientation="0 0 180deg" | ||
| turntableRotation | ||
| camera-controls> | ||
| </model-viewer> | ||
| </div> | ||
| <div class="card-body"> | ||
| <div class="image-matches-container"> | ||
| <div class="col compact-img" v-for="(match, matchIndex) in doc.matches"> | ||
| <div class="w-100" v-bind:class="{ 'positive-match': match.tags.finetuner_label }"> | ||
| <model-viewer | ||
| v-bind:src="getContent(match)" | ||
| v-on:click="toggleRelevance(match)" | ||
| class="img-thumbnail img-fluid h-100" | ||
| alt="result mesh" | ||
| ar ar-modes="webxr scene-viewer quick-look" | ||
| environment-image="neutral" | ||
| interaction-policy="allow-when-focused" | ||
| interaction-prompt="when-focused" | ||
| auto-rotate | ||
| rotation-per-second="30deg" | ||
| orientation="0 0 180deg" | ||
| turntableRotation | ||
| camera-controls> | ||
| </model-viewer> | ||
| </div> | ||
| <div class="kbd">{{matchIndex}}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="card-footer"> | ||
| <div class="btn-toolbar justify-content-between g-2"> | ||
| <button type="button" class="btn btn-outline-success" | ||
| v-on:click="invertSelection(doc.matches)"> | ||
| Invert | ||
| <div class="kbd">i</div> | ||
| </button> | ||
| <button type="button" class="btn btn-outline-primary" v-on:click="submitDoc(docIdx)"> | ||
| Done | ||
| <div class="kbd">space</div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `, | ||
| mounted() { | ||
| } | ||
| } |
Oops, something went wrong.