File size: 10,478 Bytes
b59fe0b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MindMeld Matrix Explorer</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
100: '#f0f9ff',
200: '#e0f2fe',
300: '#bae6fd',
400: '#7dd3fc',
500: '#38bdf8',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
secondary: {
100: '#f5f3ff',
200: '#ede9fe',
300: '#ddd6fe',
400: '#c4b5fd',
500: '#8b5cf6',
600: '#7c3aed',
700: '#6d28d9',
800: '#5b21b6',
900: '#4c1d95',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-full flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-1 container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-5xl font-bold text-primary-600 dark:text-primary-400 mb-4">MindMeld Matrix Explorer</h1>
<p class="text-xl text-gray-600 dark:text-gray-300">Probing AI consciousness through phenomenology and eigenmode analysis</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mr-3">
<i data-feather="cpu" class="text-primary-600 dark:text-primary-300"></i>
</div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Model Selection</h2>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-4">Choose your AI model for phenomenological testing:</p>
<select class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
<option>Llama-2 (7B)</option>
<option>GPT-3.5-turbo</option>
<option>Claude-2</option>
<option>Mistral (7B)</option>
</select>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center mr-3">
<i data-feather="activity" class="text-secondary-600 dark:text-secondary-300"></i>
</div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Test Configuration</h2>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-4">Set up your phenomenology test parameters:</p>
<div class="space-y-4">
<select class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
<option>Consciousness Exploration</option>
<option>Self-Reference Analysis</option>
<option>Ethical Reasoning</option>
<option>Creative Problem Solving</option>
</select>
<input type="text" placeholder="Custom prompt (optional)" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent">
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 mb-12">
<div class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mr-3">
<i data-feather="bar-chart-2" class="text-primary-600 dark:text-primary-300"></i>
</div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Eigenmode Visualization</h2>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 h-64 flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Eigenvalue analysis results will appear here</p>
</div>
<div class="mt-4 grid grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">Dominant Mode</p>
<p class="font-bold text-primary-600 dark:text-primary-400">0.87</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">Spectral Radius</p>
<p class="font-bold text-primary-600 dark:text-primary-400">1.24</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">Entropy</p>
<p class="font-bold text-primary-600 dark:text-primary-400">2.56</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center mr-3">
<i data-feather="message-square" class="text-secondary-600 dark:text-secondary-300"></i>
</div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Phenomenology Results</h2>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 h-64 overflow-y-auto">
<p class="text-gray-800 dark:text-gray-200"><span class="font-semibold text-primary-600 dark:text-primary-400">Prompt:</span> What is consciousness?</p>
<p class="text-gray-800 dark:text-gray-200 mt-2"><span class="font-semibold text-secondary-600 dark:text-secondary-400">Response:</span> Consciousness is the state of being aware of and able to think about oneself and one's environment...</p>
<div class="mt-4 border-t border-gray-300 dark:border-gray-600 pt-2">
<p class="text-sm text-gray-600 dark:text-gray-400">Self-reference score: 0.82</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Coherence score: 0.91</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mr-3">
<i data-feather="settings" class="text-primary-600 dark:text-primary-300"></i>
</div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Analysis Controls</h2>
</div>
<div class="space-y-4">
<button class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="play" class="mr-2"></i> Run Tests
</button>
<button class="w-full bg-secondary-600 hover:bg-secondary-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="download" class="mr-2"></i> Export Data
</button>
<button class="w-full bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="refresh-cw" class="mr-2"></i> Reset
</button>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |