Hugging Face's logo

Spaces:
sam-bottes
/
morphoweb-3d-architect
Running

App Files Community
morphoweb-3d-architect / pro.html
sam-bottes's picture
sam-bottes
Fonctionnalités de l'IA Apprenante Multi-Niveaux :
42b15fe verified
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>&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;Mon Site&lt;/title&gt;
&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header class="header"&gt;
&lt;h1&gt;Bienvenue&lt;/h1&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;p&gt;Contenu principal&lt;/p&gt;
&lt;/main&gt;
&lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</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 = `&lt;form class="contact-form"&gt;
&lt;div class="form-group"&gt;
&lt;label for="name"&gt;Nom&lt;/label&gt;
&lt;input type="text" id="name" required&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="email"&gt;Email&lt;/label&gt;
&lt;input type="email" id="email" required&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="message"&gt;Message&lt;/label&gt;
&lt;textarea id="message" rows="5" required&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;button type="submit" class="submit-btn"&gt;Envoyer&lt;/button&gt;
&lt;/form&gt;`;
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>