January 22, 2026

GPT-4 + Firebase: illustrated stories, stored and ready

Lisa Granqvist Partner Workflow Automation Expert

Get a free AI assessment → ⬇️ Use template

Your story process probably breaks in the same place every time: you can write the narrative, but turning it into consistent scenes, prompts, and stored assets becomes a messy pile of drafts, links, and “final_v7” files.

Content marketers feel it when campaigns need “one more version.” Product teams hit it when they need quick explainers. And an agency owner feels it when a client asks for illustrated stories in three languages. This GPT-4 story automation turns a single brief into a complete illustrated story, then saves it cleanly in Firebase so you can publish and reuse without hunting for assets.

You’ll see what the workflow does, what you need to run it, and how the pieces fit together so it’s easy to adapt to your brand and content pipeline.

How This Automation Works

Here’s the complete workflow you’ll be setting up:

n8n Workflow Template: GPT-4 + Firebase: illustrated stories, stored and ready

Click to explore

flowchart LR

    subgraph sg0["Story Input Form Flow"]
        direction LR
        n0["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/form.svg' width='40' height='40' /></div><br/>Story Input Form"]
        n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Validate Input"]
        n2["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Generate Story (GPT-4)"]
        n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Prepare Story Data"]
        n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Generate Images (DALL-E 3)"]
        n5["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Upload to Firebase Storage"]
        n6["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Finalize Story"]
        n7["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Prepare Firestore Data"]
        n8["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Save to Firestore"]
        n9["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/webhook.dark.svg' width='40' height='40' /></div><br/>Return Response"]
        n6 --> n7
        n1 --> n2
        n0 --> n1
        n8 --> n9
        n3 --> n4
        n2 --> n3
        n7 --> n8
        n4 --> n5
        n5 --> n6
    end

    %% Styling
    classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
    classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
    classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
    classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
    classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
    classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
    classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef disabled stroke-dasharray: 5 5,opacity: 0.5
    class n0 trigger
    class n2,n8,n9 api
    class n1,n3,n4,n5,n6,n7 code
    classDef customIcon fill:none,stroke:none
    class n0,n1,n2,n3,n4,n5,n6,n7,n8,n9 customIcon

Why This Matters: Illustrated Stories Get Chaotic Fast

Writing a story is the “fun” part. The drag starts right after: splitting it into scenes, keeping character details consistent, creating image prompts that actually work, generating images, uploading them somewhere reliable, then organizing everything so you can publish later. If you do this manually, you end up with a Google Doc, a folder of images with random names, a handful of temporary links that expire, and a lot of back-and-forth to fix continuity. Multiply that by multiple languages or styles and you’re spending your best creative energy on admin work.

It adds up fast. Here’s where it usually breaks down.

Scene-by-scene image generation becomes a repetitive loop where you copy prompts, download files, rename them, and upload them again.
Links get lost or change, which means your “published” story can quietly end up with missing images a week later.
Without a structured database record, versioning is painful, so you avoid iterating even when you should.
Teams can’t reuse successful story formats because the assets and metadata aren’t stored in a consistent way.

What You’ll Build: A One-Brief Illustrated Story Pipeline

This workflow starts with a simple story form where you define the topic, language, art style, and how many scenes you want. It validates the submission so you don’t get half-filled requests, then asks GPT-4 to generate a complete narrative broken into scenes with characters and image prompts for each moment. Next, it renders a custom DALL-E 3 illustration for every scene, uploads those images to Firebase Storage so the links stay stable, and assembles everything into a single “final story” payload. Finally, it writes a structured document into Firestore, which makes searching, reusing, and publishing dramatically easier. You get a clean JSON response back with the full story and image URLs, ready for a website, app, newsletter, or content library.

The workflow begins at the form submission. GPT-4 creates the story structure and scene prompts, then a rendering loop generates images and pushes them to Firebase Storage. Firestore becomes the source of truth, and the webhook response gives you the finished package immediately.

What You’re Building

What Gets Automated

What You’ll Achieve

A form submission is validated and shaped into a clean request payload.
GPT-4 generates a full story with scenes, characters, and image prompts.
DALL-E 3 renders one illustration per scene without manual copy-paste loops.
Images are uploaded to Firebase Storage and story data is stored in Firestore automatically.

Turn a brief into a stored, illustrated story in about 15–30 minutes of hands-off time.
Stable image hosting means you’re not rebuilding broken links later.
Every story becomes searchable and reusable because it’s saved as structured data.
Consistent scene formatting makes it easier to publish to web pages, apps, or ebooks.
You can produce variations quickly by changing language, art style, or scene count.

Expected Results

Say you publish three illustrated stories a week and each story has 8 scenes. Manually, you might spend about 10 minutes per scene just on image prompting, downloading, renaming, and re-uploading, which is roughly 80 minutes per story before you even format anything. With this workflow, the “work” becomes one form submission that takes about 5 minutes, then you wait for generation and uploads to finish. You still review and polish, but you’re no longer doing 20+ repetitive micro-steps per story.

Before You Start

n8n instance (try n8n Cloud free)
Self-hosting option if you prefer (Hostinger works well)
OpenAI API for GPT-4 and DALL-E 3 generation.
Firebase (Firestore + Storage) to store story data and images.
Google Service Account credentials (create in Google Cloud Console for your Firebase project)

Skill level: Intermediate. You don’t need “coding skills,” but you will paste credentials, edit a few variables in code nodes, and test a webhook response.

Want someone to build this for you? Talk to an automation expert (free 15-minute consultation).

Step by Step

A story brief is submitted through a form. The form collects the topic, language, art style, and the number of scenes (from 1 up to 12). That single submission becomes your trigger.

The request is checked and cleaned up. A validation step makes sure required fields exist and are formatted correctly, so GPT-4 isn’t guessing what you meant. Small detail, big difference.

GPT-4 creates the narrative structure. The workflow calls GPT-4 via an HTTP request, asking for a complete story broken into scenes, with character details and image prompts that match each scene’s moment.

Images are rendered and uploaded. The workflow generates scene illustrations (DALL-E 3), then uploads them to Firebase Storage and assembles a final payload that includes stable image URLs for each scene.

Everything is stored and returned. The story metadata and scene data are written into Firestore, and the workflow replies with JSON containing the story plus image links so you can publish immediately or feed another workflow.

You can easily modify the language list or art styles to match your brand, then store extra fields (like “campaign name” or “client”) in the Firestore document. See the full implementation guide below for customization options.

Step-by-Step Implementation Guide

Step 1: Configure the Form Trigger

Set up the form that starts the workflow so users can submit story details.

Add the Story Form Intake node as your trigger.
Set Form Title to AI Story Generator.
Set Form Description to Create an illustrated story with AI. Fill in the details and get a complete story with DALL-E 3 images for each scene. Generation takes 2-5 minutes.
Configure the form fields exactly as defined in Story Form Intake (Story Topic, Language, Image Style, Number of Scenes, Target Audience, Story Mood).
Set the submit confirmation text in Respond With Options to Your story is being created! This takes 2-5 minutes. Please wait....

Tip: Keep the field labels identical to those in Story Form Intake so downstream code nodes can read values without changes.

Step 2: Validate Inputs and Generate Story Metadata

Use the initial code step to normalize the submission, clamp the number of scenes, and create a unique story ID.

Connect Story Form Intake to Verify Submission Data.
In Verify Submission Data, keep the provided JavaScript to validate scene count (1–12) and generate storyId.
Confirm the output includes numScenes and storyId for later nodes.

Step 3: Set Up AI Narrative Generation

Configure the OpenAI chat completion request that generates the story structure, scenes, and image prompts.

Connect Verify Submission Data to Compose Narrative (GPT-4).
In Compose Narrative (GPT-4), set URL to https://api.openai.com/v1/chat/completions and Method to POST.
Set JSON Body to the provided schema in the node, ensuring it includes the expressions like {{ $json['Story Topic'] }} and {{ $json.numScenes }}.
Credential Required: Connect your openAiApi credentials in Compose Narrative (GPT-4).

⚠️ Common Pitfall: If the JSON schema is edited, make sure it remains valid and strictly matches the expected structure to avoid parsing errors in later nodes.

Step 4: Build the Story, Generate Images, and Upload to Storage

This workflow uses multiple code nodes to prepare prompts, call DALL-E, and upload images to Firebase Storage.

Connect Compose Narrative (GPT-4) to Shape Story Payload, and keep the JavaScript that sanitizes prompts and sets dallePrompt.
Connect Shape Story Payload → Render Scene Images → Upload Images to Storage → Assemble Final Story in sequence.
In Render Scene Images, replace [CONFIGURE_YOUR_API_KEY] with your OpenAI key or adjust the code to use credentials.
In Upload Images to Storage, replace [YOUR_ID] with your Firebase Storage bucket name and update [CONFIGURE_YOUR_TOKEN] if using download tokens.
In Assemble Final Story, keep the final story object mapping so it strips internal fields like sceneIndex and dallePrompt.

⚠️ Common Pitfall: The image generation and upload steps are coded with placeholders. If you don’t replace [CONFIGURE_YOUR_API_KEY] or [YOUR_ID], the workflow will generate placeholder images or fail uploads.

Step 5: Store the Story in Firestore and Respond

Finalize the story object, convert it to Firestore format, store it, and return a JSON response to the form submission.

Connect Assemble Final Story to Build Firestore Document and keep the mapping that creates body, collection, docId, and projectId.
In Build Firestore Document, replace [YOUR_ID] in FIREBASE_PROJECT_ID with your Firebase project ID.
Connect Build Firestore Document to Store in Firestore.
In Store in Firestore, set URL to =https://firestore.googleapis.com/v1/projects/{{ $json.projectId }}/databases/(default)/documents/{{ $json.collection }}/{{ $json.docId }}.
Set JSON Body to ={{ JSON.stringify($json.body) }}.
Credential Required: Connect your googleApi credentials in Store in Firestore.
Connect Store in Firestore to Send Webhook Reply and keep the response body with {{ JSON.stringify($('Build Firestore Document').first().json.finalStory) }}.

Step 6: Test and Activate Your Workflow

Run a full test to confirm the form submission triggers story creation, image generation, Firestore storage, and a JSON response.

Click Execute Workflow and submit a sample form in Story Form Intake.
Verify that Compose Narrative (GPT-4) returns a valid JSON schema response with scenes and characters.
Confirm images are generated in Render Scene Images and URLs are updated in Upload Images to Storage.
Check that Store in Firestore writes the document to your stories/{language}/items collection.
Ensure Send Webhook Reply responds with "success": true and the full story object.
When satisfied, toggle the workflow to Active for production use.

🔒

Unlock Full Step-by-Step Guide

Get the complete implementation guide + downloadable template

Troubleshooting Tips

OpenAI credentials can expire, get revoked, or hit usage limits. If GPT-4 or DALL-E 3 calls fail, check your OpenAI dashboard and update the API key in the workflow variables first.
If you’re using Wait nodes or external rendering, processing times vary. Bump up the wait duration if downstream nodes fail on empty responses.
Firebase permissions are the silent killer here. If Storage uploads or Firestore writes fail, verify the service account has access to the correct project, and confirm your FIREBASE_BUCKET and FIREBASE_PROJECT_ID values match what’s in the Firebase console.

Quick Answers

What’s the setup time for this GPT-4 story automation?

About 10–15 minutes if your keys and Firebase project are ready.

Is coding required for this illustrated story creation?

No coding required. You will edit a few variables in code nodes and paste credentials.

Is n8n free to use for this GPT-4 story automation workflow?

Yes. n8n has a free self-hosted option and a free trial on n8n Cloud. Cloud plans start at $20/month for higher volume. You’ll also need to factor in OpenAI API costs for GPT-4 and DALL-E 3 image generation.

Where can I host n8n to run this GPT-4 story automation?

Two options: n8n Cloud (managed, easiest setup) or self-hosting on a VPS. For self-hosting, Hostinger VPS is affordable and handles n8n well. Self-hosting gives you unlimited executions but requires basic server management.

Can I modify this GPT-4 story automation workflow for different use cases?

Yes, and you should. Most teams customize the prompt inside the “Compose Narrative (GPT-4)” HTTP Request and adjust the “Shape Story Payload” code so the JSON matches their CMS fields. You can also change how many scenes are allowed, add a “brand voice” field in the form, or store extra metadata in the “Build Firestore Document” step (like campaign, audience, or approval status).

Why is my Firebase connection failing in this workflow?

Usually it’s service account permissions or a mismatched project setting. Double-check that your Google Service Account can write to Firestore and upload to Storage, then verify FIREBASE_PROJECT_ID and FIREBASE_BUCKET in the workflow match your Firebase console. If it still fails, look at the HTTP Request error details in n8n; Firebase errors are often descriptive once you open the full response.

What volume can this GPT-4 story automation workflow process?

On a typical n8n Cloud plan you can run thousands of executions per month, and self-hosting removes execution caps (your server becomes the limit). In practice, image generation is the main bottleneck, so bigger stories with 10–12 scenes will take longer and cost more than 3–5 scene stories.

Is this GPT-4 story automation better than using Zapier or Make?

Often, yes. This workflow isn’t just “send data from A to B”; it loops over scenes, builds structured payloads, uploads files, and writes a database document, which is where simpler tools can get awkward or expensive. n8n also gives you more control over the JSON you store in Firestore, which matters if you plan to search, version, or reuse content later. Zapier or Make can still work if you keep the scope small, like one scene or a single image per story. If you’re unsure, Talk to an automation expert and you’ll get a straight recommendation.

Once this is running, illustrated stories stop being a one-off project and start being a repeatable system. You’ll spend your time improving ideas and editing, not chasing files and broken links.

Need Help Setting This Up?

Our automation experts can build and customize this workflow for your specific needs. Free 15-minute consultation—no commitment required.

Lisa Granqvist

Workflow Automation Expert

Expert in workflow automation and no-code tools.

{
"id": "",
"versionId": "",
"meta": {
"instanceId": "7603817bd1771294d304ecfc42c9b79dd66c03945588c86fa66c47104b158191"
},
"name": "Automated Illustrated Story Builder",
"nodes": [
{
"id": "flowpast-topbar-12263",
"name": "Flowpast Branding",
"type": "n8n-nodes-base.stickyNote",
"position": [
0,
20
],
"parameters": {
"color": 7,
"width": 1145,
"height": 80,
"content": "## Flowpast.com | Automation Workflow Library\n**\ud83d\udcd6 Full tutorial & setup guide:** flowpast.com"
},
"typeVersion": 1
},
{
"id": "ddda96c6-4469-4c2d-acfb-bee04ec28cd2",
"name": "Story Form Intake",
"type": "n8n-nodes-base.formTrigger",
"position": [
1045,
185
],
"webhookId": "ai-story-generator-dalle",
"parameters": {
"options": {
"respondWithOptions": {
"values": {
"formSubmittedText": "Your story is being created! This takes 2-5 minutes. Please wait..."
}
}
},
"formTitle": "AI Story Generator",
"formFields": {
"values": [
{
"fieldType": "textarea",
"fieldLabel": "Story Topic",
"placeholder": "Example: A brave little robot who learns the meaning of friendship when it helps a lost puppy find its way home through a magical forest...",
"requiredField": true
},
{
"fieldType": "dropdown",
"fieldLabel": "Language",
"fieldOptions": {
"values": [
{
"option": "English"
},
{
"option": "Spanish"
},
{
"option": "French"
},
{
"option": "German"
},
{
"option": "Portuguese"
},
{
"option": "Italian"
},
{
"option": "Japanese"
},
{
"option": "Chinese"
},
{
"option": "Korean"
},
{
"option": "Dutch"
},
{
"option": "Russian"
},
{
"option": "Arabic"
}
]
},
"requiredField": true
},
{
"fieldType": "dropdown",
"fieldLabel": "Image Style",
"fieldOptions": {
"values": [
{
"option": "Anime style, soft colors, kawaii aesthetic"
},
{
"option": "Watercolor illustration, classic storybook"
},
{
"option": "Studio Ghibli style, whimsical and detailed"
},
{
"option": "Disney/Pixar 3D animation style"
},
{
"option": "Minimalist flat illustration, modern"
},
{
"option": "Realistic digital painting"
},
{
"option": "Vintage children's book, nostalgic"
},
{
"option": "Comic book style, bold lines"
},
{
"option": "Dreamy fantasy art, ethereal"
},
{
"option": "Cute cartoon style, bright colors"
}
]
},
"requiredField": true
},
{
"fieldType": "number",
"fieldLabel": "Number of Scenes",
"placeholder": "4",
"requiredField": true
},
{
"fieldType": "dropdown",
"fieldLabel": "Target Audience",
"fieldOptions": {
"values": [
{
"option": "Toddlers (2-4 years)"
},
{
"option": "Young Children (5-7 years)"
},
{
"option": "Children (8-12 years)"
},
{
"option": "Teenagers (13-17 years)"
},
{
"option": "Young Adults"
},
{
"option": "Adults"
},
{
"option": "All Ages"
}
]
},
"requiredField": true
},
{
"fieldType": "dropdown",
"fieldLabel": "Story Mood",
"fieldOptions": {
"values": [
{
"option": "Happy and Fun"
},
{
"option": "Adventurous and Exciting"
},
{
"option": "Calm and Peaceful"
},
{
"option": "Mysterious and Intriguing"
},
{
"option": "Educational and Informative"
},
{
"option": "Funny and Silly"
},
{
"option": "Heartwarming and Emotional"
}
]
},
"requiredField": true
}
]
},
"formDescription": "Create an illustrated story with AI. Fill in the details and get a complete story with DALL-E 3 images for each scene. Generation takes 2-5 minutes."
},
"typeVersion": 2.3
},
{
"id": "63a1bedb-00f8-42c4-b01f-c8036628985f",
"name": "Verify Submission Data",
"type": "n8n-nodes-base.code",
"position": [
655,
175
],
"parameters": {
"jsCode": "// Validate input and generate story ID\nconst formData = $input.first().json;\n\n// Validate number of scenes (1-12)\nlet numScenes = parseInt(formData['Number of Scenes']) || 4;\nif (numScenes < 1) numScenes = 1;\nif (numScenes > 12) numScenes = 12;\n\n// Generate unique story ID\nconst storyId = `story_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\nreturn {\n  json: {\n    ...formData,\n    numScenes: numScenes,\n    storyId: storyId\n  }\n};"
},
"typeVersion": 2
},
{
"id": "6a9a8aab-3dad-429b-a39c-563445e3671c",
"name": "Compose Narrative (GPT-4)",
"type": "n8n-nodes-base.httpRequest",
"position": [
390,
120
],
"parameters": {
"url": "https://api.openai.com/v1/chat/completions",
"method": "POST",
"options": [],
"jsonBody": "={\n  \"model\": \"gpt-4o\",\n  \"messages\": [\n    {\n      \"role\": \"system\",\n      \"content\": \"You are a master storyteller creating illustrated stories. Generate engaging narratives with vivid, DALL-E-friendly image prompts. Keep prompts concise but descriptive.\"\n    },\n    {\n      \"role\": \"user\",\n      \"content\": \"Create an illustrated story:\\n\\nTOPIC: {{ $json['Story Topic'] }}\\n\\nSPECS:\\n- Language: {{ $json.Language }}\\n- Scenes: {{ $json.numScenes }}\\n- Audience: {{ $json['Target Audience'] }}\\n- Mood: {{ $json['Story Mood'] }}\\n- Art style: {{ $json['Image Style'] }}\\n\\nRULES:\\n1. Exactly {{ $json.numScenes }} scenes\\n2. Write story text in {{ $json.Language }}\\n3. Image prompts in English, include art style\\n4. Age-appropriate content\\n5. Clear beginning, middle, end\"\n    }\n  ],\n  \"response_format\": {\n    \"type\": \"json_schema\",\n    \"json_schema\": {\n      \"name\": \"illustrated_story\",\n      \"strict\": true,\n      \"schema\": {\n        \"type\": \"object\",\n        \"additionalProperties\": false,\n        \"properties\": {\n          \"title\": { \"type\": \"string\" },\n          \"titleEnglish\": { \"type\": \"string\" },\n          \"summary\": { \"type\": \"string\" },\n          \"summaryEnglish\": { \"type\": \"string\" },\n          \"language\": { \"type\": \"string\" },\n          \"targetAudience\": { \"type\": \"string\" },\n          \"mood\": { \"type\": \"string\" },\n          \"moral\": { \"type\": \"string\" },\n          \"scenes\": {\n            \"type\": \"array\",\n            \"items\": {\n              \"type\": \"object\",\n              \"additionalProperties\": false,\n              \"properties\": {\n                \"sceneNumber\": { \"type\": \"number\" },\n                \"title\": { \"type\": \"string\" },\n                \"text\": { \"type\": \"string\" },\n                \"textEnglish\": { \"type\": \"string\" },\n                \"imagePrompt\": { \"type\": \"string\" }\n              },\n              \"required\": [\"sceneNumber\", \"title\", \"text\", \"textEnglish\", \"imagePrompt\"]\n            }\n          },\n          \"characters\": {\n            \"type\": \"array\",\n            \"items\": {\n              \"type\": \"object\",\n              \"additionalProperties\": false,\n              \"properties\": {\n                \"name\": { \"type\": \"string\" },\n                \"description\": { \"type\": \"string\" },\n                \"role\": { \"type\": \"string\" }\n              },\n              \"required\": [\"name\", \"description\", \"role\"]\n            }\n          }\n        },\n        \"required\": [\"title\", \"titleEnglish\", \"summary\", \"summaryEnglish\", \"language\", \"targetAudience\", \"mood\", \"moral\", \"scenes\", \"characters\"]\n      }\n    }\n  }\n}",
"sendBody": true,
"specifyBody": "json",
"authentication": "predefinedCredentialType",
"nodeCredentialType": "openAiApi"
},
"typeVersion": 4.3
},
{
"id": "a1b2c17c-9433-43c8-a031-eba04f3d231d",
"name": "Shape Story Payload",
"type": "n8n-nodes-base.code",
"position": [
0,
195
],
"parameters": {
"jsCode": "// Prepare story data for image generation\nconst response = $input.first().json;\nconst formData = $('Verify Submission Data').first().json;\nconst imageStyle = formData['Image Style'];\n\nconst story = JSON.parse(response.choices[0].message.content);\n\nfunction sanitize(text) {\n  if (!text) return '';\n  return text\n    .replace(/\\\\/g, '\\\\\\\\')\n    .replace(/\"/g, \"'\")\n    .replace(/\\n/g, ' ')\n    .replace(/\\r/g, '')\n    .replace(/\\t/g, ' ')\n    .replace(/[\\x00-\\x1F\\x7F]/g, '')\n    .trim();\n}\n\nconst preparedScenes = story.scenes.map((scene, index) => {\n  const dallePrompt = `${imageStyle}, children's book illustration: ${sanitize(scene.imagePrompt)}. High quality, vibrant colors, no text in image.`;\n  \n  return {\n    ...scene,\n    sceneIndex: index,\n    dallePrompt: dallePrompt.substring(0, 4000),\n    imageUrl: null\n  };\n});\n\nreturn {\n  json: {\n    story: { ...story, scenes: preparedScenes },\n    formData: formData,\n    storyId: formData.storyId,\n    totalScenes: preparedScenes.length,\n    createdAt: new Date().toISOString()\n  }\n};"
},
"typeVersion": 2
},
{
"id": "8eaff9ca-1e46-444d-bceb-661799278aa9",
"name": "Render Scene Images",
"type": "n8n-nodes-base.code",
"position": [
200,
315
],
"parameters": {
"jsCode": "// ========================================\n// GENERATE IMAGES WITH DALL-E 3\n// ========================================\n// Update OPENAI_API_KEY with your key or use credentials\n// ========================================\n\nconst data = $input.first().json;\nconst scenes = data.story.scenes;\n\n// \u26a0\ufe0f REPLACE WITH YOUR API KEY\nconst OPENAI_API_KEY = '[CONFIGURE_YOUR_API_KEY]';\n\nconst processedScenes = [];\n\nfor (let i = 0; i < scenes.length; i++) {\n  const scene = scenes[i];\n  \n  try {\n    const response = await fetch('https://api.openai.com/v1/images/generations', {\n      method: 'POST',\n      headers: {\n        'Authorization': `Bearer ${OPENAI_API_KEY}`,\n        'Content-Type': 'application/json'\n      },\n      body: JSON.stringify({\n        model: 'dall-e-3',\n        prompt: scene.dallePrompt,\n        n: 1,\n        size: '1024x1024',\n        quality: 'standard',\n        response_format: 'url'\n      })\n    });\n    \n    const result = await response.json();\n    \n    if (result.error) {\n      processedScenes.push({\n        ...scene,\n        imageUrl: `https://placehold.co/1024x1024/ef4444/ffffff?text=Error`,\n        imageError: result.error.message\n      });\n    } else {\n      processedScenes.push({\n        ...scene,\n        imageUrl: result.data[0].url,\n        imageGeneratedAt: new Date().toISOString()\n      });\n    }\n    \n    // Rate limit: wait 1 second between requests\n    if (i < scenes.length - 1) {\n      await new Promise(resolve => setTimeout(resolve, 1000));\n    }\n    \n  } catch (error) {\n    processedScenes.push({\n      ...scene,\n      imageUrl: `https://placehold.co/1024x1024/ef4444/ffffff?text=Error`,\n      imageError: error.message\n    });\n  }\n}\n\nreturn {\n  json: {\n    story: { ...data.story, scenes: processedScenes },\n    formData: data.formData,\n    storyId: data.storyId,\n    totalScenes: data.totalScenes,\n    createdAt: data.createdAt\n  }\n};"
},
"typeVersion": 2
},
{
"id": "46e5ffed-e608-45c0-9379-d09eb4d308f8",
"name": "Upload Images to Storage",
"type": "n8n-nodes-base.code",
"position": [
440,
455
],
"parameters": {
"jsCode": "// ========================================\n// UPLOAD IMAGES TO FIREBASE STORAGE\n// ========================================\n// Update FIREBASE_BUCKET with your bucket name\n// ========================================\n\nconst data = $input.first().json;\nconst scenes = data.story.scenes;\nconst storyId = data.storyId;\n\n// \u26a0\ufe0f REPLACE WITH YOUR FIREBASE BUCKET\nconst FIREBASE_BUCKET = '[YOUR_ID]';\n\nconst uploadedScenes = [];\n\nfor (let i = 0; i < scenes.length; i++) {\n  const scene = scenes[i];\n  \n  if (scene.imageError || !scene.imageUrl || scene.imageUrl.includes('placehold.co')) {\n    uploadedScenes.push(scene);\n    continue;\n  }\n  \n  try {\n    // Download from DALL-E\n    const imageResponse = await fetch(scene.imageUrl);\n    const imageBuffer = await imageResponse.arrayBuffer();\n    \n    // Upload to Firebase\n    const storagePath = `stories/${storyId}/scene_${i}.png`;\n    const encodedPath = encodeURIComponent(storagePath);\n    \n    const uploadResponse = await fetch(\n      `https://firebasestorage.googleapis.com/v0/b/${FIREBASE_BUCKET}/o?name=${encodedPath}`,\n      {\n        method: 'POST',\n        headers: { 'Content-Type': 'image/png' },\n        body: Buffer.from(imageBuffer)\n      }\n    );\n    \n    const uploadResult = await uploadResponse.json();\n    \n    let firebaseUrl = uploadResult.downloadTokens\n      ? `https://firebasestorage.googleapis.com/v0/b/${FIREBASE_BUCKET}/o/${encodedPath}?alt=media&token=[CONFIGURE_YOUR_TOKEN]\n      : `https://firebasestorage.googleapis.com/v0/b/${FIREBASE_BUCKET}/o/${encodedPath}?alt=media`;\n    \n    uploadedScenes.push({ ...scene, imageUrl: firebaseUrl });\n    \n  } catch (error) {\n    uploadedScenes.push(scene);\n  }\n}\n\nreturn {\n  json: {\n    story: { ...data.story, scenes: uploadedScenes },\n    formData: data.formData,\n    storyId: data.storyId,\n    totalScenes: data.totalScenes,\n    createdAt: data.createdAt\n  }\n};"
},
"typeVersion": 2
},
{
"id": "fac63dab-0dc1-4291-98a2-f887c192ca61",
"name": "Assemble Final Story",
"type": "n8n-nodes-base.code",
"position": [
760,
325
],
"parameters": {
"jsCode": "// Finalize story object\nconst data = $input.first().json;\n\nconst finalScenes = data.story.scenes.map(scene => {\n  const { sceneIndex, dallePrompt, imageError, ...cleanScene } = scene;\n  return cleanScene;\n});\n\nconst finalStory = {\n  id: data.storyId,\n  title: data.story.title,\n  titleEnglish: data.story.titleEnglish,\n  summary: data.story.summary,\n  summaryEnglish: data.story.summaryEnglish,\n  language: data.story.language,\n  targetAudience: data.story.targetAudience,\n  mood: data.story.mood,\n  moral: data.story.moral,\n  imageStyle: data.formData['Image Style'],\n  totalScenes: finalScenes.length,\n  scenes: finalScenes,\n  characters: data.story.characters,\n  metadata: {\n    createdAt: data.createdAt,\n    updatedAt: new Date().toISOString(),\n    generator: 'AI Story Generator',\n    originalPrompt: data.formData['Story Topic']\n  }\n};\n\nreturn {\n  json: {\n    finalStory: finalStory,\n    language: data.formData.Language.toLowerCase().replace(' ', '_')\n  }\n};"
},
"typeVersion": 2
},
{
"id": "aa4481c0-ef84-4931-bbe5-0a2b046adace",
"name": "Build Firestore Document",
"type": "n8n-nodes-base.code",
"position": [
520,
560
],
"parameters": {
"jsCode": "// ========================================\n// PREPARE FIRESTORE DOCUMENT\n// ========================================\n// Update FIREBASE_PROJECT_ID with your project ID\n// ========================================\n\nconst data = $input.first().json;\nconst story = data.finalStory;\n\n// \u26a0\ufe0f REPLACE WITH YOUR PROJECT ID\nconst FIREBASE_PROJECT_ID = '[YOUR_ID]';\n\nfunction toFirestore(value) {\n  if (value === null || value === undefined) return { nullValue: null };\n  if (typeof value === 'boolean') return { booleanValue: value };\n  if (typeof value === 'number') {\n    return Number.isInteger(value) ? { integerValue: String(value) } : { doubleValue: value };\n  }\n  if (typeof value === 'string') return { stringValue: value };\n  if (Array.isArray(value)) {\n    return { arrayValue: { values: value.map(v => toFirestore(v)) } };\n  }\n  if (typeof value === 'object') {\n    const fields = {};\n    for (const [k, v] of Object.entries(value)) {\n      fields[k] = toFirestore(v);\n    }\n    return { mapValue: { fields } };\n  }\n  return { stringValue: String(value) };\n}\n\nconst docFields = {\n  id: toFirestore(story.id),\n  title: toFirestore(story.title),\n  titleEnglish: toFirestore(story.titleEnglish),\n  summary: toFirestore(story.summary),\n  summaryEnglish: toFirestore(story.summaryEnglish),\n  language: toFirestore(story.language),\n  targetAudience: toFirestore(story.targetAudience),\n  mood: toFirestore(story.mood),\n  moral: toFirestore(story.moral),\n  imageStyle: toFirestore(story.imageStyle),\n  totalScenes: toFirestore(story.totalScenes),\n  scenes: toFirestore(story.scenes),\n  characters: toFirestore(story.characters),\n  metadata: toFirestore(story.metadata),\n  createdAt: { timestampValue: new Date().toISOString() }\n};\n\nreturn {\n  json: {\n    body: { fields: docFields },\n    collection: `stories/${data.language}/items`,\n    docId: story.id,\n    projectId: FIREBASE_PROJECT_ID,\n    finalStory: story\n  }\n};"
},
"typeVersion": 2
},
{
"id": "e48ee420-0e8e-4ab0-adf2-4794ece9cdb6",
"name": "Store in Firestore",
"type": "n8n-nodes-base.httpRequest",
"position": [
280,
420
],
"parameters": {
"url": "=https://firestore.googleapis.com/v1/projects/{{ $json.projectId }}/databases/(default)/documents/{{ $json.collection }}/{{ $json.docId }}",
"method": "PATCH",
"options": [],
"jsonBody": "={{ JSON.stringify($json.body) }}",
"sendBody": true,
"specifyBody": "json",
"authentication": "predefinedCredentialType",
"nodeCredentialType": "googleApi"
},
"typeVersion": 4.3
},
{
"id": "fe5e2273-9610-442d-815c-d7d06d41cbc3",
"name": "Send Webhook Reply",
"type": "n8n-nodes-base.respondToWebhook",
"position": [
40,
560
],
"parameters": {
"options": {
"responseHeaders": {
"entries": [
{
"name": "Content-Type",
"value": "application/json"
}
]
}
},
"respondWith": "json",
"responseBody": "={\n  \"success\": true,\n  \"message\": \"Story generated successfully!\",\n  \"story\": {{ JSON.stringify($('Build Firestore Document').first().json.finalStory) }}\n}"
},
"typeVersion": 1.1
}
],
"pinData": [],
"connections": {
"Assemble Final Story": {
"main": [
[
{
"node": "Build Firestore Document",
"type": "main",
"index": 0
}
]
]
},
"Verify Submission Data": {
"main": [
[
{
"node": "Compose Narrative (GPT-4)",
"type": "main",
"index": 0
}
]
]
},
"Story Form Intake": {
"main": [
[
{
"node": "Verify Submission Data",
"type": "main",
"index": 0
}
]
]
},
"Store in Firestore": {
"main": [
[
{
"node": "Send Webhook Reply",
"type": "main",
"index": 0
}
]
]
},
"Shape Story Payload": {
"main": [
[
{
"node": "Render Scene Images",
"type": "main",
"index": 0
}
]
]
},
"Compose Narrative (GPT-4)": {
"main": [
[
{
"node": "Shape Story Payload",
"type": "main",
"index": 0
}
]
]
},
"Build Firestore Document": {
"main": [
[
{
"node": "Store in Firestore",
"type": "main",
"index": 0
}
]
]
},
"Render Scene Images": {
"main": [
[
{
"node": "Upload Images to Storage",
"type": "main",
"index": 0
}
]
]
},
"Upload Images to Storage": {
"main": [
[
{
"node": "Assemble Final Story",
"type": "main",
"index": 0
}
]
]
}
}
}