Skip to content

Commit f694f5e

Browse files
ARYPROGRAMMERARYPROGRAMMER
committed
status: complete deployment and development
Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>
1 parent c31c286 commit f694f5e

File tree

3 files changed

+121
-75
lines changed

3 files changed

+121
-75
lines changed

‎README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,13 @@
1414
<img src="https://img.shields.io/badge/Frontend-Next.js-orange" alt="Frontend: Next.js Badge" />
1515
</a>
1616
<a href="https://youtu.be/E1q67IDcdMU">
17-
<img src="https://img.shields.io/badge/Watch-Demo%20Video-red" alt="Demo Video Badge" />
17+
<img src="https://img.shields.io/badge/Watch-Demo%20Video 1-red" alt="Demo Video Badge" />
18+
</a>
19+
20+
<a href="https://youtu.be/XpOeWhbxqOY">
21+
<img src="https://img.shields.io/badge/Watch-Demo%20Video 2-red" alt="Demo Video Badge" />
1822
</a>
23+
1924
<a href="https://learn-coding-with-copilotkit.vercel.app/">
2025
<img src="https://img.shields.io/badge/Website-Live-brightgreen" alt="Website Badge" />
2126
</a>

‎frontend-interface/app/page.tsx

Lines changed: 10 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React, { useEffect, useState } from "react";
44
import { motion, AnimatePresence } from "framer-motion";
55
import dynamic from "next/dynamic";
6-
import { Loader2, ExternalLink, Cpu, MessageSquare, Play } from "lucide-react";
6+
import { Loader2, ExternalLink, Cpu, MessageSquare } from "lucide-react";
77
import { Button } from "@/components/ui/button";
88
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
99
import ChatInterface from "@/components/ChatInterface";
@@ -17,6 +17,7 @@ import GitHubStarButtons from "@/components/StarComponent";
1717
import Image from "next/image";
1818
import { CopilotSidebar } from "@copilotkit/react-ui";
1919
import "@copilotkit/react-ui/styles.css";
20+
import VideoSection from "@/components/VideoSection";
2021

2122
interface AgentState {
2223
question: string;
@@ -183,13 +184,12 @@ const DSASolutionInterface = () => {
183184
timeComplexity,
184185
spaceComplexity,
185186
};
186-
187-
// Only update if the state has actually changed
187+
188188
if (!isStateEqual(state, newState)) {
189189
setState((prevState = state) => ({
190190
...prevState,
191191
...newState,
192-
// Preserve other fields that aren't being updated
192+
193193
code: prevState.code,
194194
explanation: prevState.explanation,
195195
visualization: prevState.visualization,
@@ -205,7 +205,6 @@ const DSASolutionInterface = () => {
205205

206206
setShowChat(true);
207207

208-
// First, send the problem context
209208
const contextMessage = new TextMessage({
210209
id: "context-" + Date.now().toString(),
211210
role: Role.System,
@@ -218,14 +217,14 @@ const DSASolutionInterface = () => {
218217
`,
219218
});
220219

221-
// Then send the user's question
220+
222221
const userMessage = new TextMessage({
223222
id: "user-" + Date.now().toString(),
224223
role: Role.User,
225224
content: question,
226225
});
227226

228-
// Send messages with a slight delay
227+
229228
setTimeout(() => {
230229
appendMessage(contextMessage);
231230
setTimeout(() => {
@@ -236,27 +235,23 @@ const DSASolutionInterface = () => {
236235

237236
const handleSolutionUpdate = (content: string) => {
238237
try {
239-
// Extract code block
238+
240239
const codeMatch = content.match(/```python\n([\s\S]*?)```/);
241240
const code = codeMatch ? codeMatch[1].trim() : "";
242241

243-
// Extract explanation (text before code block)
242+
244243
const explanation = content.split("```")[0].trim();
245244

246-
// Extract complexities
247245
const timeMatch = content.match(/[Tt]ime [Cc]omplexity:?\s*(O\([^)]+\))/);
248246
const spaceMatch = content.match(
249247
/[Ss]pace [Cc]omplexity:?\s*(O\([^)]+\))/
250248
);
251249

252-
// // Extract visualization if present
253-
// const visualMatch = content.match(/```mermaid\n([\s\S]*?)```/);
254250

255-
// Update all states
256251
setSolution(prevSolution => ({
257252
code: code,
258253
explanation: explanation,
259-
visualization: prevSolution?.visualization // Preserve existing visualization
254+
visualization: prevSolution?.visualization
260255
}));
261256

262257
if (timeMatch) setTimeComplexity(timeMatch[1]);
@@ -288,19 +283,6 @@ const DSASolutionInterface = () => {
288283
}, [visibleMessages]);
289284

290285

291-
const [isPlaying, setIsPlaying] = useState(false);
292-
const videoUrl = "https://vimeo.com/1044157863";
293-
294-
const getVimeoEmbedUrl = (url: string) => {
295-
const videoId = url.split("vimeo.com/")[1];
296-
return `https://player.vimeo.com/video/${videoId}`;
297-
};
298-
299-
const embedUrl = getVimeoEmbedUrl(videoUrl);
300-
const handlePlayClick = () => {
301-
setIsPlaying(true);
302-
};
303-
304286
return (
305287
<div className="flex min-h-screen dark:from-gray-900 dark:to-gray-800 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent">
306288

@@ -414,53 +396,7 @@ const DSASolutionInterface = () => {
414396
</Button>
415397
</motion.div>
416398
<GitHubStarButtons />
417-
{/* Video Section */}
418-
<motion.div
419-
className="relative max-w-4xl flex-col mx-auto mb-32 rounded-2xl overflow-hidden shadow-xl"
420-
initial={{ opacity: 0 }}
421-
animate={{ opacity: 1 }}
422-
transition={{ duration: 1 }}
423-
>
424-
<div className="aspect-video bg-gray-800 rounded-2xl overflow-hidden relative">
425-
{isPlaying ? (
426-
<iframe
427-
className="w-full h-full"
428-
src={embedUrl}
429-
title="Vimeo video player"
430-
frameBorder="0"
431-
allow="autoplay; fullscreen; picture-in-picture"
432-
allowFullScreen
433-
></iframe>
434-
) : (
435-
<>
436-
<Image src="/thumbnail.png" width={1800} height={1800} alt="CoAgents and Langgraph" className="object-cover h-full w-full" />
437-
<div className="absolute bottom-0 left-0 right-0 p-8">
438-
<div className="flex items-center justify-between">
439-
<div className="flex items-center space-x-4">
440-
<div
441-
className="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center cursor-pointer hover:bg-purple-700 transition-colors"
442-
onClick={handlePlayClick}
443-
>
444-
<Play className="h-6 w-6" />
445-
</div>
446-
<div>
447-
<p className="text-lg text-white font-semibold">See A Full Fledged Demo</p>
448-
<p className="text-purple-200">Watch the demo insight during development</p>
449-
</div>
450-
</div>
451-
<Button
452-
variant="outline"
453-
className="text-black border-white/20 hover:bg-white/10 transition-colors"
454-
onClick={() => setIsPlaying(!isPlaying)}
455-
>
456-
Learn More
457-
</Button>
458-
</div>
459-
</div>
460-
</>
461-
)}
462-
</div>
463-
</motion.div>
399+
<VideoSection />
464400
</div>
465401

466402
{!showChat && (

‎frontend-interface/components/VideoSection.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import React from 'react';
2+
import { motion } from "framer-motion";
3+
import { Button } from "@/components/ui/button";
4+
import { Play } from "lucide-react";
5+
import Image from "next/image";
6+
7+
const VideoSection = () => {
8+
const [isPlaying1, setIsPlaying1] = React.useState(false);
9+
const [isPlaying2, setIsPlaying2] = React.useState(false);
10+
11+
const videos = [
12+
{
13+
id: 1,
14+
videoUrl: "https://vimeo.com/1044157863",
15+
thumbnail: "/thumbnail.png",
16+
title: "See A Full Fledged Demonstration",
17+
subtitle: "Watch the demo insight during development",
18+
isPlaying: isPlaying1,
19+
setIsPlaying: setIsPlaying1
20+
},
21+
{
22+
id: 2,
23+
videoUrl: "https://vimeo.com/1044282090",
24+
thumbnail: "/thumbnail.png",
25+
title: "Recent Deployed Demonstration",
26+
subtitle: "See Near Release Demonstration of the Project",
27+
isPlaying: isPlaying2,
28+
setIsPlaying: setIsPlaying2
29+
}
30+
];
31+
32+
const getVimeoEmbedUrl = (url: string) => {
33+
const videoId = url.split("vimeo.com/")[1];
34+
return `https://player.vimeo.com/video/${videoId}`;
35+
};
36+
37+
return (
38+
<motion.div
39+
className="w-full max-w-[95vw] mx-auto mb-32 px-2 space-y-12 md:space-y-0 md:grid md:grid-cols-2 md:gap-12"
40+
initial={{ opacity: 0 }}
41+
animate={{ opacity: 1 }}
42+
transition={{ duration: 1 }}
43+
>
44+
{videos.map((video) => (
45+
<motion.div
46+
key={video.id}
47+
className="relative rounded-3xl overflow-hidden shadow-2xl bg-gray-800/90 backdrop-blur-sm"
48+
initial={{ opacity: 0, y: 20 }}
49+
animate={{ opacity: 1, y: 0 }}
50+
transition={{ delay: video.id * 0.2 }}
51+
>
52+
<div className="aspect-video w-full h-full relative">
53+
{video.isPlaying ? (
54+
<iframe
55+
className="w-full h-full"
56+
src={getVimeoEmbedUrl(video.videoUrl)}
57+
title="Vimeo video player"
58+
frameBorder="0"
59+
allow="autoplay; fullscreen; picture-in-picture"
60+
allowFullScreen
61+
/>
62+
) : (
63+
<>
64+
<Image
65+
src={video.thumbnail}
66+
width={2560}
67+
height={1440}
68+
alt="Video thumbnail"
69+
className="object-cover h-full w-full"
70+
priority
71+
/>
72+
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-gray-900/95 via-gray-900/70 to-transparent">
73+
<div className="flex items-center justify-between">
74+
<div className="flex items-center space-x-6">
75+
<div
76+
className="w-16 h-16 rounded-full bg-purple-600 flex items-center justify-center cursor-pointer hover:bg-purple-700 transition-colors shadow-lg hover:shadow-purple-500/50"
77+
onClick={() => video.setIsPlaying(true)}
78+
>
79+
<Play className="h-8 w-8" />
80+
</div>
81+
<div>
82+
<p className="text-2xl text-white font-bold tracking-tight">{video.title}</p>
83+
<p className="text-xl text-purple-200 mt-1">{video.subtitle}</p>
84+
</div>
85+
</div>
86+
<Button
87+
variant="outline"
88+
size="lg"
89+
className="text-black hover:text-white border-white/20 hover:bg-white/10 transition-colors text-lg px-8"
90+
onClick={() => video.setIsPlaying(!video.isPlaying)}
91+
>
92+
Learn More
93+
</Button>
94+
</div>
95+
</div>
96+
</>
97+
)}
98+
</div>
99+
</motion.div>
100+
))}
101+
</motion.div>
102+
);
103+
};
104+
105+
export default VideoSection;

0 commit comments

Comments
 (0)