Merge pull request #7 from andrew-fenton/summarized-page

Summarized page
andrew-fenton · Sep 15, 2024 · 947d39c · 947d39c
2 parents ff67632 + 131c87e
commit 947d39c
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 18 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/main.py b/backend/main.py
@@ -1,5 +1,4 @@
 import os
-
 from fastapi import FastAPI
 from pydantic import BaseModel
 from datetime import datetime
@@ -45,24 +44,45 @@
         "retaining my voice and tone so it still sounds like I wrote it. "
         "Only return the summarized text and nothing else. Don't prefix the response with anything.")
 
-@app.get("/")
-async def root():
-    note = Note(text="hello", date_posted=datetime.now())
-
-    return {"message": "Hello World"}
+class NoteContent(BaseModel):
+    text: str
 
 class NoteIn(BaseModel):
+    title: str
     text: str
 
 class Note(BaseModel):
+    title: str
     text: str
     date_posted: datetime
 
 class Query(BaseModel):
     text: str
 
+@app.get("/")
+async def root():
+    note = Note(text="hello", date_posted=datetime.now())
+
+    return {"message": "Hello World"}
+
+@app.get("/notes")
+async def get_all_notes():
+    notes = await notes_collection.find().to_list(100)
+
+    notes_parsed = []
+    for note in notes:
+        note_parsed = {
+            "id": str(note["_id"]),
+            "title": note["title"] if "title" in note else None,
+            "text": note["text"],
+        }
+        notes_parsed.append(note_parsed)
+
+    return notes_parsed
+
+
 @app.post("/summarize")
-async def summarize(note: NoteIn):
+async def summarize(note: NoteContent):
     note_prompt = str(CONTEXT + " " + note.text)
 
     response = cohere_client.generate(
@@ -76,6 +96,7 @@ async def summarize(note: NoteIn):
 @app.post("/create_note")
 async def create_note(note: NoteIn):
     note = Note(
+        title=note.title,
         text=note.text,
         date_posted=datetime.now()
     )
@@ -89,7 +110,13 @@ async def create_note(note: NoteIn):
     journal_entry = "Date posted: " + db_note['date_posted'] + "Content: " + note.text
     search_engine_service.insert_entry(journal_entry)
 
-    return str(db_note)
+    note_parsed = {
+        "id": str(note["_id"]),
+        "title": note["title"],
+        "content": note["content"],
+    }
+
+    return note_parsed
 
 @app.post("/query_journal")
 async def query(query: Query):

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,6 +1,9 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.4.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.1.0",
     "antd": "^5.20.6",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -3,6 +3,23 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  font-family: 'Instrument Sans';
+  color: '#0f172a';
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: semibold;
+}
+
+h2 {
+  font-size: 24px;
+  font-weight: semibold;
+}
+
+p {
+  font-size: 16px;
+  font-weight: medium;
 }
 
 .logo {

diff --git a/frontend/src/routes/summary.jsx b/frontend/src/routes/summary.jsx
@@ -1,16 +1,22 @@
 import axios from "axios";
 import { useState } from "react";
-import {Button} from "antd";
+import { Button, Flex, Input } from "antd";
+import { EditFilled } from "@ant-design/icons"
+import "../styles/Summary.css"
 
 const BACKEND_URL = "http://127.0.0.1:8000/create_note";
 
 function Summary() {
-    const [summary, setSummary] = useState("Blah blah blah");
+    const { TextArea } = Input;
+
+    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 postNote = async (note) => {
         try {
             console.log(note)
             const response = await axios.post(BACKEND_URL, {
+                title: title,
                 text: note
             });
 
@@ -20,15 +26,27 @@ function Summary() {
         }
     }
 
-    return (
-        <div>
-            <h1>Summary</h1>
-            <Button type="primary">Primary Button</Button>
-
-            {summary}
+    const handleSummaryEdit = (event) => {
+        setSummary(event.target.value);
+    };
 
-            <button>Edit Summary</button>
-            <button onClick={() => postNote(summary)}>Save Summary</button>
+    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" />
+
+            <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>
     )
 }

diff --git a/frontend/src/styles/Summary.css b/frontend/src/styles/Summary.css
@@ -0,0 +1,39 @@
+.content {
+    min-height: 80vh;
+    min-width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+.centered-container {
+    background-color: white;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: left;
+}
+
+.summary-buttons-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.summary-buttons {
+    margin-top: 25px;
+    max-width: 100px;
+    display: flex;
+    flex-direction: column;
+}
+
+.summary-input {
+    font-family: 'Instrument Sans';
+    font-size: 16px;
+    font-weight: medium;
+}
+
+.summary-title-input {
+    font-family: 'Instrument Sans';
+    font-size: 24px;
+    font-weight: semibold;
+}