Transforming Your Voice into a Blog Post with GPT and Meteor

der 13. April 2025

🎯 Projektübersicht

Dieses Projekt kombiniert verschiedene moderne Tools zur Optimierung der kreativen Arbeit:

• ⚛ Meteor.js – für die Echtzeit-Frontend-Chat-Anwendung
• 🧠 OpenAI APIs – Whisper für die Transkription und GPT-4 für die Inhaltserstellung
• 💧 Uniflow – eine Open-Source-Automatisierungs-Engine
• 🌏 Darkwood API – für die Artikelveröffentlichung

Ob Entwickler, Content-Ersteller oder Automatisierungs-Enthusiast – dieses Setup zeigt, wie sich sprachgesteuerte Inhaltserstellung in einen vollständigen Veröffentlichungs-Workflow integrieren lässt.

🔧 Teil 1 – Erstellen der Meteor-Anwendung

Der erste Schritt bestand darin, eine Meteor-basierte Chat-App zu erstellen, die aktiv auf Ihr Mikrofon hört und den Ton zur Verarbeitung an OpenAI sendet. Die Anwendung wurde von klassischen Tutorials wie dem Meteor-Todo-Beispiel inspiriert, aber um moderne Sprach-zu-Text-Workflows erweitert.

🚀 Einrichtungsanleitung

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

Zusätzliche Meteor-Pakete:

meteor add static-html react-meteor-data

🎤 Sprachaufnahme und -transkription

Mit react-mic bietet die App einfache Schaltflächen zum Aufnehmen und Stoppen von Spracheingaben. Sobald das Audio aufgenommen ist, wird es zur Transkription an die Whisper-API von OpenAI gesendet. Dies bildet die Textbasis für die Inhaltsgenerierung.

✍ Artikelgenerierung mit GPT-4

Das Transkript wird an eine GPT-4o-Eingabeaufforderung wie diese übergeben:

„Schreib mir einen Blogbeitrag über geistlose Geek-Entwickler, die Pizza essen 🍕 und Bier trinken 🍺, um ihr Projekt vor der morgigen Deadline fertigzustellen 💀.“

Das Ergebnis ist ein vollständiger Artikel, formatiert in Markdown oder HTML, der in der Chat-Oberfläche angezeigt werden kann. Das Layout ist in CSS gestaltet, um einer minimalistischen Chat-Oberfläche zu entsprechen, wobei Nachrichten von Benutzer und KI klar voneinander unterschieden werden.

🔁 Teil 2 – Automatische Veröffentlichung des Artikels

Sobald der Artikel generiert ist, geht es in der zweiten Phase um Automatisierung: die Veröffentlichung des Inhalts ohne CMS oder manuelle Eingriffe.

🧩 Der Uniflow-Workflow

Der Uniflow-Workflow ist in drei Blöcke gegliedert:

1. Texteingabe – Der Artikeltext wird in einen Textblock eingefügt.
2. Titelgenerierung – Ein GPT-4-Aufruf generiert einen SEO-optimierten Titel aus dem Artikel.
3. API-Veröffentlichung – Zwei HTTP-Anfragen werden an die Darkwood-API gestellt: – Erstens: Erstellen eines „Artikels“ – Zweitens: Erstellen einer „Artikelübersetzung“ unter Verwendung der vom ersten Aufruf zurückgegebenen IRI

🧬 Beispiel für JavaScript-Logik mit 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);
});

✅ Was dieses Projekt demonstriert

Dieses Projekt vereint:

– 🎤 Sprache als Eingabe – ✨ KI als kreativer Assistent – ⚙ Automatisierung als Veröffentlichungs-Engine

Es ist ein leistungsstarkes Setup für alle Entwickler und Solo-Ersteller, die schneller vorankommen und manuelle Schritte in der Veröffentlichungspipeline reduzieren möchten.

📢 Mehr erfahren

🧪 Quellcode auf Github verfügbar https://github.com/matyo91/vocal-chat-app

Wenn Sie eigene Automatisierungstools erstellen oder durchgängige Workflows wie diesen erstellen möchten, habe ich ein umfassendes Training erstellt, das Ihnen den Einstieg erleichtert:

Vielen Dank fürs Lesen,
und bauen Sie weiter 🔧 — Ihre Ideen verdienen es, automatisiert zu werden.

• Send ein Kommentar