|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const savedApiKey = localStorage.getItem('deepseek_api_key'); |
|
|
if (!savedApiKey) { |
|
|
document.querySelector('custom-api-key-modal').setAttribute('open', 'true'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('send-request').addEventListener('click', async function() { |
|
|
const apiKey = localStorage.getItem('deepseek_api_key'); |
|
|
if (!apiKey) { |
|
|
document.querySelector('custom-api-key-modal').setAttribute('open', 'true'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const requestBody = document.getElementById('request-body').value; |
|
|
const responsePlaceholder = document.getElementById('response-placeholder'); |
|
|
const responseContent = document.getElementById('response-content'); |
|
|
|
|
|
try { |
|
|
|
|
|
responsePlaceholder.innerHTML = ` |
|
|
<div class="flex flex-col items-center"> |
|
|
<i data-feather="loader" class="w-12 h-12 mx-auto mb-4 loading-spinner"></i> |
|
|
<p>Processing your request...</p> |
|
|
</div> |
|
|
`; |
|
|
feather.replace(); |
|
|
|
|
|
responsePlaceholder.classList.remove('hidden'); |
|
|
responseContent.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const jsonBody = JSON.parse(requestBody); |
|
|
|
|
|
|
|
|
const response = await fetch('https://api.deepseek.com/v1/chat/completions', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': `Bearer ${apiKey}` |
|
|
}, |
|
|
body: requestBody |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
|
|
|
responseContent.textContent = JSON.stringify(data, null, 2); |
|
|
responsePlaceholder.classList.add('hidden'); |
|
|
responseContent.classList.remove('hidden'); |
|
|
|
|
|
} catch (error) { |
|
|
responsePlaceholder.innerHTML = ` |
|
|
<div class="flex flex-col items-center text-red-500"> |
|
|
<i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i> |
|
|
<p>Error: ${error.message}</p> |
|
|
</div> |
|
|
`; |
|
|
feather.replace(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function toggleDarkMode() { |
|
|
const html = document.documentElement; |
|
|
if (html.classList.contains('dark')) { |
|
|
html.classList.remove('dark'); |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} else { |
|
|
html.classList.add('dark'); |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} |
|
|
} |