Hugging Face's logo

Spaces:
Invader1
/
image-stl
Running

App Files Community
image-stl / index.html
Invader1's picture
Invader1
Ça ne génère aucun fichier STL..je veux que tu génère un stl - Follow Up Deployment
597c4d7 verified
raw
history blame contribute delete
25.6 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Image2STL - Convertir des images en modèles 3D</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/STLExporter.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .dropzone {
 border: 2px dashed #4b5563;
 transition: all 0.3s ease;
 }
 .dropzone.active {
 border-color: #3b82f6;
 background-color: rgba(59, 130, 246, 0.05);
 }
 .preview-container {
 transition: all 0.3s ease;
 opacity: 0;
 height: 0;
 overflow: hidden;
 }
 .preview-container.show {
 opacity: 1;
 height: auto;
 }
 #stlPreview {
 width: 100%;
 height: 400px;
 background-color: #f3f4f6;
 }
 .slider-thumb::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 background: #3b82f6;
 cursor: pointer;
 border-radius: 50%;
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <!-- Navigation -->
 <nav class="bg-white shadow-sm">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <i class="fas fa-cube text-blue-500 text-2xl mr-2"></i>
 <span class="text-xl font-bold text-gray-800">Image2STL</span>
 </div>
 <div class="hidden md:flex items-center space-x-8">
 <a href="#" class="text-gray-700 hover:text-blue-500">Accueil</a>
 <a href="#" class="text-gray-700 hover:text-blue-500">Comment ça marche</a>
 <a href="#" class="text-gray-700 hover:text-blue-500">Exemples</a>
 <a href="#" class="text-gray-700 hover:text-blue-500">Contact</a>
 </div>
 <button class="md:hidden text-gray-500">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <div class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-16">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
 <h1 class="text-4xl md:text-5xl font-bold mb-6">Transformez vos images en modèles 3D</h1>
 <p class="text-xl mb-8 max-w-3xl mx-auto">Convertissez simplement n'importe quelle image en fichier STL prêt pour l'impression 3D</p>
 <button id="startConversion" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 transform hover:scale-105">
 Commencer maintenant <i class="fas fa-arrow-right ml-2"></i>
 </button>
 </div>
 </div>
<!-- Conversion Tool -->
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="p-6 md:p-8">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Convertisseur Image vers STL</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
 <!-- Upload Section -->
 <div>
 <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6">
 <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
 <h3 class="text-lg font-semibold mb-2">Glissez-déposez votre image ici</h3>
 <p class="text-gray-500 mb-4">ou</p>
 <input type="file" id="fileInput" accept="image/*" multiple class="hidden">
 <label for="fileInput" class="inline-block bg-blue-500 text-white py-2 px-6 rounded-full hover:bg-blue-600 cursor-pointer transition">
 Sélectionner un fichier
 </label>
 <p class="text-gray-500 text-sm mt-4">Formats supportés: JPG, PNG, BMP (Max 10MB par fichier)</p>
 </div>
<div id="imagePreviewContainer" class="preview-container mb-6">
 <h4 class="font-medium text-gray-700 mb-2">Aperçu des images</h4>
 <div id="imagePreviews" class="grid grid-cols-2 gap-4">
 <!-- Les aperçus seront ajoutés ici dynamiquement -->
 </div>
 </div>
 </div>
<!-- Settings Section -->
 <div>
 <div class="bg-gray-50 p-6 rounded-lg">
 <h3 class="text-lg font-semibold mb-4">Paramètres de conversion</h3>
<div class="space-y-6">
 <div>
 <label for="thickness" class="block text-sm font-medium text-gray-700 mb-1">Épaisseur du modèle</label>
 <input type="range" id="thickness" min="1" max="10" value="5" class="slider-thumb w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>Min</span>
 <span>Max</span>
 </div>
 </div>
<div>
 <label for="smoothing" class="block text-sm font-medium text-gray-700 mb-1">Niveau de lissage</label>
 <input type="range" id="smoothing" min="0" max="100" value="70" class="slider-thumb w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>Détails</span>
 <span>Lisse</span>
 </div>
 </div>
<div>
 <label for="resolution" class="block text-sm font-medium text-gray-700 mb-1">Résolution</label>
 <select id="resolution" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
 <option value="low">Basse (rapide)</option>
 <option value="medium">Moyenne</option>
 <option value="high" selected>Haute (précise)</option>
 <option value="ultra">Ultra (AI optimisé)</option>
 </select>
 </div>
<div class="pt-2">
 <button id="convertBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center">
 <i class="fas fa-robot mr-2"></i> Optimiser avec IA
 </button>
 </div>
 </div>
 </div>
<div id="resultContainer" class="preview-container mt-6">
 <h4 class="font-medium text-gray-700 mb-2">Résultat STL</h4>
 <div id="stlPreview" class="border rounded-lg flex items-center justify-center">
 <p class="text-gray-500">Votre modèle 3D apparaîtra ici</p>
 </div>
 <div class="mt-4 flex space-x-3">
 <button id="downloadBtn" class="flex-1 bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition flex items-center justify-center">
 <i class="fas fa-download mr-2"></i> Télécharger
 </button>
 <button id="resetBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg transition flex items-center justify-center">
 <i class="fas fa-redo mr-2"></i> Recommencer
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Features Section -->
 <div class="bg-gray-100 py-12">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi choisir Image2STL ?</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="text-blue-500 mb-4">
 <i class="fas fa-bolt text-4xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">Conversion rapide</h3>
 <p class="text-gray-600">Transformez vos images en fichiers STL en quelques secondes grâce à notre algorithme optimisé.</p>
 </div>
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="text-blue-500 mb-4">
 <i class="fas fa-brain text-4xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">IA avancée</h3>
 <p class="text-gray-600">Notre intelligence artificielle optimise automatiquement votre modèle pour une qualité d'impression exceptionnelle.</p>
 </div>
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
 <div class="text-blue-500 mb-4">
 <i class="fas fa-print text-4xl"></i>
 </div>
 <h3 class="text-xl font-semibold mb-3">Prêt à imprimer</h3>
 <p class="text-gray-600">Fichiers STL optimisés pour une impression 3D sans problème sur toutes les imprimantes.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h4 class="text-lg font-semibold mb-4">Image2STL</h4>
 <p class="text-gray-400">Transformez vos images en modèles 3D imprimables en quelques clics.</p>
 </div>
 <div>
 <h4 class="text-lg font-semibold mb-4">Liens utiles</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Comment ça marche</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
 </ul>
 </div>
 <div>
 <h4 class="text-lg font-semibold mb-4">Ressources</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
 </ul>
 </div>
 <div>
 <h4 class="text-lg font-semibold mb-4">Contact</h4>
 <ul class="space-y-2">
 <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@image2stl.com</li>
 <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li>
 </ul>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 <p>© 2023 Image2STL. Tous droits réservés.</p>
 </div>
 </div>
 </footer>
<script>
 // DOM Elements
 const dropzone = document.getElementById('dropzone');
 const fileInput = document.getElementById('fileInput');
 const imagePreview = document.getElementById('imagePreview');
 const imagePreviewContainer = document.getElementById('imagePreviewContainer');
 const convertBtn = document.getElementById('convertBtn');
 const resultContainer = document.getElementById('resultContainer');
 const downloadBtn = document.getElementById('downloadBtn');
 const resetBtn = document.getElementById('resetBtn');
 const startConversion = document.getElementById('startConversion');
 // Event Listeners
 startConversion.addEventListener('click', () => {
 document.querySelector('#conversion-tool').scrollIntoView({ behavior: 'smooth' });
 });
 // Handle drag and drop
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
 dropzone.addEventListener(eventName, preventDefaults, false);
 });
 function preventDefaults(e) {
 e.preventDefault();
 e.stopPropagation();
 }
 ['dragenter', 'dragover'].forEach(eventName => {
 dropzone.addEventListener(eventName, highlight, false);
 });
 ['dragleave', 'drop'].forEach(eventName => {
 dropzone.addEventListener(eventName, unhighlight, false);
 });
 function highlight() {
 dropzone.classList.add('active');
 }
 function unhighlight() {
 dropzone.classList.remove('active');
 }
 // Handle drop
 dropzone.addEventListener('drop', handleDrop, false);
 function handleDrop(e) {
 const dt = e.dataTransfer;
 const files = dt.files;
 handleFiles(files);
 }
 // Handle file selection
 fileInput.addEventListener('change', function() {
 handleFiles(this.files);
 });
 // Process selected files
 function handleFiles(files) {
 if (files.length > 0) {
 const previewsContainer = document.getElementById('imagePreviews');
 previewsContainer.innerHTML = '';
let validFiles = 0;
Array.from(files).forEach((file, index) => {
 if (file.type.match('image.*')) {
 validFiles++;
 const reader = new FileReader();
 reader.onload = function(e) {
 const previewDiv = document.createElement('div');
 previewDiv.className = 'border rounded-lg overflow-hidden relative';
const img = document.createElement('img');
 img.src = e.target.result;
 img.alt = `Aperçu image ${index + 1}`;
 img.className = 'w-full h-auto';
const badge = document.createElement('div');
 badge.className = 'absolute top-2 right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-full';
 badge.textContent = `#${index + 1}`;
previewDiv.appendChild(img);
 previewDiv.appendChild(badge);
 previewsContainer.appendChild(previewDiv);
if (validFiles === files.length) {
 imagePreviewContainer.classList.add('show');
 }
 }
 reader.readAsDataURL(file);
 } else {
 alert(`Le fichier "${file.name}" n'est pas une image valide (JPG, PNG, BMP).`);
 }
 });
if (validFiles > 0) {
 imagePreviewContainer.classList.add('show');
 }
 }
 }
 // Convert button click
 convertBtn.addEventListener('click', function() {
 const previews = document.querySelectorAll('#imagePreviews img');
 if (previews.length === 0) {
 alert('Veuillez d\'abord sélectionner au moins une image.');
 return;
 }
// Show loading state
 convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Conversion en cours...';
 convertBtn.disabled = true;
// Get first image
 const img = previews[0];
// Create canvas to process image
 const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 canvas.width = img.width;
 canvas.height = img.height;
 ctx.drawImage(img, 0, 0);
// Get image data
 const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 const data = imgData.data;
// Create 3D geometry from image
 const geometry = new THREE.BufferGeometry();
 const vertices = [];
 const indices = [];
// Improved heightmap generation
 const thickness = parseInt(document.getElementById('thickness').value);
 const smoothing = parseInt(document.getElementById('smoothing').value) / 100;
 const resolution = document.getElementById('resolution').value;
// Set resolution based on selection
 let segments = 50;
 if (resolution === 'low') segments = 30;
 else if (resolution === 'medium') segments = 60;
 else if (resolution === 'high') segments = 100;
 else if (resolution === 'ultra') segments = 150;
const size = 1;
 const segmentSize = size / segments;
// Create heightmap data
 const heightmap = [];
 for (let y = 0; y <= segments; y++) {
 heightmap[y] = [];
 for (let x = 0; x <= segments; x++) {
 const px = Math.floor(x / segments * img.width);
 const py = Math.floor(y / segments * img.height);
 const idx = (py * img.width + px) * 4;
 const gray = (data[idx] + data[idx+1] + data[idx+2]) / 765; // 0-1
 heightmap[y][x] = gray * thickness;
 }
 }
// Apply smoothing
 if (smoothing > 0) {
 for (let y = 1; y < segments; y++) {
 for (let x = 1; x < segments; x++) {
 heightmap[y][x] = heightmap[y][x] * (1 - smoothing) +
((heightmap[y-1][x] + heightmap[y+1][x] +
heightmap[y][x-1] + heightmap[y][x+1]) / 4) * smoothing;
 }
 }
 }
// Create vertices
 for (let y = 0; y <= segments; y++) {
 for (let x = 0; x <= segments; x++) {
 vertices.push(
 x * segmentSize - size/2,
 y * segmentSize - size/2,
 heightmap[y][x]
 );
 }
 }
// Create faces
 for (let y = 0; y < segments; y++) {
 for (let x = 0; x < segments; x++) {
 const a = y * (segments + 1) + x;
 const b = y * (segments + 1) + x + 1;
 const c = (y + 1) * (segments + 1) + x;
 const d = (y + 1) * (segments + 1) + x + 1;
// Create two triangles per square
 indices.push(a, b, d);
 indices.push(a, d, c);
 }
 }
geometry.setIndex(indices);
 geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
 geometry.computeVertexNormals();
// Create mesh
 const mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
// Add to scene for preview
 const scene = new THREE.Scene();
 scene.add(mesh);
// Add lights
 const light1 = new THREE.DirectionalLight(0xffffff, 1);
 light1.position.set(1, 1, 1);
 scene.add(light1);
const light2 = new THREE.DirectionalLight(0xffffff, 0.5);
 light2.position.set(-1, -1, -1);
 scene.add(light2);
// Set up renderer
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(document.getElementById('stlPreview').clientWidth,
document.getElementById('stlPreview').clientHeight);
 document.getElementById('stlPreview').innerHTML = '';
 document.getElementById('stlPreview').appendChild(renderer.domElement);
// Set up camera
 const camera = new THREE.PerspectiveCamera(45,
document.getElementById('stlPreview').clientWidth /
document.getElementById('stlPreview').clientHeight, 0.1, 1000);
 camera.position.z = 2;
// Animation loop
 function animate() {
 requestAnimationFrame(animate);
 mesh.rotation.x += 0.005;
 mesh.rotation.y += 0.007;
 renderer.render(scene, camera);
 }
 animate();
// Export to STL
 const exporter = new THREE.STLExporter();
 const stlString = exporter.parse(mesh);
// Save STL data for download
 window.stlData = stlString;
// Show result
 resultContainer.classList.add('show');
 convertBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Convertir en STL';
 convertBtn.disabled = false;
// Scroll to result
 resultContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 });
 // Download button click
 downloadBtn.addEventListener('click', function() {
 if (!window.stlData) {
 alert('Aucun modèle STL à télécharger. Veuillez d\'abord convertir une image.');
 return;
 }
const blob = new Blob([window.stlData], { type: 'application/octet-stream' });
 const url = URL.createObjectURL(blob);
const a = document.createElement('a');
 a.href = url;
 a.download = 'modele_3d.stl';
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
 URL.revokeObjectURL(url);
 });
 // Reset button click
 resetBtn.addEventListener('click', function() {
 imagePreview.src = '';
 imagePreviewContainer.classList.remove('show');
 resultContainer.classList.remove('show');
 fileInput.value = '';
 });
 </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=Invader1/image-stl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>