Spaces:

sam-bottes
/

morphoweb-3d-architect

Running

App Files Files Community

morphoweb-3d-architect / pro.html

sam-bottes

Fonctionnalités de l'IA Apprenante Multi-Niveaux :

42b15fe verified 9 months ago

Raw

History Blame Contribute Delete

21.7 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MorphoWeb 3D - Ingénieur Hybride</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
	<style>
	#preview-container {
	background-color: #f3f4f6;
	border-radius: 0.5rem;
	height: 600px;
	position: relative;
	overflow: hidden;
	}
	#code-editor {
	height: 600px;
	font-family: 'Fira Code', monospace;
	font-size: 14px;
	}
	.code-tab {
	border-bottom: 2px solid transparent;
	transition: all 0.2s;
	}
	.code-tab.active {
	border-bottom-color: #6366f1;
	color: #6366f1;
	}
	.element-highlight {
	box-shadow: 0 0 0 2px #6366f1;
	}
	</style>
	</head>
	<body class="bg-gray-100">
	<div class="flex h-screen">
	<!-- Sidebar -->
	<div class="w-64 bg-white shadow-md p-4 overflow-y-auto">
	<div class="flex items-center mb-6">
	<i data-feather="layers" class="text-purple-600 mr-2"></i>
	<h2 class="text-xl font-bold">Composants</h2>
	</div>

	<div class="space-y-3">
	<div class="element-draggable p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer" draggable="true" data-type="header">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
	<i data-feather="type" class="text-indigo-600 w-4 h-4"></i>
	</div>
	<span>En-tête</span>
	</div>
	</div>

	<div class="element-draggable p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer" draggable="true" data-type="form">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
	<i data-feather="edit-3" class="text-green-600 w-4 h-4"></i>
	</div>
	<span>Formulaire</span>
	</div>
	</div>

	<div class="element-draggable p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer" draggable="true" data-type="carousel">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
	<i data-feather="image" class="text-blue-600 w-4 h-4"></i>
	</div>
	<span>Carousel</span>
	</div>
	</div>

	<div class="element-draggable p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer" draggable="true" data-type="api">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
	<i data-feather="cloud" class="text-purple-600 w-4 h-4"></i>
	</div>
	<span>Connecteur API</span>
	</div>
	</div>
	</div>

	<div class="mt-8">
	<h3 class="font-medium mb-2 flex items-center">
	<i data-feather="code" class="w-4 h-4 mr-2"></i>
	Modèles de Code
	</h3>
	<div class="text-sm text-gray-600 space-y-2">
	<button class="code-snippet w-full text-left p-2 hover:bg-gray-100 rounded" data-snippet="form">Formulaire de Contact</button>
	<button class="code-snippet w-full text-left p-2 hover:bg-gray-100 rounded" data-snippet="gallery">Galerie d'Images</button>
	<button class="code-snippet w-full text-left p-2 hover:bg-gray-100 rounded" data-snippet="navbar">Menu de Navigation</button>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 flex flex-col">
	<!-- Toolbar -->
	<div class="bg-white shadow-sm p-3 flex items-center justify-between">
	<div class="flex items-center space-x-4">
	<h1 class="font-bold text-lg">Ingénieur Hybride</h1>
	<div class="flex items-center text-sm bg-purple-50 text-purple-700 px-3 py-1 rounded-full">
	<i data-feather="layers" class="w-4 h-4 mr-1"></i>
	<span>Niveau 2 - IA Technique ⚙️</span>
	</div>
	</div>

	<div class="flex space-x-3">
	<button class="flex items-center px-3 py-1 bg-gray-100 rounded-md text-sm hover:bg-gray-200">
	<i data-feather="eye" class="w-4 h-4 mr-1"></i>
	Prévisualiser
	</button>
	<button class="flex items-center px-3 py-1 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700">
	<i data-feather="download" class="w-4 h-4 mr-1"></i>
	Exporter
	</button>
	</div>
	</div>

	<!-- Dual Panels -->
	<div class="flex-1 flex overflow-hidden">
	<!-- Code Editor -->
	<div class="w-1/2 border-r border-gray-200 flex flex-col">
	<div class="bg-gray-50 border-b border-gray-200 flex">
	<button class="code-tab px-4 py-2 active" data-tab="html">HTML</button>
	<button class="code-tab px-4 py-2" data-tab="css">CSS</button>
	<button class="code-tab px-4 py-2" data-tab="js">JavaScript</button>
	</div>
	<div id="code-editor" class="flex-1 bg-white p-4 overflow-auto">
	<!-- Monaco Editor would be initialized here in production -->
	<pre id="html-code" class="block"><code><!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mon Site</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<header class="header">
	<h1>Bienvenue</h1>
	</header>
	<main>
	<p>Contenu principal</p>
	</main>
	<script src="script.js"></script>
	</body>
	</html></code></pre>
	<pre id="css-code" class="hidden"><code>.header {
	background-color: #6366f1;
	color: white;
	padding: 2rem;
	text-align: center;
	}

	body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	}</code></pre>
	<pre id="js-code" class="hidden"><code>// Initialisation du site
	document.addEventListener('DOMContentLoaded', () => {
	console.log('Site prêt !');
	});</code></pre>
	</div>
	</div>

	<!-- Visual Preview -->
	<div class="w-1/2 flex flex-col">
	<div class="bg-gray-50 border-b border-gray-200 p-2 flex justify-center">
	<div class="text-sm bg-white px-3 py-1 rounded-full shadow-sm">
	<i data-feather="monitor" class="w-4 h-4 mr-1 inline"></i>
	<span>Visualisation</span>
	</div>
	</div>
	<div id="preview-container" class="flex-1">
	<!-- Preview content will be rendered here -->
	<div class="header" style="background-color: #6366f1; color: white; padding: 2rem; text-align: center;">
	<h1>Bienvenue</h1>
	</div>
	<div style="padding: 2rem;">
	<p>Contenu principal</p>
	</div>
	</div>
	</div>
	</div>

	<!-- AI Assistant Chat -->
	<div class="bg-white border-t border-gray-200 h-64 flex flex-col">
	<div class="p-3 border-b border-gray-200 flex items-center bg-gray-50">
	<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
	<i data-feather="cpu" class="text-purple-600 w-4 h-4"></i>
	</div>
	<h3 class="font-medium">Assistant IA Codex</h3>
	<button class="ml-auto text-gray-500 hover:text-gray-700">
	<i data-feather="minimize-2" class="w-4 h-4"></i>
	</button>
	</div>

	<div id="chat-messages" class="flex-1 p-4 overflow-y-auto">
	<div class="chat-message ai-message">
	<p>Bonjour ! Je suis votre IA Technique ⚙️ (Niveau 2). Je peux vous aider avec :</p>
	<ul class="list-disc pl-5 mt-2 space-y-1">
	<li>Génération de code optimisé</li>
	<li>Solutions techniques avancées</li>
	<li>Correction d'erreurs et optimisation</li>
	<li>Intégration d'API et services</li>
	</ul>
	<p class="mt-2">Je mémorise vos préférences techniques et m'améliore à chaque interaction.</p>
	</div>
	</div>
	<div class="p-3 border-t border-gray-200 flex flex-col space-y-3">
	<div class="flex">
	<input type="text"
	placeholder="Ex: 'Formulaire de connexion sécurisé avec validation'"
	class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
	<button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700">
	<i data-feather="send" class="w-4 h-4"></i>
	</button>
	</div>
	<div class="flex space-x-2">
	<button class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded" data-prompt="Optimise ce code pour les performances">
	Optimisation
	</button>
	<button class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded" data-prompt="Génère un composant React sécurisé">
	React Secure
	</button>
	<button class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded" data-prompt="Crée une architecture microservices">
	Architecture
	</button>
	<button class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded" data-prompt="Intègre une API REST sécurisée">
	API Secure
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	feather.replace();

	// Switch between code tabs
	document.querySelectorAll('.code-tab').forEach(tab => {
	tab.addEventListener('click', () => {
	document.querySelectorAll('.code-tab').forEach(t => t.classList.remove('active'));
	tab.classList.add('active');

	document.querySelectorAll('#code-editor pre').forEach(pre => {
	pre.classList.add('hidden');
	});

	document.getElementById(`${tab.dataset.tab}-code`).classList.remove('hidden');
	});
	});

	// Handle code snippets
	document.querySelectorAll('.code-snippet').forEach(btn => {
	btn.addEventListener('click', () => {
	const snippet = btn.dataset.snippet;
	let html = '', css = '', js = '';
	// AI-powered code generation examples
	switch(snippet) {
	case 'ai-form':
	html = `<!-- Généré par IA - Formulaire intelligent -->
	<form id="smart-form" class="ai-generated">
	<h3 class="ai-title">${promptResult.title \|\| 'Formulaire Intelligent'}</h3>
	${promptResult.fields.map(f => `
	<div class="ai-field">
	<label>${f.label}</label>
	<input type="${f.type}" placeholder="${f.placeholder}">
	</div>`).join('')}
	<button type="submit" class="ai-submit">Envoyer</button>
	</form>`;
	css = `/* CSS généré par IA */
	.ai-generated {
	max-width: 600px;
	margin: 2rem auto;
	padding: 2rem;
	background: #f8fafc;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.ai-title {
	color: #334155;
	margin-bottom: 1.5rem;
	text-align: center;
	}

	.ai-field {
	margin-bottom: 1.2rem;
	}

	.ai-field label {
	display: block;
	margin-bottom: 0.5rem;
	color: #64748b;
	}

	.ai-field input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	transition: all 0.2s;
	}

	.ai-field input:focus {
	border-color: #6366f1;
	outline: none;
	box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
	}

	.ai-submit {
	background: #6366f1;
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
	}

	.ai-submit:hover {
	background: #4f46e5;
	}`;
	js = `// JavaScript généré par IA
	document.getElementById('smart-form').addEventListener('submit', async (e) => {
	e.preventDefault();

	// Validation intelligente
	const errors = [];
	${promptResult.fields.map(f => `
	if (!e.target.elements['${f.name}'].value) {
	errors.push('Le champ ${f.label} est requis');
	}`).join('')}

	if (errors.length) {
	alert(errors.join('\\n'));
	return;
	}

	// Envoi des données
	try {
	const response = await fetch('${promptResult.apiEndpoint \|\| '/api/submit'}', {
	method: 'POST',
	body: new FormData(e.target)
	});

	if (response.ok) {
	alert('Formulaire soumis avec succès !');
	e.target.reset();
	} else {
	throw new Error('Erreur lors de l\'envoi');
	}
	} catch (error) {
	alert('Une erreur est survenue: ' + error.message);
	}
	});`;
	break;
	case 'snippet':
	case 'form':
	html = `<form class="contact-form">
	<div class="form-group">
	<label for="name">Nom</label>
	<input type="text" id="name" required>
	</div>
	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" id="email" required>
	</div>
	<div class="form-group">
	<label for="message">Message</label>
	<textarea id="message" rows="5" required></textarea>
	</div>
	<button type="submit" class="submit-btn">Envoyer</button>
	</form>`;
	css = `.contact-form {
	max-width: 600px;
	margin: 2rem auto;
	padding: 2rem;
	background: #f9fafb;
	border-radius: 0.5rem;
	}

	.form-group {
	margin-bottom: 1rem;
	}

	.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	}

	.form-group input,
	.form-group textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.25rem;
	}

	.submit-btn {
	background: #6366f1;
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	}

	.submit-btn:hover {
	background: #4f46e5;
	}`;
	js = `document.querySelector('.contact-form').addEventListener('submit', (e) => {
	e.preventDefault();
	alert('Formulaire soumis !');
	});`;
	break;
	case 'gallery':
	// Gallery snippet code would go here
	break;
	case 'navbar':
	// Navbar snippet code would go here
	break;
	}

	document.getElementById('html-code').innerHTML = html;
	document.getElementById('css-code').innerHTML = css;
	document.getElementById('js-code').innerHTML = js;

	// Update preview
	updatePreview();
	});
	});

	// Update preview based on code
	function updatePreview() {
	const html = document.getElementById('html-code').textContent;
	const css = document.getElementById('css-code').textContent;

	// In a real app, we'd use iframe or more sophisticated rendering
	const preview = document.getElementById('preview-container');
	preview.innerHTML = html;

	const style = document.createElement('style');
	style.textContent = css;
	preview.appendChild(style);

	feather.replace();
	}
	// Enhanced AI Chat functionality
	document.querySelectorAll('[data-prompt]').forEach(btn => {
	btn.addEventListener('click', () => {
	chatInput.value = btn.dataset.prompt;
	chatButton.click();
	});
	});

	// AI Chat functionality
	const chatInput = document.querySelector('#chat-messages + div input');
	const chatButton = document.querySelector('#chat-messages + div button');

	chatButton.addEventListener('click', () => {
	const message = chatInput.value.trim();
	if (message) {
	// Add user message
	const chat = document.getElementById('chat-messages');
	const userMessage = document.createElement('div');
	userMessage.className = 'chat-message user-message';
	userMessage.innerHTML = `<p>${message}</p>`;
	chat.appendChild(userMessage);

	// Clear input
	chatInput.value = '';

	// Simulate AI response
	setTimeout(() => {
	const aiResponses = {
	"Optimise ce code": `J'ai optimisé votre code :
	1. Réduit les répétitions en CSS
	2. Simplifié les sélecteurs
	3. Ajouté des transitions fluides
	4. Amélioré la performance de 40%`,
	"Corrige les erreurs": `Corrections apportées :
	- Erreur de syntaxe ligne 42
	- Problème de closure dans la fonction async
	- Sélecteur CSS invalide corrigé
	- Gestion des erreurs améliorée`,
	"Suggestions d'amélioration": `Suggestions :
	1. Ajouter un système de thème sombre/clair
	2. Implémenter le lazy loading des images
	3. Utiliser des variables CSS pour les couleurs
	4. Ajouter des animations subtiles`,
	default: [
	"J'ai analysé votre demande et généré une solution optimale...",
	"En tant qu'IA apprenante, je peux vous proposer cette amélioration...",
	"Voici une implémentation qui correspond à vos habitudes de codage...",
	"J'ai détecté des patterns dans votre code et optimisé en conséquence."
	]
	};

	const response = aiResponses[message] \|\|
	aiResponses.default[Math.floor(Math.random() * aiResponses.default.length)];
	const aiMessage = document.createElement('div');
	aiMessage.className = 'chat-message ai-message';
	aiMessage.innerHTML = `<p>${responses[Math.floor(Math.random() * responses.length)]}</p>`;
	chat.appendChild(aiMessage);
	chat.scrollTop = chat.scrollHeight;
	}, 1000);
	}
	});

	// Allow pressing Enter to send message
	chatInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	chatButton.click();
	}
	});
	});
	</script>
	</body>
	</html>