Cours Vibe coding avec l'IA · Module 10: Clone de TikTok
Génération d'images par IA - GPT Image/Stable Diffusion
Générer des images avec l'IA.
OpenAI GPT Image
Les modèles DALL-E ont été retirés de l'API OpenAI le 12 mai 2026. Les modèles d'image actuels, comme gpt-image-2, renvoient l'image en base64 (le champ b64_json) et non sous forme d'URL.
npm install openaiimport OpenAI from 'openai';
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
async function generateImage(prompt: string) {
const response = await openai.images.generate({
model: "gpt-image-2",
prompt,
n: 1,
size: "1024x1024"
});
return `data:image/png;base64,${response.data[0].b64_json}`;
}
function ImageGenerator() {
const [prompt, setPrompt] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [loading, setLoading] = useState(false);
const handleGenerate = async () => {
setLoading(true);
const url = await generateImage(prompt);
setImageUrl(url);
setLoading(false);
};
return (
<div>
<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Décris l'image que tu veux générer..."
className="w-full border rounded p-3"
/>
<button
onClick={handleGenerate}
disabled={loading}
className="bg-blue-600 text-white px-4 py-2 rounded"
>
{loading ? 'Génération...' : 'Générer l\'image'}
</button>
{imageUrl && <img src={imageUrl} alt="Generated" className="mt-4" />}
</div>
);
}À bientôt !
Code de cette leçon : App.jsx
// Enregistreur de vidéo
import { useState, useEffect } from 'react';
export default function App() {
const [isRecording, setIsRecording] = useState(false);
const [duration, setDuration] = useState(0);
const maxDuration = 60;
useEffect(() => {
let interval;
if (isRecording) {
interval = setInterval(() => {
setDuration(d => {
if (d >= maxDuration) {
setIsRecording(false);
return d;
}
return d + 0.1;
});
}, 100);
} else {
setDuration(0);
}
return () => clearInterval(interval);
}, [isRecording]);
return (
<div className="h-screen bg-black flex flex-col">
{/* Aperçu de la vidéo */}
<div className="flex-1 relative bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<div className="text-9xl">◆</div>
{/* Indicateur d'enregistrement */}
{isRecording && (
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<div className="w-20 h-20 border-4 border-red-500 rounded-full animate-pulse"></div>
</div>
)}
{/* Indicateur de son */}
<div className="absolute top-4 right-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm flex items-center gap-2">
Pirate's Anthem
</div>
</div>
{/* Commandes */}
<div className="bg-black border-t border-gray-800 p-6">
{/* Barre de durée */}
<div className="mb-6">
<div className="h-1 bg-gray-700 rounded-full overflow-hidden">
<div
className={`h-full transition-all ${isRecording ? 'bg-red-500' : 'bg-gray-500'}`}
style={{ width: `${(duration / maxDuration) * 100}%` }}
/>
</div>
<div className="flex justify-between mt-2 text-xs text-gray-400">
<span>{duration.toFixed(1)}s</span>
<span>{maxDuration}s</span>
</div>
</div>
{/* Actions */}
<div className="flex items-center justify-around">
{/* Effets */}
<button className="flex flex-col items-center gap-1">
<div className="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-2xl">
◆
</div>
<span className="text-xs text-white">Effets</span>
</button>
{/* Bouton d'enregistrement */}
<button
onClick={() => setIsRecording(!isRecording)}
className={`w-20 h-20 rounded-full border-4 flex items-center justify-center transition ${
isRecording ? 'border-red-500 bg-red-500' : 'border-white bg-transparent'
}`}
>
{isRecording && <div className="w-8 h-8 bg-white rounded"></div>}
</button>
{/* Sons */}
<button className="flex flex-col items-center gap-1">
<div className="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center text-2xl">
◉
</div>
<span className="text-xs text-white">Sons</span>
</button>
</div>
</div>
</div>
);
}Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. À quoi sert le modèle OpenAI gpt-image-2 selon la leçon ?
2. Quel nom de modèle le code de génération d'image utilise-t-il ?
Tâches pratiques dans le jeu
- Tri horizontal
Ordonne le début de l'appel de génération d'image OpenAI :