A lightweight, customizable omnibox in JavaScript

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

A lightweight, customizable omnibox in JavaScript

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

Browser support

jinabox.js runs on modern browsers supporting Web Audio, including Firefox, Chrome, Safari (desktop and mobile) and Opera.

Troubleshooting

SSL error on my localhost

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

License

Copyright (c) 2020 Jina AI Limited. All rights reserved.

Jina is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Scratch少儿趣味编程

Scratch少儿趣味编程

[ 日] 阿部和广 / 陶 旭 / 人民邮电出版社 / 2014-11 / 59.00元

Scratch 是麻省理工学院设计开发的一款编程工具,是适合少儿学习编程和交流的工具和平台,有中文版且完全免费。本书结合孩子们学习的语文、数学、科学、社会、音乐、体育等科目,手把手地教大家如何用Scratch 设计程序(如设计一个自动写作文的程序),配合各式卡通形象,通俗易懂,寓教于乐。麻省理工学院教授米切尔•瑞斯尼克作序推荐。 本书图文并茂,生动风趣,适合中小学生等初学者自学或在家长的帮助......一起来看看 《Scratch少儿趣味编程》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具