Spaces:

ParthSadaria
/

lokiai

Running

App Files Files Community

ParthSadaria commited on Jan 29

Commit

af73203

verified ·

1 Parent(s): c91497b

Update index.html

Browse files

Files changed (1) hide show

index.html +26 -757

index.html CHANGED Viewed

@@ -3,781 +3,50 @@
 <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);
-            overflow: hidden;
-        }
-        .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: 99999;
-            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: 99999;
         }
-        .cursor-trail {
-            width: 10px;
-            height: 10px;
-            background: rgba(59, 130, 246, 0.2);
-            border-radius: 50%;
-            position: fixed;
-            pointer-events: none;
-            z-index: 99998;
-            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 */
-}
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    .popup-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.9);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 10000; /* Higher value to ensure it appears on top */
-      backdrop-filter: blur(6px); /* Soft blur effect */
-    }
-    .popup-container {
-      width: 500px;
-      padding: 20px;
-      background: linear-gradient(135deg, #111, #2d2d2d); /* Gradient dark background */
-      border-radius: 40px;
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); /* Soft shadow */
-      transform: scale(0.98);
-      animation: slideIn 0.5s ease-out;
-      position: relative; /* Make sure it's positioned */
-    }
-    @keyframes slideIn {
-      0% {
-        opacity: 0;
-        transform: scale(0.9);
-      }
-      100% {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-    .close-btn {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      background: transparent;
-      border: none;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      outline: none;
-      z-index: 101; /* Higher value to ensure it appears on top */
-    }
-    .popup-title {
-      text-align: center;
-      font-size: 27px;
-      color: white;
-      text-transform: uppercase;
-      background: linear-gradient(90deg, #fff, #d3d3d3);
-      -webkit-background-clip: text;
-      color: transparent;
-      animation: shimmer 2s infinite linear;
-    }
-    @keyframes shimmer {
-      0% {
-        background-position: -100%;
-      }
-      100% {
-        background-position: 100%;
-      }
-    }
-    .popup-subtitle {
-      text-align: center;
-      font-size: 20px;
-      color: #b3b3b3;
-      margin-top: 10px;
-    }
-    .highlight-section {
-      margin-top: 20px;
-    }
-    .description {
-      color: white;
-      font-size: 11px;
-      line-height: 1.5;
-      text-align: center;
-    }
-    /* Responsive design */
-    @media (max-width: 600px) {
-      .popup-container {
-        width: 90%;
-        padding: 15px;
-      }
-      .popup-title {
-        font-size: 28px;
-      }
-      .popup-subtitle {
-        font-size: 18px;
-      }
-      .description {
-        font-size: 14px;
-      }
-    }
     </style>
 </head>
 <body>
-    <div class="cursor"></div>
-    <div class="cursor-dot"></div>
-    <div class="cursor-trail"></div>
-    <div class="container">
-<div class="popup-overlay">
-    <div class="popup-container">
-      <button class="close-btn" aria-label="Close">x</button>
-      <h1 class="popup-title">O1-PREVIEW ADDED !!</h1>
-      <h2 class="popup-subtitle">The First Reasoning Model from OpenAI</h2>
-      <div class="highlight-section">
-        <p class="description">O1-preview: Advanced AI model by OpenAI, optimized for complex reasoning with a transformer structure and reinforcement learning. Slower than GPT-4o but more accurate in reasoning. Improved safety through new training methods. Pricing: $0.01575/1K input tokens, $0.063/1K output tokens.</p>
-      </div>
-    </div>
-  </div>
-        <header>
-            <h1>Loki.AI API</h1>
-            <p>Powerful AI Integration at Your Fingertips For Free</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>🥳🔥 NEW!! IMAGE GENERATION ENDPOINT :)</marquee> -->
-       <!-- <marquee>🔥BACK UP AND RUNNING WOHOOO🔥</marquee>       -->
-      <marquee>Server Temporarily down due to Heavy Load Crash 💯</marquee>
-   <marquee>🔥 O1-Preview 🔥</marquee>
-      <!--<marquee>🔥MANY MODELS ARE DOWN🔥 FIXING THE ISSUE AS SOON AS POSSIBLE :)</marquee> -->
-        <section class="section">
-<h2>Quick Start Guide</h2>
-<h3>NEW!!!-Playground (Beta) 🥳🥳</h3>
-<div class="endpoint">https://parthsadaria-lokiai.hf.space/playground</div>
-<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>
-<small>
-  <b>Note:</b> Use <code>&stream=true</code> to enable streaming responses.
-</small>
-<h5>Get requests only | Supports stream :) | set &stream=true</h5>
-<h3> Image Generation URL 🥳🥳 (Powered by <a href="https://www.pollinations.ai" style="text-decoration: underline; color: inherit;">Pollinations.ai</a>)</h3>
-<div class="endpoint">https://parthsadaria-lokiai.hf.space/images/generations?prompt=sky%20northern%20lights</div>
-<small>
-  <b>Parameters:</b>
-  <ul>
-    <li><b>prompt:</b> (required) Text description of the image.</li>
-    <li><b>model:</b> (optional) Model to use (default: "flux").</li>
-    <li><b>seed:</b> (optional) Random seed for reproducibility.</li>
-    <li><b>width:</b> (optional) Image width in pixels.</li>
-    <li><b>height:</b> (optional) Image height in pixels.</li>
-  </ul>
-</small>
- <h3>Memes go brrrrrr~</h3>
- <div class="endpoint">https://parthsadaria-lokiai.hf.space/meme</div>
-<h3>Global Usage Checker  :) (if you are curious)</h3>
-<div class="endpoint">https://parthsadaria-lokiai.hf.space/usage/page</div>
-<h3>Models Endpoint</h3>
-<h5>Both Models Image and Chat are mentioned here</h5>
-<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-405b<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">llama-3.1-8b<br><strong>stable & fast</strong></div>
-<div class="model-item glow">gemini-1.5-flash<br><strong>stable & fast</strong></div>
-<div class="model-item glow">mixtral-8x7b<br><strong>stable & fast</strong></div>
-<div class="model-item glow">command-r<br><strong>stable & fast</strong></div>
-<div class="model-item glow">gemini-pro<br><strong>stable & fast</strong></div>
-<div class="model-item glow">gpt-3.5-turbo<br><strong>stable & fast</strong></div>
-<div class="model-item glow">command<br><strong>stable & fast</strong></div>
-</div>
-</div>
-                </section>
-<section class="contact-section" style="text-align: center; display: flex; flex-direction: column; align-items: center;">
-  <h2>Contact Me 👋</h2>
-  <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Contact me directly for Loki.AI integration! Report Bugs and issues 🐛</p>
-  <div style="display: flex; gap: 1rem; justify-content: center;">
-    <a href="https://github.com/Parthsadaria/FreeGPT-API" target="_blank" class="btn" style="display: flex; align-items: center; gap: 0.5rem;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
-      </svg>
-      GitHub 💻
-    </a>
-    <a href="https://t.me/parth_sadaria" target="_blank" class="btn" style="display: flex; align-items: center; gap: 0.5rem;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M22 3L2 10l7 3.5L19 7l-7 8 3 5L22 3z"/>
-      </svg>
-      Telegram 📱
-    </a>
-  </div>
-</section>
-        <footer>
-<h2 id="warning-banner" style="text-align: center; margin: 2rem 0; padding: 1rem; background: rgba(255, 247, 237, 0.8); border-radius: 8px; border: 1px solid #FFB74D; color: #B45309; font-size: 1rem; line-height: 1.6;">
-  ⚠️ Note: This service uses third-party AI models. While we aim for the best experience, please verify any important information. This API is provided free of charge - please be considerate and don't abuse it! 🤗 Let's keep it running smoothly for everyone! ✨
-</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();
-});
-document.querySelector('.close-btn').addEventListener('click', () => {
-  // Store the original text of the notification
-  const notification = document.getElementById("notification");
-  const originalText = notification.innerText;
-  document.querySelector('.popup-overlay').style.display = 'none';
-  // Change the text to the new message
-  notification.innerText = "Achievement complete added: O1-preview";
-  notification.classList.add("show");
-  // Hide the notification after 2 seconds and reset the text
-  setTimeout(() => {
-    notification.classList.remove("show");
-    notification.innerText = originalText;
-    // Ensure that the overlay stays visible or hidden as per your logic
-    // If you need to hide the popup overlay after 2 seconds, add this line:
-  }, 2000);
-});
-    </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loki.AI - By Parth Sadaria</title>
     <style>
+        @font-face {
+            font-family: 'Instrument Serif';
+            src: url('https://openwebui.com/assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');
+            font-weight: normal;
+            font-style: normal;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
+            background-color: black;
             color: white;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
             text-align: center;
+            font-family: 'Instrument Serif', serif;
         }
+        h1 {
+            font-size: 9rem;
+            font-weight: bold;
+            letter-spacing: -3px;
+            text-transform: uppercase;
         }
+        p {
+            font-size: 2rem;
+            color: grey;
+            margin-top: -10px;
+            letter-spacing: 1px;
         }
     </style>
 </head>
 <body>
+    <h1>Loki.AI</h1>
+    <p>By Parth Sadaria</p>
 </body>
+</html>