chore: Synchronizácia UI komponentov a dokumentácie s HF Space

Aethero_App/README.md

@@ -139,8 +139,8 @@ Aethero_App/
 ```
 
 # 🔄 Priebežný stav
-- **Zjednocovanie GitHub repozitára**: Všetky moduly a komponenty sú teraz centralizované v jednom repozitári.
-- **Deploy na Vercel**: Deploy systému prebieha cez `npx vercel`.
+- **Konzistencia medzi GitHub a Hugging Face Space**: Všetky komponenty a dokumentácia sú synchronizované medzi oboma platformami.
+- **Syntaxátor AetheroOS**: Hostovaný cez FastAPI na porte 7860.
 
 # 🚧 Poznámka
 Táto dokumentácia je priebežne dopĺňaná a odráža aktuálny stav vývoja systému.

Aethero_App/dashboard/components/ui/AgentAvatar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface AgentAvatarProps {
+  name: string;
+  avatarUrl: string;
+  status: 'online' | 'offline' | 'busy';
+}
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-gray-500',
+  busy: 'bg-yellow-500',
+};
+
+const AgentAvatar: React.FC<AgentAvatarProps> = ({ name, avatarUrl, status }) => {
+  return (
+    <motion.div
+      className="flex items-center space-x-4 p-4 bg-gray-800 rounded-lg shadow-lg"
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="relative">
+        <img
+          src={avatarUrl}
+          alt={`${name}'s avatar`}
+          className="w-16 h-16 rounded-full border-2 border-gray-700"
+        />
+        <span
+          className={`absolute bottom-0 right-0 w-4 h-4 rounded-full border-2 border-gray-800 ${statusColors[status]}`}
+        ></span>
+      </div>
+      <div>
+        <h3 className="text-lg font-bold text-white">{name}</h3>
+        <p className="text-sm text-gray-400 capitalize">{status}</p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default AgentAvatar;

Aethero_App/dashboard/components/ui/CognitiveConsole.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import useAppState from '../../store/state';
+
+interface CognitiveConsoleProps {
+  onCommandSubmit: (command: string) => void;
+  logs: string[];
+}
+
+const CognitiveConsole: React.FC<CognitiveConsoleProps> = ({ onCommandSubmit, logs }) => {
+  const [command, setCommand] = useState('');
+  const { addLog } = useAppState();
+
+  useEffect(() => {
+    const socket = new WebSocket('ws://localhost:8000/logs/stream');
+
+    socket.onmessage = (event) => {
+      addLog(event.data);
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, [addLog]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (command.trim()) {
+      onCommandSubmit(command);
+      setCommand('');
+    }
+  };
+
+  return (
+    <motion.div
+      className="bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col space-y-4"
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+    >
+      <h2 className="text-xl font-bold text-white">Cognitive Console</h2>
+      <div className="flex-grow overflow-y-auto bg-gray-800 p-4 rounded-lg">
+        {logs.length > 0 ? (
+          <ul className="space-y-2">
+            {logs.map((log, index) => (
+              <li key={index} className="text-sm text-gray-300">
+                {log}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-500">No logs available.</p>
+        )}
+      </div>
+      <form onSubmit={handleSubmit} className="flex space-x-2">
+        <input
+          type="text"
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          placeholder="Enter command..."
+          className="flex-grow p-2 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button
+          type="submit"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          Submit
+        </button>
+      </form>
+    </motion.div>
+  );
+};
+
+export default CognitiveConsole;

Aethero_App/dashboard/components/ui/ParserLogsPanel.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import useAppState from '../../store/state';
+
+const fetchLogs = async () => {
+  const response = await fetch('/api/logs');
+  const data = await response.json();
+  return data;
+};
+
+const ParserLogsPanel = () => {
+  const { logs, addLog } = useAppState();
+  const [filteredLogs, setFilteredLogs] = useState<string[]>([]);
+
+  useEffect(() => {
+    fetchLogs().then((data) => {
+      data.forEach((log: string) => addLog(log));
+    });
+  }, [addLog]);
+
+  return (
+    <div>
+      <h2>Parser Logs</h2>
+      <div>
+        {logs.length === 0 ? (
+          <p>No logs available.</p>
+        ) : (
+          logs.map((log, index) => <div key={index}>{log}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ParserLogsPanel;

Aethero_App/dashboard/components/ui/RadarMetrics.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Radar } from 'react-chartjs-2';
+import 'chart.js/auto';
+import useAppState from '../../store/state';
+
+const fetchMetrics = async () => {
+  const response = await fetch('/api/metrics');
+  const data = await response.json();
+  return data;
+};
+
+interface RadarMetricsProps {
+  metricsData: {
+    labels: string[];
+    datasets: {
+      label: string;
+      data: number[];
+      backgroundColor: string;
+      borderColor: string;
+      borderWidth: number;
+    }[];
+  };
+}
+
+const RadarMetrics: React.FC<RadarMetricsProps> = ({ metricsData }) => {
+  const { metrics, setMetrics } = useAppState();
+
+  useEffect(() => {
+    fetchMetrics().then((data) => {
+      setMetrics(data);
+    });
+  }, [setMetrics]);
+
+  return (
+    <motion.div
+      className="bg-gray-800 p-6 rounded-lg shadow-lg"
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <h2 className="text-xl font-bold text-white mb-4">Radar Metrics</h2>
+      <div className="w-full h-96">
+        <Radar data={metricsData} options={{
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            r: {
+              grid: {
+                color: '#4B5563',
+              },
+              angleLines: {
+                color: '#4B5563',
+              },
+              ticks: {
+                backdropColor: 'transparent',
+                color: '#D1D5DB',
+              },
+            },
+          },
+          plugins: {
+            legend: {
+              labels: {
+                color: '#D1D5DB',
+              },
+            },
+          },
+        }} />
+      </div>
+    </motion.div>
+  );
+};
+
+export default RadarMetrics;

Aethero_App/dashboard/store/state.ts

@@ -0,0 +1,17 @@
+import create from 'zustand';
+
+interface AppState {
+  logs: string[];
+  metrics: any;
+  addLog: (log: string) => void;
+  setMetrics: (metrics: any) => void;
+}
+
+const useAppState = create<AppState>((set) => ({
+  logs: [],
+  metrics: null,
+  addLog: (log) => set((state) => ({ logs: [...state.logs, log] })),
+  setMetrics: (metrics) => set(() => ({ metrics })),
+}));
+
+export default useAppState;

Aethero_App/push_to_both.sh

@@ -0,0 +1,23 @@
+#!/bin/zsh
+
+# Skript na paralelné pushovanie commitov na GitHub a Hugging Face Space
+
+# Definovanie vzdialených repozitárov
+GITHUB_REMOTE="origin"
+HF_REMOTE="hf"
+
+# Kontrola aktuálneho stavu git
+if ! git diff --quiet || ! git diff --cached --quiet; then
+  echo "\n\033[1;33mUpozornenie: Máte neuložené zmeny. Commitujte ich pred spustením skriptu.\033[0m\n"
+  exit 1
+fi
+
+# Push na GitHub
+echo "\n\033[1;34mPushujem na GitHub...\033[0m\n"
+git push $GITHUB_REMOTE main
+
+# Push na Hugging Face Space
+echo "\n\033[1;34mPushujem na Hugging Face Space...\033[0m\n"
+git push $HF_REMOTE main
+
+echo "\n\033[1;32mPushovanie dokončené na oboch platformách.\033[0m\n"

Aethero_App/syntaxator_fastapi.py

@@ -0,0 +1,32 @@
+from fastapi import FastAPI
+from introspective_parser_module.parser import ASLMetaParser
+from introspective_parser_module.metrics import CognitiveMetricsAnalyzer
+from introspective_parser_module.reflection_agent import AetheroReflectionAgent
+
+app = FastAPI()
+
+@app.get("/")
+def read_root():
+    return {"message": "Welcome to AetheroOS Syntaxator API!"}
+
+@app.post("/parse")
+def parse_asl(data: dict):
+    parser = ASLMetaParser()
+    result = parser.parse_and_validate(data)
+    return {"parsed_data": result}
+
+@app.post("/analyze")
+def analyze_metrics(data: dict):
+    analyzer = CognitiveMetricsAnalyzer()
+    report = analyzer.generate_introspective_report(data)
+    return {"analysis_report": report}
+
+@app.post("/reflect")
+def reflect(data: dict):
+    agent = AetheroReflectionAgent()
+    reflection = agent.reflect(data)
+    return {"reflection": reflection}}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

Aethero_App/syntaxator_server.py

@@ -0,0 +1,37 @@
+from fastapi import FastAPI
+from pydantic import BaseModel
+from typing import List, Dict
+
+app = FastAPI()
+
+# Define models for request and response
+class ParseRequest(BaseModel):
+    text: str
+
+class MetricsResponse(BaseModel):
+    metrics: Dict[str, float]
+
+class ReflectionResponse(BaseModel):
+    insights: List[str]
+
+@app.post("/api/parse")
+async def parse_text(request: ParseRequest):
+    # Placeholder logic for parsing
+    parsed_data = {"parsed": f"Parsed content of: {request.text}"}
+    return parsed_data
+
+@app.get("/api/metrics")
+async def get_metrics():
+    # Placeholder logic for metrics
+    metrics = {"accuracy": 0.95, "latency": 0.1}
+    return MetricsResponse(metrics=metrics)
+
+@app.get("/api/reflection")
+async def get_reflection():
+    # Placeholder logic for reflection agent
+    insights = ["Insight 1", "Insight 2", "Insight 3"]
+    return ReflectionResponse(insights=insights)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

dashboard/components/ui/IntrospectiveHeader.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface IntrospectiveHeaderProps {
+  modes: string[];
+  activeMode: string;
+  user: { name: string; avatarUrl: string };
+  onModeChange: (mode: string) => void;
+  onLogout: () => void;
+}
+
+const IntrospectiveHeader: React.FC<IntrospectiveHeaderProps> = ({
+  modes,
+  activeMode,
+  user,
+  onModeChange,
+  onLogout,
+}) => {
+  return (
+    <motion.header
+      className="bg-red-700 text-white flex justify-between items-center p-4"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="flex items-center space-x-4">
+        <img
+          src="/logo.svg"
+          alt="AetheroOS Logo"
+          className="h-10 w-10"
+        />
+        <h1 className="text-xl font-bold">AetheroOS</h1>
+      </div>
+      <nav className="flex space-x-4">
+        {modes.map((mode) => (
+          <button
+            key={mode}
+            className={`px-4 py-2 rounded ${
+              mode === activeMode ? 'bg-white text-red-700' : 'bg-red-600'
+            }`}
+            onClick={() => onModeChange(mode)}
+          >
+            {mode.charAt(0).toUpperCase() + mode.slice(1)}
+          </button>
+        ))}
+      </nav>
+      <div className="flex items-center space-x-4">
+        <img
+          src={user.avatarUrl}
+          alt={user.name}
+          className="h-10 w-10 rounded-full border-2 border-white"
+        />
+        <span>{user.name}</span>
+        <button
+          onClick={onLogout}
+          className="px-4 py-2 bg-red-600 rounded hover:bg-red-500"
+        >
+          Logout
+        </button>
+      </div>
+    </motion.header>
+  );
+};
+
+export default IntrospectiveHeader;

dashboard/components/ui/ParserLogsPanel.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface ASLLog {
+  id: string;
+  timestamp: string;
+  type: string;
+  payload: Record<string, any>;
+}
+
+interface ParserLogsPanelProps {
+  logs: ASLLog[];
+  onFilter: (type: string) => void;
+  onExport: (format: 'json' | 'csv') => void;
+}
+
+const ParserLogsPanel: React.FC<ParserLogsPanelProps> = ({ logs, onFilter, onExport }) => {
+  return (
+    <motion.section
+      className="bg-gray-900 text-white p-4 rounded-lg shadow-md"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <header className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold">Parser Logs</h2>
+        <div className="flex space-x-2">
+          <button
+            onClick={() => onFilter('query')}
+            className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600"
+          >
+            Filter: Query
+          </button>
+          <button
+            onClick={() => onFilter('reflection')}
+            className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600"
+          >
+            Filter: Reflection
+          </button>
+          <button
+            onClick={() => onExport('json')}
+            className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600"
+          >
+            Export JSON
+          </button>
+          <button
+            onClick={() => onExport('csv')}
+            className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600"
+          >
+            Export CSV
+          </button>
+        </div>
+      </header>
+      <ul className="space-y-2 max-h-96 overflow-y-auto">
+        {logs.map((log) => (
+          <li
+            key={log.id}
+            className="p-3 bg-gray-800 rounded hover:bg-gray-700 transition"
+          >
+            <p className="text-sm text-gray-400">{log.timestamp}</p>
+            <p className="font-bold">{log.type}</p>
+            <pre className="text-sm bg-gray-700 p-2 rounded mt-2">
+              {JSON.stringify(log.payload, null, 2)}
+            </pre>
+          </li>
+        ))}
+      </ul>
+    </motion.section>
+  );
+};
+
+export default ParserLogsPanel;