Hugging Face's logo

Spaces:
zogbe
/
hht
Running

App Files Community
hht / index.html
zogbe's picture
zogbe
crée moi un IA dynamique prêt aux déploient sur le web et a héberger - Initial Deployment
8411cc6 verified
raw
history blame contribute delete
26.8 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assistant IA Dynamique</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.typing-indicator {
display: flex;
align-items: center;
}
.typing-dot {
width: 8px;
height: 8px;
background-color: #4f46e5;
border-radius: 50%;
margin: 0 2px;
animation: pulse 1.5s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
/* Animation d'entrée des messages */
@keyframes messageIn {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.message {
animation: messageIn 0.3s ease-out;
}
/* Thèmes */
:root {
--primary-bg: #f3f4f6;
--secondary-bg: #ffffff;
--primary-text: #111827;
--secondary-text: #6b7280;
--accent-color: #4f46e5;
}
[data-theme="dark"] {
--primary-bg: #1f2937;
--secondary-bg: #111827;
--primary-text: #f9fafb;
--secondary-text: #d1d5db;
--accent-color: #818cf8;
}
[data-theme="blue"] {
--primary-bg: #e0f2fe;
--secondary-bg: #ffffff;
--primary-text: #0c4a6e;
--secondary-text: #0369a1;
--accent-color: #0284c7;
}
body {
background-color: var(--primary-bg);
color: var(--primary-text);
transition: background-color 0.3s, color 0.3s;
}
.card {
background-color: var(--secondary-bg);
transition: background-color 0.3s;
}
.text-secondary {
color: var(--secondary-text);
transition: color 0.3s;
}
.btn-primary {
background-color: var(--accent-color);
transition: background-color 0.3s;
}
/* Transitions fluides */
* {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Optimisation mobile */
@media (max-width: 640px) {
.chat-container {
height: calc(100vh - 160px) !important;
}
.input-container {
flex-direction: column;
}
.input-container button {
width: 100%;
margin-top: 0.5rem;
margin-left: 0 !important;
}
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- En-tête -->
<header class="bg-indigo-600 text-white p-4 shadow-md flex justify-between items-center">
<div class="flex items-center space-x-3">
<i class="fas fa-robot text-2xl"></i>
<h1 class="text-xl font-bold">Assistant IA</h1>
<div class="flex items-center space-x-1 ml-2">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<span class="text-xs">En ligne</span>
</div>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-indigo-500 transition">
<i class="fas fa-moon"></i>
</button>
<div class="relative">
<button id="settings-btn" class="p-2 rounded-full hover:bg-indigo-500 transition">
<i class="fas fa-cog"></i>
</button>
<div id="settings-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
<div class="px-4 py-2 border-b border-gray-200">
<p class="text-sm font-medium text-gray-700">Thèmes</p>
</div>
<button data-theme="light" class="theme-option w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
<i class="fas fa-sun mr-2 text-yellow-500"></i> Clair
</button>
<button data-theme="dark" class="theme-option w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
<i class="fas fa-moon mr-2 text-indigo-500"></i> Sombre
</button>
<button data-theme="blue" class="theme-option w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center">
<i class="fas fa-palette mr-2 text-blue-500"></i> Bleu
</button>
</div>
</div>
</div>
</header>
<!-- Contenu principal -->
<main class="flex-grow container mx-auto p-4 flex flex-col md:flex-row gap-6 max-w-6xl">
<!-- Section d'information sur l'IA -->
<div class="w-full md:w-1/4 card p-6 rounded-lg shadow-md hidden md:block">
<div class="text-center mb-4">
<div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3">
<i class="fas fa-robot text-3xl text-indigo-600"></i>
</div>
<h3 class="font-bold text-lg">Assistant Virtuel</h3>
<p class="text-secondary text-sm">Version 2.0.1</p>
</div>
<div class="space-y-4">
<div>
<h4 class="font-semibold flex items-center">
<i class="fas fa-bolt text-yellow-500 mr-2"></i>
Fonctionnalités
</h4>
<ul class="mt-2 space-y-2 text-sm text-secondary">
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2 text-xs"></i>
Réponses intelligentes
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2 text-xs"></i>
Multilingue
</li>
<li class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-2 text-xs"></i>
Apprentissage continu
</li>
</ul>
</div>
<div>
<h4 class="font-semibold flex items-center">
<i class="fas fa-chart-line text-blue-500 mr-2"></i>
Statistiques
</h4>
<div class="mt-2 grid grid-cols-2 gap-3">
<div class="text-center p-2 bg-gray-100 rounded">
<p class="text-xs text-secondary">Messages</p>
<p class="font-bold" id="message-count">0</p>
</div>
<div class="text-center p-2 bg-gray-100 rounded">
<p class="text-xs text-secondary">Utilisateurs</p>
<p class="font-bold">1</p>
</div>
</div>
</div>
<div>
<h4 class="font-semibold flex items-center">
<i class="fas fa-terminal text-purple-500 mr-2"></i>
API Status
</h4>
<div class="mt-2 flex items-center space-x-2">
<div id="api-status-indicator" class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm text-secondary">Connecté</span>
</div>
</div>
</div>
</div>
<!-- Zone de chat -->
<div class="w-full md:w-3/4 card rounded-lg shadow-md flex flex-col h-[70vh]">
<!-- En-tête du chat -->
<div class="border-b border-gray-200 p-4 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
<i class="fas fa-user-headset text-indigo-600"></i>
</div>
<h3 class="font-bold">Conversation</h3>
</div>
<button id="clear-chat" class="text-red-500 hover:text-red-700 text-sm flex items-center">
<i class="fas fa-trash-alt mr-1"></i>
<span class="hidden md:inline">Effacer</span>
</button>
</div>
<!-- Messages du chat -->
<div id="chat-container" class="flex-grow overflow-y-auto p-4 space-y-4">
<!-- Message d'accueil -->
<div class="message p-4 bg-indigo-50 rounded-lg max-w-[80%] md:max-w-[70%] self-start">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-indigo-200 rounded-full flex-shrink-0 flex items-center justify-center">
<i class="fas fa-robot text-indigo-700 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-indigo-800">Assistant IA</p>
<p class="text-secondary text-sm mt-1">
Bonjour ! Je suis votre assistant virtuel. Posez-moi des questions ou demandez-moi de l'aide pour n'importe quel sujet. Comment puis-je vous aider aujourd'hui ?
</p>
</div>
</div>
</div>
</div>
<!-- Zone de saisie -->
<div class="border-t border-gray-200 p-4">
<div id="input-container" class="input-container flex">
<input
type="text"
id="user-input"
placeholder="Écrivez votre message..."
class="flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
autocomplete="off"
>
<button
id="send-btn"
class="ml-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center"
>
<i class="fas fa-paper-plane mr-2"></i>
<span class="hidden md:inline">Envoyer</span>
</button>
</div>
<div id="suggestions" class="mt-2 flex flex-wrap gap-2 hidden">
<small class="text-secondary">Suggestions :</small>
<button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full">
Quel est ton rôle ?
</button>
<button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full">
Peux-tu m'aider ?
</button>
<button class="suggestion-btn text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full">
Comment fonctionnes-tu ?
</button>
</div>
</div>
</div>
</main>
<!-- Pied de page -->
<footer class="bg-gray-50 p-4 text-center text-secondary text-sm">
<p>© 2023 Assistant IA Dynamique. Tous droits réservés.</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Références aux éléments DOM
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const clearChatBtn = document.getElementById('clear-chat');
const messageCount = document.getElementById('message-count');
const themeToggle = document.getElementById('theme-toggle');
const settingsBtn = document.getElementById('settings-btn');
const settingsMenu = document.getElementById('settings-menu');
const themeOptions = document.querySelectorAll('.theme-option');
const suggestions = document.getElementById('suggestions');
const suggestionBtns = document.querySelectorAll('.suggestion-btn');
let messageCounter = 0;
let currentTheme = 'light';
// Détection de la préférence de thème du système
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
}
// Gestion des thèmes
themeToggle.addEventListener('click', () => {
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
});
themeOptions.forEach(option => {
option.addEventListener('click', () => {
const theme = option.getAttribute('data-theme');
setTheme(theme);
settingsMenu.classList.add('hidden');
});
});
function setTheme(theme) {
currentTheme = theme;
document.documentElement.setAttribute('data-theme', theme);
// Mise à jour de l'icône du bouton
const icon = theme === 'dark' ? 'fa-sun' : 'fa-moon';
themeToggle.innerHTML = `<i class="fas ${icon}"></i>`;
// Changer la couleur du header pour le thème sombre
const header = document.querySelector('header');
if (theme === 'dark') {
header.classList.remove('bg-indigo-600');
header.classList.add('bg-gray-800');
} else {
header.classList.remove('bg-gray-800');
header.classList.add('bg-indigo-600');
}
// Sauvegarder la préférence
localStorage.setItem('theme', theme);
}
// Menu des paramètres
settingsBtn.addEventListener('click', () => {
settingsMenu.classList.toggle('hidden');
});
// Fermer le menu des paramètres lorsqu'on clique ailleurs
document.addEventListener('click', (e) => {
if (!settingsBtn.contains(e.target) && !settingsMenu.contains(e.target)) {
settingsMenu.classList.add('hidden');
}
});
// Envoyer un message lors du clic sur le bouton
sendBtn.addEventListener('click', sendMessage);
// Envoyer un message avec la touche Entrée
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
// Suggestions automatiques
userInput.addEventListener('focus', () => {
suggestions.classList.remove('hidden');
});
userInput.addEventListener('blur', () => {
// Petit délai pour permettre le clic sur une suggestion
setTimeout(() => {
suggestions.classList.add('hidden');
}, 200);
});
// Remplir l'input avec la suggestion cliquée
suggestionBtns.forEach(btn => {
btn.addEventListener('click', () => {
userInput.value = btn.textContent.trim();
userInput.focus();
});
});
// Effacer le chat
clearChatBtn.addEventListener('click', clearChat);
// Simuler l'état de l'API
setInterval(() => {
const apiStatus = document.getElementById('api-status-indicator');
// 5% de chance que l'API semble déconnectée (pour la démo)
if (Math.random() < 0.05) {
apiStatus.classList.remove('bg-green-500');
apiStatus.classList.add('bg-red-500');
setTimeout(() => {
apiStatus.classList.remove('bg-red-500');
apiStatus.classList.add('bg-green-500');
}, 2000);
}
}, 10000);
// Fonction pour envoyer un message
function sendMessage() {
const message = userInput.value.trim();
if (message === '') return;
// Ajouter le message de l'utilisateur
addUserMessage(message);
// Effacer le champ de saisie
userInput.value = '';
// Simulation de l'IA qui tape
showTypingIndicator();
// Réponse de l'IA après un délai
setTimeout(() => {
removeTypingIndicator();
const response = getAIResponse(message);
addAIMessage(response);
// Incrémenter le compteur de messages
messageCounter += 2; // user + AI
messageCount.textContent = messageCounter;
// Faire défiler vers le bas
chatContainer.scrollTop = chatContainer.scrollHeight;
}, 1000 + Math.random() * 2000); // Délai aléatoire entre 1 et 3 secondes
}
// Fonction pour ajouter un message utilisateur
function addUserMessage(message) {
const messageElement = document.createElement('div');
messageElement.className = 'message p-4 bg-indigo-100 rounded-lg max-w-[80%] md:max-w-[70%] self-end ml-auto';
messageElement.innerHTML = `
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-indigo-300 rounded-full flex-shrink-0 flex items-center justify-center">
<i class="fas fa-user text-indigo-800 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-indigo-800">Vous</p>
<p class="text-secondary text-sm mt-1">${message}</p>
</div>
</div>
`;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// Fonction pour ajouter un message de l'IA
function addAIMessage(message) {
const messageElement = document.createElement('div');
messageElement.className = 'message p-4 bg-indigo-50 rounded-lg max-w-[80%] md:max-w-[70%] self-start';
messageElement.innerHTML = `
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-indigo-200 rounded-full flex-shrink-0 flex items-center justify-center">
<i class="fas fa-robot text-indigo-700 text-sm"></i>
</div>
<div>
<p class="text-sm font-medium text-indigo-800">Assistant IA</p>
<p class="text-secondary text-sm mt-1">${message}</p>
</div>
</div>
`;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// Fonction pour afficher l'indicateur de saisie
function showTypingIndicator() {
const typingElement = document.createElement('div');
typingElement.className = 'message p-4 bg-indigo-50 rounded-lg max-w-[80%] md:max-w-[70%] self-start typing-indicator-message';
typingElement.innerHTML = `
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-indigo-200 rounded-full flex-shrink-0 flex items-center justify-center">
<i class="fas fa-robot text-indigo-700 text-sm"></i>
</div>
<div class="typing-indicator">
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
</div>
</div>
`;
chatContainer.appendChild(typingElement);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// Fonction pour supprimer l'indicateur de saisie
function removeTypingIndicator() {
const typingElement = chatContainer.querySelector('.typing-indicator-message');
if (typingElement) {
typingElement.remove();
}
}
// Fonction pour effacer le chat
function clearChat() {
chatContainer.innerHTML = '';
messageCounter = 0;
messageCount.textContent = '0';
// Réinitialiser avec le message d'accueil
addAIMessage('Bonjour ! Je suis votre assistant virtuel. Posez-moi des questions ou demandez-moi de l\'aide pour n\'importe quel sujet. Comment puis-je vous aider aujourd\'hui ?');
messageCounter = 1;
messageCount.textContent = '1';
}
// Fonction pour générer des réponses de l'IA (simplifiée)
function getAIResponse(userMessage) {
const lowerMessage = userMessage.toLowerCase();
// Réponses prédéfinies
if (lowerMessage.includes('bonjour') || lowerMessage.includes('salut')) {
return 'Bonjour ! Comment puis-je vous aider aujourd\'hui ?';
} else if (lowerMessage.includes('merci')) {
return 'Je vous en prie ! N\'hésitez pas si vous avez d\'autres questions.';
} else if (lowerMessage.includes('qui es-tu') || lowerMessage.includes('ton rôle')) {
return 'Je suis un assistant virtuel intelligent conçu pour répondre à vos questions et vous aider avec diverses tâches.';
} else if (lowerMessage.includes('aide') || lowerMessage.includes('assistance')) {
return 'Bien sûr, je peux vous aider. Pouvez-vous préciser votre demande ?';
} else if (lowerMessage.includes('temps') || lowerMessage.includes('météo')) {
return 'Je ne peux pas vérifier la météo en temps réel, mais je peux vous donner des conseils généraux selon la saison.';
} else if (lowerMessage.includes('blague') || lowerMessage.includes('rire')) {
const jokes = [
'Pourquoi les livres ont-ils toujours chaud ? Parce qu\'ils ont une couverture !',
'Que dit une mère à son fils geek quand le dîner est servi ? Alt Tab !',
'Comment appelle-t-on un magicien qui a perdu ses pouvoirs ? Un magicien-diable !'
];
return jokes[Math.floor(Math.random() * jokes.length)];
} else if (lowerMessage.includes('date') || lowerMessage.includes('heure')) {
const now = new Date();
return `Nous sommes le ${now.toLocaleDateString('fr-FR')} et il est ${now.toLocaleTimeString('fr-FR', {hour: '2-digit', minute:'2-digit'})}.`;
} else {
// Si le message ne correspond à aucun motif spécifique
const randomResponses = [
'Je comprends. Pouvez-vous développer votre question ?',
'C\'est une question intéressante. Voici ce que je peux vous dire à ce sujet...',
'Je vais traiter votre demande et vous fournir la meilleure réponse possible.',
'Merci pour votre question. Pourriez-vous me donner plus de détails ?',
'J\'ai bien noté votre demande. Je vais y répondre dès que possible.'
];
return randomResponses[Math.floor(Math.random() * randomResponses.length)];
}
}
// Initialisation du compteur de messages
messageCount.textContent = '1'; // Message d'accueil initial
});
</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=zogbe/hht" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>