|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta name="og:image" content="https://cdn.sazumi.moe/file/t1p7od.jpg"> |
|
<meta name="og:description" content="Revolutionize your daily conversations with Lumin AI, a powerful chatbot that helps you with tasks, answers questions, and even generates creative content. From scheduling appointments to writing emails, Lumin AI is your personal assistant in a chat."> |
|
<link rel="icon" href="https://cdn.sazumi.moe/file/08kry0.webp" type="image/x-icon"> |
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> |
|
<title>LuminAI API Client</title> |
|
<style> |
|
.toggle-switch { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
#theme-switch { |
|
display: none; |
|
} |
|
|
|
.toggle-container { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
background-color: #ccc; |
|
border-radius: 34px; |
|
width: 60px; |
|
height: 30px; |
|
padding: 3px; |
|
position: relative; |
|
transition: background-color 0.3s ease; |
|
} |
|
|
|
.dot { |
|
background-color: #fff; |
|
border-radius: 50%; |
|
width: 24px; |
|
height: 24px; |
|
position: absolute; |
|
top: 3px; |
|
left: 3px; |
|
transition: left 0.3s ease; |
|
} |
|
|
|
.toggle-container .sun, |
|
.toggle-container .moon { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 24px; |
|
height: 24px; |
|
position: absolute; |
|
top: 3px; |
|
} |
|
|
|
.toggle-container .sun { |
|
left: 3px; |
|
} |
|
|
|
.toggle-container .moon { |
|
right: 3px; |
|
} |
|
|
|
#theme-switch:checked + .toggle-container { |
|
background-color: #4a90e2; |
|
} |
|
|
|
#theme-switch:checked + .toggle-container .dot { |
|
left: calc(100% - 3px - 24px); |
|
} |
|
body { |
|
font-family: 'Roboto', sans-serif; |
|
background-color: #f5f7fa; |
|
color: #444; |
|
margin: 0; |
|
padding: 0; |
|
line-height: 1.6; |
|
transition: background-color 0.3s, color 0.3s; |
|
} |
|
|
|
.container { |
|
max-width: 1000px; |
|
margin: 40px auto; |
|
padding: 0 20px; |
|
} |
|
|
|
header { |
|
background: linear-gradient(90deg, #4a90e2, #007aff); |
|
color: #fff; |
|
padding: 40px 0; |
|
text-align: center; |
|
border-bottom: 3px solid #005f9e; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
|
|
header h1 { |
|
margin: 0; |
|
font-size: 2.5em; |
|
font-weight: 700; |
|
font-family: 'Playfair Display', serif; |
|
} |
|
|
|
.main { |
|
margin-top: 20px; |
|
} |
|
|
|
h2, h3 { |
|
color: #4a90e2; |
|
font-weight: 500; |
|
} |
|
|
|
.code-block { |
|
background: #eef7ff; |
|
padding: 15px; |
|
border-left: 5px solid #4a90e2; |
|
margin: 20px 0; |
|
position: relative; |
|
border-radius: 5px; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.code-block pre { |
|
margin: 0; |
|
overflow-x: auto; |
|
font-size: 0.9em; |
|
} |
|
|
|
.copy-btn { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
background: none; |
|
border: none; |
|
cursor: pointer; |
|
outline: none; |
|
} |
|
|
|
.copy-btn img { |
|
width: 24px; |
|
height: 24px; |
|
} |
|
|
|
.stats-container { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 20px; |
|
margin-top: 40px; |
|
} |
|
|
|
.stat-box { |
|
background: #fff; |
|
padding: 20px; |
|
border-radius: 10px; |
|
text-align: center; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
transition: transform 0.3s, box-shadow 0.3s; |
|
} |
|
|
|
.stat-box:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.stat-box h3 { |
|
margin: 0; |
|
font-size: 1.2em; |
|
color: #4a90e2; |
|
font-weight: 500; |
|
} |
|
|
|
.stat-box p { |
|
margin: 10px 0 0; |
|
font-size: 2.5em; |
|
font-weight: bold; |
|
color: #333; |
|
} |
|
|
|
.stat-box.full-width { |
|
grid-column: span 2; |
|
} |
|
|
|
footer { |
|
background: linear-gradient(90deg, #4a90e2, #007aff); |
|
color: #fff; |
|
text-align: center; |
|
padding: 20px 0; |
|
position: relative; |
|
bottom: 0; |
|
width: 100%; |
|
margin-top: 40px |
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
footer p { |
|
margin: 0; |
|
font-size: 0.9em; |
|
} |
|
|
|
.dark-mode { |
|
background-color: #1c1c1c; |
|
color: #cfcfcf; |
|
} |
|
|
|
.dark-mode header { |
|
background: linear-gradient(90deg, #333, #444); |
|
} |
|
|
|
.dark-mode .code-block { |
|
background: #2b2b2b; |
|
border-left-color: #4a90e2; |
|
color: #ccc; |
|
} |
|
|
|
.dark-mode .stat-box { |
|
background: #2b2b2b; |
|
color: #ccc; |
|
} |
|
|
|
.dark-mode footer { |
|
background: linear-gradient(90deg, #333, #444); |
|
} |
|
|
|
.dark-mode h2, .dark-mode h3 { |
|
color: #4a90e2; |
|
} |
|
|
|
.toggle-switch { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 20px 0; |
|
} |
|
|
|
.toggle-switch input { |
|
display: none; |
|
} |
|
|
|
.toggle-switch label { |
|
background-color: #ccc; |
|
border-radius: 34px; |
|
cursor: pointer; |
|
display: inline-block; |
|
height: 26px; |
|
position: relative; |
|
width: 50px; |
|
} |
|
|
|
.toggle-switch label:before { |
|
background-color: #fff; |
|
border-radius: 50%; |
|
content: ''; |
|
height: 22px; |
|
left: 2px; |
|
position: absolute; |
|
top: 2px; |
|
transition: 0.3s; |
|
width: 22px; |
|
} |
|
|
|
.toggle-switch input:checked + label { |
|
background-color: #4a90e2; |
|
} |
|
|
|
.toggle-switch input:checked + label:before { |
|
transform: translateX(24px); |
|
} |
|
|
|
.toggle-switch .sun, .toggle-switch .moon { |
|
position: absolute; |
|
width: 22px; |
|
height: 22px; |
|
top: 2px; |
|
transition: 0.3s; |
|
} |
|
|
|
.toggle-switch .sun { |
|
left: 2px; |
|
background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/Full_Sun_Clipart.svg') no-repeat center; |
|
background-size: cover; |
|
} |
|
|
|
.toggle-switch .moon { |
|
right: 2px; |
|
background: url('https://upload.wikimedia.org/wikipedia/commons/3/3a/Moon_clipart.svg') no-repeat center; |
|
background-size: cover; |
|
} |
|
|
|
.button { |
|
background-color: #007aff; |
|
border: none; |
|
color: white; |
|
padding: 10px 20px; |
|
text-align: center; |
|
text-decoration: none; |
|
display: inline-block; |
|
font-size: 16px; |
|
margin: 4px 2px; |
|
cursor: pointer; |
|
border-radius: 8px; |
|
transition: background-color 0.3s, transform 0.3s; |
|
} |
|
|
|
.button:hover { |
|
background-color: #005bb5; |
|
transform: translateY(-2px); |
|
} |
|
|
|
.button:active { |
|
background-color: #004080; |
|
} |
|
|
|
|
|
.copy-btn { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
background: none; |
|
border: none; |
|
cursor: pointer; |
|
outline: none; |
|
color: #fff; |
|
} |
|
|
|
.copy-btn:hover { |
|
background-color: #007aff; |
|
} |
|
|
|
|
|
.copy-btn img { |
|
width: 24px; |
|
height: 24px; |
|
transition: transform 0.3s ease-in-out; |
|
} |
|
|
|
.copy-btn:hover img { |
|
transform: rotate(360deg); |
|
} |
|
|
|
.stats-container { |
|
color: #333; |
|
} |
|
|
|
.dark-mode .stats-container .stat-box h3, |
|
.dark-mode .stats-container .stat-box p { |
|
color: #ccc; |
|
} |
|
.dark-mode .button { |
|
background-color: #4a90e2; |
|
color: white; |
|
border: 2px solid #4a90e2; |
|
} |
|
|
|
.dark-mode .button:hover { |
|
background-color: #007aff; |
|
border: 2px solid #007aff; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>LuminAI API Client</h1> |
|
</header> |
|
<div class="container"> |
|
<div class="toggle-switch" style="position: absolute; top: 10px; right: 10px;"> |
|
<input type="checkbox" id="theme-switch"> |
|
<label for="theme-switch" style="display: flex; align-items: center; justify-content: space-between; padding: 2px;"> |
|
<div class="sun"> |
|
|
|
</div> |
|
<div class="slider" style="background-color: #ccc; border-radius: 34px; width: 50px; height: 26px; position: relative;"> |
|
<div class="dot" style="background-color: #fff; border-radius: 50%; width: 22px; height: 22px; position: absolute; top: 2px; left: 2px; transition: 0.3s;"></div> |
|
</div> |
|
<div class="moon"> |
|
|
|
</div> |
|
</label> |
|
</div> |
|
|
|
|
|
|
|
|
|
<script> |
|
document.getElementById('theme-switch').addEventListener('change', function() { |
|
var dot = document.querySelector('.dot'); |
|
if (this.checked) { |
|
dot.style.transform = 'translateX(24px)'; |
|
} else { |
|
dot.style.transform = 'translateX(0)'; |
|
} |
|
}); |
|
</script> |
|
|
|
<div class="main"> |
|
<h2>Introduction</h2> |
|
<p>This document provides a simple JavaScript client for interacting with the LuminAI API. The client allows you to send requests with various parameters and receive results from the API.</p> |
|
<h2>Installation</h2> |
|
<p>First, make sure you have Node.js installed. Then, install the necessary dependencies:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>npm install axios</code></pre> |
|
</div> |
|
<h2>Usage</h2> |
|
<p>Create a file named <code>lumin.js</code> with the following content:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const axios = require('axios'); |
|
async function lumin(q, username = null, logic = null, webSearchMode = false) { |
|
try { |
|
const payload = { content: q }; |
|
if (username !== null) payload.user = username; |
|
if (logic !== null) payload.prompt = logic; |
|
payload.webSearchMode = webSearchMode; |
|
const response = await axios.post("https://ilhamdev-luminai.hf.space/", payload); |
|
return response.data.result; |
|
} catch (error) { |
|
console.error('Error fetching:', error); |
|
throw error; |
|
} |
|
} |
|
module.exports = { lumin };</code></pre> |
|
</div> |
|
<h2>Example Usage</h2> |
|
<p>Below are some examples of how to use the <code>lumin</code> function.</p> |
|
<h3>Basic Usage</h3> |
|
<p>Send a query to the LuminAI API using GET:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const axios = require('axios'); |
|
function getLuminaiResponse(q) { |
|
const url = `https://ilhamdev-luminai.hf.space/api/ai?content=${encodeURIComponent(q)}`; |
|
return axios.get(url) |
|
.then(response => response.data) |
|
.catch(error => { |
|
console.error(`Error fetching data from ${url}:`, error); |
|
throw error; |
|
}); |
|
} |
|
|
|
// Example usage: |
|
getLuminaiResponse('example query') |
|
.then(data => { |
|
console.log('Data:', data); |
|
}) |
|
.catch(error => { |
|
console.error('Error:', error); |
|
});</code></pre> |
|
</div> |
|
<p>Send a query to the LuminAI API:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const { lumin } = require('./lumin'); |
|
lumin("query") |
|
.then(result => console.log(result)) |
|
.catch(error => console.error(error));</code></pre> |
|
</div> |
|
<h3>Usage with Query and Username</h3> |
|
<p>Send a query along with a username:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const { lumin } = require('./lumin'); |
|
lumin("query", "username") |
|
.then(result => console.log(result)) |
|
.catch(error => console.error(error));</code></pre> |
|
</div> |
|
<h3>Usage with Query, Username, and Logic</h3> |
|
<p>Send a query with a username and additional logic:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const { lumin } = require('./lumin'); |
|
lumin("query", "username", "logic") |
|
.then(result => console.log(result)) |
|
.catch(error => console.error(error));</code></pre> |
|
</div> |
|
<h3>Usage with Query, Username, Logic, and Web Search Mode</h3> |
|
<p>Send a query with a username, additional logic, and enable web search mode:</p> |
|
<div class="code-block"> |
|
<button class="copy-btn" onclick="copyToClipboard(this)"><img src="https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png" alt="Copy"></button> |
|
<pre><code>const { lumin } = require('./lumin'); |
|
lumin("query", "username", "logic", true) |
|
.then(result => console.log(result)) |
|
.catch(error => console.error(error));</code></pre> |
|
</div> |
|
<h2>Closing</h2> |
|
<p>Thank you to everyone who has used LuminAI. We hope this API will continue to provide positive impacts to its users.</p> |
|
<h2>Special Thanks</h2> |
|
<p>This API leverages the Blackbox.ai platform. We extend our deepest gratitude to the Blackbox.ai team for their incredible work.</p> |
|
<div class="stats-container"> |
|
<div class="stat-box"> |
|
<h3>Rps</h3> |
|
<p id="rps">0</p> |
|
</div> |
|
<div class="stat-box"> |
|
<h3>Total Requests</h3> |
|
<p id="total-requests">0</p> |
|
</div> |
|
</div> |
|
<footer> |
|
<p>LuminAI API Client © 2024</p> |
|
</footer> |
|
<script> |
|
const themeSwitch = document.getElementById('theme-switch'); |
|
themeSwitch.addEventListener('change', () => { |
|
document.body.classList.toggle('dark-mode', themeSwitch.checked); |
|
}); |
|
|
|
async function fetchStats() { |
|
|
|
const isDarkMode = localStorage.getItem('darkMode') === 'true'; |
|
document.body.classList.toggle('dark-mode', isDarkMode); |
|
themeSwitch.checked = isDarkMode; |
|
|
|
const response = await fetch('/api/stats'); |
|
const data = await response.json(); |
|
document.getElementById('rps').textContent = data.rps; |
|
document.getElementById('total-requests').textContent = data.totalRequests; |
|
} |
|
|
|
|
|
themeSwitch.addEventListener('change', () => { |
|
const isDarkMode = themeSwitch.checked; |
|
document.body.classList.toggle('dark-mode', isDarkMode); |
|
localStorage.setItem('darkMode', isDarkMode); |
|
}); |
|
|
|
fetchStats(); |
|
|
|
function copyToClipboard(button) { |
|
const codeBlock = button.nextElementSibling.innerText; |
|
navigator.clipboard.writeText(codeBlock).then(() => { |
|
button.querySelector('img').src = 'https://cdn.iconscout.com/icon/free/png-256/check-1781599-1518574.png'; |
|
button.style.transform = 'scale(1.2)'; |
|
button.style.transition = 'transform 0.3s ease'; |
|
setTimeout(() => { |
|
button.querySelector('img').src = 'https://cdn.iconscout.com/icon/free/png-256/copy-1781607-1518582.png'; |
|
button.style.transform = 'scale(1)'; |
|
}, 2000); |
|
}).catch(err => { |
|
console.error('Failed to copy: ', err); |
|
}); |
|
} |
|
|
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
