Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Nov 14, 2024

Commit

02650d6

verified ·

1 Parent(s): c613f2b

Upload index.html

Browse files

Files changed (1) hide show

index.html +546 -0

index.html ADDED Viewed

	@@ -0,0 +1,546 @@

+<!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 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;
+        }
+    </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>
+        <section class="section">
+            <h2>Quick Start Guide</h2>
+            <h3>Base URL</h3>
+            <div class="endpoint">https://parthsadaria-lokiai.hf.space/chat/completions</div>
+            <h3>Models Endpoint</h3>
+            <div class="endpoint">https://parthsadaria-lokiai.hf.space/models</div>
+            <h3>Authentication</h3>
+            <a href="https://dsc.gg/chadgang" target="_blank" class="btn">
+                Join Discord for Free API Key
+            </a>
+        </section>
+        <section class="section">
+            <h2>Request Format</h2>
+            <pre><code class="language-json">{
+    "model": "llama-3.1-405b",
+    "messages": [
+        {
+            "role": "user",
+            "content": "Hello, AI!"
+        },
+        "stream": true
+    ]
+}</code></pre>
+        </section>
+        <section class="section">
+            <h2>Available Models</h2>
+            <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">
+        <div class="model-item glow">o1-preview</div>
+        <div class="model-item glow">o1-mini</div>
+        <div class="model-item glow">gpt-4o</div>
+        <div class="model-item glow">gpt-4o-mini</div>
+        <div class="model-item glow">llama-3.1-405b</div>
+        <div class="model-item glow">llama-3.1-7b</div>
+        <div class="model-item glow">llama-3.1-80b</div>
+        <div class="model-item glow">gemini-1.0-pro-001</div>
+        <div class="model-item glow">gemini-1.5-pro</div>
+        <div class="model-item glow">gemini-pro</div>
+        <div class="model-item glow">gemini-pro-vision</div>
+        <!-- Add the rest of the models below -->
+        <div class="model-item">gpt-3.5-turbo</div>
+        <div class="model-item">gpt-3.5-turbo-0125</div>
+        <div class="model-item">gpt-3.5-turbo-0301</div>
+        <div class="model-item">gpt-3.5-turbo-0613</div>
+        <div class="model-item">gpt-3.5-turbo-1106</div>
+        <div class="model-item">gpt-3.5-turbo-16k</div>
+        <div class="model-item">gpt-3.5-turbo-16k-0613</div>
+        <div class="model-item">gpt-3.5-turbo-instruct</div>
+        <div class="model-item">gpt-35-turbo</div>
+        <div class="model-item">gpt-35-turbo-16k</div>
+        <div class="model-item">gpt-4</div>
+        <div class="model-item">gpt-4-0125-preview</div>
+        <div class="model-item">gpt-4-0314</div>
+        <div class="model-item">gpt-4-0613</div>
+        <div class="model-item">gpt-4-1106-preview</div>
+        <div class="model-item">gpt-4-32k</div>
+        <div class="model-item">gpt-4-32k-0314</div>
+        <div class="model-item">gpt-4-32k-0613</div>
+        <div class="model-item">gpt-4-turbo</div>
+        <div class="model-item">gpt-4-turbo-2024-04-09</div>
+        <div class="model-item">gpt-4-turbo-preview</div>
+        <div class="model-item">gpt-4-vision-preview</div>
+        <div class="model-item">gpt-4o-2024-05-13</div>
+        <div class="model-item">gpt-4o-all</div>
+        <div class="model-item">gpt-4o-mini-2024-07-18</div>
+        <div class="model-item">hunyuan-lite</div>
+        <div class="model-item">hunyuan-pro</div>
+        <div class="model-item">hunyuan-standard</div>
+        <div class="model-item">hunyuan-standard-256K</div>
+        <div class="model-item">mistral-medium</div>
+        <div class="model-item">mixtral-8x7b</div>
+        <div class="model-item">net-gpt-4-all</div>
+        <div class="model-item">o1-mini-2024-09-12</div>
+        <div class="model-item">o1-mini-all</div>
+        <div class="model-item">o1-preview-2024-09-12</div>
+        <div class="model-item">o1-preview-all</div>
+        <div class="model-item">qwen-72b</div>
+        <div class="model-item">qwen-long</div>
+        <div class="model-item">qwen-max</div>
+        <div class="model-item">qwen-max-longcontext</div>
+        <div class="model-item">qwen-plus</div>
+        <div class="model-item">qwen-turbo</div>
+        <div class="model-item">360GPT_S2_V9</div>
+        <div class="model-item">abab5.5s-chat</div>
+        <div class="model-item">abab6-chat</div>
+        <div class="model-item">Baichuan2-Turbo</div>
+        <div class="model-item">chatglm_lite</div>
+        <div class="model-item">chatglm_pro</div>
+        <div class="model-item">chatglm_std</div>
+        <div class="model-item">chatglm_turbo</div>
+        <div class="model-item">code-llama-13b</div>
+        <div class="model-item">code-llama-34b</div>
+        <div class="model-item">code-llama-7b</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>
+            <p>Built with ❤️ by Parth Sadaria</p>
+        </footer>
+    </div>
+    <script>
+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>