Merge pull request #11 from andrew-fenton/navbar

connect journal search to frontend
andrew-fenton · Sep 15, 2024 · b58da90 · b58da90
2 parents 79661da + b630fe3
commit b58da90
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 20 deletions.
diff --git a/backend/chromadb/1bcb379b-f95d-4bb3-991c-33a7f4974e73/length.bin b/backend/chromadb/1bcb379b-f95d-4bb3-991c-33a7f4974e73/length.bin
diff --git a/backend/chromadb/chroma.sqlite3 b/backend/chromadb/chroma.sqlite3
diff --git a/backend/requirements.txt b/backend/requirements.txt
@@ -3,4 +3,5 @@ motor==3.3.1
 pydantic==2.6.3
 pydantic-core==2.16.3
 pymongo==4.5.0
-uvicorn==0.28.0
+uvicorn==0.28.0
+chromadb==0.5.5
diff --git a/frontend/src/routes/recorder.jsx b/frontend/src/routes/recorder.jsx
@@ -16,7 +16,6 @@ function Recorder({transcript, setTranscript}) {
     }, [done]);
 
     const scrollToBottom = () => {
-        console.log("scroll");
         endOfContentRef.current?.scrollIntoView({ behavior: "smooth" });
     }
 

diff --git a/frontend/src/routes/root.jsx b/frontend/src/routes/root.jsx
@@ -3,8 +3,28 @@ import LandingMic from '../widgets/LandingMic';
 import { Divider } from "antd";
 import { Input, Button, Card } from 'antd';
 import { StarOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+import axios from 'axios';
+
+const QUERY_URL = "http://127.0.0.1:8000/query_journal";
 
 function Root() {
+    const [response, setResponse] = useState("");
+
+    const queryJournal = async (queryText) => {
+        try {
+            if (queryText.length > 0) {
+                setResponse("Loading...");
+                const response = await axios.post(QUERY_URL, {
+                    text: queryText
+                });
+                setResponse(response.data);
+            };
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
     return (
         <>
             <h2 style={{ fontWeight: 800 }}>
@@ -25,7 +45,7 @@ function Root() {
                         <Button type="primary" icon={<StarOutlined/>} style={{ backgroundColor: '#bfdbfe' }}/>
                     }
                     size="large"
-                    onSearch={value => console.log(value)}
+                    onSearch={value => queryJournal(value)}
                 />
 
                 <Card style={{ 
@@ -37,10 +57,16 @@ function Root() {
                     border: "2px solid #000",
                     fontSize: "12px"
                 }}>
-                    Example searches:                   <br/>
-                    - Am I improving at collaboration?  <br/>
-                    - What are my best qualities?       <br/>
-                    - Do I overwork myself?
+                    { response === "" ? 
+                        (<div>
+                            Example searches:                   <br/>
+                            - Am I improving at collaboration?  <br/>
+                            - What are my best qualities?       <br/>
+                            - Do I overwork myself?
+                        </div>) 
+                        :
+                        response
+                    }
                 </Card>
             </div>
             <Divider style={{borderTop: '2px solid #f0f0f0'}}/>

diff --git a/frontend/src/routes/summary.jsx b/frontend/src/routes/summary.jsx
@@ -2,15 +2,17 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { Button, Flex, Input } from "antd";
 import { EditFilled } from "@ant-design/icons"
+import { Spin } from 'antd';
 import "../styles/Summary.css"
 
 const BACKEND_URL = "http://127.0.0.1:8000/";
 
 function Summary({transcript}) {
     const { TextArea } = Input;
 
+    const [isLoading, setIsLoading] = useState(true);
     const [title, setTitle] = useState("");
-    const [summary, setSummary] = useState("I spent most of the afternoon working on the new prototypes, and it was one of those rare times where I lost track of time because I was so into it. The ideas were just flowing, and everything felt right. It’s such a rush when that happens, you know? When it's just me, the screen, and a cup of coffee, and things are working. It reminded me why I love this job in the first place.");
+    const [summary, setSummary] = useState("");
 
     useEffect(() => {
         summarize();
@@ -22,8 +24,10 @@ function Summary({transcript}) {
                 const response = await axios.post(BACKEND_URL + "summarize", {
                     text: transcript
                 });
+
                 console.log(response.data);
                 setSummary(response.data);
+                setIsLoading(false);
             };
         } catch (err) {
             console.error(err);
@@ -51,19 +55,23 @@ function Summary({transcript}) {
     return (
         <div className="centered-container">
             <div className="content">
-            <h1>Journal Summary</h1>
-
-            <TextArea style={{resize: "none"}} rows={1} value={title} placeholder="Add summary title" onChange={(e) => setTitle(e.target.value)} className="summary-title-input" />
-            <TextArea style={{marginTop: "15px", resize: "none"}} rows={6} value={summary} onChange={handleSummaryEdit} className="summary-input" />
+                <h1>Journal Summary</h1>
+
+                {isLoading ? (
+                        <Spin />
+                    ) : (<>
+                    <TextArea style={{resize: "none"}} rows={1} value={title} placeholder="Add summary title" onChange={(e) => setTitle(e.target.value)} className="summary-title-input" />
+                    <TextArea style={{marginTop: "15px", resize: "none"}} rows={6} value={summary} onChange={handleSummaryEdit} className="summary-input" />
 
-            <div className="summary-buttons-container">
-                <Flex className="summary-buttons" gap="middle" wrap>
-                    {/* <Button><EditFilled/>Edit Summary</Button> */}
-                    <Button style={{backgroundColor: "#0f172a"}} type="primary" onClick={() => postNote(summary)}>
-                        <p style={{margin: "0"}}>Post Summary</p>
-                    </Button>
-                </Flex>
-            </div>
+                    <div className="summary-buttons-container">
+                        <Flex className="summary-buttons" gap="middle" wrap>
+                            {/* <Button><EditFilled/>Edit Summary</Button> */}
+                            <Button style={{backgroundColor: "#0f172a"}} type="primary" onClick={() => postNote(summary)}>
+                                <p style={{margin: "0"}}>Post Summary</p>
+                            </Button>
+                        </Flex>
+                    </div>
+                </>)}
             </div>
         </div>
     )