Upload pages/index.js with huggingface_hub

pages/index.js

@@ -1,212 +1,74 @@
-import { useState, useEffect, useRef } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { FaRobot, FaMicrophone, FaCode, FaImage, FaVideo, FaLanguage, FaCog, FaPaperPlane, FaStop, FaPlay, FaPause, FaDownload, FaUpload, FaTerminal, FaBrain, FaShieldAlt, FaGlobe, FaDatabase, FaCloud, FaLock, FaUnlock, FaCheckCircle, FaExclamationTriangle, FaInfoCircle } from 'react-icons/fa'
-import ChatInterface from '../components/ChatInterface'
+import { useState, useEffect } from 'react'
+import Head from 'next/head'
+import { FaCode, FaRobot, FaMicrophone, FaLanguage } from 'react-icons/fa'
 import CodeEditor from '../components/CodeEditor'
-import MediaStudio from '../components/MediaStudio'
-import VoiceConsole from '../components/VoiceConsole'
-import SettingsPanel from '../components/SettingsPanel'
-import AgentDashboard from '../components/AgentDashboard'
-import FileExplorer from '../components/FileExplorer'
+import ChatInterface from '../components/ChatInterface'
+import VoiceControl from '../components/VoiceControl'
+import AgentWorkflow from '../components/AgentWorkflow'
 
 export default function Home() {
   const [activeTab, setActiveTab] = useState('chat')
-  const [isListening, setIsListening] = useState(false)
   const [language, setLanguage] = useState('fa')
-  const [theme, setTheme] = useState('dark')
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [notifications, setNotifications] = useState([])
-  const [systemStatus, setSystemStatus] = useState({
-    aiModel: 'local',
-    internetAccess: false,
-    privacyMode: true,
-    gpuEnabled: false
-  })
-
-  const tabs = [
-    { id: 'chat', name: language === 'fa' ? 'چت هوشمند' : 'Smart Chat', icon: FaRobot },
-    { id: 'code', name: language === 'fa' ? 'کدنویسی' : 'Coding', icon: FaCode },
-    { id: 'media', name: language === 'fa' ? 'استودیو رسانه' : 'Media Studio', icon: FaImage },
-    { id: 'voice', name: language === 'fa' ? 'کنسول صوتی' : 'Voice Console', icon: FaMicrophone },
-    { id: 'agent', name: language === 'fa' ? 'عامل خودکار' : 'Autonomous Agent', icon: FaBrain },
-    { id: 'files', name: language === 'fa' ? 'مدیریت فایل' : 'File Manager', icon: FaDatabase },
-    { id: 'settings', name: language === 'fa' ? 'تنظیمات' : 'Settings', icon: FaCog },
-  ]
-
-  const addNotification = (message, type = 'info') => {
-    const id = Date.now()
-    setNotifications(prev => [...prev, { id, message, type }])
-    setTimeout(() => {
-      setNotifications(prev => prev.filter(n => n.id !== id))
-    }, 5000)
-  }
-
-  useEffect(() => {
-    // Initialize system
-    addNotification(language === 'fa' ? 'به GhadirSync-AI خوش آمدید!' : 'Welcome to GhadirSync-AI!', 'success')
-  }, [language])
 
   return (
-    <div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
-      {/* Header */}
-      <header className="border-b border-gray-700 bg-gradient-to-r from-primary-600 to-secondary-600">
-        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-reverse space-x-4">
-              <motion.div
-                animate={{ rotate: isProcessing ? 360 : 0 }}
-                transition={{ duration: 2, repeat: isProcessing ? Infinity : 0, ease: "linear" }}
-              >
-                <FaRobot className="w-8 h-8 text-white" />
-              </motion.div>
-              <div>
-                <h1 className="text-2xl font-bold">GhadirSync-AI</h1>
-                <p className="text-xs opacity-90">
-                  {language === 'fa' ? 'دستیار هوشمند چندوجهی' : 'Multimodal AI Assistant'}
-                </p>
-              </div>
-            </div>
-            
-            <div className="flex items-center space-x-reverse space-x-4">
-              {/* Status Indicators */}
-              <div className="flex items-center space-x-reverse space-x-2">
-                <div className={`w-2 h-2 rounded-full ${systemStatus.aiModel === 'local' ? 'bg-green-400' : 'bg-yellow-400'}`} />
-                <span className="text-xs">
-                  {language === 'fa' ? 'مدل محلی' : 'Local Model'}
-                </span>
-              </div>
-              
-              <div className="flex items-center space-x-reverse space-x-2">
-                <FaGlobe className={`w-4 h-4 ${systemStatus.internetAccess ? 'text-green-400' : 'text-gray-400'}`} />
-                <span className="text-xs">
-                  {systemStatus.internetAccess ? (language === 'fa' ? 'آنلاین' : 'Online') : (language === 'fa' ? 'آفلاین' : 'Offline')}
-                </span>
-              </div>
-              
-              <div className="flex items-center space-x-reverse space-x-2">
-                <FaShieldAlt className={`w-4 h-4 ${systemStatus.privacyMode ? 'text-green-400' : 'text-gray-400'}`} />
-                <span className="text-xs">
-                  {language === 'fa' ? 'حریم خصوصی' : 'Privacy'}
-                </span>
-              </div>
-              
-              {/* Language Toggle */}
-              <button
-                onClick={() => setLanguage(language === 'fa' ? 'en' : 'fa')}
-                className="flex items-center space-x-reverse space-x-2 px-3 py-1 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all"
-              >
-                <FaLanguage className="w-4 h-4" />
-                <span className="text-sm font-medium">
-                  {language === 'fa' ? 'فا' : 'EN'}
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Navigation Tabs */}
-      <div className="border-b border-gray-700 bg-gray-800">
-        <div className="container mx-auto px-4">
-          <div className="flex space-x-reverse space-x-1 overflow-x-auto">
-            {tabs.map((tab) => {
-              const Icon = tab.icon
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`flex items-center space-x-reverse space-x-2 px-4 py-3 border-b-2 transition-all whitespace-nowrap ${
-                    activeTab === tab.id
-                      ? 'border-primary-500 text-primary-400 bg-gray-700'
-                      : 'border-transparent text-gray-400 hover:text-white hover:bg-gray-700'
-                  }`}
-                >
-                  <Icon className="w-4 h-4" />
-                  <span className="text-sm font-medium">{tab.name}</span>
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <main className="container mx-auto px-4 py-6">
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{ duration: 0.3 }}
-          >
-            {activeTab === 'chat' && <ChatInterface language={language} theme={theme} />}
-            {activeTab === 'code' && <CodeEditor language={language} theme={theme} />}
-            {activeTab === 'media' && <MediaStudio language={language} theme={theme} />}
-            {activeTab === 'voice' && <VoiceConsole language={language} theme={theme} />}
-            {activeTab === 'agent' && <AgentDashboard language={language} theme={theme} />}
-            {activeTab === 'files' && <FileExplorer language={language} theme={theme} />}
-            {activeTab === 'settings' && <SettingsPanel language={language} theme={theme} />}
-          </motion.div>
-        </AnimatePresence>
-      </main>
-
-      {/* Floating Action Button */}
-      <motion.button
-        whileHover={{ scale: 1.1 }}
-        whileTap={{ scale: 0.95 }}
-        onClick={() => setIsListening(!isListening)}
-        className={`fixed bottom-6 left-6 w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all ${
-          isListening
-            ? 'bg-red-500 hover:bg-red-600 animate-pulse'
-            : 'bg-primary-500 hover:bg-primary-600'
-        }`}
-      >
-        {isListening ? <FaStop className="w-6 h-6 text-white" /> : <FaMicrophone className="w-6 h-6 text-white" />}
-      </motion.button>
-
-      {/* Notifications */}
-      <div className="fixed top-20 left-4 z-50 space-y-2">
-        {notifications.map((notification) => (
-          <motion.div
-            key={notification.id}
-            initial={{ opacity: 0, x: 100 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: 100 }}
-            className={`flex items-center space-x-reverse space-x-2 px-4 py-3 rounded-lg shadow-lg ${
-              notification.type === 'success' ? 'bg-green-500' :
-              notification.type === 'error' ? 'bg-red-500' :
-              notification.type === 'warning' ? 'bg-yellow-500' :
-              'bg-blue-500'
-            } text-white`}
-          >
-            {notification.type === 'success' && <FaCheckCircle className="w-5 h-5" />}
-            {notification.type === 'error' && <FaExclamationTriangle className="w-5 h-5" />}
-            {notification.type === 'warning' && <FaExclamationTriangle className="w-5 h-5" />}
-            {notification.type === 'info' && <FaInfoCircle className="w-5 h-5" />}
-            <span className="text-sm font-medium">{notification.message}</span>
-          </motion.div>
-        ))}
-      </div>
+    <div className="min-h-screen bg-gray-100">
+      <Head>
+        <title>GhadirSync-AI | برنامه‌نویسی هوشمند</title>
+        <meta name="description" content="دستیار هوشمند برنامه‌نویسی با قابلیت‌های پیشرفته" />
+      </Head>
 
-      {/* Footer */}
-      <footer className="mt-auto border-t border-gray-700 bg-gray-800 py-4">
-        <div className="container mx-auto px-4">
-          <div className="flex items-center justify-between">
-            <p className="text-sm text-gray-400">
-              {language === 'fa' ? 'ساخته شده با قدرت هوش مصنوعی' : 'Powered by AI'}
-            </p>
+      <header className="bg-blue-600 text-white p-4 shadow-md">
+        <div className="container mx-auto flex justify-between items-center">
+          <h1 className="text-2xl font-bold">GhadirSync-AI</h1>
+          <div className="flex items-center space-x-4">
+            <button 
+              onClick={() => setLanguage(language === 'fa' ? 'en' : 'fa')}
+              className="flex items-center px-3 py-1 rounded bg-blue-700 hover:bg-blue-800"
+            >
+              <FaLanguage className="ml-1" />
+              {language === 'fa' ? 'English' : 'فارسی'}
+            </button>
             <a 
               href="https://huggingface.co/spaces/akhaliq/anycoder" 
               target="_blank" 
               rel="noopener noreferrer"
-              className="text-sm text-primary-400 hover:text-primary-300 transition-colors"
+              className="text-sm hover:underline"
             >
               Built with anycoder
             </a>
           </div>
         </div>
-      </footer>
+      </header>
+
+      <main className="container mx-auto p-4">
+        <div className="flex mb-4 border-b border-gray-300">
+          <button
+            className={`px-4 py-2 font-medium ${activeTab === 'chat' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'}`}
+            onClick={() => setActiveTab('chat')}
+          >
+            <FaRobot className="inline ml-1" />
+            {language === 'fa' ? 'چت هوشمند' : 'AI Chat'}
+          </button>
+          <button
+            className={`px-4 py-2 font-medium ${activeTab === 'code' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'}`}
+            onClick={() => setActiveTab('code')}
+          >
+            <FaCode className="inline ml-1" />
+            {language === 'fa' ? 'ویرایشگر کد' : 'Code Editor'}
+          </button>
+          <button
+            className={`px-4 py-2 font-medium ${activeTab === 'agent' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'}`}
+            onClick={() => setActiveTab('agent')}
+          >
+            <FaMicrophone className="inline ml-1" />
+            {language === 'fa' ? 'عامل هوشمند' : 'AI Agent'}
+          </button>
+        </div>
+
+        {activeTab === 'chat' && <ChatInterface language={language} />}
+        {activeTab === 'code' && <CodeEditor language={language} />}
+        {activeTab === 'agent' && <AgentWorkflow language={language} />}
+      </main>
     </div>
   )
 }