Skip to content

Commit ac8b643

Browse files
shawngrahamshawngraham
authored
Update App.tsx
1 parent 35a3e22 commit ac8b643

1 file changed

Lines changed: 37 additions & 19 deletions

File tree

‎App.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const App: React.FC = () => {
2222
const lastDriftCoords = useRef<GeoPoint | null>(null);
2323
const isGeneratingRef = useRef(false);
2424

25+
// Distance threshold to trigger a new ghost scan (approx 15-20 meters)
2526
const DRIFT_THRESHOLD_METERS = 0.00015;
2627

2728
const requestOrientationPermission = async () => {
@@ -41,6 +42,7 @@ const App: React.FC = () => {
4142
setState(DriftState.INITIALIZING);
4243
setError(null);
4344

45+
// Browser security: Audio and Orientation require a user gesture
4446
await requestOrientationPermission();
4547

4648
if ("geolocation" in navigator) {
@@ -50,13 +52,13 @@ const App: React.FC = () => {
5052
setCoords(newCoords);
5153
},
5254
(err) => {
53-
setError(`Dimensional anchoring failed: ${err.message}`);
55+
setError(`Signal Lost: ${err.message}`);
5456
setState(DriftState.ERROR);
5557
},
5658
{ enableHighAccuracy: true, maximumAge: 0, timeout: 15000 }
5759
);
5860
} else {
59-
setError("Geospatial sensors unavailable on this hardware.");
61+
setError("Geospatial sensors unavailable.");
6062
setState(DriftState.ERROR);
6163
return;
6264
}
@@ -70,10 +72,11 @@ const App: React.FC = () => {
7072
window.addEventListener('deviceorientation', handleOrientation);
7173

7274
try {
75+
// Initialize Engines
7376
await audioEngine.init();
7477
await spectralEngine.init((p) => setLoadProgress(p));
7578
} catch (e: any) {
76-
setError(`Core Initialization Failure: ${e.message}. Note: Local AI requires a stable connection for the first-time setup.`);
79+
setError(`Core Initialization Failure: ${e.message}`);
7780
setState(DriftState.ERROR);
7881
}
7982
};
@@ -87,12 +90,20 @@ const App: React.FC = () => {
8790
const nearby = await fetchNearbyArticles(currentCoords, DRIFT_RADIUS_METERS);
8891
setArticles(nearby);
8992

90-
if (nearby.length >= 1) {
93+
if (nearby.length >= 2) {
9194
setIsTransmitting(true);
9295
setStreamingText('');
96+
97+
// 1. Instant Audio Ping
9398
audioEngine.playSonarPing();
9499

95-
// Stream the whisper text token by token
100+
// 2. Generate the base text immediately so we can start the voice
101+
const baseText = await spectralEngine.generateWhisper(nearby, currentCoords, currentHeading);
102+
103+
// 3. Start speaking immediately
104+
audioEngine.speak(baseText);
105+
106+
// 4. Run visual stream (this mimics the speed of the voice)
96107
const finalText = await spectralEngine.generateWhisperStreaming(
97108
nearby,
98109
currentCoords,
@@ -108,16 +119,18 @@ const App: React.FC = () => {
108119
text: finalText,
109120
coords: currentCoords,
110121
anchors: nearby.slice(0, 3).map(a => a.title),
111-
voice: "Local-OpenELM"
122+
voice: "Spectral-NLP"
112123
};
113124

114125
setLog(prev => [newEntry, ...prev]);
115-
await audioEngine.speak(finalText);
116126

117127
setTimeout(() => {
118128
setIsTransmitting(false);
119129
setStreamingText('');
120-
}, 2000);
130+
}, 3000);
131+
} else {
132+
// Not enough articles nearby to generate a blend
133+
setState(DriftState.SCANNING);
121134
}
122135
} catch (err) {
123136
console.error("Drift collapse:", err);
@@ -128,13 +141,15 @@ const App: React.FC = () => {
128141
}, []);
129142

130143
useEffect(() => {
144+
// Transition from Init to Scanning
131145
if (state === DriftState.INITIALIZING && loadProgress >= 100 && coords) {
132146
setState(DriftState.SCANNING);
133147
performDrift(coords, heading);
134148
lastDriftCoords.current = coords;
135149
return;
136150
}
137151

152+
// Trigger drift on movement
138153
if (state === DriftState.SCANNING && coords) {
139154
const last = lastDriftCoords.current;
140155
if (!last) {
@@ -155,34 +170,36 @@ const App: React.FC = () => {
155170

156171
return (
157172
<div className={`h-screen w-full flex flex-col md:flex-row bg-[#050505] text-[#d1d1d1] transition-all duration-1000 ${isTransmitting ? 'bg-[#1a0a0a]' : ''}`}>
173+
174+
{/* LEFT COLUMN: RADAR & INTERFACE */}
158175
<div className={`w-full md:w-1/2 flex flex-col items-center justify-center p-8 border-b md:border-b-0 md:border-r border-green-900/20 bg-black/50 relative overflow-hidden`}>
159176

160177
{isTransmitting && (
161178
<div className="absolute inset-0 z-50 pointer-events-none bg-red-500/10 animate-pulse flex flex-col items-center justify-center gap-4 px-8">
162-
<div className="text-red-500 font-mono text-2xl tracking-[0.5em] uppercase animate-ping blur-[1px]">Receiving</div>
163-
<div className="text-[10px] font-mono text-red-500/80 font-bold uppercase tracking-[0.5em]">Local Spectral Intercept</div>
179+
<div className="text-red-500 font-mono text-2xl tracking-[0.5em] uppercase animate-ping blur-[1px]">Intercepting</div>
180+
<div className="text-[10px] font-mono text-red-500/80 font-bold uppercase tracking-[0.5em]">Radio Frequency Identified</div>
164181

165-
{/* Streaming text display */}
166182
{streamingText && (
167183
<div className="mt-6 max-w-md text-center">
168-
<p className="text-red-400/90 font-serif text-lg italic leading-relaxed tracking-wide">
184+
<p className="text-red-400/90 font-serif text-xl italic leading-relaxed tracking-wide drop-shadow-[0_0_10px_rgba(255,0,0,0.5)]">
169185
"{streamingText}
170-
<span className="inline-block w-2 h-4 bg-red-500 ml-1 animate-pulse" />
186+
<span className="inline-block w-2 h-5 bg-red-500 ml-1 animate-pulse" />
171187
"
172188
</p>
173189
</div>
174190
)}
175191
</div>
176192
)}
177193

194+
{/* HUD Stats */}
178195
<div className="absolute top-6 left-6 font-mono text-[10px] text-green-500/40 flex flex-col gap-2 uppercase tracking-widest">
179196
<div className="flex items-center gap-2">
180197
<div className={`w-2 h-2 rounded-full ${coords ? 'bg-green-500 shadow-[0_0_8px_green]' : 'bg-red-900 animate-pulse'}`} />
181198
<span>Signal: {coords ? 'LOCKED' : 'SEARCHING...'}</span>
182199
</div>
183200
<div className="flex items-center gap-2">
184201
<div className={`w-2 h-2 rounded-full ${loadProgress >= 100 ? 'bg-green-500' : 'bg-yellow-600 animate-pulse'}`} />
185-
<span>Matrix: {loadProgress >= 100 ? 'LOCALIZED' : `DOWNLOADING ${loadProgress}%`}</span>
202+
<span>Matrix: {loadProgress >= 100 ? 'PROCEDURAL' : `ALIGNED ${loadProgress}%`}</span>
186203
</div>
187204
<div className="flex items-center gap-2">
188205
<div className="w-2 h-2 rounded-full bg-green-500/50" />
@@ -201,14 +218,14 @@ const App: React.FC = () => {
201218
onClick={startEngine}
202219
className="group relative px-10 py-5 overflow-hidden border border-green-500/50 text-green-500 hover:bg-green-500 hover:text-black transition-all duration-700 font-mono tracking-[0.4em] uppercase text-xs"
203220
>
204-
<span className="relative z-10">Wake Local Core</span>
221+
<span className="relative z-10">Wake Spectral Core</span>
205222
<div className="absolute inset-0 bg-green-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div>
206223
</button>
207224
</div>
208225
) : state === DriftState.INITIALIZING ? (
209226
<div className="w-64 space-y-6">
210227
<div className="flex justify-between font-mono text-[10px] text-green-500/80 uppercase tracking-widest">
211-
<span>Necromantic Interface Loading</span>
228+
<span>Aligning Linguistic Matrix</span>
212229
<span>{loadProgress}%</span>
213230
</div>
214231
<div className="h-1 w-full bg-green-950/40 border border-green-500/10 rounded-full relative overflow-hidden">
@@ -218,7 +235,7 @@ const App: React.FC = () => {
218235
/>
219236
</div>
220237
<p className="text-[10px] text-center font-serif italic opacity-30 tracking-wide">
221-
Anchoring 270M parameters for offline spectral intercept.
238+
Calibrating procedural templates for spatial intercept.
222239
</p>
223240
</div>
224241
) : (
@@ -227,7 +244,7 @@ const App: React.FC = () => {
227244

228245
<div className="text-center space-y-6">
229246
<div className="text-[11px] font-mono uppercase tracking-[0.6em] text-green-500/70 animate-pulse">
230-
{isTransmitting ? "DECODING ECHO..." : "WATCHING THE VOID"}
247+
{isTransmitting ? "SIGNAL DRIFT..." : "SCANNING THE ETHER"}
231248
</div>
232249
<div className="flex justify-center gap-3 h-8 items-center">
233250
{[...Array(8)].map((_, i) => (
@@ -245,11 +262,12 @@ const App: React.FC = () => {
245262
{error && (
246263
<div className="mt-10 p-6 bg-red-950/20 border border-red-900/40 text-red-500 text-[10px] font-mono text-center uppercase tracking-[0.2em] leading-relaxed max-w-sm">
247264
{error}
248-
<button onClick={() => window.location.reload()} className="block mt-6 mx-auto border border-red-500/40 px-4 py-2 hover:bg-red-500/10 transition-all font-bold">REBOOT CORE</button>
265+
<button onClick={() => window.location.reload()} className="block mt-6 mx-auto border border-red-500/40 px-4 py-2 hover:bg-red-500/10 transition-all font-bold">REBOOT INTERFACE</button>
249266
</div>
250267
)}
251268
</div>
252269

270+
{/* RIGHT COLUMN: HISTORY LOG */}
253271
<div className="w-full md:w-1/2 flex flex-col bg-[#070707] relative overflow-hidden border-t md:border-t-0 border-green-900/10">
254272
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(0,255,65,0.02)_0%,transparent_50%)] pointer-events-none" />
255273
<Log entries={log} />

0 commit comments

Comments
 (0)