A lightweight, customizable omnibox in JavaScript

栏目: IT技术 · 发布时间: 4年前

jinabox.js is a lightweight, customizable omnibox. You can use it for searching text, images, videos, audios or all kinds of data with a Jina backend .

Quick Start

A lightweight, customizable omnibox in JavaScript

In HTML, include the minified script:

<script src="https://unpkg.com/jinabox"></script>
<script>
    jb = window.JinaBox
    jb.init('http://0.0.0.0:65481/api/search');  // http://0.0.0.0:65481/api/search is the endpoint of the REST gateway of a Jina backend.
</script>

Then, create a container where the searchbar/floater is to appear:

<jina-searchbar/>

<!--or-->

<jina-floater/>

Run one of those prebuilt backend:

Pokedex (real image data): docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.bitsearch-pokedex search
Southpark (real text data): docker run -p 45678:45678 jinaai/hub.app.distilbert-southpark
MP4 mock (placeholder video data): docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.iomock.mp4 search
Wav mock (placeholder audio data): docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.iomock.sound search

Now you can drag anything from anywhere (local/browser/webpage) to it and conduct the search.

Ready to learn Jina? Read our 101 tutorials .

Using with a module bundler

npm install jinabox
# or
yarn add jinabox

Features

an easy-to-use web component for Jina search backend;
allow user to drag-and-drop multi-modal data as queries to search;
webcam and mic support (in progress, contribution welcome! :heart: );
visualize the search results in a dropdown list or a separate container;
highly customizable.

Supported MIME types

MIME type	Input (Query)	Output (Result)	Description
`text`	typing	list only	Text-only data including any human-readable content, source code, or textual data such as comma-separated value (CSV) formatted data. Examples include `text/plain` , `text/csv` , and `text/html` .
`image`	drag-and-drop	`<img>` containers in list/grid view	Image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated GIF or APNG. Common examples are `image/jpeg` , `image/png` , and `image/svg+xml` .
`video`	drag-and-drop, webcam	`<video>` containers in list/grid view	Video data or files, such as MP4 movies ( `video/mp4` ).
`audio`	drag-and-drop, webcam, mic	`<audio>` containers in list view	Audio or music data. Examples include `audio/mpeg` , `audio/vorbis` .

Configuration

Settings	Description
`theme`	Color theme: `persian` , `pompelmo` , `honeybee` , none
`typewriterEffect`	Enable typewriter effect on the placeholder
`typewriterDelayItem`	Time (ms) delays between every placeholder
`typewriterDelayCharacter`	Time (ms) delays between every character