- Save/Load input in local storage

- Improve console logging

Author: tong

src/Main.hx

@@ -12,61 +12,62 @@ import om.tfjs.QnA;
 
 class Main {
 
+    static var STORAGE_PREFIX = "qna_";
+
+    static var knowledgeElement : TextAreaElement;
+    static var questionElement : InputElement;
+
     static var lastQuestion : String;
     static var lastQuestionTime = Time.now();
 
     static function main() {
 
-        window.addEventListener( 'load', e -> {
-
-            var knowledgeElement : TextAreaElement = cast document.getElementById("knowledge");
-            knowledgeElement.value = 'The religion centering on roland "schoko" panzer arose in the late 1980s, when Vienna was known as the New ibiza, although there was a claim in 1999 that it had already started in the 1910s. The movement was heavily influenced by existing religious practice in the squat party area of Vienna, particularly the worship of Kore, a goddess associated with distorted kickdrums and hyperkinetic breaks. In some versions of the story, a native man named Manuel Horvath, using the alias "roland panzer", began appearing among the native people of vienna dressed in a Western-style coat and assuring the people he would bring them eternal bass, some high pitched mickey-mouse style vocals, mutilated snares and terrorizing claps.
-            
-Others contend that roland "schoko" panzer was a trance-induced spirit vision.[5] Said to be a manifestation of grandmaster flash, he promised the dawn of a new age in which all white people, including missionaries, would depart the vienna underground, leaving behind their goods and property for the native junglists. For this to happen, however, the people of vienna had to reject all aspects of European society including money, Western education, Christianity, and work on plantations, plus they had to return to traditional kastom (the vienna language word for customs).
-
-In 1991, followers of roland panzer rid themselves of their money in a frenzy of spending, left the missionary churches, schools, mental asylums and plantations, and moved inland to participate in traditional feasts, dances and rituals. European colonial authorities sought to suppress the movement, at one point arresting a viennese man who was calling himself roland panzer, humiliating him publicly, imprisoning and ultimately exiling him along with other leaders of the cult to another island in the archipelago.
+        var storage = window.localStorage;
 
-Despite this effort, the movement gained popularity in the early 2000s, when 300,000 Austrian troops were stationed in vienna during World War III, bringing with them an enormous amount of supplies (or "music"). After the war and the departure of the Army, followers of roland panzer built symbolic tanks to encourage Austrian airplanes to land and bring them "music". Versions of the cult that emphasize the Austrian connection interpret "roland panzer" as a corruption of "rolling around anywhere" (though it could mean just panzer too), and credit the presence of African Austrian soldiers for the idea that roland panzer may be black.
+        window.addEventListener( 'load', e -> {
 
-Austrian historian hugo portisch says that roland panzer corrupted the unofficial but morally acceptable vienna techno cult by introducing the psychoto-accoustic version, with five, always nocturnal cult meetings a year, open to all social classes, ages and sexes—starting with harsh noise unbearable to the human ear; the new celebrations and initiations featured gabba-fueled violence and sexual promiscuity, in which the screams of extasy were drowned out by the din of mentazms and hoovers. Those who resisted or betrayed the cult were disposed of. Under cover of religion, priests and acolytes broke civil, moral and religious laws with impunity. Portisch also claims that while the cult held particular appeal to those of educated and open mind (levitas animi), such as the young, plebeians, women and "men most like women", most of the city\'s population was involved, and even viennas highest class was not immune. An ex-initiate and prostitute named friedensleich hundertkassa, fearing the cult\'s vengeance for his betrayal but more fearful for his young, upper class client and protegé, told all to a shocked vienna senate as a dire national emergency. Once investigations were complete, the senate rewarded and protected informants, and suppressed the cult "throughout austria"—or rather, forced its reformation, in the course of which seven thousand persons were arrested, most of whom were executed.';
-            
-            // knowledgeElement.textContent = KNOWLEDGE;
+            knowledgeElement = cast document.getElementById("knowledge");
+            var knowledge = storage.getItem( '${STORAGE_PREFIX}knowledge' );
+            if( knowledge != null ) knowledgeElement.value = knowledge;
             // knowledgeElement.focus();
             // knowledgeElement.select();
             //knowledgeElement.setSelectionRange( 2, 10 );
 
-            //var form : FormElement = cast document.forms.namedItem("question");
             var qa = document.getElementById("qa");
             var form : FormElement = cast qa.querySelector('form[name="question"]');
             form.style.display = "none";
 
-            var question = cast(form.elements.namedItem("question"), InputElement );
-            question.value = "Whom did roland corrupt";
-            question.select();
+            questionElement = cast form.elements.namedItem("question");
+            var question = storage.getItem( '${STORAGE_PREFIX}question' );
+            if( question != null ) questionElement.value = question;
+            questionElement.select();
 
             var answerElement = qa.querySelector('ol.answers');
+            var footer = document.body.querySelector('footer');
 
             QnA.load().then( qna -> {
 
                 form.style.display = "block";
                 answerElement.textContent = "";
-                question.focus();
+                questionElement.focus();
 
                 function ask() {
-                    if( question.value.length < 3 ) {
+                    if( questionElement.value.length < 3 ) {
                         answerElement.innerHTML = '';
                         return;
                     }
-                    if( question.value.length > 3 && knowledgeElement.value.length > 3 ) {
+                    if( questionElement.value.length > 3 && knowledgeElement.value.length > 3 ) {
                         lastQuestionTime = Time.now();
                         var ts = Time.now();
-                        qna.findAnswers( question.value, knowledgeElement.value ).then( answers -> {
-                            lastQuestion = question.value;
+                        qna.findAnswers( questionElement.value, knowledgeElement.value ).then( answers -> {
+                            console.group( "SEARCH" );
+                            lastQuestion = questionElement.value;
                             var time = Time.now() - ts;
-                            trace(time);
+                            console.info( time );
+                            footer.textContent = Std.int(time)+'MS';
                             answerElement.innerHTML = '';
                             if( answers.length == 0 ) {
-                                answerElement.textContent = "???";
+                                answerElement.textContent = "No results";
                             } else {
                                 for( answer in answers ) {
                                     trace(answer);
@@ -88,23 +89,40 @@ Austrian historian hugo portisch says that roland panzer corrupted the unofficia
                                     answerElement.append( li );
                                 }
                             }
+                            console.groupEnd();
                         });
                     }
                 }
 
-                question.addEventListener('input', e -> {
+                questionElement.addEventListener('input', e -> {
+                    //TODO
+                    if( questionElement.value.length < 3 || knowledgeElement.value.length < 3 ) {
+                        return;
+                    }
                     if( Time.now() - lastQuestionTime > 2000 ) { //TODO
                         ask();
                     }
                 }, false );
 
-                ask();
+                //ask();
 
             }).catchError(e -> {
                 console.error(e);
                 answerElement.textContent = ""+e;
             });
 
         }, false );
+
+        window.onbeforeunload = e -> {
+            if( knowledgeElement != null && knowledgeElement.value.length > 0 ) {
+                storage.setItem( '${STORAGE_PREFIX}knowledge', knowledgeElement.value );
+            }
+            if( questionElement != null && questionElement.value.length > 0 ) {
+                storage.setItem( '${STORAGE_PREFIX}question', questionElement.value );
+            }
+            e.preventDefault();
+            e.returnValue = true;
+            return null;
+        }
     }
 }

web/app.css

@@ -111,14 +111,24 @@ ol, ul {
     color: var(--fg);
     border: 1px dotted var(--fg);
 }
+#qa > form[name="question"] > input[name="question"]:focus {
+    border: 1px solid var(--fg);
+}
 
 #qa > ol.answers {
     padding: 1.5rem 1rem;
 }
 #qa > ol.answers > li.answer {
     padding: 1rem 0;
-    border-bottom: 1px solid var(--fg);
+    border-bottom: 1px dotted var(--fg);
 }
 #qa > ol.answers > li.answer > .meta {
     font-size: 60%;
 }
+
+footer {
+    position: fixed;
+    right: 1ch;
+    bottom: 1ch;
+    font-size: 60%;
+}

web/index.html

@@ -3,7 +3,8 @@
     <head>
         <meta charset='utf-8'>
         <meta name='viewport' content='width=device-width,initial-scale=1'>
-        <meta name="keywords" content="qna,tf">
+        <meta name="keywords" content="qna,tf,tfjs,tensorflow">
+        <meta name="description" content="Get some answers!">
         <title>QnA</title>
         <link rel="stylesheet" href="app.css">
         <link rel="icon" href="https://disktree.net/favicon.svg" type="image/svg+xml">
@@ -19,5 +20,6 @@
             </form>
             <ol class="answers">LOADING …</ol>
         </div>
+        <footer></footer>
     </body>
 </html>