Upload pages/index.js with huggingface_hub

pages/index.js

@@ -1,21 +1,30 @@
 import Head from 'next/head';
 import { useState, useRef, useEffect } from 'react';
 import { useSession, signIn, signOut } from 'next-auth/react';
-import { Mic, MicOff, Rocket, Code, Terminal, Cpu, Shield, LogOut, User, Lock, Github, Chrome } from 'lucide-react';
+import { Mic, MicOff, Rocket, Code, Terminal, Cpu, Shield, LogOut, Lock, User, AlertCircle } from 'lucide-react';
 
 export default function HermesDirective() {
   const { data: session, status } = useSession();
+  
+  // Form State
   const [prompt, setPrompt] = useState('');
   const [voiceMatrix, setVoiceMatrix] = useState('neutral');
   const [affectVector, setAffectVector] = useState('informative');
   const [intentField, setIntentField] = useState('technical');
   const [targetStack, setTargetStack] = useState('gradio+fastapi');
+  
+  // UI State
   const [output, setOutput] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [isListening, setIsListening] = useState(false);
   const [interimTranscript, setInterimTranscript] = useState('');
   
+  // Login Form State
+  const [loginEmail, setLoginEmail] = useState('');
+  const [loginPassword, setLoginPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+  
   const recognitionRef = useRef(null);
 
   // Initialize Web Speech API
@@ -58,7 +67,7 @@ export default function HermesDirective() {
 
   const toggleListening = () => {
     if (!recognitionRef.current) {
-      alert('Speech recognition is not supported in this browser. Try Chrome on Android (Termux) or Desktop.');
+      alert('Speech recognition is not supported in this browser. Try Chrome.');
       return;
     }
 
@@ -72,6 +81,21 @@ export default function HermesDirective() {
     }
   };
 
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setLoginError('');
+    
+    const result = await signIn('credentials', {
+      email: loginEmail,
+      password: loginPassword,
+      redirect: false,
+    });
+
+    if (result?.error) {
+      setLoginError('Access Denied: Invalid credentials.');
+    }
+  };
+
   const handleGenerate = async () => {
     if (!prompt.trim()) return;
     
@@ -153,32 +177,55 @@ export default function HermesDirective() {
                 <div className="w-16 h-16 bg-dolphin-900 rounded-full flex items-center justify-center mx-auto mb-4 ring-2 ring-dolphin-accent/50">
                   <Lock className="w-8 h-8 text-dolphin-accent" />
                 </div>
-                <h2 className="text-2xl font-bold mb-2">Secure Access Required</h2>
+                <h2 className="text-2xl font-bold mb-2">Developer Access</h2>
                 <p className="text-slate-400 text-sm">
-                  Authenticate to access the AI-native directive engine. Professional use requires verified identity.
+                  Restricted environment. Please authenticate to continue.
                 </p>
               </div>
 
-              <div className="space-y-3">
-                <button
-                  onClick={() => signIn('google')}
-                  className="w-full flex items-center justify-center gap-3 bg-white text-dolphin-900 hover:bg-slate-200 font-semibold py-3 px-4 rounded-lg transition-colors"
-                >
-                  <Chrome className="w-5 h-5" />
-                  Sign in with Google
-                </button>
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div className="space-y-1">
+                  <label className="text-xs text-slate-400 uppercase tracking-wider font-semibold">Developer Email</label>
+                  <input
+                    type="email"
+                    value={loginEmail}
+                    onChange={(e) => setLoginEmail(e.target.value)}
+                    required
+                    className="w-full bg-dolphin-900 border border-dolphin-700 rounded-lg p-3 text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-dolphin-accent focus:border-transparent transition-all"
+                    placeholder="developer@hermes.local"
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs text-slate-400 uppercase tracking-wider font-semibold">Access Token</label>
+                  <input
+                    type="password"
+                    value={loginPassword}
+                    onChange={(e) => setLoginPassword(e.target.value)}
+                    required
+                    className="w-full bg-dolphin-900 border border-dolphin-700 rounded-lg p-3 text-slate-100 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-dolphin-accent focus:border-transparent transition-all"
+                    placeholder="••••••••••••••••"
+                  />
+                </div>
+
+                {loginError && (
+                  <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm">
+                    <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                    {loginError}
+                  </div>
+                )}
+
                 <button
-                  onClick={() => signIn('github')}
-                  className="w-full flex items-center justify-center gap-3 bg-dolphin-700 text-white hover:bg-dolphin-600 border border-dolphin-600 font-semibold py-3 px-4 rounded-lg transition-colors"
+                  type="submit"
+                  className="w-full bg-gradient-to-r from-dolphin-accent to-blue-500 hover:from-blue-400 hover:to-dolphin-accent text-dolphin-900 font-bold py-3 px-4 rounded-lg shadow-lg shadow-blue-500/20 transition-all duration-200 active:scale-95 mt-2"
                 >
-                  <Github className="w-5 h-5" />
-                  Sign in with GitHub
+                  Authenticate Session
                 </button>
-              </div>
+              </form>
 
               <div className="mt-6 text-center">
                 <p className="text-xs text-slate-500">
-                  By signing in, you agree to the Terms of Service and Privacy Policy for professional AI deployment.
+                  Access is monitored and logged. Unauthorized attempts are prohibited.
                 </p>
               </div>
             </div>
@@ -209,7 +256,7 @@ export default function HermesDirective() {
           <div className="flex items-center gap-4">
             <div className="hidden sm:flex items-center gap-2 text-sm text-slate-400 bg-dolphin-900/50 px-3 py-1 rounded-full border border-dolphin-700">
               <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-              <span>{session.user.email}</span>
+              <span>Session Active</span>
             </div>
             
             <button
@@ -217,7 +264,7 @@ export default function HermesDirective() {
               className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm font-medium bg-dolphin-700/50 hover:bg-dolphin-700 px-3 py-2 rounded-lg border border-dolphin-700"
             >
               <LogOut className="w-4 h-4" />
-              <span className="hidden sm:inline">Sign Out</span>
+              <span className="hidden sm:inline">Terminate</span>
             </button>
           </div>
         </div>