[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { cn } from "@/lib/utils" import { ThemeProvider } from "@/components/theme-provider" import { SidebarProvider, Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, } from "@/components/ui/sidebar" import { BookOpen, Brain, Home, LineChart, LogOut, MessageSquare, Settings, User, Video } from "lucide-react" import Link from "next/link" const inter = Inter({ subsets: ["latin"] }) export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } function AppSidebar() { return (

ShikshaSaathi

AI for Education

Dashboard

GyanSankalp ShikshaGPT SamvaadViz Classroom Feedback Profile Settings Logout ) } [V0_FILE]typescriptreact:file="app/saarthi/page.tsx" isMerged="true" import type { Metadata } from "next" import { SaarthiDashboard } from "@/components/saarthi/saarthi-dashboard" export const metadata: Metadata = { title: "Saarthi - AI-Coached Lesson Delivery", description: "Real-time feedback on teaching delivery, pacing, clarity, and engagement", } export default function SaarthiPage() { return (

Saarthi

AI-Coached Lesson Delivery Platform that provides real-time feedback on your teaching

) } [V0_FILE]typescriptreact:file="components/saarthi/video-capture.tsx" isMerged="true" "use client" import { useRef, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { VideoOff } from "lucide-react" interface VideoCaptureProps { isRecording: boolean videoEnabled: boolean } export function VideoCapture({ isRecording, videoEnabled }: VideoCaptureProps) { const videoRef = useRef(null) useEffect(() => { if (isRecording && videoEnabled && videoRef.current) { navigator.mediaDevices .getUserMedia({ video: true }) .then((stream) => { if (videoRef.current) { videoRef.current.srcObject = stream } }) .catch((err) => { console.error("Error accessing camera:", err) }) } else if (videoRef.current && videoRef.current.srcObject) { const stream = videoRef.current.srcObject as MediaStream stream.getTracks().forEach((track) => track.stop()) videoRef.current.srcObject = null } return () => { if (videoRef.current && videoRef.current.srcObject) { const stream = videoRef.current.srcObject as MediaStream stream.getTracks().forEach((track) => track.stop()) } } }, [isRecording, videoEnabled]) return ( {videoEnabled ? (

) } [V0_FILE]typescriptreact:file="components/saarthi/feedback-sidebar.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertCircle, Clock, MessageSquare, ThumbsUp, Volume2 } from "lucide-react" import { Badge } from "@/components/ui/badge" interface FeedbackItem { type: "pacing" | "clarity" | "engagement" | "summary" message: string timestamp: string } interface FeedbackSidebarProps { feedback: FeedbackItem[] isRecording: boolean } export function FeedbackSidebar({ feedback, isRecording }: FeedbackSidebarProps) { const getIconForType = (type: string) => { switch (type) { case "pacing": return case "clarity": return case "engagement": return case "summary": return default: return } } const getColorForType = (type: string) => { switch (type) { case "pacing": return "bg-blue-500/10 text-blue-500 border-blue-200" case "clarity": return "bg-amber-500/10 text-amber-500 border-amber-200" case "engagement": return "bg-green-500/10 text-green-500 border-green-200" case "summary": return "bg-purple-500/10 text-purple-500 border-purple-200" default: return "bg-gray-500/10 text-gray-500 border-gray-200" } } const formatTime = (timestamp: string) => { const date = new Date(timestamp) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } return ( Teaching Feedback {isRecording && ( Live )} {feedback.length === 0 ? (

Feedback will appear here as you teach

) : (

{feedback.map((item, index) => (

{getIconForType(item.type)} {item.type}

{formatTime(item.timestamp)}

{item.message}

))}

)} {isRecording && feedback.length > 0 && (

Teaching Tips

1
Vary your tone to emphasize key points
2
Ask more open-ended questions to check understanding
3
Use visual aids to reinforce complex concepts

)} ) } [V0_FILE]typescriptreact:file="components/saarthi/transcript-window.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FileText } from "lucide-react" interface TranscriptWindowProps { transcript: string[] } export function TranscriptWindow({ transcript }: TranscriptWindowProps) { const highlightFillerWords = (text: string) => { // Highlight filler words like "um", "uh", "like", etc. return text.replace( /(^|\s)(um|uh|like|you know|actually|basically|literally)(\s|$|,|\.)/gi, '$1$2$3', ) } return ( Lesson Transcript {transcript.length === 0 ? (

Your lesson transcript will appear here as you teach

) : (

{transcript.map((text, index) => (

))}

)} ) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; /* Sidebar variables */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; /* Sidebar variables */ --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 0 0% 98%; --sidebar-primary-foreground: 240 5.9% 10%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.3s ease-in-out forwards; } [V0_FILE]typescriptreact:file="app/gyansankalp/page.tsx" isMerged="true" import type { Metadata } from "next" import { GyanSankalpDashboard } from "@/components/gyansankalp/gyansankalp-dashboard" export const metadata: Metadata = { title: "GyanSankalp - Micro-Curriculum Personalization", description: "Personalize curriculum based on student performance with AI-generated learning paths", } export default function GyanSankalpPage() { return (

GyanSankalp

Micro-Curriculum Personalization tool that helps you create personalized learning paths

) } [V0_FILE]typescriptreact:file="components/gyansankalp/curriculum-flow.tsx" isMerged="true" "use client" import ReactFlow, { Background, Controls, MiniMap, type Node, type Edge, MarkerType } from "reactflow" import "reactflow/dist/style.css" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Download, RefreshCw, Save } from "lucide-react" interface CurriculumFlowProps { subject: string grade: string onReset: () => void } // Custom node component const CustomNode = ({ data }: { data: any }) => { return ( {data.title} {data.type && {data.type}}

{data.description}

) } const nodeTypes = { custom: CustomNode, } export function CurriculumFlow({ subject, grade, onReset }: CurriculumFlowProps) { // Generate nodes and edges based on subject and grade const generateNodesAndEdges = () => { let nodes: Node[] = [] let edges: Edge[] = [] // Science curriculum for grade 5-7 if (subject === "science" && ["5", "6", "7"].includes(grade)) { nodes = [ { id: "1", type: "custom", position: { x: 250, y: 0 }, data: { title: "Introduction to Photosynthesis", type: "Core Concept", description: "Basic understanding of how plants make food using sunlight", }, }, { id: "2", type: "custom", position: { x: 100, y: 100 }, data: { title: "Plant Parts and Functions", type: "Prerequisite", description: "Understanding of leaves, stems, and roots", }, }, { id: "3", type: "custom", position: { x: 400, y: 100 }, data: { title: "Sunlight and Energy", type: "Prerequisite", description: "Basic concept of light as energy source", }, }, { id: "4", type: "custom", position: { x: 100, y: 200 }, data: { title: "Chlorophyll and Light Absorption", type: "Key Concept", description: "How plants capture light energy using chlorophyll", }, }, { id: "5", type: "custom", position: { x: 400, y: 200 }, data: { title: "Carbon Dioxide and Oxygen Cycle", type: "Key Concept", description: "Gas exchange process during photosynthesis", }, }, { id: "6", type: "custom", position: { x: 250, y: 300 }, data: { title: "Glucose Production", type: "Advanced Concept", description: "How plants convert light energy to chemical energy in glucose", }, }, { id: "7", type: "custom", position: { x: 100, y: 400 }, data: { title: "Practical: Leaf Experiment", type: "Activity", description: "Testing leaves for starch as evidence of photosynthesis", }, }, { id: "8", type: "custom", position: { x: 400, y: 400 }, data: { title: "Local Application: Crop Growth", type: "Local Context", description: "Connecting photosynthesis to local farming practices", }, }, { id: "9", type: "custom", position: { x: 250, y: 500 }, data: { title: "Assessment: Photosynthesis Quiz", type: "Assessment", description: "Evaluate understanding of the photosynthesis process", }, }, ] edges = [ { id: "e1-2", source: "1", target: "2", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e1-3", source: "1", target: "3", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e2-4", source: "2", target: "4", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e3-5", source: "3", target: "5", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e4-6", source: "4", target: "6", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e5-6", source: "5", target: "6", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e6-7", source: "6", target: "7", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e6-8", source: "6", target: "8", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e7-9", source: "7", target: "9", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e8-9", source: "8", target: "9", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, ] } // Mathematics curriculum for grade 5-7 else if (subject === "mathematics" && ["5", "6", "7"].includes(grade)) { nodes = [ { id: "1", type: "custom", position: { x: 250, y: 0 }, data: { title: "Introduction to Fractions", type: "Core Concept", description: "Understanding parts of a whole", }, }, { id: "2", type: "custom", position: { x: 100, y: 100 }, data: { title: "Equivalent Fractions", type: "Key Concept", description: "Different fractions that represent the same value", }, }, { id: "3", type: "custom", position: { x: 400, y: 100 }, data: { title: "Comparing Fractions", type: "Key Concept", description: "Determining which fraction is larger or smaller", }, }, { id: "4", type: "custom", position: { x: 100, y: 200 }, data: { title: "Adding Fractions", type: "Operation", description: "Adding fractions with like and unlike denominators", }, }, { id: "5", type: "custom", position: { x: 400, y: 200 }, data: { title: "Subtracting Fractions", type: "Operation", description: "Subtracting fractions with like and unlike denominators", }, }, { id: "6", type: "custom", position: { x: 250, y: 300 }, data: { title: "Multiplying Fractions", type: "Advanced Operation", description: "Multiplying fractions and mixed numbers", }, }, { id: "7", type: "custom", position: { x: 100, y: 400 }, data: { title: "Dividing Fractions", type: "Advanced Operation", description: "Dividing fractions and mixed numbers", }, }, { id: "8", type: "custom", position: { x: 400, y: 400 }, data: { title: "Local Application: Market Math", type: "Local Context", description: "Using fractions in local market scenarios", }, }, { id: "9", type: "custom", position: { x: 250, y: 500 }, data: { title: "Assessment: Fractions Quiz", type: "Assessment", description: "Evaluate understanding of fraction operations", }, }, ] edges = [ { id: "e1-2", source: "1", target: "2", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e1-3", source: "1", target: "3", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e2-4", source: "2", target: "4", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e3-5", source: "3", target: "5", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e4-6", source: "4", target: "6", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e5-6", source: "5", target: "6", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e6-7", source: "6", target: "7", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e6-8", source: "6", target: "8", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e7-9", source: "7", target: "9", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e8-9", source: "8", target: "9", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, ] } // Default curriculum for other subjects/grades else { nodes = [ { id: "1", type: "custom", position: { x: 250, y: 50 }, data: { title: `Introduction to ${subject}`, type: "Core Concept", description: `Basic understanding of ${subject} for grade ${grade}`, }, }, { id: "2", type: "custom", position: { x: 100, y: 150 }, data: { title: "Foundational Concepts", type: "Prerequisite", description: "Essential background knowledge", }, }, { id: "3", type: "custom", position: { x: 400, y: 150 }, data: { title: "Key Terminology", type: "Prerequisite", description: "Important terms and definitions", }, }, { id: "4", type: "custom", position: { x: 250, y: 250 }, data: { title: "Core Skills Development", type: "Key Concept", description: "Building essential skills in the subject", }, }, { id: "5", type: "custom", position: { x: 100, y: 350 }, data: { title: "Practical Application", type: "Activity", description: "Hands-on activities to reinforce learning", }, }, { id: "6", type: "custom", position: { x: 400, y: 350 }, data: { title: "Local Context Examples", type: "Local Context", description: "Connecting concepts to local experiences", }, }, { id: "7", type: "custom", position: { x: 250, y: 450 }, data: { title: "Final Assessment", type: "Assessment", description: "Evaluate understanding of key concepts", }, }, ] edges = [ { id: "e1-2", source: "1", target: "2", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e1-3", source: "1", target: "3", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e2-4", source: "2", target: "4", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e3-4", source: "3", target: "4", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e4-5", source: "4", target: "5", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e4-6", source: "4", target: "6", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e5-7", source: "5", target: "7", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, { id: "e6-7", source: "6", target: "7", animated: true, markerEnd: { type: MarkerType.ArrowClosed } }, ] } return { nodes, edges } } const { nodes, edges } = generateNodesAndEdges() return (

{subject.charAt(0).toUpperCase() + subject.slice(1)} Curriculum for Grade {grade} AI-generated personalized learning path

Drag nodes to rearrange the curriculum flow. Double-click to edit content.

) } [V0_FILE]typescriptreact:file="app/shikshagpt/page.tsx" isMerged="true" import type { Metadata } from "next" import { ShikshaGPTDashboard } from "@/components/shikshagpt/shikshagpt-dashboard" export const metadata: Metadata = { title: "ShikshaGPT - Multilingual Co-Teaching Agent", description: "Interactive multilingual teaching assistant that explains topics in regional languages", } export default function ShikshaGPTPage() { return (

ShikshaGPT

Multilingual Co-Teaching Agent that explains topics in regional languages with visual aids

) } [V0_FILE]typescriptreact:file="app/samvaadviz/page.tsx" isMerged="true" import type { Metadata } from "next" import { SamvaadVizDashboard } from "@/components/samvaadviz/samvaadviz-dashboard" export const metadata: Metadata = { title: "SamvaadViz - Teaching Reflection Dashboard", description: "Visualize teaching patterns and receive actionable insights based on class transcripts", } export default function SamvaadVizPage() { return (

SamvaadViz

Teaching Reflection Dashboard that visualizes your teaching patterns and provides actionable insights

) } [V0_FILE]typescriptreact:file="components/samvaadviz/charts.tsx" isMerged="true" "use client" import { Bar, Line, Pie } from "react-chartjs-2" import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend, } from "chart.js" ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend) export function PieChart() { const data = { labels: ["Instruction", "Discussion", "Activities", "Assessment", "Management"], datasets: [ { data: [40, 25, 15, 10, 10], backgroundColor: [ "rgba(59, 130, 246, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(245, 158, 11, 0.7)", "rgba(139, 92, 246, 0.7)", "rgba(239, 68, 68, 0.7)", ], borderColor: [ "rgba(59, 130, 246, 1)", "rgba(16, 185, 129, 1)", "rgba(245, 158, 11, 1)", "rgba(139, 92, 246, 1)", "rgba(239, 68, 68, 1)", ], borderWidth: 1, }, ], } const options = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: "bottom" as const, labels: { boxWidth: 12, font: { size: 10, }, }, }, }, } return (

) } export function LineChart() { const data = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], datasets: [ { label: "Participation", data: [65, 72, 68, 75, 80], borderColor: "rgba(59, 130, 246, 1)", backgroundColor: "rgba(59, 130, 246, 0.2)", tension: 0.3, fill: true, }, ], } const options = { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, ticks: { font: { size: 10, }, }, }, x: { ticks: { font: { size: 10, }, }, }, }, plugins: { legend: { display: false, }, }, } return (

) } export function BarChart() { const data = { labels: ["Recall", "Understanding", "Application", "Analysis", "Evaluation"], datasets: [ { label: "Frequency", data: [30, 25, 15, 10, 5], backgroundColor: "rgba(59, 130, 246, 0.7)", borderColor: "rgba(59, 130, 246, 1)", borderWidth: 1, }, ], } const options = { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { font: { size: 10, }, }, }, x: { ticks: { font: { size: 10, }, }, }, }, plugins: { legend: { display: false, }, }, } return (

) } [V0_FILE]typescriptreact:file="components/samvaadviz/heatmap-chart.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" export function HeatmapChart() { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight // Sample data for the heatmap (days of week vs. time of class) const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] const times = ["9:00", "9:15", "9:30", "9:45", "10:00", "10:15", "10:30", "10:45", "11:00"] // Sample engagement data (0-100) const data = [ [45, 60, 75, 80, 70, 65, 55, 40, 30], // Monday [50, 65, 80, 85, 75, 60, 50, 45, 40], // Tuesday [55, 70, 85, 90, 80, 70, 60, 50, 45], // Wednesday [40, 55, 70, 75, 65, 60, 50, 40, 35], // Thursday [35, 50, 65, 70, 60, 55, 45, 35, 30], // Friday ] // Calculate cell dimensions const cellWidth = (canvas.width - 60) / times.length const cellHeight = (canvas.height - 40) / days.length // Draw the heatmap for (let i = 0; i < days.length; i++) { // Draw day labels ctx.fillStyle = "#666" ctx.font = "10px sans-serif" ctx.textAlign = "right" ctx.fillText(days[i], 55, i * cellHeight + cellHeight / 2 + 20) for (let j = 0; j < times.length; j++) { // Draw time labels (only for the first row) if (i === 0) { ctx.fillStyle = "#666" ctx.font = "10px sans-serif" ctx.textAlign = "center" ctx.fillText(times[j], j * cellWidth + cellWidth / 2 + 60, 15) } // Calculate color based on value const value = data[i][j] const intensity = Math.min(255, Math.floor((value / 100) * 255)) // Use a color gradient from blue to red let r, g, b if (value < 50) { // Blue to green (0-50) r = 0 g = Math.floor((value / 50) * 255) b = 255 - g } else { // Green to red (50-100) r = Math.floor(((value - 50) / 50) * 255) g = 255 - r b = 0 } ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.7)` // Draw the cell ctx.fillRect(j * cellWidth + 60, i * cellHeight + 20, cellWidth - 2, cellHeight - 2) // Add the value text ctx.fillStyle = value > 70 || value < 30 ? "#fff" : "#000" ctx.font = "bold 10px sans-serif" ctx.textAlign = "center" ctx.fillText(value.toString(), j * cellWidth + cellWidth / 2 + 60, i * cellHeight + cellHeight / 2 + 20) } } // Add legend const legendWidth = 200 const legendHeight = 20 const legendX = (canvas.width - legendWidth) / 2 const legendY = canvas.height - 15 // Create gradient for legend const gradient = ctx.createLinearGradient(legendX, 0, legendX + legendWidth, 0) gradient.addColorStop(0, "rgba(0, 0, 255, 0.7)") gradient.addColorStop(0.5, "rgba(0, 255, 0, 0.7)") gradient.addColorStop(1, "rgba(255, 0, 0, 0.7)") ctx.fillStyle = gradient ctx.fillRect(legendX, legendY, legendWidth, legendHeight) // Add legend labels ctx.fillStyle = "#666" ctx.font = "10px sans-serif" ctx.textAlign = "center" ctx.fillText("Low Engagement", legendX, legendY + legendHeight + 12) ctx.fillText("High Engagement", legendX + legendWidth, legendY + legendHeight + 12) }, []) return (

) } [V0_FILE]typescriptreact:file="components/samvaadviz/word-cloud.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface Word { text: string value: number } export function WordCloud() { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight // Sample word data const words: Word[] = [ { text: "photosynthesis", value: 28 }, { text: "plants", value: 25 }, { text: "sunlight", value: 22 }, { text: "water", value: 20 }, { text: "oxygen", value: 18 }, { text: "carbon dioxide", value: 18 }, { text: "chlorophyll", value: 16 }, { text: "energy", value: 15 }, { text: "glucose", value: 14 }, { text: "leaves", value: 13 }, { text: "process", value: 12 }, { text: "light", value: 11 }, { text: "green", value: 10 }, { text: "food", value: 9 }, { text: "cells", value: 8 }, { text: "stomata", value: 7 }, { text: "roots", value: 6 }, { text: "chemical", value: 5 }, { text: "reaction", value: 5 }, { text: "environment", value: 4 }, ] // Sort words by value (largest first) words.sort((a, b) => b.value - a.value) // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw the word cloud const centerX = canvas.width / 2 const centerY = canvas.height / 2 const maxSize = 36 const minSize = 12 // Function to check if a new word overlaps with existing words const positions: Array<{ x: number; y: number; width: number; height: number }> = [] const checkOverlap = (x: number, y: number, width: number, height: number) => { for (const pos of positions) { if (x < pos.x + pos.width && x + width > pos.x && y < pos.y + pos.height && y + height > pos.y) { return true // Overlap detected } } return false // No overlap } // Draw each word words.forEach((word, i) => { // Calculate font size based on word value const range = words[0].value - words[words.length - 1].value const fontSize = minSize + ((word.value - words[words.length - 1].value) / range) * (maxSize - minSize) ctx.font = `${Math.floor(fontSize)}px sans-serif` ctx.textAlign = "center" // Measure text const metrics = ctx.measureText(word.text) const width = metrics.width const height = fontSize // Choose a color based on word value const hue = (i * 137) % 360 // Golden angle approximation for good distribution ctx.fillStyle = `hsl(${hue}, 70%, 60%)` // Try to find a position for the word let placed = false let attempts = 0 const maxAttempts = 100 while (!placed && attempts < maxAttempts) { // Calculate position in a spiral pattern const angle = attempts * 0.1 const radius = 5 * Math.sqrt(attempts) const x = centerX + radius * Math.cos(angle) - width / 2 const y = centerY + radius * Math.sin(angle) + height / 4 if ( x >= 0 && y >= 0 && x + width <= canvas.width && y + height <= canvas.height && !checkOverlap(x, y, width, height) ) { // Position is valid, draw the word ctx.fillText(word.text, x + width / 2, y + height / 2) // Add position to the list positions.push({ x, y, width, height }) placed = true } attempts++ } }) }, []) return (

) } [V0_FILE]typescriptreact:file="app/classroom-feedback/page.tsx" isMerged="true" import type { Metadata } from "next" import { ClassroomFeedbackDashboard } from "@/components/classroom-feedback/classroom-feedback-dashboard" export const metadata: Metadata = { title: "Classroom Feedback - Attention Monitoring Tool", description: "Monitor student attention and engagement in real-time using computer vision", } export default function ClassroomFeedbackPage() { return (

Classroom Feedback

Attention Monitoring Tool that helps you track student engagement in real-time

) } [V0_FILE]typescriptreact:file="components/classroom-feedback/emotion-pie-chart.tsx" isMerged="true" "use client" import { Pie } from "react-chartjs-2" import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js" ChartJS.register(ArcElement, Tooltip, Legend) export function EmotionPieChart() { const data = { labels: ["Engaged", "Confused", "Bored", "Distracted"], datasets: [ { data: [65, 15, 10, 10], backgroundColor: [ "rgba(16, 185, 129, 0.7)", "rgba(245, 158, 11, 0.7)", "rgba(107, 114, 128, 0.7)", "rgba(239, 68, 68, 0.7)", ], borderColor: [ "rgba(16, 185, 129, 1)", "rgba(245, 158, 11, 1)", "rgba(107, 114, 128, 1)", "rgba(239, 68, 68, 1)", ], borderWidth: 1, }, ], } const options = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: "bottom" as const, labels: { boxWidth: 12, font: { size: 10, }, }, }, }, } return } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import type { Metadata } from "next" import Link from "next/link" import { ArrowRight, BookOpen, Brain, LineChart, MessageSquare, Video } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export const metadata: Metadata = { title: "ShikshaSaathi - AI-Powered Educational Platform", description: "Transforming teaching effectiveness in India's low-income and government schools", } export default function Home() { const tools = [ { title: "Saarthi", description: "AI-Coached Lesson Delivery Platform", icon:

ShikshaSaathi

Saarthi

Teaching Tips

GyanSankalp

ShikshaGPT

SamvaadViz

Classroom Feedback

ShikshaSaathi

No Previous Sessions