Updating search box view

geolexica · Oct 5, 2022 · 1488a38 · 1488a38
1 parent 9aa513f
commit 1488a38
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/ui/lookup.tsx b/src/ui/lookup.tsx
@@ -1,4 +1,4 @@
-import {Button, TextArea} from '@blueprintjs/core';
+import {Button} from '@blueprintjs/core';
 import {useMemo, useState} from 'react';
 import {UniversalSentenceEncoder} from '@tensorflow-models/universal-sentence-encoder';
 import {convertBERT, DBItem} from '../util/reverseEngine';
@@ -22,8 +22,8 @@ const LookupUI: React.FC<{
     const l = new UniversalSentenceEncoder();
     if (typeof window !== 'undefined') {
       l.load({
-        modelUrl: '/sbert/model.json',
-        vocabUrl: '/sbert/vocab.json',
+        modelUrl: 'sbert/model.json',
+        vocabUrl: 'sbert/vocab.json',
       }).then(() => setReady(true));
     }
     return l;
@@ -52,9 +52,16 @@ const LookupUI: React.FC<{
 
   return (
     <div className="concepts">
-      Search phrase:
-      <TextArea value={query} onChange={x => setQuery(x.target.value)} />
+      <input
+        className="semantic-search bp3-input"
+        type="text"
+        placeholder="Search phrase"
+        dir="auto"
+        value={query}
+        onChange={x => setQuery(x.target.value)}
+      />
       <Button onClick={search}>Search</Button>
+
       {answer.length > 0 && (
         <div className="all-concepts">
           <div className="search-text">Top-{answer.length} answers:</div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -64,3 +64,12 @@ table {
   color: #0f6db3;
   border-bottom: 1px solid #0f6db3;
 }
+
+.semantic-search {
+  background-color: #f7f7f7 !important;
+  padding: .5em .75em !important;
+  border-radius: .5em !important;
+  border: 0 !important;
+  font-size: 18px !important;
+  outline: none !important;
+}