wiki-periodic-limb-movement-disorder at DuckDuckGo
Content fetched from html.duckduckgo.com
#awc-container {
--bg: rgba(10, 10, 12, 0.82);
--surface: rgba(22, 22, 26, 0.7);
--border: rgba(255, 255, 255, 0.07);
--primary: #5c62f6;
--accent: #10b981;
--danger: #f43f5e;
--text: #f4f4f5;
--muted: #8e8e93;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: var(--text);
height: 640px;
width: 100%;
max-width: 800px;
margin: 40px auto;
border-radius: 20px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 24px 50px rgba(0,0,0,0.4);
border: 1px solid var(--border);
}
#awc-loader {
position: absolute;
inset: 0;
background: #09090b;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.awc-ring {
width: 32px;
height: 32px;
border: 2px solid rgba(255, 255, 255, 0.05);
border-top-color: var(--primary);
border-radius: 50%;
animation: awc-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
margin-bottom: 20px;
}
@keyframes awc-spin { to { transform: rotate(360deg); } }
#awc-app { display: none; height: 100%; flex-direction: column; }
#awc-header {
padding: 18px 24px;
background: rgba(18, 18, 22, 0.5);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
#awc-finetune-panel {
background: rgba(25, 25, 30, 0.4);
border-bottom: 1px solid var(--border);
padding: 12px 24px;
display: flex;
gap: 14px;
align-items: center;
font-size: 13px;
}
#awc-bias-input {
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
flex-grow: 1;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
transition: border-color 0.2s;
}
#awc-bias-input:focus {
outline: none;
border-color: rgba(92, 98, 246, 0.5);
}
#awc-set-bias-btn {
background: rgba(255, 255, 255, 0.08);
color: var(--text);
border: 1px solid var(--border);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background 0.2s;
}
#awc-set-bias-btn:hover { background: rgba(255, 255, 255, 0.14); }
#awc-visualizer {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(30, 30, 45, 0.4) 0%, rgba(10, 10, 12, 0) 75%);
padding: 40px;
}
.awc-orb-container {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.awc-avatar {
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
z-index: 2;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.awc-pulse-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--primary);
opacity: 0;
transform: scale(0.8);
transition: all 0.4s ease;
}
.awc-avatar.listening {
border-color: var(--danger);
box-shadow: 0 0 30px rgba(244, 63, 94, 0.15);
}
.awc-avatar.listening + .awc-pulse-ring {
animation: awc-orb-pulse-red 2s infinite;
border-color: var(--danger);
}
.awc-avatar.speaking {
border-color: var(--accent);
box-shadow: 0 0 40px rgba(16, 185, 129, 0.15);
animation: awc-breathe 2.5s ease-in-out infinite;
}
@keyframes awc-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
@keyframes awc-orb-pulse-red {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.4); opacity: 0; }
}
#awc-transcript {
text-align: center;
padding: 0 30px;
font-size: 15px;
line-height: 1.6;
min-height: 50px;
color: rgba(244, 244, 245, 0.85);
max-width: 85%;
font-weight: 400;
}
#awc-footer {
padding: 24px;
background: rgba(18, 18, 22, 0.4);
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
}
.awc-btn {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid var(--border);
cursor: pointer;
color: white;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background: rgba(255, 255, 255, 0.03);
}
.awc-btn:hover {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.04);
}
.awc-btn.active {
background: var(--danger);
border-color: var(--danger);
box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
}
.awc-status-pill {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
display: flex;
gap: 7px;
align-items: center;
color: var(--muted);
}
.awc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); transition: background 0.3s; }
.awc-dot.busy { background: var(--primary); animation: awc-dot-glow 1.2s ease-in-out infinite alternate; }
@keyframes awc-dot-glow {
0% { opacity: 0.4; transform: scale(0.9); }
100% { opacity: 1; transform: scale(1.1); }
}
<div id="awc-container">
<div id="awc-loader">
<div class="awc-ring"></div>
<div style="font-size:13px;color:var(--muted);, monospace" id="awc-load-text">Initializing Engine Pipeline...</div>
</div>
<div id="awc-app">
<div id="awc-finetune-panel">
<span style="color:var(--muted);font-weight: 500">Context Bias</span>
<button id="awc-set-bias-btn">Update</button>
</div>
<div id="awc-header">
<span style="font-weight:500;font-size:14px;letter-spacing: -0.01em">Neural Context Assistant</span>
<div class="awc-status-pill">
<div class="awc-dot" id="awc-status-dot"></div>
<span id="awc-status-text">IDLE</span>
</div>
</div>
<div id="awc-visualizer">
<div class="awc-orb-container">
<div class="awc-avatar" id="awc-avatar">🧬</div>
<div class="awc-pulse-ring"></div>
</div>
<div id="awc-transcript">Initialize system by tapping the microphone.</div>
</div>
<div id="awc-footer">
<button class="awc-btn" id="awc-mic" title="Speak">🎤</button>
</div>
</div>
</div>
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.0';
import * as webllm from "https://esm.run/@mlc-ai/web-llm";
// --- CONFIGURATION ---
const WHISPER_MODEL = "Xenova/whisper-tiny.en";
const LLM_MODEL = "SmolLM2-360M-Instruct-q4f16_1-MLC";
// --- STATE ---
let transcriber = null;
let llmEngine = null;
let isLoaded = false;
let isListening = false;
let isSpeaking = false;
let mediaRecorder = null;
let audioChunks = [];
let synth = window.speechSynthesis;
let conversationHistory = [];
let vocabularyHint = document.getElementById('awc-bias-input').value;
// --- DOM ELEMENTS ---
const els = {
loader: document.getElementById('awc-loader'),
loadText: document.getElementById('awc-load-text'),
app: document.getElementById('awc-app'),
micBtn: document.getElementById('awc-mic'),
avatar: document.getElementById('awc-avatar'),
transcript: document.getElementById('awc-transcript'),
statusDot: document.getElementById('awc-status-dot'),
statusText: document.getElementById('awc-status-text'),
biasInput: document.getElementById('awc-bias-input'),
setBiasBtn: document.getElementById('awc-set-bias-btn')
};
// --- INITIALIZATION ---
async function init() {
try {
els.loadText.innerText = "Allocating Whisper Core...";
transcriber = await pipeline('automatic-speech-recognition', WHISPER_MODEL);
els.loadText.innerText = "Spawning Language Matrix...";
llmEngine = await webllm.CreateMLCEngine(LLM_MODEL, {
initProgressCallback: (p) => {
if(p.progress === 1 && !isLoaded) finishLoading();
}
});
} catch (e) {
console.error(e);
els.loadText.innerText = "Hardware execution failed. Routing to browser API...";
fallbackToSystemSpeech();
}
}
function finishLoading() {
isLoaded = true;
els.loader.style.display = 'none';
els.app.style.display = 'flex';
const pageTitle = document.querySelector('h1') ? document.querySelector('h1').innerText : "General Topic";
conversationHistory.push({
role: "system",
content: `You are an expert assistant discussing "${pageTitle}". Use concise language.`
});
}
// --- SYSTEM SPEECH BACKUP ---
let systemRecognition = null;
function fallbackToSystemSpeech() {
if ('webkitSpeechRecognition' in window) {
systemRecognition = new webkitSpeechRecognition();
systemRecognition.continuous = false;
systemRecognition.lang = 'en-US';
systemRecognition.onresult = (e) => handleUserMessage(e.results[0][0].transcript);
systemRecognition.onend = () => {
isListening = false;
els.micBtn.classList.remove('active');
els.avatar.classList.remove('listening');
};
els.loader.style.display = 'none';
els.app.style.display = 'flex';
els.loadText.innerText = "System Speech Synced";
setTimeout(finishLoading, 1000);
} else {
els.loadText.innerText = "Platform architecture unsupported.";
}
}
// --- RECORDING PIPELINE ---
els.micBtn.onclick = async () => {
if (!isLoaded && !systemRecognition) return;
if (isListening) { stopRecording(); } else { startRecording(); }
};
async function startRecording() {
isListening = true;
audioChunks = [];
els.micBtn.classList.add('active');
els.avatar.classList.add('listening');
setStatus("LISTENING", "busy");
els.transcript.innerText = "Awaiting input audio...";
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
mediaRecorder.onstop = () => processAudio();
mediaRecorder.start();
} catch (err) {
console.error(err);
setStatus("ERROR", "");
isListening = false;
}
}
function stopRecording() {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop();
mediaRecorder.stream.getTracks().forEach(track => track.stop());
} else if (systemRecognition) {
systemRecognition.stop();
}
}
async function processAudio() {
setStatus("COMPUTING", "busy");
els.avatar.classList.remove('listening');
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
const audioURL = URL.createObjectURL(audioBlob);
try {
const result = await transcriber(audioURL, {
language: "english",
task: "transcribe",
language_detection_hint: vocabularyHint
});
const text = result.text.trim();
els.transcript.innerText = text;
handleUserMessage(text);
} catch (e) {
console.error(e);
els.transcript.innerText = "Signal decryption failed.";
} finally {
URL.revokeObjectURL(audioURL);
}
}
// --- INFERENCE PIPELINE ---
async function handleUserMessage(text) {
if(!llmEngine) return;
setStatus("THINKING", "busy");
conversationHistory.push({ role: "user", content: text });
try {
const stream = await llmEngine.chat.completions.create({
messages: conversationHistory,
stream: true,
temperature: 0.7
});
let fullResponse = "";
for await (const chunk of stream) {
const delta = chunk.choices[0]?.delta?.content || "";
fullResponse += delta;
els.transcript.innerText = fullResponse;
}
speak(fullResponse);
conversationHistory.push({ role: "assistant", content: fullResponse });
} catch (e) {
els.transcript.innerText = "Matrix Error: " + e.message;
}
}
// --- AUDIO SYNTHESIS ---
function speak(text) {
if (!text) return;
synth.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = 1.05;
utterance.onstart = () => {
isSpeaking = true;
els.avatar.classList.add('speaking');
setStatus("SPEAKING", "busy");
};
utterance.onend = () => {
isSpeaking = false;
els.avatar.classList.remove('speaking');
setStatus("IDLE", "");
};
synth.speak(utterance);
}
// --- INTERACTION HANDLING ---
els.setBiasBtn.onclick = () => {
vocabularyHint = els.biasInput.value;
els.setBiasBtn.innerText = "SAVED";
setTimeout(() => els.setBiasBtn.innerText = "Update", 1800);
};
function setStatus(text, type) {
els.statusText.innerText = text;
els.statusDot.className = `awc-dot ${type}`;
}
init();