Hugging Face's logo

Spaces:
Abmacode12
/
codecraft-haven
Running

App Files Community
Abmacode12 commited on
Commit
9181d0f
·
verified ·
1 Parent(s): 6424ffd

Voici ce que je te propose comme suite :

Browse files

1. Comprendre la structure du thème
Si le thème est en HTML/CSS/JS, tu peux ouvrir les fichiers dans un éditeur de code (VS Code, Sublime Text, etc.).

Cherche les dossiers ou fichiers nommés :

index.html

style.css

script.js

assets/ (pour images/vidéos)

2. Remplacer les parties “vides” par du contenu
Dans le fichier HTML, repère les sections comme :

html
<div class="zone-vide">...</div>
Remplace par ton propre contenu, par exemple :

html
<div class="ma-section">
<h2>La Baleine IA</h2>
<p>Ici, je vais afficher les images générées.</p>
<img src="chemin/vers/ton-image.jpg" alt="Image générée">
</div>
3. Intégrer des générateurs d’images/vidéos
Tu peux utiliser des APIs comme :

Unsplash (images libres)

OpenAI DALL·E (génération d’images par IA)

Stable Diffusion (si tu as un serveur local)

Pexels / Pixabay (pour des médias gratuits)

Exemple d’intégration simple avec Unsplash :

html
<img src="https://source.unsplash.com/random/800x400?whale" alt="Image aléatoire baleine">

Files changed (4) hide show
  1. baleine.html +132 -0
  2. index.html +7 -1
  3. rosalinda.html +2 -2
  4. style.css +13 -0
baleine.html ADDED
@@ -0,0 +1,132 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>La Baleine IA | Espace Codage</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-900 text-gray-100">
12
+ <div class="app-container h-screen flex">
13
+ <!-- Sidebar (same as index.html) -->
14
+ <aside class="w-80 bg-gray-800 border-r border-gray-700 flex flex-col">
15
+ <div class="p-4 border-b border-gray-700 flex items-center gap-3">
16
+ <div class="w-3 h-3 rounded-full bg-blue-500 shadow-lg shadow-blue-500/30"></div>
17
+ <h1 class="font-bold">Espace Codage</h1>
18
+ </div>
19
+
20
+ <nav class="flex-1 overflow-y-auto p-2">
21
+ <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2">Générateurs IA</h2>
22
+ <a href="baleine.html" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-900/30 border border-blue-800/50 text-blue-200 mb-1">
23
+ <div class="p-2 rounded-lg bg-blue-900/50 border border-blue-800/50">
24
+ <i data-feather="image" class="w-4 h-4"></i>
25
+ </div>
26
+ <span class="truncate">La Baleine IA</span>
27
+ </a>
28
+ <a href="rosalinda.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
29
+ <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
30
+ <i data-feather="message-circle" class="w-4 h-4"></i>
31
+ </div>
32
+ <span class="truncate">Rosalinda IA</span>
33
+ </a>
34
+ </nav>
35
+ </aside>
36
+
37
+ <!-- Main Content -->
38
+ <main class="flex-1 p-6 bg-gray-850/50 overflow-auto">
39
+ <div class="max-w-4xl mx-auto">
40
+ <h1 class="text-2xl font-bold mb-6">La Baleine IA - Générateur d'images</h1>
41
+
42
+ <div class="mb-6 bg-gray-800 p-4 rounded-lg border border-gray-700">
43
+ <div class="flex gap-3 mb-4">
44
+ <input type="text" id="promptInput" placeholder="Décris l'image que tu veux générer..."
45
+ class="flex-1 bg-gray-750 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500">
46
+ <button id="generateBtn" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white">
47
+ Générer
48
+ </button>
49
+ </div>
50
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="imageGallery">
51
+ <!-- Images will be generated here -->
52
+ </div>
53
+ </div>
54
+
55
+ <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
56
+ <h2 class="text-lg font-semibold mb-3">Exemples de prompts</h2>
57
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
58
+ <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
59
+ "Un paysage futuriste de ville la nuit avec des néons bleus"
60
+ </button>
61
+ <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
62
+ "Une baleine volant dans le ciel étoilé, style aquarelle"
63
+ </button>
64
+ <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
65
+ "Un robot jardinier dans une serre futuriste, photoréaliste"
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </main>
71
+ </div>
72
+
73
+ <script>
74
+ feather.replace();
75
+
76
+ const generateBtn = document.getElementById('generateBtn');
77
+ const promptInput = document.getElementById('promptInput');
78
+ const imageGallery = document.getElementById('imageGallery');
79
+ const promptExamples = document.querySelectorAll('.prompt-example');
80
+
81
+ // Using placeholder service for demo - replace with real API in production
82
+ async function generateImage(prompt) {
83
+ if (!prompt.trim()) return;
84
+
85
+ // Show loading state
86
+ generateBtn.disabled = true;
87
+ generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin w-4 h-4 mr-2"></i> Génération...';
88
+ feather.replace();
89
+
90
+ // Simulate API call with timeout
91
+ setTimeout(() => {
92
+ // Using placeholder images - replace with actual API call
93
+ const randomSeed = Math.floor(Math.random() * 1000);
94
+ const imgUrl = `https://static.photos/ai/640x360/${randomSeed}?prompt=${encodeURIComponent(prompt)}`;
95
+
96
+ const imgCard = document.createElement('div');
97
+ imgCard.className = 'bg-gray-800 rounded-lg overflow-hidden border border-gray-700';
98
+ imgCard.innerHTML = `
99
+ <img src="${imgUrl}" alt="${prompt}" class="w-full h-48 object-cover">
100
+ <div class="p-3">
101
+ <p class="text-sm text-gray-300 truncate">${prompt}</p>
102
+ <div class="flex justify-between items-center mt-2">
103
+ <span class="text-xs text-gray-500">${new Date().toLocaleTimeString()}</span>
104
+ <button class="download-btn p-1 rounded hover:bg-gray-700">
105
+ <i data-feather="download" class="w-4 h-4"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ `;
110
+
111
+ imageGallery.prepend(imgCard);
112
+ feather.replace();
113
+
114
+ // Reset button
115
+ generateBtn.disabled = false;
116
+ generateBtn.textContent = 'Générer';
117
+ }, 1500);
118
+ }
119
+
120
+ generateBtn.addEventListener('click', () => generateImage(promptInput.value));
121
+ promptInput.addEventListener('keydown', (e) => {
122
+ if (e.key === 'Enter') generateImage(promptInput.value);
123
+ });
124
+
125
+ promptExamples.forEach(example => {
126
+ example.addEventListener('click', () => {
127
+ promptInput.value = example.textContent.trim().replace(/"/g, '');
128
+ });
129
+ });
130
+ </script>
131
+ </body>
132
+ </html>
index.html CHANGED
@@ -45,8 +45,14 @@
45
  </a>
46
 
47
  <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2 mt-4">Raccourcis</h2>
48
- <a href="rosalinda.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
49
  <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
 
 
 
 
 
 
50
  <i data-feather="message-circle" class="w-4 h-4"></i>
51
  </div>
52
  <span class="truncate">Rosalinda IA</span>
 
45
  </a>
46
 
47
  <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2 mt-4">Raccourcis</h2>
48
+ <a href="baleine.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
49
  <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
50
+ <i data-feather="image" class="w-4 h-4"></i>
51
+ </div>
52
+ <span class="truncate">La Baleine IA</span>
53
+ </a>
54
+ <a href="rosalinda.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
55
+ <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
56
  <i data-feather="message-circle" class="w-4 h-4"></i>
57
  </div>
58
  <span class="truncate">Rosalinda IA</span>
rosalinda.html CHANGED
@@ -11,9 +11,9 @@
11
  <div class="wrap max-w-4xl mx-auto p-4">
12
  <div class="top flex gap-2 items-center justify-between mb-4">
13
  <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800">
14
- <b>Rosalinda</b> — Espace Codage
15
  </div>
16
- <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800" id="status">
17
  Micro: prêt
18
  </div>
19
  </div>
 
11
  <div class="wrap max-w-4xl mx-auto p-4">
12
  <div class="top flex gap-2 items-center justify-between mb-4">
13
  <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800">
14
+ <a href="/" class="hover:text-blue-400">Espace Codage</a> — <b>Rosalinda</b>
15
  </div>
16
+ <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800" id="status">
17
  Micro: prêt
18
  </div>
19
  </div>
style.css CHANGED
@@ -31,6 +31,19 @@ input:focus, button:focus {
31
  outline: none;
32
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
33
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
34
 
35
  /* Rosalinda chat styles */
36
  .wrap {
 
31
  outline: none;
32
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
33
  }
34
+ /* Image gallery styles */
35
+ #imageGallery {
36
+ min-height: 200px;
37
+ }
38
+
39
+ .download-btn {
40
+ transition: all 0.2s ease;
41
+ }
42
+
43
+ .download-btn:hover {
44
+ color: #3b82f6;
45
+ transform: translateY(-1px);
46
+ }
47
 
48
  /* Rosalinda chat styles */
49
  .wrap {