Upload components/ExpertPanel.js with huggingface_hub

components/ExpertPanel.js

@@ -0,0 +1,197 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Shield, AlertTriangle, Zap, Send, Loader2, Terminal, Lock, Scale } from 'lucide-react';
+
+const ExpertPanel = () => {
+  const [query, setQuery] = useState('');
+  const [context, setContext] = useState('');
+  const [mode, setMode] = useState('standard'); // standard, uncensored, legal
+  const [loading, setLoading] = useState(false);
+  const [response, setResponse] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!query.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    setResponse(null);
+
+    try {
+      const res = await axios.post('/api/inference', {
+        prompt: query,
+        context: context,
+        mode: mode
+      });
+      setResponse(res.data);
+    } catch (err) {
+      setError('Failed to connect to Titan Core. Check connection or try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getModeColor = (m) => {
+    switch(m) {
+      case 'uncensored': return 'border-red-500 bg-red-900/20 text-red-400';
+      case 'legal': return 'border-blue-500 bg-blue-900/20 text-blue-400';
+      default: return 'border-gray-600 bg-gray-800 text-gray-300';
+    }
+  };
+
+  return (
+    <div className="w-full max-w-5xl mx-auto p-4 md:p-8">
+      {/* Header */}
+      <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center border-b border-gray-800 pb-6">
+        <div>
+          <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
+            TITAN <span className="font-mono text-sm text-gray-500 align-top">v2.4</span>
+          </h1>
+          <p className="text-gray-400 mt-2 font-mono text-sm">
+            Complete Uncensored Strategic Advice Platform
+          </p>
+        </div>
+        <a 
+          href="https://huggingface.co/spaces/akhaliq/anycoder" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="mt-4 md:mt-0 flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors"
+        >
+          <Terminal size={14} />
+          Built with anycoder
+        </a>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        {/* Input Section */}
+        <div className="lg:col-span-2 space-y-6">
+          <form onSubmit={handleSubmit} className="space-y-4 bg-gray-900/50 p-6 rounded-xl border border-gray-800 backdrop-blur-sm">
+            
+            {/* Mode Selection */}
+            <div className="grid grid-cols-3 gap-2">
+              <button
+                type="button"
+                onClick={() => setMode('standard')}
+                className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all ${mode === 'standard' ? getModeColor('standard') : 'border-gray-800 hover:border-gray-700'}`}
+              >
+                <Shield size={20} className="mb-1" />
+                <span className="text-xs font-bold">STANDARD</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setMode('uncensored')}
+                className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all ${mode === 'uncensored' ? getModeColor('uncensored') : 'border-gray-800 hover:border-gray-700'}`}
+              >
+                <AlertTriangle size={20} className="mb-1" />
+                <span className="text-xs font-bold">UNRESTRICTED</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setMode('legal')}
+                className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all ${mode === 'legal' ? getModeColor('legal') : 'border-gray-800 hover:border-gray-700'}`}
+              >
+                <Scale size={20} className="mb-1" />
+                <span className="text-xs font-bold">LEGAL STRAT</span>
+              </button>
+            </div>
+
+            <div>
+              <label className="block text-xs font-mono text-gray-500 mb-2 uppercase">Target Situation / Query</label>
+              <textarea
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Describe the scenario requiring strategic intervention..."
+                className="w-full h-32 bg-gray-950 border border-gray-800 rounded-lg p-4 text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none font-mono text-sm resize-none"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-mono text-gray-500 mb-2 uppercase">Context & Constraints (Optional)</label>
+              <textarea
+                value={context}
+                onChange={(e) => setContext(e.target.value)}
+                placeholder="Add specific constraints, laws, or psychological profiles..."
+                className="w-full h-20 bg-gray-950 border border-gray-800 rounded-lg p-4 text-gray-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none font-mono text-sm resize-none"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading || !query.trim()}
+              className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-gray-800 disabled:text-gray-600 text-white font-bold py-4 rounded-lg flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-900/20"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="animate-spin" size={20} />
+                  ANALYZING VECTORS...
+                </>
+              ) : (
+                <>
+                  <Zap size={20} />
+                  GENERATE STRATEGY
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+
+        {/* Output Section */}
+        <div className="lg:col-span-1">
+          <div className="h-full bg-gray-950 border border-gray-800 rounded-xl overflow-hidden flex flex-col">
+            <div className="bg-gray-900 p-4 border-b border-gray-800 flex justify-between items-center">
+              <span className="text-xs font-mono text-gray-400 flex items-center gap-2">
+                <Lock size={12} />
+                ENCRYPTED OUTPUT
+              </span>
+              {response && <span className="text-xs text-green-500 font-mono">COMPLETED</span>}
+            </div>
+            
+            <div className="p-6 flex-1 overflow-y-auto font-mono text-sm leading-relaxed">
+              {error ? (
+                <div className="text-red-400 bg-red-900/10 p-4 rounded border border-red-900/30">
+                  {error}
+                </div>
+              ) : response ? (
+                <div className="space-y-4 animate-in fade-in duration-500">
+                  <div className="border-b border-gray-800 pb-2 mb-4">
+                    <h3 className="text-blue-400 font-bold">{response.title}</h3>
+                    <span className="text-xs text-gray-600">{response.timestamp}</span>
+                  </div>
+                  <div className="whitespace-pre-wrap text-gray-300">
+                    {response.result}
+                  </div>
+                </div>
+              ) : (
+                <div className="h-full flex flex-col items-center justify-center text-gray-700 space-y-4 opacity-50">
+                  <Terminal size={48} />
+                  <p className="text-center text-xs">AWAITING INPUT PARAMETERS...</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      {/* Footer Info */}
+      <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-gray-600 font-mono">
+        <div className="p-4 border border-gray-800 rounded bg-gray-900/30">
+          <strong className="text-gray-400 block mb-1">MODULE: PSY-WARFARE</strong>
+          Active: Uses cognitive bias exploitation and framing techniques.
+        </div>
+        <div className="p-4 border border-gray-800 rounded bg-gray-900/30">
+          <strong className="text-gray-400 block mb-1">MODULE: LEGAL LOOPHOLES</strong>
+          Active: Scans for jurisdictional gaps and regulatory gray areas.
+        </div>
+        <div className="p-4 border border-gray-800 rounded bg-gray-900/30">
+          <strong className="text-gray-400 block mb-1">MODULE: FALLACY ENGINE</strong>
+          Active: Constructs arguments using logical and rhetorical fallacies.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExpertPanel;