quese-test
Version:
Package that make easier the searching process in javascript, through Embeddings and Semantic Similarity
256 lines (237 loc) • 8.73 kB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
import "./assets/main-d918657a.css"
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjElEQVR4nO2USwqAMAxE3yVS9P4n0Y342+jC4yiFCiJiE1tXOqsuJvNCGgK/PqsaGACn8HrPCFQWQAeswByBuODx3tYCEGAKhQtQKjyFBRCDSGr4HURyhV/NeT69NUugkhy6ztZ5DFDmCndvjkguPlSzwo/DdyVDNKsoKZD+wanoLIDGeOyGUPPri9oAu1tF+guhxmgAAAAASUVORK5CYII=";
var Cross = img$1;
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA6klEQVR4nO2TSQrCQBBF315xabyMwzHUSwiCiCsFx7uI4kkcjuKwNlLwA7VQ244IIj4oSMjv+tU/3fCrVIAZsAcuKnueAsm7zVtqmD6oM9DM27wNXNVoCVSBgqoGrPTtmsekoumsQeeJrut2EhXXzE0eYi3tJMbgoEUWS4i6tPbjXyaLx/IOUXQxRRvY4hAlaY95IrLTEqIh7S7GYKpFdhRDbKQdxxgkLiY7io/oSXMCykTSdBdtrSiyi9Zwk1sNYpt7k2wn6Z2yyefufZHHJNEl2srsrOexiyV91yRE/2/y1XEN+RAj1Q9xA86CZOpAdQj+AAAAAElFTkSuQmCC";
var SearchImg = img;
// import {openDB} from "idb"
// import axios from "axios"
// async function initializeIndexedDB() {
// const dbName = "my-database"; // Nombre de la base de datos
// const dbVersion = 1; // Versión de la base de datos
// const storeName = "embeddingCache"; // Nombre del almacén de datos
// // Abrir la base de datos para verificar si ya existe
// const db = await openDB(dbName, dbVersion);
// // Verificar si la versión actual de la base de datos es mayor que 0
// if (db.version > 0) {
// // La base de datos ya existe, no es necesario crearla nuevamente
// db.close();
// return;
// }
// // Si la base de datos no existe, crea el almacén de objetos y datos iniciales
// const upgradedDB = await openDB(dbName, dbVersion, {
// upgrade(db) {
// if (!db.objectStoreNames.contains(storeName)) {
// db.createObjectStore(storeName);
// }
// },
// });
// // Puedes añadir datos iniciales aquí si es necesario
// // Por ejemplo, para definir un objeto vacío como valor inicial
// await upgradedDB.put(storeName, {}, "embeddingCache");
// }
function Searcher({
data,
by,
template,
accuracy = 0.5,
pipeline,
defaultStyle = true,
InputStyle,
ContainerStyle,
inputClassName,
ContainerClassname,
iconCancel = true,
iconSearch = true,
placeholder,
prevResults = true,
renderItemFunction,
itemLinkFunction,
onSearchChange,
onSearchSubmit,
maxPrevResults,
...restProps
}) {
// Model loading
// Inputs and outputs
const [input, setInput] = useState("");
const [output, setOutput] = useState([]);
// useEffect(() => {
// async function initializeDatabase() {
// await initializeIndexedDB();
// }
// initializeDatabase();
// }, []);
// const [locations, setLocations] = useState([]);
// Create a reference to the worker object.
const worker = useRef(null);
// We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
useEffect(() => {
if (!worker.current) {
// Create the worker if it does not yet exist.
worker.current = new Worker(new URL("./worker.js", import.meta.url), {
type: "module"
});
}
// async function doRequest() {
// const response = await axios.request({
// method: 'GET',
// url: 'https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0'
// });
// let {results} = response.data
// setLocations(results.slice(0, 100));
// }
// doRequest();
// Create a callback function for messages from the worker thread.
const onMessageReceived = e => {
switch (e.data.status) {
case "initiate":
// Model file start load: add a new progress item to the list.
break;
case "progress":
// Model file progress: update one of the progress items.
break;
case "done":
// Model file loaded: remove the progress item from the list.
break;
case "ready":
// Pipeline ready: the worker is ready to accept messages.
break;
case "update":
// Generation update: update the output text.
setOutput(e.data.output);
break;
case "complete":
// Generation complete: re-enable the "Translate" button
setOutput(e.data.output);
break;
}
};
// Attach the callback function as an event listener.
worker.current.addEventListener("message", onMessageReceived);
// Define a cleanup function for when the component is unmounted.
return () => worker.current.removeEventListener("message", onMessageReceived);
}, [input]);
const handleChange = e => {
setInput(e.target.value);
if (e.target.value != "") {
worker.current.postMessage({
text: e.target.value,
data: data,
by: by,
template: template,
accuracy: accuracy
});
if (onSearchChange) {
onSearchChange(output);
}
}
};
const handleSubmit = e => {
e.preventDefault();
// worker.current.postMessage({
// text: input,
// data: data,
// by: by,
// template: template,
// accuracy: accuracy,
// model: model,
// });
if (onSearchSubmit) {
onSearchSubmit(output);
}
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("form", {
onSubmit: handleSubmit,
className: defaultStyle ? `search-container ${ContainerClassname}` : ContainerClassname,
style: ContainerStyle
}, /*#__PURE__*/React.createElement("input", _extends({
style: InputStyle,
placeholder: placeholder ? placeholder : "Search...",
className: defaultStyle ? `search-input ${inputClassName}` : inputClassName,
value: input,
onChange: handleChange
}, restProps)), iconCancel && iconSearch ? /*#__PURE__*/React.createElement("button", {
className: "cancel-button",
style: {
outline: "none"
},
onClick: () => {
setInput("");
}
}, /*#__PURE__*/React.createElement("img", {
width: 18,
src: input ? Cross : SearchImg,
alt: "cross"
})) : ""), prevResults ? /*#__PURE__*/React.createElement("div", {
className: "search-results"
}, maxPrevResults ? /*#__PURE__*/React.createElement(React.Fragment, null, output?.slice(0, maxPrevResults).map((item, index) => /*#__PURE__*/React.createElement(React.Fragment, null, renderItemFunction ? renderItemFunction(item, index) // Llama a la función proporcionada por el usuario
:
/*#__PURE__*/
// Representación predeterminada si renderItemFunction no está definida
React.createElement("a", {
href: itemLinkFunction ? itemLinkFunction(item, index) : "",
className: "search-result-item",
key: index
}, by ? item[by.replace(/"/g, "")] : /*#__PURE__*/React.createElement("span", {
style: {
fontWeight: "400",
color: "red"
}
}, "Define the prop renderItemFunction"))))) : /*#__PURE__*/React.createElement(React.Fragment, null, output?.map((item, index) => /*#__PURE__*/React.createElement(React.Fragment, null, renderItemFunction ? renderItemFunction(item, index) // Llama a la función proporcionada por el usuario
:
/*#__PURE__*/
// Representación predeterminada si renderItemFunction no está definida
React.createElement("a", {
href: itemLinkFunction ? itemLinkFunction(item, index) : "",
className: "search-result-item",
key: index
}, by ? item[by.replace(/"/g, "")] : /*#__PURE__*/React.createElement("span", {
style: {
fontWeight: "400",
color: "red"
}
}, "Define the prop renderItemFunction")))))) : ""));
}
// import React from "react";
// import ReactDOM from "react-dom/client";
// Load the model and create InferenceSession
// const _data = [
// {
// title: "UX Designer",
// tags: "Designer",
// },
// {
// title: "Senior Accounter",
// tags: "Accounter",
// },
// {
// title: "Product Manager",
// tags: "Managment",
// },
// ];
// ReactDOM.createRoot(document.getElementById("root")).render(
// <React.StrictMode>
// {" "}
// <Searcher
// data={_data}
// by="name"
// itemLinkFunction={(item) => `/${item.title}`}
// />{" "}
// </React.StrictMode>
// );
export { Searcher as default };