Skip to content

Claude/jolly carson j2c8zt #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mukeshkumarcharak merged 2 commits into from
Jun 8, 2026
+415 −727
Merged

Claude/jolly carson j2c8zt #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60c3f8e
Merge pull request #20 from hakxcore/main
mukeshkumarcharak Jun 8, 2026
ab93ce1
feat(gui): full-screen orb UI — remove phone chrome, add Web Audio vo…
claude Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 126 additions & 108 deletions gui/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,143 +1,89 @@
// Gathm AI GUI — app.js
// Connects to the Gathm API server (default: http://127.0.0.1:8080)
// Gathm AI — app.js

const API_BASE = window.GATHM_API_URL || 'http://127.0.0.1:8080';

// Initialize Lucide icons
lucide.createIcons();

// ── Orb state management ───────────────────────────────────────
const aiOrb = document.getElementById('aiOrb');
// ── Element refs ───────────────────────────────────────────────
const aiOrb = document.getElementById('aiOrb');
const mainOrb = document.getElementById('mainOrb');
const freqBars = document.getElementById('freqBars');
const botStatus = document.getElementById('botStatus');
const chatArea = document.getElementById('chatArea');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const micBtn = document.getElementById('micBtn');

// ── Orb state ──────────────────────────────────────────────────
function setOrbState(state) {
if (aiOrb) aiOrb.className = `ai-orb ${state}`;
}

// Mic button → speaking state while held
const micBtn = document.querySelector('.mic-btn-outer');
if (micBtn) {
const startSpeaking = () => setOrbState('speaking');
const stopSpeaking = () => setOrbState('idle');
micBtn.addEventListener('mousedown', startSpeaking);
micBtn.addEventListener('touchstart', startSpeaking, { passive: true });
micBtn.addEventListener('mouseup', stopSpeaking);
micBtn.addEventListener('touchend', stopSpeaking);
micBtn.addEventListener('mouseleave', () => {
if (aiOrb && aiOrb.classList.contains('speaking')) stopSpeaking();
});
}

// ── Clock ──────────────────────────────────────────────────────────
function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('clock').textContent = hours + ':' + minutes;
}
setInterval(updateClock, 1000);
updateClock();

// ── Connectivity check ─────────────────────────────────────────────
const onlineDot = document.getElementById('onlineDot');
const botStatus = document.getElementById('botStatus');
// ── Connectivity ───────────────────────────────────────────────
let isOnline = false;

async function checkConnectivity() {
try {
const res = await fetch(`${API_BASE}/api/v1/health`, {
method: 'GET',
signal: AbortSignal.timeout(5000),
});
isOnline = res.ok;
} catch {
isOnline = false;
}
updateStatusUI();
botStatus.textContent = isOnline ? 'Online · Voice & Text' : 'Offline · API not reachable';
}

function updateStatusUI() {
if (isOnline) {
onlineDot.classList.remove('offline');
botStatus.textContent = 'Online · Voice & Text';
} else {
onlineDot.classList.add('offline');
botStatus.textContent = 'Offline · API not reachable';
}
}

// Check on load and every 30 seconds
checkConnectivity();
setInterval(checkConnectivity, 30000);

// ── Scroll helper ──────────────────────────────────────────────────
// ── Scroll ─────────────────────────────────────────────────────
function scrollToBottom() {
const scrollArea = document.getElementById('chatScroll');
scrollArea.scrollTop = scrollArea.scrollHeight;
chatArea.scrollTop = chatArea.scrollHeight;
}

// ── Layout padding for fixed input area ────────────────────────────
document.addEventListener("DOMContentLoaded", () => {
const inputAreaHeight = document.querySelector('.input-area').offsetHeight;
document.getElementById('chatArea').style.paddingBottom = `${inputAreaHeight + 20}px`;
scrollToBottom();
});

// ── Time formatting ────────────────────────────────────────────────
// ── Time ───────────────────────────────────────────────────────
function formatTime() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
return `${hours}:${minutes} ${ampm}`;
const d = new Date();
let h = d.getHours(), m = d.getMinutes();
const ampm = h >= 12 ? 'PM' : 'AM';
h = h % 12 || 12;
return `${h}:${m < 10 ? '0' + m : m} ${ampm}`;
}

// ── Message rendering ──────────────────────────────────────────────
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const chatArea = document.getElementById('chatArea');

// ── Messages ───────────────────────────────────────────────────
function addMessage(text, sender, cssClass) {
const messageWrapper = document.createElement('div');
messageWrapper.className = `message-wrapper ${sender}`;
const wrapper = document.createElement('div');
wrapper.className = `message-wrapper ${sender}`;

const messageDiv = document.createElement('div');
messageDiv.className = `message ${cssClass || sender + '-text'}`;
const msg = document.createElement('div');
msg.className = `message ${cssClass || sender + '-text'}`;

const p = document.createElement('p');
p.textContent = text;
messageDiv.appendChild(p);

messageWrapper.appendChild(messageDiv);
msg.appendChild(p);
wrapper.appendChild(msg);

const timeDiv = document.createElement('div');
timeDiv.className = `message-time ${sender}-time`;
timeDiv.textContent = formatTime();
const time = document.createElement('div');
time.className = `message-time ${sender}-time`;
time.textContent = formatTime();

chatArea.appendChild(messageWrapper);
chatArea.appendChild(timeDiv);
chatArea.appendChild(wrapper);
chatArea.appendChild(time);
scrollToBottom();

lucide.createIcons();
}

// ── Typing indicator ───────────────────────────────────────────────
// ── Typing indicator ───────────────────────────────────────────
let typingEl = null;

function showTyping() {
setOrbState('thinking');
const wrapper = document.createElement('div');
wrapper.className = 'message-wrapper bot';
wrapper.id = 'typingWrapper';

const indicator = document.createElement('div');
indicator.className = 'typing-indicator';
indicator.innerHTML = '<div class="dot"></div><div class="dot"></div><div class="dot"></div>';

wrapper.appendChild(indicator);
chatArea.appendChild(wrapper);
scrollToBottom();
Expand All @@ -146,20 +92,17 @@ function showTyping() {

function hideTyping() {
setOrbState('idle');
if (typingEl) {
typingEl.remove();
typingEl = null;
}
typingEl?.remove();
typingEl = null;
}

// ── Send message via API ───────────────────────────────────────────
// ── Send via API ───────────────────────────────────────────────
let isSending = false;

async function sendMessage() {
const text = messageInput.value.trim();
if (!text || isSending) return;

// Add user message
addMessage(text, 'user');
messageInput.value = '';
isSending = true;
Expand All @@ -182,21 +125,18 @@ async function sendMessage() {
}

const data = await res.json();

// The agent returns either raw_output or structured response
const reply = data.raw_output
|| data.output
|| data.result
const reply = data.raw_output || data.output || data.result
|| JSON.stringify(data, null, 2);

addMessage(reply, 'bot');

} catch (err) {
hideTyping();
if (!isOnline) {
addMessage('Cannot reach the Gathm API. Start the server: gathm-api --port 8080', 'bot', 'bot-error');
} else {
addMessage(`Connection error: ${err.message}`, 'bot', 'bot-error');
}
addMessage(
isOnline
? `Connection error: ${err.message}`
: 'Cannot reach Gathm API. Start the server: gathm-api --port 8080',
'bot', 'bot-error'
);
} finally {
isSending = false;
sendBtn.disabled = false;
Expand All @@ -205,8 +145,86 @@ async function sendMessage() {
}

sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
messageInput.addEventListener('keypress', e => { if (e.key === 'Enter') sendMessage(); });

// ══════════════════════════════════════════════════════════════
// Voice mode — Web Audio API drives real frequency visualization
// ══════════════════════════════════════════════════════════════

let audioCtx = null;
let analyser = null;
let micStream = null;
let rafId = null;
let voiceActive = false;

const bars = Array.from(freqBars.querySelectorAll('.fb'));

async function startVoice() {
try {
micStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
} catch (err) {
botStatus.textContent = 'Microphone access denied';
setTimeout(checkConnectivity, 3000);
return;
}

audioCtx = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioCtx.createAnalyser();
analyser.fftSize = 64; // 32 frequency bins
analyser.smoothingTimeConstant = 0.75;

const src = audioCtx.createMediaStreamSource(micStream);
src.connect(analyser);

voiceActive = true;
aiOrb.setAttribute('data-live', 'true');
setOrbState('speaking');
micBtn.classList.add('active');
botStatus.textContent = 'Listening…';

driveFrequency();
}

function stopVoice() {
voiceActive = false;
if (rafId) cancelAnimationFrame(rafId);
micStream?.getTracks().forEach(t => t.stop());
audioCtx?.close();
audioCtx = null; analyser = null; micStream = null; rafId = null;

// Reset live transforms
mainOrb.style.transform = '';
bars.forEach(b => { b.style.height = ''; });

aiOrb.removeAttribute('data-live');
setOrbState('idle');
micBtn.classList.remove('active');
checkConnectivity();
}

function driveFrequency() {
if (!voiceActive || !analyser) return;

const data = new Uint8Array(analyser.frequencyBinCount); // 32 values
analyser.getByteFrequencyData(data);

// Overall energy → orb scale (1.0 – 1.18)
const avg = data.reduce((s, v) => s + v, 0) / data.length;
const scale = 1 + (avg / 255) * 0.18;
mainOrb.style.transform = `scale(${scale.toFixed(4)})`;

// Per-band energy → bar heights (4 px – 38 px)
const step = Math.max(1, Math.floor(data.length / bars.length));
bars.forEach((bar, i) => {
const val = data[i * step] ?? 0;
const h = 4 + (val / 255) * 34;
bar.style.height = `${h.toFixed(1)}px`;
});

rafId = requestAnimationFrame(driveFrequency);
}

micBtn.addEventListener('click', () => {
if (voiceActive) stopVoice();
else startVoice();
});
Loading
Loading