Skip to content

Instantly share code, notes, and snippets.

@dnzengou

dnzengou/algolia-instantsearch-js-and-speech-to-text-demo.markdown

Created May 22, 2023 23:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dnzengou/5de268d468f4ed52db8884899e52788d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dnzengou/5de268d468f4ed52db8884899e52788d to your computer and use it in GitHub Desktop.
Download ZIP
Algolia instantsearch.js and Speech to Text Demo
Raw
algolia-instantsearch-js-and-speech-to-text-demo.markdown
Raw
index.html
<script id="movie" type="text/x-handlebars-template">
<article class="movie">
<img class="movie-image" src="{{image}}" />
<div class="movie-meta">
<div class="movie-title">
{{{_highlightResult.title.value}}}
<span class="movie-year">
{{year}}
</span>
</div>
<div class="movie-rating">
{{#stars}}
<span class="ais-star-rating--star{{^.}}__empty{{/.}}">
</span>
{{/stars}}
</div>
<div class="movie-genres">
{{#genre}}
<div class="movie-genre">
{{.}}
</div>
{{/genre}}
</div>
</div>
</article>
</script>
<div class="container">
<div class="top">
<div id="search-button" class="search-button" onclick="s.start()">
<i class="fa fa-microphone"></i>
</div>
<div class="input-container">
<input type="text" id="search-box" />
<div id="stats"></div>
</div>
</div>
<div class="content">
<div class="facets">
<div class="facet">
<div class="facet-title">Genre</div>
<div id="genres"></div>
</div>
<div class="facet">
<div class="facet-title">Rating</div>
<div id="ratings"></div>
</div>
<div class="facet">
<div class="facet-title">Year</div>
<div id="year"></div>
</div>
</div>
<div class="canvas">
<div id="hits"></div>
<div id="pagination"></div>
</div>
</div>
</div>
Raw
script.babel
const s = new webkitSpeechRecognition();
const search = instantsearch({
appId: 'latency',
apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
indexName: 'movies'
});
s.onaudiostart = s.onaudioend = () => {
document.querySelector('#search-button').classList.toggle('recording');
};
s.onresult = (c) => {
const transcript = c.results[0][0].transcript;
console.log('transcript', transcript);
search.helper.setQuery(transcript).search();
}
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
placeholder: ' Speak or Type to Search',
autofocus: false,
})
);
search.addWidget(
instantsearch.widgets.stats({
container: '#stats',
})
);
const hitTemplate = document.getElementById('movie').innerHTML;
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 12,
templates: {
item: hitTemplate,
},
transformData: hit => {
hit.stars = [];
for (var i = 1; i <= 5; ++i) {
hit.stars.push(i <= hit.rating);
}
return hit;
},
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination',
})
);
search.addWidget(
instantsearch.widgets.refinementList({
container: '#genres',
attributeName: 'genre',
operator: 'and',
limit: 10,
})
);
search.addWidget(
instantsearch.widgets.starRating({
container: '#ratings',
attributeName: 'rating',
})
);
search.addWidget(
instantsearch.widgets.rangeSlider({
container: '#year',
attributeName: 'year',
tooltips: {
format: v => v && v.toLocaleString(),
},
})
);
search.start();
Raw
scripts
<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
* {
box-sizing: border-box;
}
body {
font-family: arial, sans-serif;
font-size: 20px;
margin: 0;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
}
.top {
position: relative;
display: flex;
}
.input-container {
position: relative;
flex: 1;
}
.search-button {
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: 2.4em;
font-size: 1.6em;
background-color: lighten(#0074D9, 5%);
color: white;
cursor: pointer;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -6px 12px -8px rgba(0, 0, 0, 0.2), inset 0 6px 12px -8px rgba(255, 255, 255, 0.2);
&:hover {
background-color: lighten(#0074D9, 10%);
}
&:active {
background-color: darken(#0074D9, 5%);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}
&.recording {
background-color: red;
}
}
#search-box {
width: 100%;
font-size: inherit;
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: none;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
outline: none;
padding: 0.8em 1em;
font-size: 1.2em;
&:focus {
box-shadow: inset 0 2px 6px rgba(0, 100, 220, 0.15);
border-color: rgba(0, 100, 220, 0.6);
}
}
#stats {
z-index: 1;
position: absolute;
bottom: 0.6em;
right: 0.6em;
font-size: 0.8em;
color: rgba(0, 0, 0, 0.4);
}
.content {
display: flex;
margin-top: 1rem;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.canvas {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}
#hits {
flex: 1;
}
.ais-hits {
display: flex;
flex-wrap: wrap;
}
.ais-hits__empty {
height: 100%;
justify-content: center;
align-items: center;
font-size: 1.6em;
color: rgba(0, 0, 0, 0.4);
}
.ais-hits--item {
flex: 1 0 25%;
min-width: 380px;
}
.movie {
position: relative;
display: flex;
margin: 10px;
border: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
background-color: white;
padding: 0.2em;
}
.movie-image {
flex-shrink: 0;
height: 231px;
width: 154px;
background-color: rgba(0, 0, 0, 0.1);
}
.movie-meta {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1em;
}
.movie-title {
align-items: center;
font-size: 1.1em;
font-weight: bold;
em {
color: rgb(0, 150, 230);
background: rgba(0, 160, 220, 0.2);
}
}
.movie-year {
font-size: 0.8em;
font-weight: normal;
color: rgba(0, 0, 0, 0.6);
}
.movie-rating {
margin-top: 0.2em;
}
.movie-genres {
display: flex;
flex-wrap: wrap;
font-size: 0.8em;
margin-top: 0.7em;
margin-right: -0.4em;
margin-bottom: -0.4em;
}
.movie-genre {
color: rgba(0, 0, 0, 0.7);
padding: 0.4em 0.6em;
background-color: rgba(0, 0, 0, 0.1);
margin-right: 0.4em;
margin-bottom: 0.4em;
}
ul.ais-pagination {
padding: 0;
margin: 0;
}
#pagination {
margin: 10px 0;
text-align: center;
}
.ais-pagination--item {
margin: 0 0.2em;
}
.ais-pagination--link {
font-size: 1.2em;
text-decoration: none;
color: rgba(0, 0, 0, 0.4);
.ais-pagination--item__active & {
font-weight: bold;
color: rgba(0, 100, 220, 0.6);
}
}
.facets {
width: 20%;
min-width: 270px;
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.facet {
padding: 1em 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.facet-title {
padding: 0 1em;
font-size: 1.1em;
margin-bottom: 0.6em;
}
.ais-refinement-list--item {
padding: 0 1em;
cursor: pointer;
color: rgba(0, 0, 0, 0.7);
&:hover {
color: black;
background-color: rgba(0, 0, 0, 0.04);
}
&.ais-refinement-list--item__active {
background-color: rgba(0, 0, 0, 0.08);
font-weight: bold;
color: black;
}
}
.ais-refinement-list--label {
position: relative;
display: flex;
line-height: 1.4em;
cursor: inherit;
input[type=checkbox] {
display: none;
}
}
.ais-refinement-list--count, .ais-star-rating--count {
top: 0;
position: absolute;
right: 0;
font-size: 0.8em;
color: rgba(0, 0, 0, 0.4);
}
.ais-star-rating--item {
padding: 0 1em;
cursor: pointer;
color: rgba(0, 0, 0, 0.7);
&:hover {
color: black;
background-color: rgba(0, 0, 0, 0.04);
}
&.ais-star-rating--item__active {
background-color: rgba(0, 0, 0, 0.08);
font-weight: bold;
color: black;
}
}
.ais-star-rating--link {
position: relative;
display: block;
text-decoration: none;
line-height: 1.4em;
color: inherit;
}
.ais-range-slider--tooltip {
position: relative;
background: none;
}
.ais-range-slider--handle {
display: flex;
justify-content: center;
}
#year {
padding: 0 2em;
}
Raw
styles
<link href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
@dnzengou
Copy link
Copy Markdown
Author

dnzengou commented May 22, 2023

Source: https://codepen.io/team/algolia/pen/XRKVma

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment