Skip to content

Commit 189001c

Browse files
ARYPROGRAMMERARYPROGRAMMER
committed
implemented ui fixtures and mermaid renderer
Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>
1 parent cfcd8cf commit 189001c

File tree

8 files changed

+1787
-176
lines changed

8 files changed

+1787
-176
lines changed

‎agent/run_agent.py‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
# agent/api.py
21
from fastapi import FastAPI, HTTPException
32
from pydantic import BaseModel
43
from typing import List, Optional
5-
from graph import create_graph, AgentState
64
import uvicorn
5+
from graph import AgentState, create_graph
76
import logging
87

9-
# Set up logging
108
logging.basicConfig(level=logging.INFO)
119
logger = logging.getLogger(__name__)
1210

@@ -23,7 +21,7 @@ class CopilotResponse(BaseModel):
2321
space_complexity: Optional[str]
2422
visualization: Optional[str]
2523

26-
@app.post("/api/copilotkit")
24+
@app.post("/copilotkit")
2725
async def process_request(request: CopilotRequest) -> CopilotResponse:
2826
logger.info(f"Received request with question: {request.question}")
2927

@@ -37,7 +35,6 @@ async def process_request(request: CopilotRequest) -> CopilotResponse:
3735
"time_complexity": None,
3836
"space_complexity": None,
3937
"visualization": None
40-
4138
}
4239

4340
logger.info("Creating graph...")
@@ -60,4 +57,4 @@ async def process_request(request: CopilotRequest) -> CopilotResponse:
6057

6158
if __name__ == "__main__":
6259
logger.info("Starting Copilot API server...")
63-
uvicorn.run(app, host="0.0.0.0", port=8000)
60+
uvicorn.run(app, host="0.0.0.0", port=8000)

‎frontend-interface/app/api/copilot/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const serviceAdapter = new GroqAdapter({ model: "llama-3.3-70b-versatile" });
1010
const runtime = new CopilotRuntime({
1111
remoteEndpoints: [
1212
{
13-
url: process.env.REMOTE_ACTION_URL || "http://localhost:8000/api/copilotkit",
13+
url: process.env.REMOTE_ACTION_URL || "http://localhost:8000/copilotkit",
1414
},
1515
],
1616
});

‎frontend-interface/app/page.tsx‎

Lines changed: 95 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -10,53 +10,54 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
1010
import { Loader2, Plus, Trash2, Code2, Clock, Box, PlayCircle, Brain, Lightbulb, ExternalLink } from "lucide-react";
1111
import { motion, AnimatePresence } from "framer-motion";
1212
import dynamic from 'next/dynamic';
13+
import VisualizationTab from '@/components/MermaidRenderer';
1314

1415
const CodeEditor = dynamic(() => import('../components/Editor'), { ssr: false });
15-
// const DEFAULT_SOLUTION_CODE = `/**
16-
// * Solution for the DSA problem
17-
// * @param {any} input - The input parameter(s) for the problem
18-
// * @returns {any} - The result of the solution
19-
// */
20-
// function solution(input) {
21-
// // Initialize variables
22-
// let result;
16+
const DEFAULT_SOLUTION_CODE = `/**
17+
* Solution for the DSA problem
18+
* @param {any} input - The input parameter(s) for the problem
19+
* @returns {any} - The result of the solution
20+
*/
21+
function solution(input) {
22+
// Initialize variables
23+
let result;
2324
24-
// // Solution implementation
25-
// try {
26-
// // Your solution logic here
25+
// Solution implementation
26+
try {
27+
// Your solution logic here
2728
28-
// // Example implementation
29-
// if (Array.isArray(input)) {
30-
// result = input.reduce((acc, curr) => acc + curr, 0);
31-
// } else {
32-
// result = input;
33-
// }
34-
// } catch (error) {
35-
// console.error('Error in solution:', error);
36-
// throw error;
37-
// }
29+
// Example implementation
30+
if (Array.isArray(input)) {
31+
result = input.reduce((acc, curr) => acc + curr, 0);
32+
} else {
33+
result = input;
34+
}
35+
} catch (error) {
36+
console.error('Error in solution:', error);
37+
throw error;
38+
}
3839
39-
// return result;
40-
// }
40+
return result;
41+
}
4142
42-
// // Example test cases
43-
// const testCases = [
44-
// { input: [1, 2, 3, 4, 5], expectedOutput: 15 },
45-
// { input: [], expectedOutput: 0 },
46-
// { input: [42], expectedOutput: 42 }
47-
// ];
43+
// Example test cases
44+
const testCases = [
45+
{ input: [1, 2, 3, 4, 5], expectedOutput: 15 },
46+
{ input: [], expectedOutput: 0 },
47+
{ input: [42], expectedOutput: 42 }
48+
];
4849
49-
// // Run test cases
50-
// testCases.forEach((testCase, index) => {
51-
// const output = solution(testCase.input);
52-
// console.log(\`Test case \${index + 1}:\`);
53-
// console.log('Input:', testCase.input);
54-
// console.log('Expected:', testCase.expectedOutput);
55-
// console.log('Actual:', output);
56-
// console.log('Pass:', output === testCase.expectedOutput);
57-
// console.log('---');
58-
// });
59-
// `;
50+
// Run test cases
51+
testCases.forEach((testCase, index) => {
52+
const output = solution(testCase.input);
53+
console.log(\`Test case \${index + 1}:\`);
54+
console.log('Input:', testCase.input);
55+
console.log('Expected:', testCase.expectedOutput);
56+
console.log('Actual:', output);
57+
console.log('Pass:', output === testCase.expectedOutput);
58+
console.log('---');
59+
});
60+
`;
6061

6162

6263
const DSASolutionInterface = () => {
@@ -68,7 +69,7 @@ const DSASolutionInterface = () => {
6869
visualization?: string;
6970
}
7071
const [showEditor, setShowEditor] = useState(false);
71-
const [editorCode, setEditorCode] = useState('');
72+
const [editorCode, setEditorCode] = useState(DEFAULT_SOLUTION_CODE);
7273

7374
const handleOpenEditor = () => {
7475
if (solution?.code) {
@@ -90,7 +91,7 @@ const DSASolutionInterface = () => {
9091
const steps = [
9192
{ title: "Problem", icon: Brain },
9293
{ title: "Test Cases", icon: PlayCircle },
93-
{ title: "Analysis", icon: Lightbulb },
94+
{ title: "Expected Complexity", icon: Lightbulb },
9495
];
9596

9697
const handleAddTestCase = () => {
@@ -110,38 +111,47 @@ const DSASolutionInterface = () => {
110111
const handleSubmit = async () => {
111112
setLoading(true);
112113
try {
113-
// // Placeholder for API call
114-
// const response = await new Promise<{
115-
// explanation: string;
116-
// diagram: string;
117-
// code: string;
118-
// timeComplexity: string;
119-
// spaceComplexity: string;
120-
// }>(resolve =>
121-
// setTimeout(() => resolve({
122-
// explanation: "Example explanation of the solution...",
123-
// diagram: "graph TD\nA[Start] --> B[Process]\nB --> C[End]",
124-
// code: DEFAULT_SOLUTION_CODE,
125-
// timeComplexity: "O(n)",
126-
// spaceComplexity: "O(1)"
127-
// }), 1500)
128-
// );
129-
// const data = response;
130-
// setSolution(data);
131-
// setTimeComplexity(response.timeComplexity);
132-
// setSpaceComplexity(response.spaceComplexity);
133-
// setEditorCode(response.code);
134-
const response = await fetch('/api/copilotkit', {
135-
method: 'POST',
136-
headers: { 'Content-Type': 'application/json' },
137-
body: JSON.stringify({ "question": question, "testCases" :testCases })
114+
// Placeholder for API call
115+
const response = await new Promise<{
116+
explanation: string;
117+
diagram: string;
118+
code: string;
119+
timeComplexity: string;
120+
spaceComplexity: string;
121+
visualization: string;
122+
}>(resolve =>
123+
setTimeout(() => resolve({
124+
explanation: "Example explanation of the solution...",
125+
diagram: "graph TD\nA[Start] --> B[Process]\nB --> C[End]",
126+
code: DEFAULT_SOLUTION_CODE,
127+
timeComplexity: "O(n)",
128+
spaceComplexity: "O(1)",
129+
visualization: "graph TD\nA[Start] --> B[Process]\nB --> C[End]"
130+
131+
132+
}), 1500)
133+
);
134+
135+
setSolution({
136+
code: response.code,
137+
explanation: response.explanation,
138+
visualization: response.diagram
138139
});
139-
console.log(response);
140-
const data = await response.json();
141-
setSolution(data);
142-
setTimeComplexity(data.timeComplexity);
143-
setSpaceComplexity(data.spaceComplexity);
144-
setEditorCode(data.code);
140+
setTimeComplexity(response.timeComplexity);
141+
setSpaceComplexity(response.spaceComplexity);
142+
setEditorCode(response.code);
143+
// const response = await fetch('/copilotkit', {
144+
// method: 'POST',
145+
// headers: { 'Content-Type': 'application/json' },
146+
// body: JSON.stringify({ "question": question, "testCases" :testCases })
147+
// });
148+
149+
150+
// const data = await response.json();
151+
// setSolution(data);
152+
// setTimeComplexity(data.timeComplexity);
153+
// setSpaceComplexity(data.spaceComplexity);
154+
// setEditorCode(data.code);
145155

146156
} catch (error) {
147157
console.error('Error:', error);
@@ -160,7 +170,7 @@ const DSASolutionInterface = () => {
160170
className="mb-8"
161171
>
162172
<div className="flex justify-between items-center mb-6">
163-
<h1 className="text-3xl font-bold text-gray-800">DSA Problem Solver</h1>
173+
<h1 className="text-3xl font-bold text-gray-800 mt-5">Self Study with Copilotkit</h1>
164174
<div className="flex gap-2">
165175
{steps.map((step, index) => (
166176
<Button
@@ -295,26 +305,26 @@ const DSASolutionInterface = () => {
295305
</Button>
296306
</div>
297307

298-
<Tabs defaultValue="explanation" className="space-y-4">
308+
<Tabs defaultValue="code" className="space-y-4">
299309
<TabsList className="grid w-full grid-cols-4">
310+
<TabsTrigger value="code">
311+
<Code2 className="h-4 w-4 mr-2" /> Code
312+
</TabsTrigger>
300313
<TabsTrigger value="explanation">
301-
<Code2 className="h-4 w-4 mr-2" /> Solution
314+
<Clock className="h-4 w-4 mr-2" /> Explanation
302315
</TabsTrigger>
303316
<TabsTrigger value="complexity">
304-
<Clock className="h-4 w-4 mr-2" /> Complexity
317+
<Box className="h-4 w-4 mr-2" /> Obtained Complexity
305318
</TabsTrigger>
306319
<TabsTrigger value="visualization">
307-
<Box className="h-4 w-4 mr-2" /> Visualization
308-
</TabsTrigger>
309-
<TabsTrigger value="test">
310-
<PlayCircle className="h-4 w-4 mr-2" /> Test Cases
320+
<PlayCircle className="h-4 w-4 mr-2" /> Visualization
311321
</TabsTrigger>
312322
</TabsList>
313323

314-
<TabsContent value="explanation">
324+
<TabsContent value="code">
315325
<Card>
316326
<CardHeader>
317-
<CardTitle>Solution Explanation</CardTitle>
327+
<CardTitle>Code in Python [officially supported till now] </CardTitle>
318328
</CardHeader>
319329
<CardContent>
320330
<div className="space-y-4">
@@ -361,16 +371,14 @@ const DSASolutionInterface = () => {
361371
<CardContent>
362372
<div className="border p-4 rounded-lg bg-gray-50">
363373
{solution.visualization && (
364-
<pre className="text-sm whitespace-pre-wrap overflow-x-auto">
365-
{solution.visualization}
366-
</pre>
374+
<VisualizationTab visualization={solution.visualization} />
367375
)}
368376
</div>
369377
</CardContent>
370378
</Card>
371379
</TabsContent>
372380

373-
<TabsContent value="test">
381+
<TabsContent value="explanation">
374382
<Card>
375383
<CardHeader>
376384
<CardTitle>Test Cases</CardTitle>

‎frontend-interface/components/Editor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const LANGUAGE_TO_PISTON = {
3434

3535
const CodeEditor: React.FC<CodeEditorProps> = ({
3636
code,
37-
language: initialLanguage = "javascript",
37+
language: initialLanguage = "python",
3838
theme: initialTheme = "vs-dark",
3939
onClose,
4040
onChange

0 commit comments

Comments
 (0)