Transforming Your Voice into a Blog Post with GPT and Meteor

le 13 avril 2025

🎯 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 :

1. Saisie de texte : le corps de l'article est collé dans un bloc de texte.
2. Génération du titre : un appel GPT-4 génère un titre optimisé pour le SEO à partir de l'article.
3. 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 :

Merci de votre lecture,
et continuez à développer vos idées 🔧 — vos idées méritent d’être automatisées.

• Poster un commentaire