Introduction¶

Jinabox is a lightweight, customizable front end for searching text, images, videos, audio or any kind of data with a Jina backend.¶

Ready to learn Jina? Read our 101 tutorials.

jina box

Features¶

Easy-to-use web component for Jina search backend
Users can drag and drop multi-modal data as search queries
Visualize search results in a dropdown list or separate container
Highly customizable

Before you start¶

Jinabox is a frontend for Jina. You will need to spin up a Jina backend to get search results. Based on what you want to search, run one of our example Jina backends:

Pokedex (real image data): docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.bitsearch-pokedex search

Open jinabox.js in your Browser¶

Just go to https://jina.ai/jinabox.js/ in your browser to open up the search interface.

Set Server Endpoint¶

Based on the Docker port you are exposing (i.e. 65481 or 45678 in above Docker images), set jinabox’s server endpoint to:

http://localhost:<port_number>/api/search

server_endpoint

Start Searching!¶

Drag and drop images, video, or audio, or type in text to search.

jina box_search

Jinabox in your Project¶

This is how you can add Jinabox to your existing web project.

Jinabox on GitHub ¶

Installation via package manager¶

npm install jinabox

or

yarn add jinabox

Use Jinabox via Script Tag¶

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></jina-searchbar>

<!--or-->

<jina-floater></jina-floater>

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

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 like 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¶

Play with and preview jinabox configurations here

Setting	Default	Type	Description
`theme`	`default`	string	Color theme: `default`, `persian`, `pompelmo`, `honeybee`
`searchIcon`	`color`	string	Searchbar icon: `color`, `mono`, `inverse`, or a URL
`showDropzone`	`true`	boolean	Show expanding drop zone when dragging files
`resultsLocation`	`dropdown`	string	Where to display results: `dropdown` or `external`. When selecting external, results will be rendered in the element corresponding to the `results-area-id`
`resultsAreaId`	`jina-results-area`	string	ID of where results will be rendered if `resultsLocation` is set to `external`
`typewriterEffect`	`false`	boolean	Enable typewriter effect on the placeholder
`typewriterDelayItem`	`1000`	number	Time (ms) delay between every placeholder switch when `typewriterEffect` is enabled
`typewriterDelayCharacter`	`50`	number	Time (ms) delay between each character when `typwriterEffect` is enabled
`userMediaHeight`	`500`	number	Webcam feed and capture height
`userMediaWidth`	`300`	number	Webcam feed and capture width
`acceptAudio`	`true`	boolean	Allow search with audio queries
`acceptVideo`	`true`	boolean	Allow search with video queries
`acceptText`	`true`	boolean	Allow search with text queries
`acceptImage`	`true`	boolean	Allow search with image queries

Expected Response Structure¶

jinabox.js expects query responses to contain either of the following structures

{
  "search": {
    "docs": [
      {
        "topkResults": [
          {
            "matchDoc": {
              "docId": 14704,
              "weight": 1,
              "uri": "data:image/png;charset=utf,...",
              "mimeType":"image/png"
            }
          }
        ],
        "uri":"data:image/jpeg;...",
        "mimeType":"image/jpeg"
      }
    ]
  }
}

or

{
  "search": {
    "docs": [
      {
        "matches": [
          {
            "docId": 14704,
            "weight": 1,
            "uri": "data:image/png;charset=utf,...",
            "mimeType":"image/png"
          }
        ],
        "uri":"data:image/jpeg;...",
        "mimeType":"image/jpeg"
      }
    ]
  }
}

Browser Support¶

Jinabox runs on modern browsers including Chrome, Firefox, Safari (desktop and mobile) and Opera. Certain features (like recording audio/video) are not available on all browsers and jinabox will make these features available accordingly.

Troubleshooting¶

SSL Error on Localhost¶

Try http://localhost:65481/api/search, make sure to use http and localhost, instead of 0.0.0.0.

Requests hanging or failing¶

Query your api with curl to ensure it is properly receiving, processing, and responding to requests. Ensure responses meet jinabox expected response structure.