Spaces:
Running
Running
Update index.html
Browse files- index.html +54 -2
index.html
CHANGED
@@ -297,6 +297,22 @@ header:hover .scroll-indicator .arrow {
|
|
297 |
z-index: 998;
|
298 |
transition: 0.1s;
|
299 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
300 |
</style>
|
301 |
</head>
|
302 |
<body>
|
@@ -375,7 +391,13 @@ header:hover .scroll-indicator .arrow {
|
|
375 |
</section>
|
376 |
<section class="section">
|
377 |
<h2>Example Usage</h2>
|
378 |
-
<pre style="font-family:
|
|
|
|
|
|
|
|
|
|
|
|
|
379 |
<span style="color: rgb(139, 148, 158); font-weight: 400;"># hampe to he hi no :p (not needed)</span>
|
380 |
api_key = <span style="color: rgb(165, 214, 255); font-weight: 400;">''</span>
|
381 |
<span style="color: rgb(139, 148, 158); font-weight: 400;"># Use the custom API endpoint</span>
|
@@ -396,6 +418,7 @@ chat_with_gpt()
|
|
396 |
</section>
|
397 |
<section class="section">
|
398 |
<h2>Available Models</h2>
|
|
|
399 |
<p>More info at <span style="text-decoration: underline; cursor: pointer;" onclick="window.location.href='https://parthsadaria-lokiai.hf.space/models'">https://parthsadaria-lokiai.hf.space/models</span></p>
|
400 |
<div class="models-list">
|
401 |
<div class="model-item glow">o1-preview</div>
|
@@ -481,7 +504,37 @@ chat_with_gpt()
|
|
481 |
</div>
|
482 |
|
483 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
484 |
document.addEventListener('DOMContentLoaded', function() {
|
|
|
485 |
const cursor = document.querySelector('.cursor');
|
486 |
const cursorDot = document.querySelector('.cursor-dot');
|
487 |
const cursorTrail = document.querySelector('.cursor-trail');
|
@@ -525,7 +578,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
|
525 |
element.style.setProperty('--y', `${y}%`);
|
526 |
});
|
527 |
});
|
528 |
-
|
529 |
// Smooth cursor animation
|
530 |
function animate() {
|
531 |
const { cursorSize, dotSize, trailSize } = getSizes(); // Get sizes each frame
|
|
|
297 |
z-index: 998;
|
298 |
transition: 0.1s;
|
299 |
}
|
300 |
+
.notification {
|
301 |
+
position: fixed;
|
302 |
+
top: 20px;
|
303 |
+
right: -300px; /* Initially off-screen to the right */
|
304 |
+
padding: 10px 20px;
|
305 |
+
background-color: #2ecc71; /* Green background color */
|
306 |
+
color: #fff;
|
307 |
+
border-radius: 5px;
|
308 |
+
opacity: 0;
|
309 |
+
transition: all 0.5s ease-in-out; /* Transition for all properties */
|
310 |
+
}
|
311 |
+
|
312 |
+
.notification.show {
|
313 |
+
opacity: 1;
|
314 |
+
right: 20px; /* Move to the desired position */
|
315 |
+
}
|
316 |
</style>
|
317 |
</head>
|
318 |
<body>
|
|
|
391 |
</section>
|
392 |
<section class="section">
|
393 |
<h2>Example Usage</h2>
|
394 |
+
<pre style="font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; font-size: small; padding: 10px 10px; color: rgb(201, 209, 217); background-color: rgb(13, 17, 23); font-weight: 400; "
|
395 |
+
onmouseover="this.querySelector('button').style.transform='translateX(0)'; this.querySelector('button').style.display='';"
|
396 |
+
onmouseout="this.querySelector('button').style.transform='translateX(100%) ';this.querySelector('button').style.display='none';">
|
397 |
+
<span style="color: rgb(255, 123, 114); font-weight: 400;">import</span> openai <button
|
398 |
+
style="display: none; transition: transform 200ms ease, display 0s ease 200ms; position: absolute; right: 26%; color: white; background-color: black; padding: 7px 7px; border: 2px solid #1c1c1e; border-radius: 15px; font-family:'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; "
|
399 |
+
onclick="copyText(code);"
|
400 |
+
>Copy</button>
|
401 |
<span style="color: rgb(139, 148, 158); font-weight: 400;"># hampe to he hi no :p (not needed)</span>
|
402 |
api_key = <span style="color: rgb(165, 214, 255); font-weight: 400;">''</span>
|
403 |
<span style="color: rgb(139, 148, 158); font-weight: 400;"># Use the custom API endpoint</span>
|
|
|
418 |
</section>
|
419 |
<section class="section">
|
420 |
<h2>Available Models</h2>
|
421 |
+
<div class="notification" id="notification">Text copied!</div>
|
422 |
<p>More info at <span style="text-decoration: underline; cursor: pointer;" onclick="window.location.href='https://parthsadaria-lokiai.hf.space/models'">https://parthsadaria-lokiai.hf.space/models</span></p>
|
423 |
<div class="models-list">
|
424 |
<div class="model-item glow">o1-preview</div>
|
|
|
504 |
</div>
|
505 |
|
506 |
<script>
|
507 |
+
var code=`import openai
|
508 |
+
# hampe to he hi no :p (not needed)
|
509 |
+
api_key = ''
|
510 |
+
# Use the custom API endpoint
|
511 |
+
openai.api_base = "https://parthsadaria-lokiai.hf.space"
|
512 |
+
openai.api_key = api_key
|
513 |
+
def chat_with_gpt():
|
514 |
+
try:
|
515 |
+
response = openai.ChatCompletion.create(
|
516 |
+
model="gpt-4o",
|
517 |
+
messages=[{"role": "user", "content": "hi homie"}],
|
518 |
+
stream=False
|
519 |
+
)
|
520 |
+
print(response['choices'][0]['message']['content'])
|
521 |
+
except Exception as e: \
|
522 |
+
print(f"Error: {e}")
|
523 |
+
chat_with_gpt()`;
|
524 |
+
function copyText(textToCopy) {
|
525 |
+
navigator.clipboard.writeText(textToCopy)
|
526 |
+
.then(() => {
|
527 |
+
document.getElementById("notification").classList.add("show");
|
528 |
+
|
529 |
+
// Hide the notification after 2 seconds
|
530 |
+
setTimeout(() => {
|
531 |
+
document.getElementById("notification").classList.remove("show");
|
532 |
+
}, 2000);
|
533 |
+
})
|
534 |
+
.catch(err => console.error('Failed to copy text:', err));
|
535 |
+
}
|
536 |
document.addEventListener('DOMContentLoaded', function() {
|
537 |
+
|
538 |
const cursor = document.querySelector('.cursor');
|
539 |
const cursorDot = document.querySelector('.cursor-dot');
|
540 |
const cursorTrail = document.querySelector('.cursor-trail');
|
|
|
578 |
element.style.setProperty('--y', `${y}%`);
|
579 |
});
|
580 |
});
|
|
|
581 |
// Smooth cursor animation
|
582 |
function animate() {
|
583 |
const { cursorSize, dotSize, trailSize } = getSizes(); // Get sizes each frame
|