Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,212 @@
+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 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'
+
+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>
+
+      {/* 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>
+            <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"
+            >
+              Built with anycoder
+            </a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}