Blog
  • Login

  • Anmeldung
  • Registrieren
  • Blog

  • Artikel
  • en
  • fr

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:

👉 Schauen Sie sich meinen Bonzai-Automatisierungskurs an

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

  • Sitemap - Hello - Blog - Apps - Photos - Kontakt - - - - - Impressum - Darkwood 2025, alle Rechte vorbehalten