Spaces:

zogbe
/

hht

Running

App Files Files Community

hht / index.html

zogbe

crée moi un IA dynamique prêt aux déploient sur le web et a héberger - Initial Deployment

8411cc6 verified 12 months ago

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>