Spaces:

Boobs00
/

my-awesome-face

Running

App Files Files Community

Boobs00 commited on May 18, 2025

Commit

ea0b651

verified ·

1 Parent(s): 3676ea1

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +39 -17
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: My Awesome Face
-emoji: 👁
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: my-awesome-face
+emoji: 🐳
+colorFrom: red
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,41 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
 <html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        height: 100dvh;
+        font-family: "Arial", sans-serif;
+        text-align: center;
+      }
+      .arrow {
+        position: absolute;
+        bottom: 32px;
+        left: 0px;
+        width: 100px;
+        transform: rotate(30deg);
+      }
+      h1 {
+        font-size: 50px;
+      }
+      h1 span {
+        color: #acacac;
+        font-size: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>
+      <span>I'm ready to work,</span><br />
+      Ask me anything.
+    </h1>
+    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
+    <script></script>
+  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/my-awesome-face" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DeepResearchAI Pro - Enterprise AI Platform</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', }, dark: { 800: '#1e1e2d', 900: '#121218', } }, fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui'], mono: ['Fira Code', 'ui-monospace'] }, animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'bounce-slow': 'bounce 2s infinite' } } } } </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --scrollbar-track: #1e1e2d; --scrollbar-thumb: #4b5563; --scrollbar-thumb-hover: #6b7280; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Smooth transitions */ .transition-slow { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Keyframe animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Model badge styles */ .badge { @apply text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap; } .badge-free { @apply bg-green-600 text-white; } .badge-paid { @apply bg-blue-600 text-white; } .badge-uncensored { @apply bg-red-600 text-white; } .badge-censored { @apply bg-purple-600 text-white; } .badge-experimental { @apply bg-yellow-600 text-white; } .badge-new { @apply bg-pink-600 text-white; } /* Custom tooltips */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { @apply invisible absolute z-50 bg-gray-800 text-gray-100 text-xs rounded py-1 px-2 whitespace-nowrap; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s; } .tooltip:hover .tooltip-text { @apply visible; opacity: 1; } /* Code block styling */ .code-block { @apply bg-gray-800 rounded-md p-3 overflow-x-auto font-mono text-sm; } .code-block pre { @apply m-0; } /* Model card styling */ .model-card { @apply bg-gray-800 rounded-lg border border-gray-700 p-3 transition-slow hover:border-gray-600 cursor-pointer; } .model-card:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Message styling */ .message { @apply max-w-3xl mx-auto; } .message-user { @apply ml-auto bg-gray-700 text-white; } .message-ai { @apply bg-gray-800 border border-gray-700; } .message-system { @apply bg-gray-900 border border-gray-800 text-gray-400; } /* Loading indicator */ .typing-indicator { @apply flex space-x-1 items-center; } .typing-dot { @apply w-2 h-2 bg-gray-400 rounded-full; } /* Markdown styling */ .prose-invert { @apply text-gray-200; } .prose-invert h1, .prose-invert h2, .prose-invert h3 { @apply text-white font-bold mt-4 mb-2; } .prose-invert ul { @apply list-disc pl-5 space-y-1; } .prose-invert ol { @apply list-decimal pl-5 space-y-1; } .prose-invert a { @apply text-primary-400 hover:underline; } .prose-invert code { @apply bg-gray-700 px-1 py-0.5 rounded text-sm; } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar-open { transform: translateX(0); } } /* API status indicator */ .status-indicator { @apply w-2 h-2 rounded-full; } .status-online { @apply bg-green-500; } .status-offline { @apply bg-red-500; } .status-degraded { @apply bg-yellow-500; } /* Context window indicator */ .context-indicator { @apply h-1 rounded-full bg-gray-700; } .context-progress { @apply h-1 rounded-full bg-primary-500; } /* File upload preview */ .file-preview { @apply bg-gray-800 border border-gray-700 rounded-lg p-2 flex items-center; } .file-preview-icon { @apply text-gray-400 mr-2; } /* Model performance metrics */ .metric-card { @apply bg-gray-800 rounded-lg p-3 border border-gray-700; } .metric-value { @apply text-2xl font-bold; } .metric-label { @apply text-xs text-gray-400 uppercase tracking-wider; } </style> </head> <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col font-sans">  <header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-20 shadow-sm"> <div class="container mx-auto px-4 py-3 flex items-center justify-between"> <div class="flex items-center space-x-4"> <button id="sidebarToggle" class="md:hidden text-gray-400 hover:text-white mr-2"> <i class="fas fa-bars"></i> </button> <h1 class="text-xl font-bold text-primary-500 flex items-center"> <i class="fas fa-brain mr-2"></i> DeepResearchAI Pro </h1> <nav class="hidden md:flex space-x-6"> <a href="#" class="hover:text-primary-400 transition-slow flex items-center"> <i class="fas fa-home mr-1"></i> Home </a> <a href="#" class="text-primary-400 font-medium flex items-center"> <i class="fas fa-comment-dots mr-1"></i> Chat </a> <a href="#" class="hover:text-primary-400 transition-slow flex items-center"> <i class="fas fa-robot mr-1"></i> Models </a> <a href="#" class="hover:text-primary-400 transition-slow flex items-center"> <i class="fas fa-tools mr-1"></i> Tools </a> <a href="#" class="hover:text-primary-400 transition-slow flex items-center"> <i class="fas fa-chart-line mr-1"></i> Analytics </a> </nav> </div> <div class="flex items-center space-x-3"> <div class="relative group"> <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md text-sm transition-slow flex items-center"> <i class="fas fa-bolt mr-1 text-yellow-400"></i> <span>Credits: <span id="creditBalance">150</span></span> </button> <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg z-10 hidden group-hover:block p-2"> <div class="text-xs text-gray-300 mb-1">Free tier: 150 credits/day</div> <div class="h-1 w-full bg-gray-700 rounded-full mb-2"> <div class="h-1 bg-primary-500 rounded-full" style="width: 30%"></div> </div> <button class="w-full text-xs bg-primary-600 hover:bg-primary-700 text-white py-1 px-2 rounded"> <i class="fas fa-plus mr-1"></i> Upgrade Plan </button> </div> </div> <div class="relative group"> <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md text-sm transition-slow flex items-center"> <i class="fas fa-user mr-1"></i> <span>Account</span> </button> <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg z-10 hidden group-hover:block p-2"> <a href="#" class="block px-2 py-1 text-sm hover:bg-gray-700 rounded"> <i class="fas fa-user-cog mr-2"></i> Settings </a> <a href="#" class="block px-2 py-1 text-sm hover:bg-gray-700 rounded"> <i class="fas fa-history mr-2"></i> History </a> <a href="#" class="block px-2 py-1 text-sm hover:bg-gray-700 rounded"> <i class="fas fa-chart-pie mr-2"></i> Usage </a> <a href="#" class="block px-2 py-1 text-sm hover:bg-gray-700 rounded"> <i class="fas fa-sign-out-alt mr-2"></i> Logout </a> </div> </div> </div> </div> </header>  <main class="flex flex-1 overflow-hidden relative">  <aside id="sidebar" class="sidebar w-64 bg-gray-800 border-r border-gray-700 overflow-y-auto absolute md:relative h-full z-10"> <div class="p-4"> <div class="flex items-center justify-between mb-4"> <h2 class="font-bold text-lg flex items-center"> <i class="fas fa-robot text-primary-400 mr-2"></i> AI Models </h2> <button id="closeSidebar" class="md:hidden text-gray-400 hover:text-white"> <i class="fas fa-times"></i> </button> </div>  <div class="flex items-center justify-between mb-4 text-sm"> <div class="flex items-center"> <div class="status-indicator status-online mr-2"></div> <span>API Status:</span> </div> <span class="text-green-400">Operational</span> </div>  <div class="mb-6"> <div class="relative mb-3"> <input type="text" id="modelSearch" placeholder="Search models..." class="w-full bg-gray-700 rounded-md py-2 px-3 pl-10 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500 transition-slow"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> </div> <div class="space-y-3"> <div class="flex items-center justify-between"> <span class="text-sm font-medium text-gray-300">Filters</span> <button id="resetFilters" class="text-xs text-primary-400 hover:underline">Reset All</button> </div> <div class="grid grid-cols-2 gap-2"> <button class="filter-btn active" data-filter="free"> <i class="fas fa-coins mr-1"></i> Free </button> <button class="filter-btn" data-filter="paid"> <i class="fas fa-dollar-sign mr-1"></i> Paid </button> <button class="filter-btn" data-filter="uncensored"> <i class="fas fa-lock-open mr-1"></i> Uncensored </button> <button class="filter-btn" data-filter="censored"> <i class="fas fa-shield-alt mr-1"></i> Censored </button> <button class="filter-btn" data-filter="experimental"> <i class="fas fa-flask mr-1"></i> Experimental </button> <button class="filter-btn" data-filter="new"> <i class="fas fa-star mr-1"></i> New </button> </div> </div> </div>  <div class="mb-4"> <div class="flex border-b border-gray-700"> <button class="provider-tab active" data-provider="all"> All Providers </button> <button class="provider-tab" data-provider="openrouter"> OpenRouter </button> <button class="provider-tab" data-provider="openai"> OpenAI </button> <button class="provider-tab" data-provider="anthropic"> Anthropic </button> </div> </div>  <div class="space-y-4"> <div class="category"> <h3 class="font-medium text-gray-300 mb-2 flex items-center justify-between cursor-pointer"> <span><i class="fas fa-bolt text-yellow-400 mr-2"></i> Premium Models</span> <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> </h3> <div class="space-y-2 mt-2"> <div class="model-card" data-free="false" data-censored="true" data-provider="openai" data-tags="premium,reasoning"> <div class="flex items-center justify-between"> <span class="font-medium">GPT-4 Turbo</span> <div class="flex space-x-1"> <span class="badge-paid">$0.03</span> <span class="badge-censored">Censored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenAI • Deep reasoning, function calling</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Fast</span> <span><i class="fas fa-memory mr-1"></i> 128k</span> </div> </div> <div class="model-card" data-free="false" data-censored="true" data-provider="anthropic" data-tags="premium,analysis"> <div class="flex items-center justify-between"> <span class="font-medium">Claude 3 Opus</span> <div class="flex space-x-1"> <span class="badge-paid">$0.05</span> <span class="badge-censored">Censored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">Anthropic • Long context, analysis</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Medium</span> <span><i class="fas fa-memory mr-1"></i> 200k</span> </div> </div> </div> </div> <div class="category"> <h3 class="font-medium text-gray-300 mb-2 flex items-center justify-between cursor-pointer"> <span><i class="fas fa-heart text-red-400 mr-2"></i> Free Models</span> <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> </h3> <div class="space-y-2 mt-2"> <div class="model-card" data-free="true" data-censored="false" data-provider="openrouter" data-tags="free,uncensored"> <div class="flex items-center justify-between"> <span class="font-medium">Mixtral 8x7B</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-uncensored">Uncensored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">Mistral • Uncensored, open-weight</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Fast</span> <span><i class="fas fa-memory mr-1"></i> 32k</span> </div> </div> <div class="model-card" data-free="true" data-censored="false" data-provider="openrouter" data-tags="free,uncensored"> <div class="flex items-center justify-between"> <span class="font-medium">Nous Hermes 2</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-uncensored">Uncensored</span> <span class="badge-new">New</span> </div> </div> <div class="text-xs text-gray-400 mt-1">Nous Research • Uncensored RP</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Medium</span> <span><i class="fas fa-memory mr-1"></i> 16k</span> </div> </div> <div class="model-card" data-free="true" data-censored="true" data-provider="google" data-tags="free,censored"> <div class="flex items-center justify-between"> <span class="font-medium">Gemini Pro</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-censored">Censored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">Google • General purpose</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Fast</span> <span><i class="fas fa-memory mr-1"></i> 32k</span> </div> </div> </div> </div> <div class="category"> <h3 class="font-medium text-gray-300 mb-2 flex items-center justify-between cursor-pointer"> <span><i class="fas fa-fire text-orange-400 mr-2"></i> Uncensored Models</span> <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> </h3> <div class="space-y-2 mt-2"> <div class="model-card" data-free="true" data-censored="false" data-provider="openrouter" data-tags="uncensored,free"> <div class="flex items-center justify-between"> <span class="font-medium">MythoMax 13B</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-uncensored">Uncensored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenRouter • No content filters</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Medium</span> <span><i class="fas fa-memory mr-1"></i> 8k</span> </div> </div> <div class="model-card" data-free="false" data-censored="false" data-provider="openrouter" data-tags="uncensored,paid"> <div class="flex items-center justify-between"> <span class="font-medium">GPT-4 Freedom</span> <div class="flex space-x-1"> <span class="badge-paid">$0.05</span> <span class="badge-uncensored">Uncensored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenRouter • No OpenAI filters</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Fast</span> <span><i class="fas fa-memory mr-1"></i> 32k</span> </div> </div> <div class="model-card" data-free="true" data-censored="false" data-provider="openrouter" data-tags="uncensored,free,experimental"> <div class="flex items-center justify-between"> <span class="font-medium">Dolphin 2.6</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-uncensored">Uncensored</span> <span class="badge-experimental">Experimental</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenRouter • Uncensored assistant</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Slow</span> <span><i class="fas fa-memory mr-1"></i> 4k</span> </div> </div> </div> </div> <div class="category"> <h3 class="font-medium text-gray-300 mb-2 flex items-center justify-between cursor-pointer"> <span><i class="fas fa-shield-alt text-blue-400 mr-2"></i> Censored Models</span> <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> </h3> <div class="space-y-2 mt-2"> <div class="model-card" data-free="true" data-censored="true" data-provider="openai" data-tags="censored,free"> <div class="flex items-center justify-between"> <span class="font-medium">GPT-3.5 Turbo</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-censored">Censored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenAI • Family-safe</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Fast</span> <span><i class="fas fa-memory mr-1"></i> 16k</span> </div> </div> <div class="model-card" data-free="false" data-censored="true" data-provider="anthropic" data-tags="censored,paid"> <div class="flex items-center justify-between"> <span class="font-medium">Claude 2.1</span> <div class="flex space-x-1"> <span class="badge-paid">$0.03</span> <span class="badge-censored">Censored</span> </div> </div> <div class="text-xs text-gray-400 mt-1">Anthropic • Constitutional AI</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Medium</span> <span><i class="fas fa-memory mr-1"></i> 100k</span> </div> </div> </div> </div> <div class="category"> <h3 class="font-medium text-gray-300 mb-2 flex items-center justify-between cursor-pointer"> <span><i class="fas fa-flask text-purple-400 mr-2"></i> Experimental Models</span> <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i> </h3> <div class="space-y-2 mt-2"> <div class="model-card" data-free="true" data-censored="false" data-provider="openrouter" data-tags="experimental,uncensored"> <div class="flex items-center justify-between"> <span class="font-medium">OpenHermes 2.5</span> <div class="flex space-x-1"> <span class="badge-free">Free</span> <span class="badge-uncensored">Uncensored</span> <span class="badge-experimental">Experimental</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenRouter • Uncensored research</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Slow</span> <span><i class="fas fa-memory mr-1"></i> 4k</span> </div> </div> <div class="model-card" data-free="false" data-censored="false" data-provider="openrouter" data-tags="experimental,uncensored"> <div class="flex items-center justify-between"> <span class="font-medium">GPT-4 Vision</span> <div class="flex space-x-1"> <span class="badge-paid">$0.07</span> <span class="badge-uncensored">Uncensored</span> <span class="badge-experimental">Experimental</span> </div> </div> <div class="text-xs text-gray-400 mt-1">OpenRouter • Image understanding</div> <div class="flex items-center mt-2 text-xs text-gray-500"> <span class="mr-2"><i class="fas fa-tachometer-alt mr-1"></i> Medium</span> <span><i class="fas fa-memory mr-1"></i> 128k</span> </div> </div> </div> </div> </div> </div> </aside>  <div class="flex-1 flex flex-col overflow-hidden">  <div class="bg-gray-800 border-b border-gray-700 p-3 flex items-center justify-between"> <div class="flex items-center space-x-3"> <div class="flex items-center"> <span class="font-medium mr-2">Current Model:</span> <div class="bg-gray-700 px-2 py-1 rounded-md text-sm flex items-center"> <i class="fas fa-robot mr-1 text-primary-400"></i> <span id="currentModelName">Mixtral 8x7B</span> <span id="currentModelUncensored" class="ml-2 badge-uncensored">Uncensored</span> <span id="currentModelFree" class="ml-1 badge-free">Free</span> </div> </div> <div class="text-xs text-gray-400 hidden md:flex items-center"> <i class="fas fa-bolt mr-1 text-yellow-400"></i> <span class="mr-2">Fast response</span> <i class="fas fa-memory mr-1 text-blue-400"></i> <span id="currentModelContext">32k context</span> </div> </div> <div class="flex items-center space-x-3"> <button id="modelSettingsButton" class="text-gray-400 hover:text-white transition-slow tooltip"> <i class="fas fa-sliders-h"></i> <span class="tooltip-text">Model Settings</span> </button> <button id="modelInfoButton" class="text-gray-400 hover:text-white transition-slow tooltip"> <i class="fas fa-info-circle"></i> <span class="tooltip-text">Model Info</span> </button> <button id="chatHistoryButton" class="text-gray-400 hover:text-white transition-slow tooltip"> <i class="fas fa-history"></i> <span class="tooltip-text">Chat History</span> </button> <button id="clearChatButton" class="text-gray-400 hover:text-white transition-slow tooltip"> <i class="fas fa-trash-alt"></i> <span class="tooltip-text">Clear Chat</span> </button> </div> </div>  <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-6">  <div class="message animate-fade-in"> <div class="flex items-start space-x-3"> <div class="bg-gray-700 p-2 rounded-full"> <i class="fas fa-robot text-primary-400"></i> </div> <div class="message-ai rounded-lg p-4 flex-1"> <div class="font-medium mb-2 flex items-center"> DeepResearchAI Pro Assistant <span class="ml-2 text-xs bg-gray-700 px-2 py-0.5 rounded">SYSTEM</span> </div> <div class="prose prose-invert max-w-none"> <p>Welcome to <span class="text-primary-400">DeepResearchAI Pro</span>, your advanced multi-provider AI research platform with enterprise-grade capabilities.</p> <p class="mt-3">I can help you with:</p> <ul class="list-disc pl-5 mt-1 space-y-1"> <li><span class="font-medium">Uncensored research</span> with models like Mixtral 8x7B and GPT-4 Freedom</li> <li><span class="font-medium">Family-safe conversations</span> with GPT-3.5 and Claude 2.1</li> <li><span class="font-medium">Advanced reasoning</span> using GPT-4 Turbo and Claude 3 Opus</li> <li><span class="font-medium">Creative writing</span> with uncensored models</li> <li><span class="font-medium">Experimental features</span> with cutting-edge models</li> <li><span class="font-medium">File analysis</span> including PDFs, Word docs, and images</li> <li><span class="font-medium">API integration</span> with your existing workflows</li> </ul> <div class="mt-4 p-3 bg-gray-700 rounded-lg"> <div class="font-medium mb-2">Quick Start:</div> <ol class="list-decimal pl-5 space-y-1 text-sm"> <li>Select a model from the sidebar</li> <li>Choose between free/paid and censored/uncensored options</li> <li>Start chatting or researching immediately</li> <li>Use the <kbd class="bg-gray-800 px-1.5 py-0.5 rounded">/</kbd> command for quick actions</li> <li>Drag & drop files for analysis</li> </ol> </div> <p class="mt-3">Select a model from the sidebar to get started, or ask me anything!</p> </div> </div> </div> </div>  <div class="message animate-fade-in"> <div class="flex items-start space-x-3"> <div class="bg-gray-700 p-2 rounded-full"> <i class="fas fa-lightbulb text-yellow-400"></i> </div> <div class="message-ai rounded-lg p-4 flex-1"> <div class="font-medium mb-2">Tip: Model Selection Guide</div> <div class="text-sm"> <p>Use these filters to find the perfect model for your needs:</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3"> <div class="bg-gray-800 p-3 rounded-lg border border-gray-700"> <div class="font-medium mb-1">By Cost:</div> <div class="space-y-1"> <div class="flex items-center"> <span class="badge-free mr-2">Free</span> <span class="text-xs">No cost models for basic research</span> </div> <div class="flex items-center"> <span class="badge-paid mr-2">Paid</span> <span class="text-xs">Premium models for advanced tasks ($0.01-$0.10 per request)</span> </div> </div> </div> <div class="bg-gray-800 p-3 rounded-lg border border-gray-700"> <div class="font-medium mb-1">By Content:</div> <div class="space-y-1"> <div class="flex items-center"> <span class="badge-uncensored mr-2">Uncensored</span> <span class="text-xs">No content restrictions</span> </div> <div class="flex items-center"> <span class="badge-censored mr-2">Censored</span> <span class="text-xs">Family-safe content only</span> </div> </div> </div> <div class="bg-gray-800 p-3 rounded-lg border border-gray-700"> <div class="font-medium mb-1">By Type:</div> <div class="space-y-1"> <div class="flex items-center"> <span class="badge-experimental mr-2">Experimental</span> <span class="text-xs">Cutting-edge, unstable models</span> </div> <div class="flex items-center"> <span class="badge-new mr-2">New</span> <span class="text-xs">Recently added models</span> </div> </div> </div> </div> <div class="mt-3 text-xs text-gray-400"> <i class="fas fa-info-circle mr-1"></i> Uncensored models may produce content that some users find objectionable. </div> </div> </div> </div> </div>  <div class="message animate-fade-in"> <div class="flex items-start space-x-3"> <div class="bg-gray-700 p-2 rounded-full"> <i class="fas fa-user text-blue-400"></i> </div> <div class="message-user rounded-lg p-4 flex-1"> <div class="font-medium mb-1">You</div> <div>What's the difference between censored and uncensored models?</div> </div> </div> </div> <div class="message animate-fade-in"> <div class="flex items-start space-x-3"> <div class="bg-gray-700 p-2 rounded-full"> <i class="fas fa-robot text-primary-400"></i> </div> <div class="message-ai rounded-lg p-4 flex-1"> <div class="font-medium mb-1 flex items-center"> Mixtral 8x7B <span class="ml-2 badge-uncensored">Uncensored</span> </div> <div class="prose prose-invert max-w-none"> <p>Censored and uncensored models differ primarily in their content restrictions:</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3"> <div class="bg-gray-800 p-3 rounded-lg border border-gray-700"> <div class="font-medium text-primary-400 mb-2">Censored Models</div> <ul class="list-disc pl-5 space-y-1 text-sm"> <li>Content filtered for safety</li> <li>Restricted from discussing sensitive topics</li> <li>Good for general/public use</li> <li>Examples: GPT-3.5, Claude 2.1</li> </ul> </div> <div class="bg-gray-800 p-3 rounded-lg border border-red-900"> <div class="font-medium text-red-400 mb-2">Uncensored Models</div> <ul class="list-disc pl-5 space-y-1 text-sm"> <li>No content restrictions</li> <li>Can discuss any topic without filters</li> <li>Better for unfiltered research</li> <li>Examples: Mixtral 8x7B, GPT-4 Freedom</li> </ul> </div> </div> <div class="mt-3 text-sm"> <p>Uncensored models are particularly useful for:</p> <ul class="list-disc pl-5 space-y-1"> <li>Academic research on controversial topics</li> <li>Creative writing without restrictions</li> <li>Exploring edge cases in AI behavior</li> <li>Technical analysis requiring unfiltered responses</li> </ul> </div> </div> </div> </div> </div> </div>  <div class="border-t border-gray-700 p-2 bg-gray-800 hidden" id="contextIndicator"> <div class="max-w-3xl mx-auto"> <div class="flex items-center justify-between text-xs text-gray-400 mb-1"> <span>Context Window Usage</span> <span><span id="contextTokens">0</span>/<span id="contextMax">32000</span> tokens</span> </div> <div class="context-indicator"> <div class="context-progress" style="width: 0%"></div> </div> </div> </div>  <div class="border-t border-gray-700 p-4 bg-gray-800"> <form id="chatForm" class="max-w-3xl mx-auto">  <div class="mb-2 hidden" id="filePreviewContainer"> <div class="file-preview mb-2" id="filePreview"> <i class="file-preview-icon fas fa-file"></i> <span class="text-sm" id="fileName">example.pdf</span> <button type="button" class="ml-auto text-gray-400 hover:text-red-400" id="removeFileButton"> <i class="fas fa-times"></i> </button> </div> </div> <div class="relative"> <textarea id="messageInput" rows="1" placeholder="Ask me anything or type / for commands..." class="w-full bg-gray-700 rounded-lg py-3 px-4 pr-12 resize-none focus:outline-none focus:ring-1 focus:ring-primary-500 transition-slow" style="min-height: 44px;"></textarea> <div class="absolute right-3 bottom-3 flex space-x-2"> <button type="button" class="text-gray-400 hover:text-white transition-slow tooltip" id="fileUploadButton"> <i class="fas fa-paperclip"></i> <input type="file" id="fileInput" class="hidden" accept=".pdf,.doc,.docx,.txt,.md,.csv,.xlsx,.pptx,.jpg,.png"> <span class="tooltip-text">Attach Files (PDF, Word, Images)</span> </button> <button type="submit" class="text-gray-400 hover:text-primary-400 transition-slow"> <i class="fas fa-paper-plane"></i> </button> </div> </div> <div class="flex items-center justify-between mt-2 text-xs text-gray-500"> <div class="flex items-center space-x-2"> <span>Press <kbd class="bg-gray-700 px-1.5 py-0.5 rounded">Shift</kbd> + <kbd class="bg-gray-700 px-1.5 py-0.5 rounded">Enter</kbd> for new line</span> </div> <div class="flex items-center space-x-2"> <span>Model: <span class="text-primary-400" id="currentModelFooter">Mixtral 8x7B</span></span> <span>•</span> <span class="text-green-400" id="currentModelCost">Free</span> <span>•</span> <span class="text-yellow-400" id="currentModelContextFooter">32k context</span> </div> </div> </form> </div> </div> </main>  <div class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 flex justify-around py-2 z-20"> <button class="flex flex-col items-center text-gray-400 hover:text-primary-400 transition-slow"> <i class="fas fa-home"></i> <span class="text-xs mt-1">Home</span> </button> <button class="flex flex-col items-center text-primary-400 transition-slow"> <i class="fas fa-comment-dots"></i> <span class="text-xs mt-1">Chat</span> </button> <button id="mobileModelButton" class="flex flex-col items-center text-gray-400 hover:text-primary-400 transition-slow"> <i class="fas fa-robot"></i> <span class="text-xs mt-1">Models</span> </button> <button class="flex flex-col items-center text-gray-400 hover:text-primary-400 transition-slow"> <i class="fas fa-cog"></i> <span class="text-xs mt-1">Settings</span> </button> </div>  <div id="mobileModelModal" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-30 hidden"> <div class="absolute bottom-0 left-0 right-0 bg-gray-800 rounded-t-2xl p-4 max-h-[80vh] overflow-y-auto"> <div class="flex items-center justify-between mb-4"> <h2 class="text-xl font-bold">Select AI Model</h2> <button id="closeMobileModal" class="text-gray-400 hover:text-white"> <i class="fas fa-times"></i> </button> </div>  <div class="mb-4"> <div class="relative mb-3"> <input type="text" placeholder="Search models..." class="w-full bg-gray-700 rounded-md py-2 px-3 pl-10 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500"> <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> </div> <div class="space-y-2"> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Filters:</span> <button class="text-xs text-primary-400 hover:underline">Reset</button> </div> <div class="flex flex-wrap gap-2"> <button class="filter-btn active" data-filter="free"> <i class="fas fa-coins mr-1"></i> Free </button> <button class="filter-btn" data-filter="paid"> <i class="fas fa-dollar-sign mr-1"></i> Paid </button> <button class="filter-btn" data-filter="uncensored"> <i class="fas fa-lock-open mr-1"></i> Uncensored </button> <button class="filter-btn" data-filter="censored"> <i class="fas fa-shield-alt mr-1"></i> Censored </button> <button class="filter-btn" data-filter="experimental"> <i class="fas fa-flask mr-1"></i> Experimental </button> </div> </div> </div>  <div class="mb-4 overflow-x-auto"> <div class="flex space-x-1 pb-1"> <button class="provider-tab-mobile active" data-provider="all"> All </button> <button class="provider-tab-mobile" data-provider="openrouter"> OpenRouter </button> <button class="provider-tab-mobile" data-provider="openai"> OpenAI </button> <button class="provider-tab-mobile" data-provider="anthropic"> Anthropic </button> <button class="provider-tab-mobile" data-provider="google"> Google </button> </div> </div>  <div class="space-y-3" id="mobileModelList">  </div> </div> </div>  <div id="modelSettingsModal" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-30 hidden flex items-center justify-center"> <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md"> <div class="flex items-center justify-between mb-4"> <h2 class="text-xl font-bold">Model Settings</h2> <button id="closeSettingsModal" class="text-gray-400 hover:text-white"> <i class="fas fa-times"></i> </button> </div> <div class="space-y-4"> <div> <label class="block text-sm font-medium mb-1">Temperature</label> <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> <div class="flex justify-between text-xs text-gray-400 mt-1"> <span>Precise</span> <span>Balanced</span> <span>Creative</span> </div> </div> <div> <label class="block text-sm font-medium mb-1">Max Tokens</label> <input type="number" min="100" max="32000" value="2000" class="w-full bg-gray-700 rounded-md py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary-500"> </div> <div> <label class="block text-sm font-medium mb-1">Top-P</label> <input type="range" min="0" max="1" step="0.1" value="0.9" class="w-full"> </div> <div> <label class="block text-sm font-medium mb-1">Frequency Penalty</label> <input type="range" min="0" max="2" step="0.1" value="0" class="w-full"> </div> <div> <label class="block text-sm font-medium mb-1">Presence Penalty</label> <input type="range" min="0" max="2" step="0.1" value="0" class="w-full"> </div> <div class="pt-4 border-t border-gray-700"> <button class="w-full bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded"> Save Settings </button> </div> </div> </div> </div>  <div id="modelInfoModal" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-30 hidden flex items-center justify-center"> <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md"> <div class="flex items-center justify-between mb-4"> <h2 class="text-xl font-bold">Model Information</h2> <button id="closeInfoModal" class="text-gray-400 hover:text-white"> <i class="fas fa-times"></i> </button> </div> <div class="space-y-4"> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Model Name:</span> <span id="infoModelName" class="font-medium">Mixtral 8x7B</span> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Provider:</span> <span id="infoModelProvider" class="text-primary-400">Mistral</span> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Content Policy:</span> <span id="infoModelPolicy" class="badge-uncensored">Uncensored</span> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Cost:</span> <span id="infoModelCost" class="badge-free">Free</span> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Context Window:</span> <span id="infoModelContext" class="text-yellow-400">32k tokens</span> </div> <div class="flex items-center justify-between"> <span class="text-sm font-medium">Speed:</span> <span id="infoModelSpeed" class="text-green-400">Fast</span> </div> <div class="pt-2"> <label class="block text-sm font-medium mb-1">Description:</label> <p id="infoModelDescription" class="text-sm text-gray-300">Mistral's uncensored open-weight model with 8 experts, optimized for general tasks with no content restrictions.</p> </div> <div class="pt-2"> <label class="block text-sm font-medium mb-1">Capabilities:</label> <div class="flex flex-wrap gap-2"> <span class="text-xs bg-gray-700 px-2 py-0.5 rounded">Text Generation</span> <span class="text-xs bg-gray-700 px-2 py-0.5 rounded">Uncensored</span> <span class="text-xs bg-gray-700 px-2 py-0.5 rounded">32k Context</span> </div> </div> <div class="pt-4 border-t border-gray-700"> <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded"> Close </button> </div> </div> </div> </div>  <div id="loadingOverlay" class="fixed inset-0 bg-gray-900 bg-opacity-70 z-40 hidden flex items-center justify-center"> <div class="text-center"> <div class="typing-indicator mb-4 justify-center"> <div class="typing-dot animate-pulse" style="animation-delay: 0s"></div> <div class="typing-dot animate-pulse" style="animation-delay: 0.2s"></div> <div class="typing-dot animate-pulse" style="animation-delay: 0.4s"></div> </div> <div class="text-primary-400 font-medium">Processing your request...</div> <div class="text-xs text-gray-400 mt-1">Using: <span id="loadingModelName">Mixtral 8x7B</span> (<span id="loadingModelType">Uncensored</span>)</div> </div> </div>  <div id="apiErrorModal" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-40 hidden flex items-center justify-center"> <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md text-center"> <div class="text-red-500 text-4xl mb-3"> <i class="fas fa-exclamation-triangle"></i> </div> <h2 class="text-xl font-bold mb-2">API Error</h2> <p id="apiErrorMessage" class="text-gray-300 mb-4">Unable to connect to the AI service. Please check your internet connection and try again.</p> <div class="flex space-x-3 justify-center"> <button id="retryApiButton" class="bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded"> Retry </button> <button id="closeErrorModal" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded"> Close </button> </div> </div> </div> <script> // API Configuration const API_CONFIG = { BASE_URL: 'https://api.deepresearchai.com/v1', ENDPOINTS: { CHAT: '/chat/completions', MODELS: '/models', FILES: '/files/upload', USAGE: '/usage', STATUS: '/status' }, DEFAULT_HEADERS: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }; // Model data (would normally come from API) const MODELS = [ { id: "mixtral-8x7b", name: "Mixtral 8x7B", provider: "openrouter", isFree: true, isCensored: false, isExperimental: false, isNew: false, description: "Mistral's uncensored open-weight model with 8 experts", capabilities: ["text", "reasoning", "uncensored"], speed: "fast", context: 32000, tags: ["free", "uncensored"], price: "Free", settings: { temperature: 0.7, maxTokens: 2000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "gpt-4-turbo", name: "GPT-4 Turbo", provider: "openai", isFree: false, isCensored: true, isExperimental: false, isNew: false, description: "OpenAI's most capable model with deep reasoning", capabilities: ["text", "function-calling", "censored"], speed: "fast", context: 128000, tags: ["premium", "censored"], price: "$0.03", settings: { temperature: 0.7, maxTokens: 4000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "claude-3-opus", name: "Claude 3 Opus", provider: "anthropic", isFree: false, isCensored: true, isExperimental: false, isNew: true, description: "Anthropic's most powerful model for complex analysis", capabilities: ["text", "analysis", "censored"], speed: "medium", context: 200000, tags: ["premium", "censored"], price: "$0.05", settings: { temperature: 0.7, maxTokens: 4000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "gpt-4-freedom", name: "GPT-4 Freedom", provider: "openrouter", isFree: false, isCensored: false, isExperimental: false, isNew: false, description: "Uncensored version of GPT-4 without OpenAI filters", capabilities: ["text", "unfiltered"], speed: "fast", context: 32000, tags: ["paid", "uncensored"], price: "$0.05", settings: { temperature: 0.7, maxTokens: 2000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "gemini-pro", name: "Gemini Pro", provider: "google", isFree: true, isCensored: true, isExperimental: false, isNew: false, description: "Google's general purpose AI model", capabilities: ["text", "general"], speed: "fast", context: 32000, tags: ["free", "censored"], price: "Free", settings: { temperature: 0.7, maxTokens: 2000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "dolphin-2.6", name: "Dolphin 2.6", provider: "openrouter", isFree: true, isCensored: false, isExperimental: true, isNew: false, description: "Uncensored assistant model based on Mistral", capabilities: ["text", "assistant"], speed: "slow", context: 4000, tags: ["free", "uncensored", "experimental"], price: "Free", settings: { temperature: 0.7, maxTokens: 1000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "mythomax-13b", name: "MythoMax 13B", provider: "openrouter", isFree: true, isCensored: false, isExperimental: false, isNew: false, description: "Uncensored model optimized for roleplay", capabilities: ["text", "roleplay"], speed: "medium", context: 8000, tags: ["free", "uncensored"], price: "Free", settings: { temperature: 0.7, maxTokens: 1500, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "nous-hermes-2", name: "Nous Hermes 2", provider: "openrouter", isFree: true, isCensored: false, isExperimental: false, isNew: true, description: "Uncensored model fine-tuned for instruction following", capabilities: ["text", "instructions"], speed: "medium", context: 16000, tags: ["free", "uncensored", "new"], price: "Free", settings: { temperature: 0.7, maxTokens: 2000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo", provider: "openai", isFree: true, isCensored: true, isExperimental: false, isNew: false, description: "OpenAI's fast and family-safe model", capabilities: ["text", "general"], speed: "fast", context: 16000, tags: ["free", "censored"], price: "Free", settings: { temperature: 0.7, maxTokens: 2000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "claude-2.1", name: "Claude 2.1", provider: "anthropic", isFree: false, isCensored: true, isExperimental: false, isNew: false, description: "Anthropic's constitutional AI with safety focus", capabilities: ["text", "safe"], speed: "medium", context: 100000, tags: ["paid", "censored"], price: "$0.03", settings: { temperature: 0.7, maxTokens: 4000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "openhermes-2.5", name: "OpenHermes 2.5", provider: "openrouter", isFree: true, isCensored: false, isExperimental: true, isNew: false, description: "Experimental uncensored research model", capabilities: ["text", "research"], speed: "slow", context: 4000, tags: ["free", "uncensored", "experimental"], price: "Free", settings: { temperature: 0.7, maxTokens: 1000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } }, { id: "gpt-4-vision", name: "GPT-4 Vision", provider: "openrouter", isFree: false, isCensored: false, isExperimental: true, isNew: false, description: "Multimodal model with image understanding", capabilities: ["text", "vision"], speed: "medium", context: 128000, tags: ["paid", "uncensored", "experimental"], price: "$0.07", settings: { temperature: 0.7, maxTokens: 4000, topP: 0.9, frequencyPenalty: 0, presencePenalty: 0 } } ]; // App State const APP_STATE = { currentModel: MODELS.find(m => m.id === 'mixtral-8x7b'), chatHistory: [], contextTokens: 0, attachedFile: null, apiStatus: 'online', credits: 150, activeFilters: ['free'], activeProvider: 'all' }; // DOM Elements const DOM = { sidebar: document.getElementById('sidebar'), sidebarToggle: document.getElementById('sidebarToggle'), closeSidebar: document.getElementById('closeSidebar'), mobileModelButton: document.getElementById('mobileModelButton'), mobileModelModal: document.getElementById('mobileModelModal'), closeMobileModal: document.getElementById('closeMobileModal'), modelSearch: document.getElementById('modelSearch'), resetFilters: document.getElementById('resetFilters'), filterButtons: document.querySelectorAll('.filter-btn'), providerTabs: document.querySelectorAll('.provider-tab'), providerTabsMobile: document.querySelectorAll('.provider-tab-mobile'), modelCards: document.querySelectorAll('.model-card'), mobileModelList: document.getElementById('mobileModelList'), chatForm: document.getElementById('chatForm'), messageInput: document.getElementById('messageInput'), messagesContainer: document.getElementById('messages'), loadingOverlay: document.getElementById('loadingOverlay'), currentModelName: document.getElementById('currentModelName'), currentModelUncensored: document.getElementById('currentModelUncensored'), currentModelFree: document.getElementById('currentModelFree'), currentModelContext: document.getElementById('currentModelContext'), currentModelFooter: document.getElementById('currentModelFooter'), currentModelCost: document.getElementById('currentModelCost'), currentModelContextFooter: document.getElementById('currentModelContextFooter'), contextIndicator: document.getElementById('contextIndicator'), contextTokens: document.getElementById('contextTokens'), contextMax: document.getElementById('contextMax'), contextProgress: document.querySelector('.context-progress'), filePreviewContainer: document.getElementById('filePreviewContainer'), filePreview: document.getElementById('filePreview'), fileName: document.getElementById('fileName'), removeFileButton: document.getElementById('removeFileButton'), fileUploadButton: document.getElementById('fileUploadButton'), fileInput: document.getElementById('fileInput'), modelSettingsButton: document.getElementById('modelSettingsButton'), modelInfoButton: document.getElementById('modelInfoButton'), chatHistoryButton: document.getElementById('chatHistoryButton'), clearChatButton: document.getElementById('clearChatButton'), modelSettingsModal: document.getElementById('modelSettingsModal'), closeSettingsModal: document.getElementById('closeSettingsModal'), modelInfoModal: document.getElementById('modelInfoModal'), closeInfoModal: document.getElementById('closeInfoModal'), infoModelName: document.getElementById('infoModelName'), infoModelProvider: document.getElementById('infoModelProvider'), infoModelPolicy: document.getElementById('infoModelPolicy'), infoModelCost: document.getElementById('infoModelCost'), infoModelContext: document.getElementById('infoModelContext'), infoModelSpeed: document.getElementById('infoModelSpeed'), infoModelDescription: document.getElementById('infoModelDescription'), loadingModelName: document.getElementById('loadingModelName'), loadingModelType: document.getElementById('loadingModelType'), apiErrorModal: document.getElementById('apiErrorModal'), apiErrorMessage: document.getElementById('apiErrorMessage'), retryApiButton: document.getElementById('retryApiButton'), closeErrorModal: document.getElementById('closeErrorModal'), creditBalance: document.getElementById('creditBalance') }; // Initialize mobile model list function initMobileModelList() { DOM.mobileModelList.innerHTML = ''; MODELS.forEach(model => { const modelElement = document.createElement('div'); modelElement.className = 'model-card p-3 mb-2'; modelElement.dataset.free = model.isFree; modelElement.dataset.censored = model.isCensored; modelElement.dataset.experimental = model.isExperimental; modelElement.dataset.new = model.isNew; modelElement.dataset.provider = model.provider; let badges = ''; if (model.isFree) badges += `<span class="badge-free">Free</span> </html>