ai / src /frontend /loader.html
hadadrjt's picture
fixup! "ai: Load playground."
e3fdbb7
<!--
SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
SPDX-License-Identifier: Apache-2.0
-->
<!DOCTYPE html>
<html lang="en" class="dark-theme">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no, viewport-fit=cover" />
<meta name="robots" content="index, follow" />
<title>UltimaX Intelligence</title>
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
<meta name="author" content="Hadad Darajat" />
<meta name="description"
content="UltimaX Intelligence is a free AI platform unifying multiple
premium AI models with an intuitive ChatGPT-like interface.
Powered by Pollinations open-source AI and integrated with
OpenWebUI, it offers advanced features, no cost, no
registration, and ensures user privacy with temporary,
unsaved conversations." />
<meta name="keywords"
content="UltimaX Intelligence, free AI platform, premium AI models,
Pollinations AI, open-source AI, Open-WebUI integration,
ChatGPT alternative, AI tools free, no registration AI,
AI privacy, temporary AI conversations, AI platform no login,
advanced AI features, AI community powered,
seamless AI experience" />
<!-- Open Graph -->
<meta property="og:domain" content="umint-ai.hf.space" />
<meta property="og:url" content="https://umint-ai.hf.space" />
<meta property="og:title" content="UltimaX Intelligence" />
<meta property="og:description"
content="UltimaX Intelligence is a free AI platform unifying multiple
premium AI models with an intuitive ChatGPT-like interface.
Powered by Pollinations open-source AI and integrated with
OpenWebUI, it offers advanced features, no cost, no
registration, and ensures user privacy with temporary,
unsaved conversations." />
<meta property="og:image"
content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:domain" content="umint-ai.hf.space" />
<meta name="twitter:url" content="https://umint-ai.hf.space" />
<meta name="twitter:title" content="UltimaX Intelligence" />
<meta name="twitter:description"
content="UltimaX Intelligence is a free AI platform unifying multiple
premium AI models with an intuitive ChatGPT-like interface.
Powered by Pollinations open-source AI and integrated with
OpenWebUI, it offers advanced features, no cost, no
registration, and ensures user privacy with temporary,
unsaved conversations." />
<meta name="twitter:image"
content="https://cdn-uploads.huggingface.co/production/uploads/686e28b405d4ddcdd96adeb2/i9iufR3L-rgj39mk_B9QW.jpeg" />
<!-- Favicon -->
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
<!-- Fonts & Styles -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Markdown & Syntax Highlight -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Animations -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet" />
<!-- Carousel -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
<!-- Smooth Scroll -->
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" />
<!-- Styles -->
<link rel="stylesheet" href="/assets/css/animation/style.css" />
<link rel="stylesheet" href="/assets/css/button.css" />
<link rel="stylesheet" href="/assets/css/chat/bubble.css" />
<link rel="stylesheet" href="/assets/css/chat/markdown.css" />
<link rel="stylesheet" href="/assets/css/chat/style.css" />
<link rel="stylesheet" href="/assets/css/footer.css" />
<link rel="stylesheet" href="/assets/css/header.css" />
<link rel="stylesheet" href="/assets/css/icon.css" />
<link rel="stylesheet" href="/assets/css/input.css" />
<link rel="stylesheet" href="/assets/css/logo.css" />
<link rel="stylesheet" href="/assets/css/prompts.css" />
<link rel="stylesheet" href="/assets/css/screen/1200.css" />
<link rel="stylesheet" href="/assets/css/screen/2000.css" />
<link rel="stylesheet" href="/assets/css/screen/320.css" />
<link rel="stylesheet" href="/assets/css/screen/360.css" />
<link rel="stylesheet" href="/assets/css/screen/3840.css" />
<link rel="stylesheet" href="/assets/css/screen/480.css" />
<link rel="stylesheet" href="/assets/css/screen/720.css" />
<link rel="stylesheet" href="/assets/css/screen/7680.css" />
<link rel="stylesheet" href="/assets/css/screen/common.css" />
<link rel="stylesheet" href="/assets/css/style.css" />
<link rel="stylesheet" href="/assets/css/webkit.css" />
</head>
<body>
<!-- Header -->
<header class="main-header" id="mainHeader">
<div class="logo d-flex align-items-center">
<a id="toggleLink"
class="icon-btn"
aria-label="LinkedIn"
title="Hadad Darajat"
href="https://linkedin.com/in/hadadrjt"
target="_blank"
rel="noopener noreferrer">
<span class="linkedin"></span>
</a>
</div>
</header>
<!-- Chat Header -->
<header class="chat-header" id="chatHeader" aria-hidden="true">
<button id="homeBtn"
class="icon-btn"
aria-label="Back to Home"
title="Back to Home">
<svg width="20" height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 11.5L12 4l9 7.5" />
<path d="M5 21V11.5h14V21" />
</svg>
</button>
<div class="chat-title" id="chatTitle">Demo Playground</div>
<div class="chat-controls">
<button id="clearBtn"
class="icon-btn"
aria-label="Clear All Messages"
title="Clear All Messages">
<svg width="20" height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg">
<path d="M3 6h18" />
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
<path d="M10 11v6" />
<path d="M14 11v6" />
</svg>
</button>
<a href="https://umint-openwebui.hf.space"
target="_blank"
rel="noopener noreferrer"
class="icon-btn"
aria-label="OpenWebUI"
title="OpenWebUI">
<svg width="20" height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<path d="M15 3h6v6" />
<path d="M10 14 21 3" />
</svg>
</a>
</div>
</header>
<!-- Main Content -->
<main>
<div class="flex-1 flex flex-col h-full max-w-screen-xl w-full mx-auto">
<div id="chatArea" class="flex-1" aria-live="polite">
<div id="initialContent"
class="flex flex-col items-center justify-center text-center"
style="width:100%; height:100%;">
<div class="title mb-4 gradient-text">
How can I help you today?
</div>
<!-- Prompts -->
<div class="prompts w-full max-w-md mx-auto grid gap-2"
style="width:100%;">
<div class="prompt-item"
data-prompt="How far away is the sun from Earth?"
style="word-break: break-word;">
<svg class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor">
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
<circle cx="12" cy="12" r="4" stroke-width="2" />
</svg>
<span>How far away is the sun from Earth?</span>
</div>
<div class="prompt-item"
data-prompt="Create complex python code, anything."
style="word-break: break-word;">
<svg class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor">
<path d="M4 7h16M4 12h16M4 17h16"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span>Create complex python code.</span>
</div>
<div class="prompt-item"
data-prompt="How many R’s are in strawberry?"
style="word-break: break-word;">
<svg class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor">
<path d="M3 12h18M12 3v18"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span>How many R’s are in strawberry?</span>
</div>
<div class="prompt-item"
data-prompt="Suggest a random prompt."
style="word-break: break-word;">
<svg class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor">
<path d="M12 3v18M7 12h10"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span>Suggest a random prompt.</span>
</div>
</div>
<p class="system"
style="word-wrap:break-word;">
Demo only!
<a href="https://umint-openwebui.hf.space"
style="color: #3b82f6;"
target="_blank">Click here</a>
to continue.<br>
Please read the
<a href="https://huggingface.co/spaces/umint/ai/discussions"
style="color: #3b82f6;"
target="_blank">discussions</a>
before you go.<br>
Premium AI, all in one tools, and website builder.<br>
Free, no cost at all.
</p>
</div>
</div>
<div id="chatBox"
class="hidden flex-col"
aria-live="polite"></div>
<!-- Footer Form -->
<form id="footerForm"
class="flex p-3 bg-transparent"
autocomplete="off"
style="position: relative; margin-top: auto; width: 100%;">
<div id="inputContainer">
<input type="text"
id="userInput"
placeholder="Ask anything..."
required
style="word-break:break-word;" />
<div id="rightIconGroup">
<button type="submit"
id="sendBtn"
disabled
aria-label="Send">
<svg id="sendIcon"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 5l7 7-7 7M3 12h11" />
</svg>
</button>
<button id="stopBtn"
class="icon-btn"
aria-label="Stop"
title="Stop">
<svg width="20"
height="20"
viewBox="0 0 24 24"
fill="white"
xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="6"
width="12"
height="12"
rx="2"
fill="white" />
</svg>
</button>
</div>
</div>
</form>
</div>
</main>
<!-- Plugins -->
<script src="/assets/plugins/loader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>