Spaces:

ParthSadaria
/

lokiai

Running

File size: 20,709 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Documentation | Loki.AI</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script>
    <style>
        :root {
            --bg-primary: #000000;
            --bg-secondary: #1c1c1e;
            --text-primary: #ffffff;
            --text-secondary: #86868b;
            --accent: #0071e3;
            --border: #333336;
            --card-bg: #1c1c1e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.5;
        }
/* Customize scrollbar for WebKit browsers (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
}

body::-webkit-scrollbar-thumb {
    background-color: #1a1a1a; /* Scrollbar color */
    border-radius: 10px; /* Round edges */
    transition: background-color 200ms ease; /* Smooth transition for background color */
}

body::-webkit-scrollbar-track {
    background: none; /* Track color */
    border-radius: 10px; /* Match rounding */
}

body::-webkit-scrollbar-thumb:hover {
    width: 20px;
    background-color: #2a2a2a; /* Change color on hover */
}


        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

/* Header styles */
header {
    padding: 8rem 0;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 4rem;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Before pseudo-element for hover effect */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
                rgba(59, 130, 246, 0.1) 0%, 
                transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

header:hover::before {
    opacity: 1;
}

/* Scroll Down indicator styles */
.scroll-indicator {
    position: absolute;
    bottom: 20px; /* Place it just below the header padding */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    font-size: 12px;
    color: #8f8f8f;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Arrow styling */
.arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* On hover, make the text appear and move up */
header:hover .scroll-indicator {
    opacity: 1;
    transform: translate(-50%, -10px); /* Move it up slightly */
}

header:hover .scroll-indicator .arrow {
    transform: translateY(10px); /* Bounce the arrow a little */
}


        h1 {
            font-size: 5.5rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #fff 0%, #888 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        header p {
            color: var(--text-secondary);
            font-size: 1.2rem;
        }

        .section {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid var(--border);
        }

        h2 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }

        h3 {
            font-size: 1.2rem;
            margin: 1.5rem 0 0.75rem;
            color: var(--text-primary);
        }

        .endpoint {
            background: var(--bg-primary);
            padding: 1rem;
            border-radius: 12px;
            font-family: 'JetBrains Mono', monospace;
            margin: 0.5rem 0;
            border: 1px solid var(--border);
        }

        .btn {
            display: inline-block;
            background: var(--accent);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 24px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            margin: 0.5rem 0;
        }

        .btn:hover {
            background: #0077ED;
            transform: translateY(-1px);
        }

        .models-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .model-item {
            background: var(--bg-primary);
            padding: 1rem;
            border-radius: 12px;
            text-align: center;
            border: 1px solid var(--border);
            transition: all 0.2s ease;
        }

        .model-item:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .model-item.glow {
            font-weight: 700;
            position: relative;
  border: 2px solid transparent; /* Initial border with no color */
  background-clip: padding-box; /* Ensure background doesn’t interfere with border */
  animation: slideBorder 3s ease-in-out infinite; /* Smooth transition with ease-in-out */
  border-radius: 5px; /* Optional: rounded corners */
}

@keyframes slideBorder {
  0% {
    border-color: rgba(255, 215, 0, 0.2); /* Soft gold */
  }
  50% {
    border-color: rgba(255, 215, 0, 0.8); /* Brighter gold */
  }
  100% {
    border-color: rgba(255, 215, 0, 0.2); /* Soft gold */
  }
}


        pre {
            border-radius: 12px;
            margin: 1rem 0;
            background: var(--bg-primary) !important;
            border: 1px solid var(--border);
        }

        code {
            font-family: 'JetBrains Mono', monospace;
        }

        .contact-section {
            text-align: center;
            padding: 3rem 2rem;
            background: var(--card-bg);
            border-radius: 20px;
            border: 1px solid var(--border);
        }

        footer {
            text-align: center;
            padding: 2rem;
            color: var(--text-secondary);
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2.5rem;
            }
            
            .section {
                padding: 1.5rem;
            }
        }
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--accent);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 999;
            transition: all 0.1s ease;
            transition-property: width, height, border;
        }

        .cursor-dot {
            width: 4px;
            height: 4px;
            background: var(--accent);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 999;
        }

        .cursor-trail {
            width: 10px;
            height: 10px;
            background: rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 998;
            transition: 0.1s;
        }
        .notification {
  position: fixed;
  top: 20px;
  right: -300px; /* Initially off-screen to the right */
  padding: 10px 20px;
  background-color: #2ecc71; /* Green background color */
  color: #fff;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.5s ease-in-out; /* Transition for all properties */
}

.notification.show {
  opacity: 1;
  right: 20px; /* Move to the desired position */
}
    </style>
</head>
<body>
    <div class="cursor"></div>
    <div class="cursor-dot"></div>
    <div class="cursor-trail"></div>
    <div class="container">
        <header>
            
            <h1>Loki.AI API</h1>
            <p>Powerful AI Integration at Your Fingertips</p>
            <p style="margin-top: 10px;">Made With ❤️ by 
                <a href="https://github.com/ParthSadaria" style="text-decoration: none; color: inherit; font-weight: bold; transition: 500ms ease;" 
                   onmouseover="this.style.textShadow='0 0 15px #FFFFFF';" 
                   onmouseout="this.style.textShadow='none';">
                    Parth Sadaria
                </a>
            </p>                 
            <div class="scroll-indicator">
                <span>Scroll Down For More Info<br><span class="arrow">v</span></span>
            </div>
        </header>
      <marquee>🚧 API IS UP!GPT-4o HAS BEEN FIXXED :) Thank you For cooperation</marquee>
      <marquee>Many models have been removed due to cost...Check Below for new models list :_) Will add more soon 😎</marquee>
        <section class="section">
            <h2>Quick Start Guide</h2>
            
            <h3>Base URL</h3>
            <div class="endpoint">https://parthsadaria-lokiai.hf.space</div>
            <h3>Chat Completion URL</h3>
            <div class="endpoint">https://parthsadaria-lokiai.hf.space/chat/completions</div>
            <h3>Searchgpt URL</h3>
            <div class="endpoint">https://parthsadaria-lokiai.hf.space/searchgpt?q=todays news</div>
            <h5>Get requests only</h5>
            <p>Supports stream :)</p>
            <h5>set &stream=true</h5>  
          <h3>Models Endpoint</h3>
            <div class="endpoint">https://parthsadaria-lokiai.hf.space/models</div>

            <h3>Authentication</h3>
          <h6>ITS FREE :) NO NEED FOR ANY AUTH WOHOOOOO!! 🥳</h6>
        </section>

     <section class="section">
    <h2>Request Format</h2>
    <pre><code class="language-json">{
    "model": "gpt-4o",
    "messages": [
        {
            "role": "user",
            "content": "Hello, AI!"
        }
    ],
    "stream": False #specify it
}</code></pre>
      <h3>Response Format</h3> 
           <pre><code class="language-json">{{
  "id": "chatcmpl-89DmxGJl4oqEultjlLBnGfdkV7Euk",
  "model": "gpt-4o",
  "object": "chat.completion",
  "created": 1731674826,
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "Hello! How can I assist you today?"
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 11,
    "completion_tokens": 9,
    "total_tokens": 20
  }
}
}</code></pre>
</section>
     <section class="section">
       <h2>Example Usage</h2>
<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; "  
onmouseover="this.querySelector('button').style.transform='translateX(0)'; this.querySelector('button').style.display='';" 
onmouseout="this.querySelector('button').style.transform='translateX(100%) ';this.querySelector('button').style.display='none';">
<span style="color: rgb(255, 123, 114); font-weight: 400;">import</span> openai <button 
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; "
onclick="copyText(code);"
>Copy</button>
<span style="color: rgb(139, 148, 158); font-weight: 400;"># hampe to he hi no :p (not needed)</span>
api_key = <span style="color: rgb(165, 214, 255); font-weight: 400;">''</span>
<span style="color: rgb(139, 148, 158); font-weight: 400;"># Use the custom API endpoint</span>
openai.api_base = <span style="color: rgb(165, 214, 255); font-weight: 400;">"https://parthsadaria-lokiai.hf.space"</span>
openai.api_key = api_key
<span style="color: rgb(255, 123, 114); font-weight: 400;">def</span> <span style="color: rgb(210, 168, 255); font-weight: 400;">chat_with_gpt</span>():
    <span style="color: rgb(255, 123, 114); font-weight: 400;">try</span>:
        response = openai.ChatCompletion.create(
            model=<span style="color: rgb(165, 214, 255); font-weight: 400;">"gpt-4o"</span>, 
            messages=[{<span style="color: rgb(165, 214, 255); font-weight: 400;">"role"</span>: <span style="color: rgb(165, 214, 255); font-weight: 400;">"user"</span>, <span style="color: rgb(165, 214, 255); font-weight: 400;">"content"</span>: <span style="color: rgb(165, 214, 255); font-weight: 400;">"hi homie"</span>}],
            stream=<span style="color: rgb(121, 192, 255); font-weight: 400;">False</span>
        )
        <span style="color: rgb(255, 166, 87); font-weight: 400;">print</span>(response[<span style="color: rgb(165, 214, 255); font-weight: 400;">'choices'</span>][<span style="color: rgb(121, 192, 255); font-weight: 400;">0</span>][<span style="color: rgb(165, 214, 255); font-weight: 400;">'message'</span>][<span style="color: rgb(165, 214, 255); font-weight: 400;">'content'</span>])
    <span style="color: rgb(255, 123, 114); font-weight: 400;">except</span> Exception <span style="color: rgb(255, 123, 114); font-weight: 400;">as</span> e:
        <span style="color: rgb(255, 166, 87); font-weight: 400;">print</span>(<span style="color: rgb(165, 214, 255); font-weight: 400;">f"Error: <span style="color: rgb(201, 209, 217); font-weight: 400;">{e}</span>"</span>)
chat_with_gpt()
</pre>
     </section>
        <section class="section">
            <h2>Available Models</h2>
            <div class="notification" id="notification">Text copied!</div>
            <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>
<div class="models-list">
    <!-- Models with "stable & fast" -->
    <div class="model-item glow">gpt-4o<br><strong>stable & fast</strong></div>
    <div class="model-item glow">gpt-4o-mini <br><strong>stable & fast</strong></div>
    <div class="model-item glow">claude-3-haiku<br><strong>stable & fast</strong></div>
    <div class="model-item glow">llama-3.1-70b<br><strong>stable & fast</strong></div>
    <div class="model-item glow">mixtral-8x7b<br><strong>stable & fast</strong></div>
</div>
</div>

                </section>
            
        <section class="contact-section">
            <h2>Get Started Now</h2>
            <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Ready to integrate Loki.AI into your application?</p>
            <a href="https://dsc.gg/chadgang" target="_blank" class="btn">
                Join Our Discord Community
            </a>
        </section>

        <footer>
          <h2 id="warning-banner">
  ⚠️ Note: This service uses third-party AI models to generate content. While we strive for accuracy, we cannot guarantee the reliability of the responses. Please verify information before relying on it. We are not responsible for any content generated.
          </h2>
            <p>Built with ❤️ by Parth Sadaria</p>
        </footer>
    </div>

    <script>
var code=`import openai
# hampe to he hi no :p (not needed)
api_key = ''
# Use the custom API endpoint
openai.api_base = "https://parthsadaria-lokiai.hf.space"
openai.api_key = api_key
def chat_with_gpt():
    try:
        response = openai.ChatCompletion.create(
            model="gpt-4o", 
            messages=[{"role": "user", "content": "hi homie"}],
            stream=False
        )
        print(response['choices'][0]['message']['content'])
    except Exception as e:  \
        print(f"Error: {e}")
chat_with_gpt()`;
function copyText(textToCopy) {
    navigator.clipboard.writeText(textToCopy)
        .then(() => {
        document.getElementById("notification").classList.add("show");

          // Hide the notification after 2 seconds
          setTimeout(() => {
            document.getElementById("notification").classList.remove("show");
          }, 2000);
        })
        .catch(err => console.error('Failed to copy text:', err));
}
document.addEventListener('DOMContentLoaded', function() {

    const cursor = document.querySelector('.cursor');
    const cursorDot = document.querySelector('.cursor-dot');
    const cursorTrail = document.querySelector('.cursor-trail');

    let mouseX = 0;
    let mouseY = 0;
    let cursorX = 0;
    let cursorY = 0;
    let trailX = 0;
    let trailY = 0;

    // Function to update sizes dynamically
    function getSizes() {
        return {
            cursorSize: parseInt(getComputedStyle(cursor).width),
            dotSize: parseInt(getComputedStyle(cursorDot).width),
            trailSize: parseInt(getComputedStyle(cursorTrail).width)
        };
    }

    document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;

        // Update header gradient
        const header = document.querySelector('header');
        if (header) {
            const rect = header.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width) * 100;
            const y = ((e.clientY - rect.top) / rect.height) * 100;
            header.style.setProperty('--x', `${x}%`);
            header.style.setProperty('--y', `${y}%`);
        }

        // Update glow effects
        document.querySelectorAll('[data-glow]').forEach(element => {
            const rect = element.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width) * 100;
            const y = ((e.clientY - rect.top) / rect.height) * 100;
            element.style.setProperty('--x', `${x}%`);
            element.style.setProperty('--y', `${y}%`);
        });
    });
    // Smooth cursor animation
    function animate() {
        const { cursorSize, dotSize, trailSize } = getSizes(); // Get sizes each frame

        // Calculate movement for cursor and trail
        const dxCursor = mouseX - cursorX;
        const dyCursor = mouseY - cursorY;

        cursorX += dxCursor * 0.15; // Faster follow
        cursorY += dyCursor * 0.15;

        // Trail follows cursor with a slight delay
        const dxTrail = cursorX - trailX;
        const dyTrail = cursorY - trailY;

        trailX += dxTrail * 0.1;
        trailY += dyTrail * 0.1;

        // Apply transformations based on dynamic sizes
        cursor.style.transform = `translate(${cursorX - cursorSize / 2}px, ${cursorY - cursorSize / 2}px)`;
        cursorDot.style.transform = `translate(${mouseX - dotSize / 2}px, ${mouseY - dotSize / 2}px)`;
        cursorTrail.style.transform = `translate(${trailX - trailSize / 2}px, ${trailY - trailSize / 2}px)`;

        requestAnimationFrame(animate);
    }
    animate();

    // Cursor interactions with smooth transitions
    document.querySelectorAll('a, button, .section').forEach(element => {
        element.addEventListener('mouseenter', () => {
            cursor.style.transition = 'width 0.2s ease, height 0.2s ease';
            cursor.style.width = '30px';
            cursor.style.height = '30px';
            cursor.style.backgroundColor = 'rgba(59, 130, 246, 1)';
        });

        element.addEventListener('mouseleave', () => {
            cursor.style.transition = 'width 0.2s ease, height 0.2s ease';
            cursor.style.width = '20px';
            cursor.style.height = '20px';
            cursor.style.backgroundColor = 'transparent';
        });
    });

    // Prevent cursor from disappearing
    document.addEventListener('mouseout', () => {
        cursor.style.opacity = '0';
        cursorDot.style.opacity = '0';
        cursorTrail.style.opacity = '0';
    });

    document.addEventListener('mouseover', () => {
        cursor.style.opacity = '1';
        cursorDot.style.opacity = '1';
        cursorTrail.style.opacity = '1';
    });

    // Initialize Prism
    Prism.highlightAll();
});
    </script>
</body>
</html>