Skip to content

Commit

Permalink
refactor(labeler): sidebar, image, text match to seperate components
Browse files Browse the repository at this point in the history
  • Loading branch information
Roshan Jossy committed Oct 7, 2021
1 parent 04c22f7 commit 9a23560
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 184 deletions.
216 changes: 32 additions & 184 deletions finetuner/labeler/ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,196 +20,41 @@
v-if="is_conn_broken">
Can not connect to the server on {{host_address}} Please check your connection.
</div>
<div class="d-flex flex-column flex-shrink-0 p-3 sidebar">
<a href="/" class="d-flex align-items-center mb-3 mx-md-auto text-decoration-none">
<span class="app-title">
<img src="img/logo-light.svg" width="40%"
alt="Finetuner logo: Finetuner allows one to finetune any deep Neural Network for better embedding on search tasks.">
</span>
</a>
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button options-title" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
aria-controls="panelsStayOpen-collapseOne">
View
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<div class="row my-1">
<label class="col-sm-6 col-form-label">Content</label>
<div class="col-sm-6">
<select class="form-select" v-model="labeler_config.content">
<option v-for="option in view_template.content" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="row my-1" v-if="labeler_config.content == 'tags'">
<label class="col-sm-6 col-form-label">Tags Key</label>
<div class="col-sm-6">
<select class="form-select" v-model="labeler_config.tags">
<option v-for="option in tags" v-bind:value="option">
{{ option }}
</option>
</select>
</div>
</div>
<div class="row my-1">
<label class="col-sm-6 col-form-label">Layout</label>
<div class="col-sm-6">
<select class="form-select" v-model="labeler_config.style">
<option v-for="option in view_template.style" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="row my-1">
<label class="col-sm-6 col-form-label">Examples/View</label>
<div class="col-sm-6">
<input class="form-control" type="number" min="1" max="9"
v-model.number="labeler_config.example_per_view">
</div>
</div>
<div class="row my-1">
<label class="col-sm-6 col-form-label">TopK/Example</label>
<div class="col-sm-6">
<input class="form-control" type="number" min="1" max="9"
v-model.number="labeler_config.topk_per_example">
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button options-title" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="true"
aria-controls="panelsStayOpen-collapseTwo">
Progress
<div class="spinner-border spinner-border-sm align-middle" role="status"
v-show="is_busy">
<span class="visually-hidden">Loading...</span>
</div>
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<div class="row my-1" v-for="option in progress_stats">
<label class="col-sm-6 col-form-label">{{ option.text }}</label>
<div class="col-sm-6 text-end">
{{ option.value }}
</div>
</div>
<div class="progress">
<div class="progress-bar progress-positive" role="progressbar"
:style="{width: positive_rate+'%' }"></div>
<div class="progress-bar progress-negative" role="progressbar"
:style="{width: negative_rate+'%' }"></div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button options-title collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
aria-controls="panelsStayOpen-collapseThree">
Advanced
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<div class="row my-1" v-for="option in advanced_config">
<label class="col-sm-6 col-form-label">{{ option.text }}</label>
<div class="col-sm-6 text-end">
<input class="form-control" type="number" v-model.number="option.value">
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<a href="https://jina.ai" target="_blank">© 2020-2021 Jina AI</a>
<a href="https://github.com/jina-ai/finetuner" target="_blank">(<strong>Finetuner</strong> v0.1)</a>
</footer>
</div>
<sidebar
:labeler-config="labeler_config"
:view-template="view_template"
:tags="tags"
:is-busy="is_busy"
:progress-stats="progress_stats"
:positive-rate="positive_rate"
:negative-rate="negative_rate"
:advanced-config="advanced_config"
></sidebar>
<div class="b-example-divider"></div>
<div class="flex-grow-1 p-5 overflow-hidden">
<swiper ref="swiperComponent" :options="swiperOptions" @click-slide="onSwiperClickSlide"
@set-translate="onSetTranslate">
<swiper-slide v-if="labeler_config.style=='text'" v-for="(doc, doc_idx) in cur_batch" :key="doc_idx">
<div class="card text-card">
<div class="card-header">
<p class="fs-6 fw-light mb-2">Select all texts similar to:</p>
<h3>{{get_content(doc)}}</h3>
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item" v-for="(match, matchIndex) in doc.matches">
<div class="match-item" :class="{ 'positive-match': match.tags.finetuner_label }"
style="width: 100%" v-on:click="toggle_relevance(match)">
{{get_content(match)}}
<div class="kbd">{{matchIndex}}</div>
</div>

</li>
</ul>
</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="select_all(doc.matches)">
Invert
<div class="kbd">i</div>
</button>
<button type="button" class="btn btn-outline-primary" v-on:click="submit_doc(doc_idx)">
Done
<div class="kbd">space</div>
</button>
</div>
</div>
</div>
<text-match-card
:doc="doc"
:doc-idx="doc_idx"
:get-content="get_content"
:toggle-relevance="toggle_relevance"
:invert-selection="select_all"
:submit-doc="submit_doc"
>
</image-match-card>
</swiper-slide>
<swiper-slide v-if="labeler_config.style=='image'" v-for="(doc, doc_idx) in cur_batch" :key="doc_idx">
<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 left</p>
<img v-bind:src="get_content(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="get_content(match)" class="img-thumbnail img-fluid"
v-on:click="toggle_relevance(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="select_all(doc.matches)">
Invert
<div class="kbd">i</div>
</button>
<button type="button" class="btn btn-outline-primary" v-on:click="submit_doc(doc_idx)">
Done
<div class="kbd">space</div>
</button>
</div>
</div>
</div>
<image-match-card
:doc="doc"
:doc-idx="doc_idx"
:get-content="get_content"
:toggle-relevance="toggle_relevance"
:invert-selection="select_all"
:submit-doc="submit_doc"
>
</image-match-card>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
Expand All @@ -228,7 +73,10 @@ <h3>{{get_content(doc)}}</h3>
<script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper"></script>
<script src="main.js"></script>
<script src="./js/components/sidebar.vue.js"></script>
<script src="./js/components/image-match-card.vue.js"></script>
<script src="./js/components/text-match-card.vue.js"></script>
<script src="./js/main.js"></script>
</body>

</html>
44 changes: 44 additions & 0 deletions finetuner/labeler/ui/js/components/image-match-card.vue.js
View file
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() {
}
}
Loading

0 comments on commit 9a23560

Please sign in to comment.