|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Emotion Insight Engine</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.sentiment-bar { |
|
|
transition: width 0.5s ease-in-out; |
|
|
} |
|
|
.waveform { |
|
|
background: repeating-linear-gradient(90deg, #4f46e5, #4f46e5 2px, transparent 2px, transparent 4px); |
|
|
animation: wave 1s linear infinite; |
|
|
} |
|
|
@keyframes wave { |
|
|
from { background-position-x: 0; } |
|
|
to { background-position-x: 4px; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gray-100"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="gradient-bg text-white rounded-xl shadow-lg mb-8 p-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i class="fas fa-brain text-3xl mr-3"></i> |
|
|
<h1 class="text-2xl md:text-3xl font-bold">Emotion Insight Engine</h1> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="historyBtn" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-history mr-2"></i> Session History |
|
|
</button> |
|
|
<button id="settingsBtn" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-4 opacity-90">Analyze text or voice input through multiple cognitive layers to gain emotional insights</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Input Analysis</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="textTab" class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Text</button> |
|
|
<button id="audioTab" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg">Audio</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="textInputSection" class="mb-6"> |
|
|
<textarea id="inputText" class="w-full h-40 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Type or paste your text here..."></textarea> |
|
|
<div class="flex justify-end mt-2"> |
|
|
<button id="analyzeTextBtn" class="gradient-bg text-white px-6 py-2 rounded-lg hover:opacity-90 flex items-center pulse-animation"> |
|
|
<i class="fas fa-brain mr-2"></i> Analyze Text |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="audioInputSection" class="hidden"> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">Voice Recording</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="recordBtn" class="bg-red-500 text-white px-4 py-1 rounded-full flex items-center"> |
|
|
<i class="fas fa-microphone mr-1"></i> Record |
|
|
</button> |
|
|
<button id="uploadBtn" class="bg-gray-500 text-white px-4 py-1 rounded-full"> |
|
|
<i class="fas fa-upload mr-1"></i> Upload |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="waveform" class="h-12 waveform rounded mb-2"></div> |
|
|
<div class="text-sm text-gray-600">Click record to start capturing audio</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button id="analyzeAudioBtn" class="gradient-bg text-white px-6 py-2 rounded-lg hover:opacity-90 flex items-center"> |
|
|
<i class="fas fa-brain mr-2"></i> Analyze Audio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="processingSection" class="hidden text-center py-8"> |
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600 mb-4"></div> |
|
|
<p class="text-gray-600">Processing through cognitive layers...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultsSection" class="hidden"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold mb-2">Emotion Breakdown</h3> |
|
|
<div id="emotionBars" class="space-y-3"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold mb-2">Key Sentiments</h3> |
|
|
<div id="sentimentTags" class="flex flex-wrap gap-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold mb-2">Contextual Analysis</h3> |
|
|
<div id="contextualAnalysis" class="text-sm"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Cognitive Layers</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="layer-card bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded-r-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-indigo-800">Emotion Layer</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">HuggingFace/Empath sentiment parsing</p> |
|
|
</div> |
|
|
<i class="fas fa-heart text-indigo-500 mt-1"></i> |
|
|
</div> |
|
|
<div id="emotionLayerStatus" class="text-xs text-gray-500 mt-2">Waiting for input...</div> |
|
|
</div> |
|
|
|
|
|
<div class="layer-card bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-purple-800">Meaning Layer</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">LangChain + Vector memory of prior sessions</p> |
|
|
</div> |
|
|
<i class="fas fa-book text-purple-500 mt-1"></i> |
|
|
</div> |
|
|
<div id="meaningLayerStatus" class="text-xs text-gray-500 mt-2">Waiting for input...</div> |
|
|
</div> |
|
|
|
|
|
<div class="layer-card bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-blue-800">Logic Layer</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Symbolic reasoner / Python rule engine</p> |
|
|
</div> |
|
|
<i class="fas fa-cogs text-blue-500 mt-1"></i> |
|
|
</div> |
|
|
<div id="logicLayerStatus" class="text-xs text-gray-500 mt-2">Waiting for input...</div> |
|
|
</div> |
|
|
|
|
|
<div class="layer-card bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-green-800">Feedback Layer</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Human rating + reinforcement learning</p> |
|
|
</div> |
|
|
<i class="fas fa-chart-line text-green-500 mt-1"></i> |
|
|
</div> |
|
|
<div id="feedbackLayerStatus" class="text-xs text-gray-500 mt-2">Waiting for input...</div> |
|
|
</div> |
|
|
|
|
|
<div class="layer-card bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-r-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium text-yellow-800">Reflection</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Auto-rewriting of internal belief tree</p> |
|
|
</div> |
|
|
<i class="fas fa-lightbulb text-yellow-500 mt-1"></i> |
|
|
</div> |
|
|
<div id="reflectionLayerStatus" class="text-xs text-gray-500 mt-2">Waiting for input...</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-gray-50 p-4 rounded-lg"> |
|
|
<h3 class="font-semibold mb-2">Memory Context</h3> |
|
|
<div id="memoryContext" class="text-sm text-gray-600"> |
|
|
No prior session data available |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="insightOutput" class="mt-6 hidden"> |
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Cognitive Insight</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="rateInsightBtn" class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-star mr-1"></i> Rate Insight |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="insightContent" class="bg-indigo-50 border border-indigo-100 rounded-lg p-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="historyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden"> |
|
|
<div class="flex justify-between items-center border-b p-4"> |
|
|
<h3 class="text-lg font-semibold">Session History</h3> |
|
|
<button id="closeHistoryModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 overflow-y-auto"> |
|
|
<div id="historyList" class="space-y-3"> |
|
|
|
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
No history available yet |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden"> |
|
|
<div class="flex justify-between items-center border-b p-4"> |
|
|
<h3 class="text-lg font-semibold">Settings</h3> |
|
|
<button id="closeSettingsModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4 overflow-y-auto"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Analysis Depth</label> |
|
|
<select class="w-full p- |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MHE-LLC/roe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
