Add 3 files
Browse files- README.md +7 -5
- index.html +423 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: nova
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: yellow
|
| 5 |
+
colorTo: yellow
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,423 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="pt-BR">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Assistente de IA Futurista</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
@keyframes pulse {
|
| 11 |
+
0%, 100% { transform: scale(1); opacity: 1; }
|
| 12 |
+
50% { transform: scale(1.05); opacity: 0.8; }
|
| 13 |
+
}
|
| 14 |
+
|
| 15 |
+
@keyframes float {
|
| 16 |
+
0%, 100% { transform: translateY(0); }
|
| 17 |
+
50% { transform: translateY(-10px); }
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
@keyframes rotate {
|
| 21 |
+
0% { transform: rotate(0deg); }
|
| 22 |
+
100% { transform: rotate(360deg); }
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
@keyframes wave {
|
| 26 |
+
0% { transform: scaleY(1); }
|
| 27 |
+
50% { transform: scaleY(1.5); }
|
| 28 |
+
100% { transform: scaleY(1); }
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
.avatar-pulse {
|
| 32 |
+
animation: pulse 3s infinite;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.avatar-float {
|
| 36 |
+
animation: float 6s ease-in-out infinite;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.ring-rotate {
|
| 40 |
+
animation: rotate 20s linear infinite;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.wave-animation {
|
| 44 |
+
animation: wave 0.5s ease infinite;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.glow {
|
| 48 |
+
box-shadow: 0 0 20px 5px rgba(100, 149, 237, 0.7);
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
.glow-blue {
|
| 52 |
+
box-shadow: 0 0 30px 10px rgba(65, 105, 225, 0.5);
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.glow-purple {
|
| 56 |
+
box-shadow: 0 0 30px 10px rgba(147, 112, 219, 0.5);
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
.particle {
|
| 60 |
+
position: absolute;
|
| 61 |
+
background-color: rgba(100, 149, 237, 0.7);
|
| 62 |
+
border-radius: 50%;
|
| 63 |
+
pointer-events: none;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.typing-indicator span {
|
| 67 |
+
display: inline-block;
|
| 68 |
+
width: 8px;
|
| 69 |
+
height: 8px;
|
| 70 |
+
background-color: #60a5fa;
|
| 71 |
+
border-radius: 50%;
|
| 72 |
+
margin: 0 2px;
|
| 73 |
+
animation: bounce 1.4s infinite ease-in-out;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.typing-indicator span:nth-child(2) {
|
| 77 |
+
animation-delay: 0.2s;
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.typing-indicator span:nth-child(3) {
|
| 81 |
+
animation-delay: 0.4s;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
@keyframes bounce {
|
| 85 |
+
0%, 60%, 100% { transform: translateY(0); }
|
| 86 |
+
30% { transform: translateY(-10px); }
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
.message-transition {
|
| 90 |
+
transition: all 0.3s ease;
|
| 91 |
+
}
|
| 92 |
+
|
| 93 |
+
.neon-text {
|
| 94 |
+
text-shadow: 0 0 5px #60a5fa, 0 0 10px #60a5fa;
|
| 95 |
+
}
|
| 96 |
+
</style>
|
| 97 |
+
</head>
|
| 98 |
+
<body class="bg-gray-900 text-white min-h-screen flex flex-col overflow-hidden">
|
| 99 |
+
<header class="p-4 flex justify-between items-center bg-gray-800 bg-opacity-50">
|
| 100 |
+
<h1 class="text-2xl font-bold neon-text">Assistente de IA</h1>
|
| 101 |
+
<div class="flex space-x-4">
|
| 102 |
+
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-700 transition">
|
| 103 |
+
<i class="fas fa-moon"></i>
|
| 104 |
+
</button>
|
| 105 |
+
<button id="settings-btn" class="p-2 rounded-full hover:bg-gray-700 transition">
|
| 106 |
+
<i class="fas fa-cog"></i>
|
| 107 |
+
</button>
|
| 108 |
+
</div>
|
| 109 |
+
</header>
|
| 110 |
+
|
| 111 |
+
<main class="flex-grow flex flex-col items-center justify-center p-4 relative">
|
| 112 |
+
<!-- Avatar Container -->
|
| 113 |
+
<div id="avatar-container" class="relative w-64 h-64 flex items-center justify-center mb-8 avatar-float">
|
| 114 |
+
<!-- Outer Ring -->
|
| 115 |
+
<div class="absolute w-full h-full rounded-full border-2 border-blue-500 border-opacity-30 ring-rotate"></div>
|
| 116 |
+
|
| 117 |
+
<!-- Middle Ring -->
|
| 118 |
+
<div class="absolute w-3/4 h-3/4 rounded-full border-2 border-purple-500 border-opacity-30 ring-rotate" style="animation-direction: reverse;"></div>
|
| 119 |
+
|
| 120 |
+
<!-- Inner Ring -->
|
| 121 |
+
<div class="absolute w-1/2 h-1/2 rounded-full border-2 border-blue-400 border-opacity-50 ring-rotate" style="animation-duration: 15s;"></div>
|
| 122 |
+
|
| 123 |
+
<!-- Avatar Core -->
|
| 124 |
+
<div id="avatar-core" class="w-32 h-32 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center avatar-pulse glow">
|
| 125 |
+
<div class="w-24 h-24 rounded-full bg-blue-700 flex items-center justify-center">
|
| 126 |
+
<div class="w-16 h-16 rounded-full bg-blue-800 flex items-center justify-center">
|
| 127 |
+
<div class="w-8 h-8 rounded-full bg-blue-900"></div>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
|
| 132 |
+
<!-- Particles will be added here by JS -->
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<!-- Response Container -->
|
| 136 |
+
<div id="response-container" class="bg-gray-800 bg-opacity-70 rounded-lg p-4 max-w-2xl w-full min-h-32 mb-8 border border-gray-700 transition-all duration-300">
|
| 137 |
+
<div id="response-text" class="text-center">
|
| 138 |
+
<p class="text-gray-300">Olá! Eu sou seu assistente de IA. Como posso te ajudar hoje?</p>
|
| 139 |
+
</div>
|
| 140 |
+
|
| 141 |
+
<!-- Typing Indicator -->
|
| 142 |
+
<div id="typing-indicator" class="hidden mt-4 flex justify-center">
|
| 143 |
+
<div class="typing-indicator">
|
| 144 |
+
<span></span>
|
| 145 |
+
<span></span>
|
| 146 |
+
<span></span>
|
| 147 |
+
</div>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
| 150 |
+
|
| 151 |
+
<!-- Wave Visualization -->
|
| 152 |
+
<div id="wave-visualization" class="hidden h-16 w-full max-w-md flex items-end justify-center space-x-1 mb-4">
|
| 153 |
+
<div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0s;"></div>
|
| 154 |
+
<div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.1s;"></div>
|
| 155 |
+
<div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.2s;"></div>
|
| 156 |
+
<div class="w-2 h-10 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.3s;"></div>
|
| 157 |
+
<div class="w-2 h-8 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.4s;"></div>
|
| 158 |
+
<div class="w-2 h-6 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.5s;"></div>
|
| 159 |
+
<div class="w-2 h-4 bg-blue-400 rounded-t wave-animation" style="animation-delay: 0.6s;"></div>
|
| 160 |
+
</div>
|
| 161 |
+
</main>
|
| 162 |
+
|
| 163 |
+
<!-- Input Bar -->
|
| 164 |
+
<div class="p-4 bg-gray-800 bg-opacity-50 border-t border-gray-700">
|
| 165 |
+
<div class="max-w-3xl mx-auto flex items-center space-x-2">
|
| 166 |
+
<button id="voice-btn" class="p-3 rounded-full bg-blue-600 hover:bg-blue-700 transition">
|
| 167 |
+
<i class="fas fa-microphone"></i>
|
| 168 |
+
</button>
|
| 169 |
+
|
| 170 |
+
<div class="flex-grow relative">
|
| 171 |
+
<input id="user-input" type="text" placeholder="Digite sua mensagem..."
|
| 172 |
+
class="w-full bg-gray-700 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 173 |
+
|
| 174 |
+
<button id="send-btn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white">
|
| 175 |
+
<i class="fas fa-paper-plane"></i>
|
| 176 |
+
</button>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<button id="file-btn" class="p-3 rounded-full bg-gray-700 hover:bg-gray-600 transition">
|
| 180 |
+
<i class="fas fa-paperclip"></i>
|
| 181 |
+
</button>
|
| 182 |
+
</div>
|
| 183 |
+
|
| 184 |
+
<div id="voice-status" class="text-center mt-2 text-sm text-blue-400 hidden">
|
| 185 |
+
<i class="fas fa-circle animate-pulse"></i> Gravando...
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<!-- File Input (hidden) -->
|
| 190 |
+
<input type="file" id="file-input" class="hidden">
|
| 191 |
+
|
| 192 |
+
<script>
|
| 193 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 194 |
+
// Elements
|
| 195 |
+
const avatarCore = document.getElementById('avatar-core');
|
| 196 |
+
const avatarContainer = document.getElementById('avatar-container');
|
| 197 |
+
const userInput = document.getElementById('user-input');
|
| 198 |
+
const sendBtn = document.getElementById('send-btn');
|
| 199 |
+
const voiceBtn = document.getElementById('voice-btn');
|
| 200 |
+
const fileBtn = document.getElementById('file-btn');
|
| 201 |
+
const fileInput = document.getElementById('file-input');
|
| 202 |
+
const responseText = document.getElementById('response-text');
|
| 203 |
+
const typingIndicator = document.getElementById('typing-indicator');
|
| 204 |
+
const waveVisualization = document.getElementById('wave-visualization');
|
| 205 |
+
const voiceStatus = document.getElementById('voice-status');
|
| 206 |
+
const themeToggle = document.getElementById('theme-toggle');
|
| 207 |
+
const responseContainer = document.getElementById('response-container');
|
| 208 |
+
|
| 209 |
+
// State
|
| 210 |
+
let isListening = false;
|
| 211 |
+
let isDarkMode = true;
|
| 212 |
+
|
| 213 |
+
// Theme toggle
|
| 214 |
+
themeToggle.addEventListener('click', () => {
|
| 215 |
+
isDarkMode = !isDarkMode;
|
| 216 |
+
document.body.classList.toggle('bg-gray-100');
|
| 217 |
+
document.body.classList.toggle('text-gray-900');
|
| 218 |
+
document.body.classList.toggle('bg-gray-900');
|
| 219 |
+
document.body.classList.toggle('text-white');
|
| 220 |
+
|
| 221 |
+
themeToggle.innerHTML = isDarkMode ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
|
| 222 |
+
});
|
| 223 |
+
|
| 224 |
+
// Create particles
|
| 225 |
+
function createParticles() {
|
| 226 |
+
for (let i = 0; i < 20; i++) {
|
| 227 |
+
const particle = document.createElement('div');
|
| 228 |
+
particle.classList.add('particle');
|
| 229 |
+
|
| 230 |
+
// Random size
|
| 231 |
+
const size = Math.random() * 4 + 2;
|
| 232 |
+
particle.style.width = `${size}px`;
|
| 233 |
+
particle.style.height = `${size}px`;
|
| 234 |
+
|
| 235 |
+
// Random position
|
| 236 |
+
const angle = Math.random() * Math.PI * 2;
|
| 237 |
+
const distance = Math.random() * 100 + 50;
|
| 238 |
+
const x = Math.cos(angle) * distance;
|
| 239 |
+
const y = Math.sin(angle) * distance;
|
| 240 |
+
|
| 241 |
+
particle.style.left = `calc(50% + ${x}px)`;
|
| 242 |
+
particle.style.top = `calc(50% + ${y}px)`;
|
| 243 |
+
|
| 244 |
+
// Random animation
|
| 245 |
+
particle.style.animation = `float ${Math.random() * 6 + 3}s ease-in-out infinite`;
|
| 246 |
+
|
| 247 |
+
avatarContainer.appendChild(particle);
|
| 248 |
+
}
|
| 249 |
+
}
|
| 250 |
+
|
| 251 |
+
createParticles();
|
| 252 |
+
|
| 253 |
+
// Avatar pulse on interaction
|
| 254 |
+
function pulseAvatar() {
|
| 255 |
+
avatarCore.classList.remove('avatar-pulse');
|
| 256 |
+
void avatarCore.offsetWidth; // Trigger reflow
|
| 257 |
+
avatarCore.classList.add('avatar-pulse');
|
| 258 |
+
|
| 259 |
+
// Add glow effect
|
| 260 |
+
avatarCore.classList.add('glow-blue');
|
| 261 |
+
setTimeout(() => {
|
| 262 |
+
avatarCore.classList.remove('glow-blue');
|
| 263 |
+
}, 1000);
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
// Simulate typing
|
| 267 |
+
function showTyping() {
|
| 268 |
+
typingIndicator.classList.remove('hidden');
|
| 269 |
+
waveVisualization.classList.remove('hidden');
|
| 270 |
+
|
| 271 |
+
// Randomly pulse the avatar while typing
|
| 272 |
+
const typingInterval = setInterval(() => {
|
| 273 |
+
if (Math.random() > 0.7) {
|
| 274 |
+
pulseAvatar();
|
| 275 |
+
}
|
| 276 |
+
}, 1000);
|
| 277 |
+
|
| 278 |
+
return typingInterval;
|
| 279 |
+
}
|
| 280 |
+
|
| 281 |
+
// Simulate AI response
|
| 282 |
+
function simulateAIResponse(message) {
|
| 283 |
+
// Clear previous response
|
| 284 |
+
responseText.innerHTML = '';
|
| 285 |
+
|
| 286 |
+
// Show typing indicator
|
| 287 |
+
const typingInterval = showTyping();
|
| 288 |
+
|
| 289 |
+
// Generate a response after a delay
|
| 290 |
+
setTimeout(() => {
|
| 291 |
+
clearInterval(typingInterval);
|
| 292 |
+
typingIndicator.classList.add('hidden');
|
| 293 |
+
waveVisualization.classList.add('hidden');
|
| 294 |
+
|
| 295 |
+
// Sample responses
|
| 296 |
+
const responses = [
|
| 297 |
+
`Entendi que você disse: "${message}". Como posso te ajudar com isso?`,
|
| 298 |
+
`Interessante! "${message}" é um tópico fascinante. O que mais você gostaria de saber?`,
|
| 299 |
+
`Ótima pergunta! "${message}" pode ser abordado de várias maneiras. Vamos explorar juntos?`,
|
| 300 |
+
`Recebi sua mensagem: "${message}". Estou processando as melhores informações para você.`,
|
| 301 |
+
`"${message}" - isso me lembra algo importante. Deixe-me verificar meus conhecimentos...`
|
| 302 |
+
];
|
| 303 |
+
|
| 304 |
+
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
|
| 305 |
+
|
| 306 |
+
// Animate the response
|
| 307 |
+
let i = 0;
|
| 308 |
+
const speed = 30; // milliseconds per character
|
| 309 |
+
|
| 310 |
+
function typeWriter() {
|
| 311 |
+
if (i < randomResponse.length) {
|
| 312 |
+
responseText.innerHTML += randomResponse.charAt(i);
|
| 313 |
+
i++;
|
| 314 |
+
|
| 315 |
+
// Pulse avatar with some words
|
| 316 |
+
if (randomResponse.charAt(i) === ' ' || i % 10 === 0) {
|
| 317 |
+
if (Math.random() > 0.7) {
|
| 318 |
+
pulseAvatar();
|
| 319 |
+
}
|
| 320 |
+
}
|
| 321 |
+
|
| 322 |
+
setTimeout(typeWriter, speed);
|
| 323 |
+
} else {
|
| 324 |
+
// Final pulse
|
| 325 |
+
pulseAvatar();
|
| 326 |
+
}
|
| 327 |
+
}
|
| 328 |
+
|
| 329 |
+
typeWriter();
|
| 330 |
+
|
| 331 |
+
// Animate container
|
| 332 |
+
responseContainer.classList.add('glow-purple');
|
| 333 |
+
setTimeout(() => {
|
| 334 |
+
responseContainer.classList.remove('glow-purple');
|
| 335 |
+
}, 1000);
|
| 336 |
+
|
| 337 |
+
}, 2000 + Math.random() * 2000);
|
| 338 |
+
}
|
| 339 |
+
|
| 340 |
+
// Handle send button
|
| 341 |
+
sendBtn.addEventListener('click', () => {
|
| 342 |
+
const message = userInput.value.trim();
|
| 343 |
+
if (message) {
|
| 344 |
+
pulseAvatar();
|
| 345 |
+
simulateAIResponse(message);
|
| 346 |
+
userInput.value = '';
|
| 347 |
+
}
|
| 348 |
+
});
|
| 349 |
+
|
| 350 |
+
// Handle enter key
|
| 351 |
+
userInput.addEventListener('keypress', (e) => {
|
| 352 |
+
if (e.key === 'Enter') {
|
| 353 |
+
const message = userInput.value.trim();
|
| 354 |
+
if (message) {
|
| 355 |
+
pulseAvatar();
|
| 356 |
+
simulateAIResponse(message);
|
| 357 |
+
userInput.value = '';
|
| 358 |
+
}
|
| 359 |
+
}
|
| 360 |
+
});
|
| 361 |
+
|
| 362 |
+
// Handle voice button
|
| 363 |
+
voiceBtn.addEventListener('click', () => {
|
| 364 |
+
isListening = !isListening;
|
| 365 |
+
|
| 366 |
+
if (isListening) {
|
| 367 |
+
voiceBtn.classList.remove('bg-blue-600');
|
| 368 |
+
voiceBtn.classList.add('bg-red-600');
|
| 369 |
+
voiceBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>';
|
| 370 |
+
voiceStatus.classList.remove('hidden');
|
| 371 |
+
|
| 372 |
+
// Simulate listening with random pulses
|
| 373 |
+
const listenInterval = setInterval(() => {
|
| 374 |
+
pulseAvatar();
|
| 375 |
+
}, 800 + Math.random() * 1000);
|
| 376 |
+
|
| 377 |
+
// Stop after random time (simulating user speaking)
|
| 378 |
+
setTimeout(() => {
|
| 379 |
+
clearInterval(listenInterval);
|
| 380 |
+
voiceBtn.click(); // Toggle off
|
| 381 |
+
|
| 382 |
+
// Simulate a random message
|
| 383 |
+
const phrases = [
|
| 384 |
+
"Como posso configurar meu dispositivo?",
|
| 385 |
+
"Quais são as notícias mais recentes?",
|
| 386 |
+
"Me explique sobre inteligência artificial",
|
| 387 |
+
"Qual é a previsão do tempo para amanhã?",
|
| 388 |
+
"Como fazer um bolo de chocolate?"
|
| 389 |
+
];
|
| 390 |
+
|
| 391 |
+
const randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];
|
| 392 |
+
simulateAIResponse(randomPhrase);
|
| 393 |
+
}, 3000 + Math.random() * 4000);
|
| 394 |
+
|
| 395 |
+
} else {
|
| 396 |
+
voiceBtn.classList.add('bg-blue-600');
|
| 397 |
+
voiceBtn.classList.remove('bg-red-600');
|
| 398 |
+
voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
|
| 399 |
+
voiceStatus.classList.add('hidden');
|
| 400 |
+
}
|
| 401 |
+
});
|
| 402 |
+
|
| 403 |
+
// Handle file button
|
| 404 |
+
fileBtn.addEventListener('click', () => {
|
| 405 |
+
fileInput.click();
|
| 406 |
+
});
|
| 407 |
+
|
| 408 |
+
fileInput.addEventListener('change', (e) => {
|
| 409 |
+
if (fileInput.files.length > 0) {
|
| 410 |
+
pulseAvatar();
|
| 411 |
+
const fileName = fileInput.files[0].name;
|
| 412 |
+
simulateAIResponse(`Recebi o arquivo: ${fileName}. O que você gostaria que eu faça com ele?`);
|
| 413 |
+
}
|
| 414 |
+
});
|
| 415 |
+
|
| 416 |
+
// Initial animation
|
| 417 |
+
setTimeout(() => {
|
| 418 |
+
pulseAvatar();
|
| 419 |
+
}, 1000);
|
| 420 |
+
});
|
| 421 |
+
</script>
|
| 422 |
+
<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=n-gusion/nova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 423 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Descrição da Interface do Assistente de IA Representação Gráfica do Assistente Posição e Estilo: O assistente será exibido no centro da tela como uma representação gráfica impressionante. Pode ser: Um avatar 3D futurista, como uma figura humanoide elegante com traços suaves e detalhes tecnológicos (ex.: pele metálica brilhante ou contornos luminosos). Uma forma abstrata, como uma esfera giratória com anéis pulsantes ou uma rede de partículas interconectadas que lembram uma inteligência viva. Um design que combine minimalismo e sofisticação, com uma estética futurista que remete a filmes de ficção científica. Visual Atraente: Use uma paleta de cores moderna, como tons de azul escuro, preto brilhante e branco puro, com detalhes em neon (azul, roxo ou verde) para dar um toque vibrante e tecnológico. Adicione efeitos visuais como reflexos sutis, brilhos suaves e transições fluidas para torná-lo visualmente deslumbrante. Animações Dinâmicas: "Batidas da Música" Quando o Usuário Fala ou Digita: Assim que o usuário começa a se comunicar (seja por voz ou texto), o assistente "mexe" em tempo real, como se estivesse reagindo às "batidas exatas" da interação: Ondas visíveis: Linhas ou círculos que se expandem a partir do centro, sincronizados com o ritmo da voz ou da digitação. Pulsações: O avatar ou a forma gráfica pulsa ou vibra, ajustando sua intensidade conforme a entonação ou velocidade da fala. Partículas: Pequenos pontos ou linhas que dançam ao redor do assistente, como uma visualização musical. Quando o Assistente Responde: Ao "falar" a resposta, o assistente se anima como se estivesse performando uma música: Se for um avatar, ele pode mover a boca ou inclinar a cabeça em sincronia com a voz. Se for uma forma abstrata, ela pode girar, pulsar ou emitir luzes que acompanham cada palavra, como um equalizador visual. As animações serão suaves e precisas, refletindo o tom e o ritmo da resposta, criando a sensação de uma "conversa musical" visualmente cativante. Barra de Interação Localização e Design: Na parte inferior da tela, haverá uma barra discreta, elegante e funcional, projetada para não competir com o visual central do assistente. A barra terá um estilo minimalista, com bordas suaves e uma leve transparência para manter a estética futurista. Componentes: Campo de Texto: Um espaço onde o usuário pode digitar sua solicitação, caso prefira não usar o microfone. Botão de Envio: Um ícone simples (como uma seta ou "Enviar") para processar o texto digitado. Botão de Envio de Arquivos: Representado por um ícone de clipe ou upload, permitindo que o usuário selecione e envie arquivos (ex.: documentos, imagens) para o assistente analisar e responder. Funcionalidades Principais Interação por Voz e Texto: O usuário pode alternar facilmente entre falar e digitar. Um ícone de microfone na barra ativa o modo de voz, enquanto o campo de texto já estará pronto para uso. Processamento de Arquivos: Ao clicar no botão de envio de arquivos, o usuário pode fazer upload de um arquivo, e o assistente o processará, oferecendo uma resposta baseada no conteúdo (ex.: resumo de um texto, análise de uma imagem). Feedback Visual: O assistente dará sinais claros do que está acontecendo: Um halo ou brilho ao redor da figura enquanto "ouve". Uma animação de "pensamento" (como uma rotação ou pulsação) enquanto processa. Movimentos de "fala" sincronizados com a resposta. Integração Técnica Backend: A interface será conectada a uma API robusta (como a do Groq) para processar as entradas do usuário (voz, texto ou arquivos) e gerar respostas rápidas e inteligentes. Tecnologias: Frontend: Use React ou Vue.js com Three.js (para animações 3D) ou GSAP (para animações 2D), garantindo fluidez e responsividade. Voz: Integre reconhecimento de fala (ex.: Google Speech-to-Text) e síntese de voz (ex.: Amazon Polly), ambos configurados para pt-BR. Performance: As animações serão otimizadas para não causar atrasos, e as respostas do assistente serão quase instantâneas, aproveitando a velocidade da API. Experiência do Usuário Intuitiva: A interface será fácil de usar, com controles claros e um design que convida à interação. Personalização: O usuário poderá escolher entre diferentes estilos de avatar ou temas visuais (ex.: cores, formas). Acessibilidade: Navegação por teclado e compatibilidade com leitores de tela serão garantidas. Toque Final O assistente terá uma personalidade amigável e envolvente, com respostas inteligentes e um leve toque de humor brasileiro, tornando a interação divertida e natural. Tudo será em Português do Brasil, desde os textos da interface até as respostas faladas, com suporte a regionalismos para uma experiência autêntica.
|