kjannette/kongruity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

huge push of backend and frontend to dos to finish wiring up and UI display

Browse Source
This commit is contained in:
KS Jannette
2026-02-11 14:40:45 -05:00
parent fcc8dbe9f7
commit b60faa42d4
11 changed files with 163 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
backend/config/index.js
View File

@@ -1,10 +1,5 @@
import dotenv from 'dotenv';
dotenv.config({ path: '.secrets' });
const config = { const config = {
port: process.env.PORT || 3001, port: process.env.PORT || 3001,
openaiApiKey: process.env.OPENAI_API_KEY,
}; };
export default config; export default config;

19
backend/routes/notes.routes.js
View File

@@ -2,6 +2,7 @@ import { Router } from 'express';
import { readFile } from 'fs/promises'; import { readFile } from 'fs/promises';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { dirname, join } from 'path'; import { dirname, join } from 'path';
import { clusterNotes } from '../services/clustering.service.js';
const router = Router(); const router = Router();
@@ -9,14 +10,28 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename); const __dirname = dirname(__filename);
const DATA_PATH = join(__dirname, '..', 'data', 'notes.json'); const DATA_PATH = join(__dirname, '..', 'data', 'notes.json');
const loadNotes = async () => {
const raw = await readFile(DATA_PATH, 'utf-8');
return JSON.parse(raw);
};
router.get('/', async (req, res) => { router.get('/', async (req, res) => {
try { try {
const raw = await readFile(DATA_PATH, 'utf-8'); const notes = await loadNotes();
const notes = JSON.parse(raw);
res.json(notes); res.json(notes);
} catch (err) { } catch (err) {
res.status(500).json({ error: 'Failed to load notes' }); res.status(500).json({ error: 'Failed to load notes' });
} }
}); });
router.post('/cluster', async (req, res) => {
try {
const notes = await loadNotes();
const clusters = await clusterNotes(notes);
res.json(clusters);
} catch (err) {
res.status(500).json({ error: 'Clustering failed' });
}
});
export default router; export default router;

43
backend/services/clustering.service.js
View File

@@ -1,19 +1,46 @@
import Anthropic from "@anthropic-ai/sdk"; import Anthropic from "@anthropic-ai/sdk";
import anthropicApiKey from "../.secrets"; import { anthropicApiKey } from "../.secrets.js";
const client = new Anthropic({ const client = new Anthropic({
apiKey: anthropicApiKey apiKey: anthropicApiKey,
}); });
const prompt = `You are a helpful assistant that analyzes notes for semantic similarity. Each note is a json object with the const buildPrompt = (notes) => {
various attributes. For clustering purposes, the relvant attribute is "text". Analze the text attributes of the notes and return a json object with the following structure: {{$notes}}`; const notesJson = JSON.stringify(notes, null, 2);
return `You are an expert at analyzing text for semantic similarity and thematic patterns.
Below is a JSON array of sticky notes. Each note has an "id" and a "text" field. Analyze the "text" field of every note and group them into meaningful thematic clusters.
Return ONLY a valid JSON array with this exact structure — no markdown, no explanation, no extra text:
[
{
"label": "Short descriptive theme name",
"noteIds": ["note_001", "note_002"]
}
]
Rules:
- Every note must appear in exactly one cluster
- Each cluster must have a concise, descriptive label
- Group by semantic meaning, not by keywords
- Aim for the most natural number of groups given the data
Here are the notes:
${notesJson}`;
};
export const clusterNotes = async (notes) => { export const clusterNotes = async (notes) => {
const response = await client.messages.create({ const response = await client.messages.create({
model: "claude-opus-4-6", model: "claude-sonnet-4-20250514",
max_tokens: 4096,
messages: [ messages: [
{ role: "user", content: `${prompt}`} { role: "user", content: buildPrompt(notes) },
] ],
}); });
return response.content[0].text;
const raw = response.content[0].text;
return JSON.parse(raw);
}; };

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title> <title>Resias</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

5
frontend/src/App.css
View File

@@ -4,8 +4,3 @@
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
} }
.card {
padding: 2em;
}

24
frontend/src/api/api.tsx
View File

@@ -1,17 +1,35 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery, useMutation } from '@tanstack/react-query';
import type { Sticky } from '../types/types'; import type { Sticky, Cluster } from '../types/types';
const API_BASE = 'http://localhost:3001/v1/notes';
const fetchStickies = async (): Promise<Sticky[]> => { const fetchStickies = async (): Promise<Sticky[]> => {
const response = await fetch('http://localhost:3001/v1/notes'); const response = await fetch(API_BASE);
if (!response.ok) { if (!response.ok) {
throw new Error('Failed to fetch stickies'); throw new Error('Failed to fetch stickies');
} }
return response.json(); return response.json();
}; };
const fetchClusters = async (): Promise<Cluster[]> => {
const response = await fetch(`${API_BASE}/cluster`, {
method: 'POST',
});
if (!response.ok) {
throw new Error('Failed to cluster stickies');
}
return response.json();
};
export const useGetStickies = () => { export const useGetStickies = () => {
return useQuery<Sticky[]>({ return useQuery<Sticky[]>({
queryKey: ['stickies'], queryKey: ['stickies'],
queryFn: fetchStickies, queryFn: fetchStickies,
}); });
}; };
export const useClusterStickies = () => {
return useMutation<Cluster[]>({
mutationFn: fetchClusters,
});
};

21
frontend/src/components/button.tsx
View File

@@ -1,11 +1,14 @@
import { useState } from 'react'; type ClusterButtonProps = {
onClick: () => void;
const Button = () => { isLoading: boolean;
return (
<button>
Click me
</button>
);
}; };
export default Button; const ClusterButton = ({ onClick, isLoading }: ClusterButtonProps) => {
return (
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Clustering...' : 'Run Clustering'}
</button>
);
};
export default ClusterButton;

19
frontend/src/components/stickies.css
View File

@@ -5,3 +5,22 @@
justify-content: center; justify-content: center;
padding: 24px; padding: 24px;
} }
.clusters-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 24px 0;
}
.cluster-group {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 16px;
}
.cluster-label {
margin: 0 0 16px 0;
font-size: 1.2em;
font-weight: 600;
}

51
frontend/src/components/stickies.tsx
View File

@@ -1,18 +1,57 @@
import { useGetStickies } from '../api/api'; import { useGetStickies, useClusterStickies } from '../api/api';
import type { Sticky as StickyType } from '../types/types';
import Sticky from './sticky'; import Sticky from './sticky';
import ClusterButton from './button';
import './stickies.css'; import './stickies.css';
const Stickies = () => { const Stickies = () => {
const { data, isLoading, error } = useGetStickies(); const { data: stickies, isLoading, error } = useGetStickies();
const { mutate: cluster, data: clusters, isPending } = useClusterStickies();
if (isLoading) return <div>Loading...</div>; if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>; if (error) return <div>Error: {error.message}</div>;
const handleCluster = () => {
cluster();
};
const buildStickyMap = (): Map<string, StickyType> => {
const map = new Map<string, StickyType>();
stickies?.forEach((s) => map.set(s.id, s));
return map;
};
if (clusters) {
const stickyMap = buildStickyMap();
return (
<div>
<ClusterButton onClick={handleCluster} isLoading={isPending} />
<div className="clusters-container">
{clusters.map((group) => (
<div key={group.label} className="cluster-group">
<h3 className="cluster-label">{group.label}</h3>
<div className="stickies-grid">
{group.noteIds.map((id) => {
const sticky = stickyMap.get(id);
return sticky ? <Sticky key={sticky.id} sticky={sticky} /> : null;
})}
</div>
</div>
))}
</div>
</div>
);
}
return ( return (
<div className="stickies-grid"> <div>
{data?.map((sticky) => ( <ClusterButton onClick={handleCluster} isLoading={isPending} />
<Sticky key={sticky.id} sticky={sticky} /> <div className="stickies-grid">
))} {stickies?.map((sticky) => (
<Sticky key={sticky.id} sticky={sticky} />
))}
</div>
</div> </div>
); );
}; };

23
frontend/src/index.css
View File

@@ -2,30 +2,17 @@
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #242424; background-color: #242424;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body { body {
margin: 0; margin: 0;
display: flex;
place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
} }
@@ -46,22 +33,26 @@ button {
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;
} }
button:hover { button:hover {
border-color: #646cff; border-color: #646cff;
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
color: #213547; color: #213547;
background-color: #ffffff; background-color: #ffffff;
} }
a:hover {
color: #747bff;
}
button { button {
background-color: #f9f9f9; background-color: #f9f9f9;
} }

5
frontend/src/types/types.tsx
View File

@@ -6,3 +6,8 @@ export type Sticky = {
author: string; author: string;
color: string; color: string;
}; };
export type Cluster = {
label: string;
noteIds: string[];
};