+ {/* Attached files preview */}
+ {attachedFiles.length > 0 && (
+
+ {attachedFiles.map((file, idx) => (
+
+ {file.type.startsWith("image/") ? (
+
+
+ ) : (
+
+
+ )}
+
+ {file.name}
+
+
+ setAttachedFiles((prev) =>
+ prev.filter((_, i) => i !== idx),
+ )
+ }
+ >
+
+
+
+
+ ))}
+
+ )}
+
{/* Left action buttons */}
{/* Attach / Upload button */}
{
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.multiple = true;
- fileInput.accept = '*/*';
+ fileInput.accept = 'image/*,audio/*';
fileInput.onchange = (e) => {
const files = (e.target as HTMLInputElement).files;
if (files && files.length > 0) {
- const names = Array.from(files).map(f => f.name).join(', ');
- setInput((prev) => prev + (prev ? ' ' : '') + `[Attached: ${names}]`);
+ setAttachedFiles((prev) => [
+ ...prev,
+ ...Array.from(files),
+ ]);
}
};
fileInput.click();
@@ -1448,7 +1567,7 @@ function AppInner() {
@@ -1906,6 +2025,8 @@ function AppInner() {
);
+ case "perception":
+ return
;
case "skills":
return
;
case "security":
diff --git a/frontend/src/components/ChatMessage.tsx b/frontend/src/components/ChatMessage.tsx
index e1baf57..edddf8c 100644
--- a/frontend/src/components/ChatMessage.tsx
+++ b/frontend/src/components/ChatMessage.tsx
@@ -2,6 +2,7 @@ import { useState, useMemo } from "react";
import type {
ChatMessage as ChatMessageType,
CognitiveMetadata,
+ PerceptionResult,
} from "../types";
import { Markdown } from "./Markdown";
@@ -391,6 +392,133 @@ function CognitiveBar({ cognitive }: { cognitive: CognitiveMetadata }) {
);
}
+const PERCEPTION_CATEGORY_COLORS: Record
= {
+ text: "bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400",
+ diagram: "bg-purple-100 dark:bg-purple-500/15 text-purple-700 dark:text-purple-400",
+ screenshot: "bg-cyan-100 dark:bg-cyan-500/15 text-cyan-700 dark:text-cyan-400",
+ photo: "bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400",
+ document: "bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400",
+};
+
+function PerceptionCard({ perception }: { perception: PerceptionResult }) {
+ const [expanded, setExpanded] = useState(false);
+ const basirah = perception.perception?.basirah;
+ const nutq = perception.perception?.nutq;
+
+ return (
+
+
setExpanded((prev) => !prev)}
+ className="flex flex-wrap items-center gap-1.5 cursor-pointer group"
+ aria-expanded={expanded}
+ aria-label="Perception results"
+ >
+ {/* Vision pill */}
+ {basirah && (
+
+
+
+ {basirah.category}
+
+ )}
+
+ {/* Audio pill */}
+ {nutq && (
+
+
+
+ {nutq.intent}
+
+ )}
+
+ {/* Key terms pills */}
+ {perception.key_terms?.slice(0, 3).map((term, i) => (
+
+ {term}
+
+ ))}
+
+
+
+
+
+ {expanded && (
+
+ {basirah && (
+
+
Vision (Basirah)
+
{basirah.description}
+
+
Confidence
+
+
{(basirah.confidence * 100).toFixed(0)}%
+
+ {basirah.extracted_text && (
+
+ Text:
+ {basirah.extracted_text.substring(0, 200)}
+ {basirah.extracted_text.length > 200 && "..."}
+
+ )}
+ {basirah.key_elements?.length > 0 && (
+
+ {basirah.key_elements.map((el, i) => (
+
+ {el}
+
+ ))}
+
+ )}
+
+ )}
+ {nutq && (
+
+
Voice (Nutq)
+
{nutq.text}
+
+ Intent: {nutq.intent}
+ {" · "}
+ Lang: {nutq.language}
+
+
+ )}
+ {perception.zahir && (
+
+ Zahir: {perception.zahir}
+
+ )}
+ {perception.batin && (
+
+ Batin: {perception.batin}
+
+ )}
+
+ )}
+
),
+ Eye: () => (
+
+
+ ),
Sun: () =>
,
Moon: () =>
,
Monitor: () =>
,
diff --git a/frontend/src/pages/PerceptionPage.tsx b/frontend/src/pages/PerceptionPage.tsx
new file mode 100644
index 0000000..9dc0948
--- /dev/null
+++ b/frontend/src/pages/PerceptionPage.tsx
@@ -0,0 +1,508 @@
+/**
+ * Perception Page — Multimodal Analysis (Basirah + Nutq)
+ * Upload images and audio for vision and voice analysis through the QCA pipeline.
+ */
+
+import { useState, useCallback } from "react";
+import type { PageProps, PerceptionResult } from "../types";
+
+const QALB_STATES = [
+ { value: "", label: "Auto-detect" },
+ { value: "neutral", label: "Neutral" },
+ { value: "positive", label: "Positive" },
+ { value: "frustrated", label: "Frustrated" },
+ { value: "anxious", label: "Anxious" },
+ { value: "confused", label: "Confused" },
+ { value: "determined", label: "Determined" },
+];
+
+const CATEGORY_COLORS: Record
= {
+ text: "bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400",
+ diagram:
+ "bg-purple-100 dark:bg-purple-500/15 text-purple-700 dark:text-purple-400",
+ screenshot:
+ "bg-cyan-100 dark:bg-cyan-500/15 text-cyan-700 dark:text-cyan-400",
+ photo:
+ "bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400",
+ document:
+ "bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400",
+};
+
+function fileToBase64(file: File): Promise {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () => {
+ const result = reader.result as string;
+ // Strip data URL prefix to get raw base64
+ const base64 = result.split(",")[1] || result;
+ resolve(base64);
+ };
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+}
+
+export default function PerceptionPage({ api }: PageProps) {
+ const [text, setText] = useState("");
+ const [imageFile, setImageFile] = useState(null);
+ const [imagePreview, setImagePreview] = useState(null);
+ const [audioFile, setAudioFile] = useState(null);
+ const [qalbState, setQalbState] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [result, setResult] = useState(null);
+ const [error, setError] = useState(null);
+
+ const handleImageSelect = useCallback(
+ (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ setImageFile(file);
+ const url = URL.createObjectURL(file);
+ setImagePreview(url);
+ }
+ },
+ [],
+ );
+
+ const handleAudioSelect = useCallback(
+ (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ setAudioFile(file);
+ }
+ },
+ [],
+ );
+
+ const handleAnalyze = async () => {
+ if (!text && !imageFile && !audioFile) return;
+
+ setLoading(true);
+ setError(null);
+ setResult(null);
+
+ try {
+ const body: Record = { text };
+ if (qalbState) body.qalb_state = qalbState;
+
+ if (imageFile) {
+ body.image_base64 = await fileToBase64(imageFile);
+ body.media_type = imageFile.type || "image/png";
+ }
+ if (audioFile) {
+ body.audio_base64 = await fileToBase64(audioFile);
+ }
+
+ const res = await api.post("/perception/analyze", body);
+ setResult(res as unknown as PerceptionResult);
+ } catch (e) {
+ setError((e as Error).message || "Analysis failed");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const clearAll = () => {
+ setText("");
+ setImageFile(null);
+ setImagePreview(null);
+ setAudioFile(null);
+ setResult(null);
+ setError(null);
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
Perception
+
+ Vision (Basirah) & Voice (Nutq) analysis through the QCA pipeline
+
+
+
+ Clear
+
+
+
+
+
+ {/* Input Panel */}
+
+ {/* Text input */}
+
+
+ Text Context
+
+