| import { useState, useEffect } from 'react' |
| import Head from 'next/head' |
| import SetupWizard from '../components/SetupWizard' |
| import TutorialOverlay from '../components/TutorialOverlay' |
| import NodeEditor from '../components/NodeEditor' |
| import Toolbar from '../components/Toolbar' |
| import PropertiesPanel from '../components/PropertiesPanel' |
| import CodeExportModal from '../components/CodeExportModal' |
| import { useTutorial } from '../components/TutorialContext' |
| import { useProject } from '../components/ProjectContext' |
| import { useTheme } from '../components/ThemeContext' |
| import { Menu, Moon, Sun, Download, BookOpen } from 'lucide-react' |
|
|
| export default function Home() { |
| const [showWizard, setShowWizard] = useState(false) |
| const [hasSeenWizard, setHasSeenWizard] = useState(true) |
| const [showExportModal, setShowExportModal] = useState(false) |
| const [sidebarOpen, setSidebarOpen] = useState(false) |
| const { isTutorialActive } = useTutorial() |
| const { saveProject } = useProject() |
| const { theme, toggleTheme } = useTheme() |
| const [selectedNode, setSelectedNode] = useState(null) |
| const [nodes, setNodes] = useState([]) |
| const [connections, setConnections] = useState([]) |
|
|
| useEffect(() => { |
| const wizardStatus = localStorage.getItem('hasSeenSetupWizard') |
| if (!wizardStatus) { |
| setShowWizard(true) |
| setHasSeenWizard(false) |
| } |
| }, []) |
|
|
| const handleWizardComplete = () => { |
| setShowWizard(false) |
| setHasSeenWizard(true) |
| localStorage.setItem('hasSeenSetupWizard', 'true') |
| } |
|
|
| const handleWizardSkip = () => { |
| setShowWizard(false) |
| setHasSeenWizard(true) |
| localStorage.setItem('hasSeenSetupWizard', 'true') |
| } |
|
|
| const handleExport = () => { |
| setShowExportModal(true) |
| } |
|
|
| return ( |
| <> |
| <Head> |
| <title>NeuroArch Studio</title> |
| <meta name="description" content="Visual Neural Architecture Designer" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| </Head> |
| |
| <div className={`flex flex-col h-screen ${theme === 'dark' ? 'bg-gray-900' : 'bg-gray-50'}`}> |
| {/* Header */} |
| <header className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border-b px-6 py-3 flex items-center justify-between`}> |
| <div className="flex items-center space-x-4"> |
| <button |
| onClick={() => setSidebarOpen(!sidebarOpen)} |
| className={`p-2 rounded-lg ${theme === 'dark' ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-100'} transition-colors lg:hidden`} |
| > |
| <Menu className="w-5 h-5" /> |
| </button> |
| <div className="flex items-center space-x-3"> |
| <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center"> |
| <span className="text-white font-bold text-sm">NA</span> |
| </div> |
| <h1 className="text-2xl font-bold text-primary-600">NeuroArch Studio</h1> |
| <span className="text-xs text-gray-500">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-primary-500 hover:underline">anycoder</a></span> |
| </div> |
| </div> |
| <div className="flex items-center space-x-3"> |
| <button |
| onClick={() => window.dispatchEvent(new CustomEvent('start-tutorial'))} |
| className="px-4 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors flex items-center space-x-2" |
| > |
| <BookOpen className="w-4 h-4" /> |
| <span>Tutorial</span> |
| </button> |
| <button |
| onClick={toggleTheme} |
| className={`p-2 rounded-lg ${theme === 'dark' ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-100'} transition-colors`} |
| > |
| {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />} |
| </button> |
| <button |
| onClick={handleExport} |
| className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors flex items-center space-x-2" |
| > |
| <Download className="w-4 h-4" /> |
| <span>Export</span> |
| </button> |
| </div> |
| </header> |
| |
| {/* Main Content */} |
| <div className="flex flex-1 overflow-hidden"> |
| <Toolbar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} /> |
| <NodeEditor |
| nodes={nodes} |
| setNodes={setNodes} |
| connections={connections} |
| setConnections={setConnections} |
| selectedNode={selectedNode} |
| setSelectedNode={setSelectedNode} |
| /> |
| <PropertiesPanel |
| selectedNode={selectedNode} |
| setNodes={setNodes} |
| /> |
| </div> |
| |
| {/* Setup Wizard */} |
| {showWizard && ( |
| <SetupWizard |
| onComplete={handleWizardComplete} |
| onSkip={handleWizardSkip} |
| /> |
| )} |
| |
| {/* Tutorial Overlay */} |
| {isTutorialActive && <TutorialOverlay />} |
| |
| {/* Code Export Modal */} |
| {showExportModal && ( |
| <CodeExportModal |
| nodes={nodes} |
| connections={connections} |
| onClose={() => setShowExportModal(false)} |
| /> |
| )} |
| </div> |
| </> |
| ) |
| } |
