Transforme ta voix en article de blog avec GPT et Meteor

Facebook

Twitter

1 week ago

https://www.youtube.com/watch?v=17TVuSF46Tg

🎯 Présentation du projet

Ce projet combine plusieurs outils modernes pour optimiser la création :

⚛ Meteor.js – pour l'application de chat en temps réel
🧠 API OpenAI – Whisper pour la transcription et GPT-4 pour la génération de contenu
⚙ Uniflow – un moteur d'automatisation open source
🌏 API Darkwood – pour la publication d'articles

Que vous soyez développeur, créateur de contenu ou passionné d'automatisation, cette configuration illustre comment la création de contenu vocale peut s'intégrer à un flux de publication complet.

🔧 Partie 1 – Création de l'application Meteor

La première étape a consisté à créer une application de chat basée sur Meteor, qui écoute activement votre microphone et envoie le son à OpenAI pour traitement. L'application s'inspire de tutoriels classiques comme l'exemple Todo de Meteor, mais a été étendue pour prendre en charge les workflows modernes de conversion voix-texte.

🚀 Instructions d'installation

curl https://install.meteor.com/ | sh meteor create vocal-chat-app cd vocal-chat-app meteor npm install react react-dom react-mic axios

Packages Meteor supplémentaires :

meteor add static-html react-meteor-data

🎤 Capture et transcription vocale

Grâce à react-mic, l'application propose un simple bouton « Enregistrer » et « Arrêter » pour capturer la voix. Une fois l'audio capturé, il est envoyé à l'API Whisper d'OpenAI pour transcription. Cela fournit une base de texte utilisée pour la génération de contenu.

✍ Génération d'articles avec GPT-4

La transcription est transmise à une invite GPT-4o comme ceci :

« Écrivez-moi un article de blog sur les développeurs geeks sans vie qui mangent de la pizza 🍕 et boivent de la bière 🍺 pour terminer leur projet avant la date limite de demain 💀. »

Le résultat est un article complet formaté en Markdown ou HTML, prêt à être affiché dans l'interface de chat. La mise en page est stylisée en CSS pour correspondre à une interface de chat minimaliste, avec des messages de l'utilisateur et de l'IA clairement différenciés.

🔁 Partie 2 – Publication automatique de l'article

Une fois l'article généré, la deuxième phase concerne l'automatisation : la publication du contenu sans CMS ni intervention manuelle.

🧩 Le workflow Uniflow

Le workflow Uniflow est structuré en trois blocs :

Saisie de texte : le corps de l'article est collé dans un bloc de texte.
Génération du titre : un appel GPT-4 génère un titre optimisé pour le SEO à partir de l'article.
Publication via l'API : deux requêtes HTTP sont envoyées à l'API Darkwood :

Première : création d'un « Article »
Seconde : création d'une « ArticleTranslation » à l'aide de l'IRI renvoyé par le premier appel.

🧬 Exemple de logique JavaScript avec Axios

let token = null; let rawTitle = aiTitle.value; let slug = rawTitle .toLowerCase() .normalize("NFD") .replace(/[\u0300-\u036f]/g, "") .replace(/\s+/g, "-") .replace(/[^a-z0-9\-]/g, ""); // Step 1 – Authenticate axios.post('http://api.darkwood.localhost:8092/auth', { email: 'darkwood', password: 'darkwood' }, { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }) .then(function(authResponse) { token = authResponse.data.token; // Step 2 – Create Article return axios.post('http://api.darkwood.localhost:8092/api/articles', { tags: [], comments: [] }, { headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/ld+json', 'Accept': 'application/ld+json' } }); }) .then(function(articleResponse) { const articleIri = articleResponse.data['@id']; // Step 3 – Create ArticleTranslation return axios.post('http://api.darkwood.localhost:8092/api/article_translations', { locale: "fr", article: articleIri, title: rawTitle, slug: slug, content: article_content, imageName: "", active: true }, { headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/ld+json', 'Accept': 'application/ld+json' } }); }) .then(function(translationResponse) { console.log("✅ Article and translation published successfully!"); }) .catch(function(error) { console.error("❌ Publication error:", error); });

✅ Ce que ce projet démontre

Ce projet regroupe :

🎤 La voix comme entrée
✨ L'IA comme assistant créatif
⚙ L'automatisation comme moteur de publication

C'est une configuration puissante pour tout développeur ou créateur solo qui souhaite accélérer et réduire les étapes manuelles dans le processus de publication.

📢 En savoir plus

🧪 Code source disponible sur Github https://github.com/matyo91/vocal-chat-app

Si vous souhaitez créer vos propres outils d'automatisation ou créer des workflows de bout en bout comme celui-ci, j'ai créé une formation complète pour vous aider à démarrer