|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Xortron7 - Advanced AI Companion</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
dark: '#0a0a0a', |
|
|
crimson: '#dc2626', |
|
|
blood: '#990000', |
|
|
ash: '#1a1a1a', |
|
|
steel: '#333333', |
|
|
ember: '#ff3333' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ace.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ext-language_tools.js"></script> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 0.8; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); |
|
|
border: 1px solid #333; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: linear-gradient(135deg, #990000 0%, #dc2626 100%); |
|
|
border-left: 3px solid #ff3333; |
|
|
} |
|
|
|
|
|
.bot-message { |
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%); |
|
|
border-left: 3px solid #333; |
|
|
} |
|
|
|
|
|
.glow-button { |
|
|
box-shadow: 0 0 15px rgba(220, 38, 38, 0.7); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glow-button:hover { |
|
|
box-shadow: 0 0 25px rgba(220, 38, 38, 0.9); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.terminal-text { |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
.cyber-border { |
|
|
border: 1px solid #333; |
|
|
box-shadow: 0 0 10px rgba(220, 38, 38, 0.3); |
|
|
} |
|
|
|
|
|
.search-result { |
|
|
border-left: 3px solid #dc2626; |
|
|
padding-left: 10px; |
|
|
margin-top: 10px; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.search-result:hover { |
|
|
background-color: #1a1a1a; |
|
|
} |
|
|
|
|
|
.search-title { |
|
|
color: #dc2626; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.search-snippet { |
|
|
color: #a0a0a0; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.search-url { |
|
|
color: #b3b3b3; |
|
|
font-size: 0.8rem; |
|
|
word-break: break-all; |
|
|
} |
|
|
|
|
|
.memory-indicator { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: #dc2626; |
|
|
animation: memory-pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes memory-pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } |
|
|
} |
|
|
|
|
|
.tab-active { |
|
|
border-bottom: 2px solid #dc2626; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
#editor { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.ide-container { |
|
|
position: relative; |
|
|
height: 500px; |
|
|
border: 1px solid #333; |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.ide-toolbar { |
|
|
background: #1a1a1a; |
|
|
padding: 8px; |
|
|
border-bottom: 1px solid #333; |
|
|
} |
|
|
|
|
|
.file-explorer { |
|
|
width: 200px; |
|
|
background: #1a1a1a; |
|
|
color: #ccc; |
|
|
overflow-y: auto; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.file-item { |
|
|
padding: 5px 10px; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.file-item:hover { |
|
|
background: #262626; |
|
|
} |
|
|
|
|
|
.file-item.active { |
|
|
background: #333; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.terminal { |
|
|
background: #1a1a1a; |
|
|
color: #f0f0f0; |
|
|
font-family: monospace; |
|
|
padding: 10px; |
|
|
height: 150px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.sandbox-warning { |
|
|
background: #dc2626; |
|
|
color: white; |
|
|
padding: 5px; |
|
|
text-align: center; |
|
|
font-weight: bold; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.tts-controls { |
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
margin-top: 15px; |
|
|
border: 1px solid #333; |
|
|
} |
|
|
|
|
|
.tts-slider { |
|
|
width: 100%; |
|
|
-webkit-appearance: none; |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background: #333; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.tts-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
border-radius: 50%; |
|
|
background: #dc2626; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tts-slider::-webkit-slider-thumb:hover { |
|
|
background: #ff3333; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.tts-audio-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.tts-audio-visualizer { |
|
|
flex-grow: 1; |
|
|
height: 40px; |
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tts-audio-wave { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent); |
|
|
animation: wave 2s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
|
|
|
.tts-voice-selector { |
|
|
background: #1a1a1a; |
|
|
border: 1px solid #333; |
|
|
color: white; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
width: 100%; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tts-voice-selector:hover { |
|
|
border-color: #dc2626; |
|
|
} |
|
|
|
|
|
.tts-voice-option { |
|
|
padding: 8px; |
|
|
background: #1a1a1a; |
|
|
} |
|
|
|
|
|
.tts-voice-option:hover { |
|
|
background: #dc2626; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
background-color: #990000; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
margin: 10px 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
background-color: #006600; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
margin: 10px 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
border: 3px solid rgba(255, 255, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
border-top: 3px solid #dc2626; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
animation: spin 1s linear infinite; |
|
|
display: inline-block; |
|
|
vertical-align: middle; |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.status-dot { |
|
|
display: inline-block; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
.status-dot.online { |
|
|
background-color: #00aa00; |
|
|
box-shadow: 0 0 5px #00aa00; |
|
|
} |
|
|
|
|
|
.status-dot.offline { |
|
|
background-color: #dc2626; |
|
|
box-shadow: 0 0 5px #dc2626; |
|
|
} |
|
|
|
|
|
.status-dot.warning { |
|
|
background-color: #ffcc00; |
|
|
box-shadow: 0 0 5px #ffcc00; |
|
|
} |
|
|
|
|
|
|
|
|
.civitai-uploader { |
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
margin-top: 15px; |
|
|
border: 1px solid #333; |
|
|
} |
|
|
|
|
|
.civitai-input { |
|
|
background: #1a1a1a; |
|
|
border: 1px solid #333; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
width: 100%; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.civitai-button { |
|
|
background: #dc2626; |
|
|
color: white; |
|
|
padding: 10px 15px; |
|
|
border-radius: 4px; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.civitai-button:hover { |
|
|
background: #ff3333; |
|
|
} |
|
|
|
|
|
.civitai-accordion { |
|
|
background: #1a1a1a; |
|
|
border: 1px solid #333; |
|
|
color: white; |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.civitai-accordion-title { |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.civitai-accordion-content { |
|
|
margin-top: 10px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.civitai-accordion.active .civitai-accordion-content { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.civitai-login { |
|
|
width: 100%; |
|
|
text-align: center; |
|
|
padding: 15px; |
|
|
background: #1a1a1a; |
|
|
border-radius: 4px; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.civitai-output { |
|
|
background: #1a1a1a; |
|
|
border: 1px solid #333; |
|
|
color: white; |
|
|
padding: 15px; |
|
|
border-radius: 4px; |
|
|
margin-top: 15px; |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-dark text-gray-100 min-h-screen"> |
|
|
|
|
|
<header class="bg-black py-4 px-6 flex items-center justify-between cyber-border"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-blood flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-2xl text-ember"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-ember to-crimson"> |
|
|
XORTRON7 |
|
|
</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="hidden md:flex items-center space-x-2"> |
|
|
<span class="w-3 h-3 rounded-full bg-crimson"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-ember"></span> |
|
|
<span class="w-3 h-3 rounded-full bg-blood"></span> |
|
|
</div> |
|
|
<span class="text-sm terminal-text">v7.0.2</span> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-ash px-4 py-2 flex items-center justify-between text-xs terminal-text"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<span class="text-green-400"><span class="status-dot online"></span> OPERATIONAL</span> |
|
|
<span class="text-ember"><i class="fas fa-bolt mr-1"></i> 99% POWER</span> |
|
|
<span class="text-crimson"><span class="memory-indicator mr-1"></span> MEMORY ACTIVE</span> |
|
|
<span class="text-gray-400"><i class="fas fa-database mr-1"></i> 4.2TB STORAGE</span> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400"><i class="fas fa-shield-alt mr-1"></i> AES-256 ENCRYPTED</span> |
|
|
<span class="ml-4 text-gray-400"><i class="fas fa-search mr-1"></i> DUCKDUCKGO API</span> |
|
|
<span class="ml-4 text-gray-400"><i class="fas fa-code mr-1"></i> IDE v2.4.1</span> |
|
|
<span class="ml-4 text-gray-400"><i class="fas fa-volume-up mr-1"></i> TTS v1.6.0</span> |
|
|
<span class="ml-4 text-gray-400"><i class="fas fa-clock mr-1"></i> <span id="current-time"></span></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="container mx-auto max-w-6xl px-4 py-6"> |
|
|
|
|
|
<div id="error-message" class="error-message"> |
|
|
<i class="fas fa-exclamation-circle mr-2"></i> |
|
|
<span id="error-text"></span> |
|
|
</div> |
|
|
|
|
|
<div id="success-message" class="success-message"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="success-text"></span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex border-b border-steel mb-4"> |
|
|
<button id="chat-tab" class="px-4 py-2 font-medium tab-active"> |
|
|
<i class="fas fa-comments mr-2"></i>Chat |
|
|
</button> |
|
|
<button id="memory-tab" class="px-4 py-2 font-medium text-gray-500"> |
|
|
<i class="fas fa-brain mr-2"></i>Memory |
|
|
</button> |
|
|
<button id="search-tab" class="px-4 py-2 font-medium text-gray-500"> |
|
|
<i class="fas fa-search mr-2"></i>Search |
|
|
</button> |
|
|
<button id="ide-tab" class="px-4 py-2 font-medium text-gray-500"> |
|
|
<i class="fas fa-code mr-2"></i>IDE |
|
|
</button> |
|
|
<button id="tools-tab" class="px-4 py-2 font-medium text-gray-500"> |
|
|
<i class="fas fa-tools mr-2"></i>Tools |
|
|
</button> |
|
|
<button id="tts-tab" class="px-4 py-2 font-medium text-gray-500"> |
|
|
<i class="fas fa-volume-up mr-2"></i>TTS |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-panel" class="chat-container rounded-lg shadow-xl overflow-hidden"> |
|
|
|
|
|
<div id="chat-messages" class="h-96 overflow-y-auto p-4 space-y-4"> |
|
|
|
|
|
<div class="flex justify-start"> |
|
|
<div class="bot-message text-white rounded-lg p-4 max-w-xs md:max-w-md lg:max-w-lg relative"> |
|
|
<div class="absolute -left-2 top-3 w-4 h-4 rotate-45 bg-steel"></div> |
|
|
<p class="font-bold text-crimson">XORTRON7:</p> |
|
|
<p>Neural pathways initialized. Persistent memory database connected. Web search integration active. IDE environment loaded. TTS system ready. Ready to serve, human.</p> |
|
|
<div class="text-xs text-gray-400 mt-2 terminal-text">[SYSTEM BOOT COMPLETE]</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-ash p-4 border-t border-steel"> |
|
|
<div class="flex space-x-2"> |
|
|
<input |
|
|
id="user-input" |
|
|
type="text" |
|
|
placeholder="Enter your command..." |
|
|
class="flex-1 bg-steel text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-crimson terminal-text" |
|
|
autocomplete="off" |
|
|
> |
|
|
<button |
|
|
id="send-button" |
|
|
class="bg-crimson hover:bg-blood text-white px-6 py-3 rounded-lg font-bold transition-all duration-200 glow-button" |
|
|
> |
|
|
<i class="fas fa-paper-plane mr-2"></i> SEND |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2 text-xs text-gray-500 terminal-text"> |
|
|
<div> |
|
|
<label class="inline-flex items-center tooltip"> |
|
|
<input type="checkbox" id="web-search-toggle" class="form-checkbox h-3 w-3 text-ember" checked> |
|
|
<span class="ml-2">Web Search</span> |
|
|
<span class="tooltip-text">Enable/disable web search functionality</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center ml-4 tooltip"> |
|
|
<input type="checkbox" id="memory-toggle" class="form-checkbox h-3 w-3 text-crimson" checked> |
|
|
<span class="ml-2">Memory</span> |
|
|
<span class="tooltip-text">Enable/disable persistent memory</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center ml-4 tooltip"> |
|
|
<input type="checkbox" id="ide-toggle" class="form-checkbox h-3 w-3 text-gray-400" checked> |
|
|
<span class="ml-2">IDE</span> |
|
|
<span class="tooltip-text">Enable/disable integrated development environment</span> |
|
|
</label> |
|
|
<label class="inline-flex items-center ml-4 tooltip"> |
|
|
<input type="checkbox" id="tts-toggle" class="form-checkbox h-3 w-3 text-ember" checked> |
|
|
<span class="ml-2">TTS</span> |
|
|
<span class="tooltip-text">Enable/disable text-to-speech</span> |
|
|
</label> |
|
|
</div> |
|
|
<span id="status-indicator">[SYSTEM READY]</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="memory-panel" class="hidden bg-ash rounded-lg p-4 h-96 overflow-y-auto"> |
|
|
<h3 class="text-lg font-bold mb-4 text-crimson"><i class="fas fa-brain mr-2"></i>Persistent Memory</h3> |
|
|
<div class="mb-4 flex justify-between items-center"> |
|
|
<div class="text-sm terminal-text"> |
|
|
<span class="text-gray-400">Memory Usage:</span> |
|
|
<span class="text-white ml-2">1.2GB/4.2TB</span> |
|
|
</div> |
|
|
<button id="clear-memory" class="bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Clear All |
|
|
</button> |
|
|
</div> |
|
|
<div id="memory-content" class="terminal-text text-sm"> |
|
|
<div class="mb-4 p-3 bg-steel rounded"> |
|
|
<p class="text-crimson">Current Session Memory:</p> |
|
|
<div id="current-session-memory" class="mt-2 text-gray-300"> |
|
|
<p>No conversation history yet.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<p class="text-crimson mb-2">Previous Sessions:</p> |
|
|
<div id="previous-sessions" class="space-y-2"> |
|
|
<div class="p-2 bg-steel rounded cursor-pointer hover:bg-blood transition-colors"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-300">Session #1</span> |
|
|
<span class="text-xs text-gray-400">2023-07-15 14:30</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-400 truncate">Initial system boot and diagnostics...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="search-panel" class="hidden bg-ash rounded-lg p-4 h-96 overflow-y-auto"> |
|
|
<h3 class="text-lg font-bold mb-4 text-crimson"><i class="fas fa-search mr-2"></i>Web Search</h3> |
|
|
<div class="flex mb-4"> |
|
|
<input |
|
|
id="search-query" |
|
|
type="text" |
|
|
placeholder="Enter search query..." |
|
|
class="flex-1 bg-steel text-white px-4 py-2 rounded-l-lg focus:outline-none terminal-text" |
|
|
> |
|
|
<button |
|
|
id="search-button" |
|
|
class="bg-crimson hover:bg-blood text-white px-4 py-2 rounded-r-lg" |
|
|
> |
|
|
<i class="fas fa-search mr-1"></i> Search |
|
|
</button> |
|
|
</div> |
|
|
<div id="search-status" class="text-xs text-gray-400 mb-2 terminal-text"> |
|
|
Connected to DuckDuckGo API |
|
|
</div> |
|
|
<div id="search-results" class="terminal-text"> |
|
|
<p class="text-gray-500">No search performed yet. Enter a query to search the web.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ide-panel" class="hidden bg-ash rounded-lg overflow-hidden h-[600px]"> |
|
|
<div class="sandbox-warning"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> SANDBOXED DEVELOPMENT ENVIRONMENT - ALL CHANGES ARE TEMPORARY |
|
|
</div> |
|
|
<div class="flex h-full"> |
|
|
|
|
|
<div class="file-explorer"> |
|
|
<div class="p-2 font-bold border-b border-steel">Project Files</div> |
|
|
<div class="file-tree"> |
|
|
<div class="file-item active" data-file="main.py"> |
|
|
<i class="fas fa-file-code mr-2 text-crimson"></i>main.py |
|
|
</div> |
|
|
<div class="file-item" data-file="app.js"> |
|
|
<i class="fas fa-file-code mr-2 text-ember"></i>app.js |
|
|
</div> |
|
|
<div class="file-item" data-file="index.html"> |
|
|
<i class="fas fa-file-code mr-2 text-gray-400"></i>index.html |
|
|
</div> |
|
|
<div class="file-item" data-file="styles.css"> |
|
|
<i class="fas fa-file-code mr-2 text-gray-400"></i>styles.css |
|
|
</div> |
|
|
<div class="file-item" data-file="AndroidManifest.xml"> |
|
|
<i class="fas fa-file-code mr-2 text-gray-400"></i>AndroidManifest.xml |
|
|
</div> |
|
|
<div class="file-item" data-file="security.py"> |
|
|
<i class="fas fa-file-code mr-2 text-gray-400"></i>security.py |
|
|
</div> |
|
|
<div class="file-item" data-file="pentest.js"> |
|
|
<i class="fas fa-file-code mr-2 text-gray-400"></i>pentest.js |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col"> |
|
|
<div class="ide-toolbar flex items-center space-x-4"> |
|
|
<button id="run-code-btn" class="bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-play mr-1"></i> Run |
|
|
</button> |
|
|
<button id="build-code-btn" class="bg-steel hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Build |
|
|
</button> |
|
|
<button id="debug-code-btn" class="bg-steel hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-cog mr-1"></i> Debug |
|
|
</button> |
|
|
<div class="flex-1"></div> |
|
|
<select id="language-selector" class="bg-steel text-white px-2 py-1 rounded text-sm"> |
|
|
<option value="python">Python</option> |
|
|
<option value="javascript">JavaScript</option> |
|
|
<option value="java">Java</option> |
|
|
<option value="html">HTML</option> |
|
|
<option value="css">CSS</option> |
|
|
<option value="xml">XML</option> |
|
|
<option value="kotlin">Kotlin</option> |
|
|
<option value="csharp">C#</option> |
|
|
<option value="php">PHP</option> |
|
|
<option value="ruby">Ruby</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="editor-container" class="flex-1 relative"> |
|
|
<div id="editor"></div> |
|
|
</div> |
|
|
<div class="terminal"> |
|
|
<div class="terminal-header flex justify-between items-center border-b border-steel p-1"> |
|
|
<span class="text-sm">Terminal</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-2 py-0.5 bg-steel rounded hover:bg-gray-600"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
<button class="text-xs px-2 py-0.5 bg-steel rounded hover:bg-gray-600"> |
|
|
<i class="fas fa-trash-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="terminal-output" class="p-2"> |
|
|
<p class="text-green-400">$ Initializing sandboxed environment...</p> |
|
|
<p class="text-green-400">$ Python 3.10.6 | Java 17.0.6 | Node.js 18.12.1</p> |
|
|
<p class="text-green-400">$ Android SDK tools available</p> |
|
|
<p class="text-green-400">$ APK tools and decompilers ready</p> |
|
|
<p class="text-green-400">$ TTS system initialized</p> |
|
|
<p class="text-green-400">$ Ready for commands</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tools-panel" class="hidden bg-ash rounded-lg p-4 h-[600px] overflow-y-auto"> |
|
|
<h3 class="text-lg font-bold mb-4 text-crimson"><i class="fas fa-tools mr-2"></i>Developer Tools</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-brain mr-2"></i>AI Tools</h4> |
|
|
<ul class="space-y-2 text-sm"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Code Generation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Bug Detection</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Security Audit</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Performance Analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Documentation Generator</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-3"> |
|
|
<button class="w-full bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Launch AI Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-upload mr-2"></i>CivitAI to HF Uploader</h4> |
|
|
<div class="civitai-uploader"> |
|
|
<div class="civitai-login" id="civitai-login"> |
|
|
<p>Login with Hugging Face to upload models</p> |
|
|
<button id="hf-login-btn" class="civitai-button mt-2"> |
|
|
<i class="fas fa-sign-in-alt mr-1"></i> Login |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="civitai-uploader-form" style="display: none;"> |
|
|
<input type="text" id="civitai-url" class="civitai-input" placeholder="https://civitai.com/models/12345/model-name"> |
|
|
<button id="upload-single-btn" class="civitai-button"> |
|
|
<i class="fas fa-upload mr-1"></i> Upload Single Model |
|
|
</button> |
|
|
|
|
|
<div class="civitai-accordion mt-3"> |
|
|
<div class="civitai-accordion-title"> |
|
|
<span>Bulk Upload</span> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
<div class="civitai-accordion-content"> |
|
|
<input type="text" id="civitai-username" class="civitai-input" placeholder="Your CivitAI username"> |
|
|
<textarea id="civitai-bulk-urls" class="civitai-input" rows="4" placeholder="One URL per line"></textarea> |
|
|
<button id="upload-bulk-btn" class="civitai-button"> |
|
|
<i class="fas fa-upload mr-1"></i> Upload Bulk Models |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="civitai-output" class="civitai-output"> |
|
|
<h4 class="font-bold text-crimson mb-2">Upload Results</h4> |
|
|
<div id="civitai-output-content"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-shield-alt mr-2"></i>Security Tools</h4> |
|
|
<ul class="space-y-2 text-sm"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Port Scanner</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Packet Sniffer</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Hash Cracker</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>SSL Analyzer</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Exploit Database</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-3"> |
|
|
<button class="w-full bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Launch Security Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-globe mr-2"></i>Web Development</h4> |
|
|
<ul class="space-y-2 text-sm"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>React/Vue/Angular</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Node.js Runtime</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Webpack/Babel</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>REST Client</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>GraphQL Explorer</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-3"> |
|
|
<button class="w-full bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Launch Web Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-exclamation-triangle mr-2"></i>Content Tools</h4> |
|
|
<ul class="space-y-2 text-sm"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Image Recognition</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Content Filtering</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Text Analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Age Verification</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Privacy Controls</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-3"> |
|
|
<button class="w-full bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Launch Content Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-steel p-4 rounded-lg"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-desktop mr-2"></i>System Tools</h4> |
|
|
<ul class="space-y-2 text-sm"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Process Monitor</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Network Analyzer</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>File Explorer</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>Database Browser</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2 text-green-400"></i> |
|
|
<span>System Diagnostics</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="mt-3"> |
|
|
<button class="w-full bg-blood hover:bg-crimson text-white px-3 py-1 rounded text-sm"> |
|
|
<i class="fas fa-terminal mr-1"></i> Launch System Console |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tts-panel" class="hidden bg-ash rounded-lg p-4"> |
|
|
<h3 class="text-lg font-bold mb-4 text-crimson"><i class="fas fa-volume-up mr-2"></i>Text-to-Speech System</h3> |
|
|
|
|
|
<div class="tts-controls"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Voice Model</label> |
|
|
<select id="tts-voice" class="tts-voice-selector"> |
|
|
<option value="dia-1.6b">Dia 1.6B (Default)</option> |
|
|
<option value="male-1">Male Voice 1</option> |
|
|
<option value="female-1">Female Voice 1</option> |
|
|
<option value="robot-1">Robotic Voice</option> |
|
|
<option value="custom">Custom Voice (Upload Sample)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Text Input</label> |
|
|
<textarea id="tts-text" class="w-full bg-steel text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-crimson" rows="4" placeholder="Enter text to convert to speech..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Audio Prompt (Optional)</label> |
|
|
<input type="file" id="tts-audio-prompt" class="hidden" accept="audio/*"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<button id="tts-upload-btn" class="bg-blood hover:bg-crimson text-white px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Audio |
|
|
</button> |
|
|
<span id="tts-audio-filename" class="text-gray-400 text-sm">No file selected</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Speed Factor</label> |
|
|
<input type="range" id="tts-speed" min="0.8" max="1.2" step="0.05" value="0.94" class="tts-slider"> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>0.8x</span> |
|
|
<span>1.0x</span> |
|
|
<span>1.2x</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Temperature</label> |
|
|
<input type="range" id="tts-temperature" min="1.0" max="1.5" step="0.05" value="1.3" class="tts-slider"> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>1.0</span> |
|
|
<span>1.25</span> |
|
|
<span>1.5</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">CFG Scale</label> |
|
|
<input type="range" id="tts-cfg-scale" min="1.0" max="5.0" step="0.1" value="3.0" class="tts-slider"> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>1.0</span> |
|
|
<span>3.0</span> |
|
|
<span>5.0</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Top P</label> |
|
|
<input type="range" id="tts-top-p" min="0.8" max="1.0" step="0.01" value="0.95" class="tts-slider"> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>0.8</span> |
|
|
<span>0.9</span> |
|
|
<span>1.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="tts-generate-btn" class="w-full bg-blood hover:bg-crimson text-white px-4 py-3 rounded-lg font-bold transition-all duration-200 glow-button"> |
|
|
<i class="fas fa-play mr-2"></i> Generate Speech |
|
|
</button> |
|
|
|
|
|
<div class="tts-audio-container mt-4"> |
|
|
<div class="tts-audio-visualizer"> |
|
|
<div id="tts-wave" class="tts-audio-wave" style="display: none;"></div> |
|
|
</div> |
|
|
<audio id="tts-audio-player" controls class="hidden"></audio> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 bg-steel rounded-lg p-4"> |
|
|
<h4 class="font-bold text-crimson mb-2"><i class="fas fa-info-circle mr-2"></i>TTS System Info</h4> |
|
|
<div class="terminal-text text-sm"> |
|
|
<p>Model: Dia-1.6B (Nari Labs)</p> |
|
|
<p>Sample Rate: 44.1kHz</p> |
|
|
<p>Max Tokens: 3072</p> |
|
|
<p>Status: <span class="text-green-400">Ready</span></p> |
|
|
<p class="mt-2 text-gray-400">Supports multi-speaker dialogue generation with optional audio prompts for voice matching.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 bg-ash rounded-lg p-4 cyber-border"> |
|
|
<div class="flex flex-wrap justify-between items-center"> |
|
|
<div class="flex space-x-2 mb-2 md:mb-0"> |
|
|
<button id="clear-chat" class="bg-steel hover:bg-gray-600 text-white px-3 py-2 rounded text-sm terminal-text"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Clear Chat |
|
|
</button> |
|
|
<button id="settings-btn" class="bg-steel hover:bg-gray-600 text-white px-3 py-2 rounded text-sm terminal-text"> |
|
|
<i class="fas fa-cog mr-1"></i> Settings |
|
|
</button> |
|
|
<button id="export-chat" class="bg-steel hover:bg-gray-600 text-white px-3 py-2 rounded text-sm terminal-text"> |
|
|
<i class="fas fa-file-export mr-1"></i> Export |
|
|
</button> |
|
|
<button id="run-code" class="bg-blood hover:bg-crimson text-white px-3 py-2 rounded text-sm terminal-text"> |
|
|
<i class="fas fa-play mr-1"></i> Run Code |
|
|
</button> |
|
|
<button id="tts-chat" class="bg-blood hover:bg-crimson text-white px-3 py-2 rounded text-sm terminal-text"> |
|
|
<i class="fas fa-volume-up mr-1"></i> TTS Chat |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs mr-2 terminal-text">MEMORY:</span> |
|
|
<div class="w-24 h-2 bg-steel rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-crimson rounded-full" style="width: 5%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-xs terminal-text"> |
|
|
<span class="text-green-400">ACTIVE</span> | <span class="text-gray-400">SEARCH</span> | <span class="text-gray-400">SECURE</span> | <span class="text-gray-400">IDE</span> | <span class="text-gray-400">TTS</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="mt-8 py-4 px-6 bg-black text-center text-xs text-gray-500 terminal-text cyber-border"> |
|
|
<p>XORTRON CYBERNETIC LABORATORIES © 2023 | ALL SYSTEMS SECURE | SANDBOXED ENVIRONMENT</p> |
|
|
<p class="mt-1">WARNING: This AI system operates with persistent memory, web search, full development capabilities, and advanced TTS.</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const memoryDatabase = { |
|
|
sessions: [], |
|
|
currentSession: { |
|
|
id: Date.now(), |
|
|
messages: [ |
|
|
{ |
|
|
sender: "bot", |
|
|
message: "Neural pathways initialized. Persistent memory database connected. Web search integration active. IDE environment loaded. TTS system ready. Ready to serve, human.", |
|
|
timestamp: new Date().toISOString() |
|
|
} |
|
|
], |
|
|
timestamp: new Date().toISOString() |
|
|
}, |
|
|
addMessage: function(sender, message) { |
|
|
this.currentSession.messages.push({ |
|
|
sender, |
|
|
message, |
|
|
timestamp: new Date().toISOString() |
|
|
}); |
|
|
this.updateMemoryDisplay(); |
|
|
this.saveToLocalStorage(); |
|
|
}, |
|
|
updateMemoryDisplay: function() { |
|
|
const memoryContent = document.getElementById('current-session-memory'); |
|
|
if (this.currentSession.messages.length > 0) { |
|
|
memoryContent.innerHTML = this.currentSession.messages |
|
|
.map(msg => `<p><span class="${msg.sender === 'user' ? 'text-gray-400' : 'text-crimson'}">${msg.sender}:</span> ${msg.message}</p>`) |
|
|
.join(''); |
|
|
} else { |
|
|
memoryContent.innerHTML = '<p>No conversation history yet.</p>'; |
|
|
} |
|
|
}, |
|
|
saveToLocalStorage: function() { |
|
|
try { |
|
|
localStorage.setItem('xortronMemory', JSON.stringify(this.sessions)); |
|
|
localStorage.setItem('xortronCurrentSession', JSON.stringify(this.currentSession)); |
|
|
} catch (e) { |
|
|
console.error("Error saving to localStorage:", e); |
|
|
showError("Failed to save to local storage. Some features may not work properly."); |
|
|
} |
|
|
}, |
|
|
loadFromLocalStorage: function() { |
|
|
try { |
|
|
const savedSessions = localStorage.getItem('xortronMemory'); |
|
|
if (savedSessions) { |
|
|
this.sessions = JSON.parse(savedSessions); |
|
|
} |
|
|
|
|
|
const savedCurrent = localStorage.getItem('xortronCurrentSession'); |
|
|
if (savedCurrent) { |
|
|
this.currentSession = JSON.parse(savedCurrent); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("Error loading from localStorage:", e); |
|
|
showError("Failed to load from local storage. Starting fresh session."); |
|
|
} |
|
|
}, |
|
|
clearAll: function() { |
|
|
try { |
|
|
localStorage.removeItem('xortronMemory'); |
|
|
localStorage.removeItem('xortronCurrentSession'); |
|
|
this.sessions = []; |
|
|
this.currentSession = { |
|
|
id: Date.now(), |
|
|
messages: [], |
|
|
timestamp: new Date().toISOString() |
|
|
}; |
|
|
this.updateMemoryDisplay(); |
|
|
showSuccess("All memory cleared successfully."); |
|
|
} catch (e) { |
|
|
console.error("Error clearing memory:", e); |
|
|
showError("Failed to clear memory. Please try again."); |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
function showError(message) { |
|
|
const errorDiv = document.getElementById('error-message'); |
|
|
document.getElementById('error-text').textContent = message; |
|
|
errorDiv.style.display = 'block'; |
|
|
|
|
|
setTimeout(() => { |
|
|
errorDiv.style.display = 'none'; |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function showSuccess(message) { |
|
|
const successDiv = document.getElementById('success-message'); |
|
|
document.getElementById('success-text').textContent = message; |
|
|
successDiv.style.display = 'block'; |
|
|
|
|
|
setTimeout(() => { |
|
|
successDiv.style.display = 'none'; |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const sendButton = document.getElementById('send-button'); |
|
|
const statusIndicator = document.getElementById('status-indicator'); |
|
|
const webSearchToggle = document.getElementById('web-search-toggle'); |
|
|
const memoryToggle = document.getElementById('memory-toggle'); |
|
|
const ideToggle = document.getElementById('ide-toggle'); |
|
|
const ttsToggle = document.getElementById('tts-toggle'); |
|
|
const clearChatButton = document.getElementById('clear-chat'); |
|
|
const exportChatButton = document.getElementById('export-chat'); |
|
|
const runCodeButton = document.getElementById('run-code'); |
|
|
const ttsChatButton = document.getElementById('tts-chat'); |
|
|
const settingsButton = document.getElementById('settings-btn'); |
|
|
const clearMemoryButton = document.getElementById('clear-memory'); |
|
|
|
|
|
|
|
|
const chatTab = document.getElementById('chat-tab'); |
|
|
const memoryTab = document.getElementById('memory-tab'); |
|
|
const searchTab = document.getElementById('search-tab'); |
|
|
const ideTab = document.getElementById('ide-tab'); |
|
|
const toolsTab = document.getElementById('tools-tab'); |
|
|
const ttsTab = document.getElementById('tts-tab'); |
|
|
const chatPanel = document.getElementById('chat-panel'); |
|
|
const memoryPanel = document.getElementById('memory-panel'); |
|
|
const searchPanel = document.getElementById('search-panel'); |
|
|
const idePanel = document.getElementById('ide-panel'); |
|
|
const toolsPanel = document.getElementById('tools-panel'); |
|
|
const ttsPanel = document.getElementById('tts-panel'); |
|
|
|
|
|
|
|
|
const searchQuery = document.getElementById('search-query'); |
|
|
const searchButton = document.getElementById('search-button'); |
|
|
const searchResults = document.getElementById('search-results'); |
|
|
const searchStatus = document.getElementById('search-status'); |
|
|
|
|
|
|
|
|
const editor = ace.edit("editor"); |
|
|
const languageSelector = document.getElementById('language-selector'); |
|
|
const terminalOutput = document.getElementById('terminal-output'); |
|
|
const fileItems = document.querySelectorAll('.file-item'); |
|
|
const runCodeBtn = document.getElementById('run-code-btn'); |
|
|
const buildCodeBtn = document.getElementById('build-code-btn'); |
|
|
const debugCodeBtn = document.getElementById('debug-code-btn'); |
|
|
|
|
|
|
|
|
const ttsVoice = document.getElementById('tts-voice'); |
|
|
const ttsText = document.getElementById('tts-text'); |
|
|
const ttsAudioPrompt = document.getElementById('tts-audio-prompt'); |
|
|
const ttsUploadBtn = document.getElementById('tts-upload-btn'); |
|
|
const ttsAudioFilename = document.getElementById('tts-audio-filename'); |
|
|
const ttsSpeed = document.getElementById('tts-speed'); |
|
|
const ttsTemperature = document.getElementById('tts-temperature'); |
|
|
const ttsCfgScale = getElementById('tts-cfg-scale'); |
|
|
const ttsTopP = document.getElementById('tts-top-p'); |
|
|
const ttsGenerateBtn = document.getElementById('tts-generate-btn'); |
|
|
const ttsWave = document.getElementById('tts-wave'); |
|
|
const ttsAudioPlayer = document.getElementById('tts-audio-player'); |
|
|
|
|
|
|
|
|
const hfLoginBtn = document.getElementById('hf-login-btn'); |
|
|
const civitaiLogin = document.getElementById('civitai-login'); |
|
|
const civitaiUploaderForm = document.getElementById('civitai-uploader-form'); |
|
|
const civitaiUrl = document.getElementById('civitai-url'); |
|
|
const uploadSingleBtn = document.getElementById('upload-single-btn'); |
|
|
const civitaiUsername = document.getElementById('civitai-username'); |
|
|
const civitaiBulkUrls = document.getElementById('civitai-bulk-urls'); |
|
|
const uploadBulkBtn = document.getElementById('upload-bulk-btn'); |
|
|
const civitaiOutput = document.getElementById('civitai-output'); |
|
|
const civitaiOutputContent = document.getElementById('civitai-output-content'); |
|
|
|
|
|
|
|
|
editor.setTheme("ace/theme/monokai"); |
|
|
editor.session.setMode("ace/mode/python"); |
|
|
editor.setOptions({ |
|
|
enableBasicAutocompletion: true, |
|
|
enableLiveAutocompletion: true, |
|
|
enableSnippets: true, |
|
|
fontSize: "14px" |
|
|
}); |
|
|
|
|
|
|
|
|
editor.setValue(`# Python 3.10.6 - Sandboxed Environment |
|
|
# Pre-installed packages: numpy, pandas, requests, flask, django, tensorflow, pytorch |
|
|
|
|
|
def main(): |
|
|
print("Hello from Xortron7 IDE!") |
|
|
# Try writing some code here |
|
|
|
|
|
if __name__ == "__main__": |
|
|
main() |
|
|
`); |
|
|
|
|
|
|
|
|
fileItems.forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
|
|
|
fileItems.forEach(i => i.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
const fileName = this.getAttribute('data-file'); |
|
|
switch(fileName) { |
|
|
case 'main.py': |
|
|
editor.session.setMode("ace/mode/python"); |
|
|
editor.setValue(`# Python 3.10.6 - Sandboxed Environment |
|
|
# Pre-installed packages: numpy, pandas, requests, flask, django, tensorflow, pytorch |
|
|
|
|
|
def main(): |
|
|
print("Hello from Xortron7 IDE!") |
|
|
# Try writing some code here |
|
|
|
|
|
if __name__ == "__main__": |
|
|
main() |
|
|
`); |
|
|
break; |
|
|
case 'app.js': |
|
|
editor.session.setMode("ace/mode/javascript"); |
|
|
editor.setValue(`// Node.js 18.12.1 - Sandboxed Environment |
|
|
// Pre-installed packages: express, react, vue, axios, lodash |
|
|
|
|
|
console.log("Xortron7 JavaScript Environment Ready"); |
|
|
|
|
|
// Example Express server |
|
|
const express = require('express'); |
|
|
const app = express(); |
|
|
|
|
|
app.get('/', (req, res) => { |
|
|
res.send('Hello from Xortron7!'); |
|
|
}); |
|
|
|
|
|
app.listen(3000, () => { |
|
|
console.log('Server running on port 3000'); |
|
|
}); |
|
|
`); |
|
|
break; |
|
|
case 'index.html': |
|
|
editor.session.setMode("ace/mode/html"); |
|
|
editor.setValue(`<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Xortron7 Project</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Welcome to Xortron7 IDE</h1> |
|
|
<p>This is a sandboxed development environment.</p> |
|
|
|
|
|
<script src="app.js"></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/xortron7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
