Générez un logo personnalisé à partir de sites web avec OpenAI et Gemini

Intermédiaire

Ceci est uncontenant 13 nœuds.Utilise principalement des nœuds comme Webhook, HttpRequest, Agent, RespondToWebhook, GoogleGemini. Générer des logos personnalisés à partir de sites web avec OpenAI et Gemini

Prérequis
  • Point de terminaison HTTP Webhook (généré automatiquement par n8n)
  • Peut nécessiter les informations d'identification d'authentification de l'API cible
  • Clé API OpenAI

Catégorie

-
Aperçu du workflow
Visualisation des connexions entre les nœuds, avec support du zoom et du déplacement
Exporter le workflow
Copiez la configuration JSON suivante dans n8n pour importer et utiliser ce workflow
{
  "meta": {
    "instanceId": "3d7eb9567ae690bf8c9bba1cb43396e6e40c18e15eb5889cf9673ed1713da6db",
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "4c829734-83d0-43ef-8111-2b8222bff6ee",
      "name": "When Website URL Received",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -1136,
        2224
      ],
      "webhookId": "15a007b2-0c35-47f6-8387-5b3548c2e295",
      "parameters": {
        "path": "175b3350-1d0c-48c5-99d1-06e3b209a68097t657yi97",
        "options": {},
        "httpMethod": "POST",
        "responseMode": "responseNode"
      },
      "typeVersion": 2.1
    },
    {
      "id": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
      "name": "Capture Website Screenshot",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -976,
        2224
      ],
      "parameters": {
        "url": "=https://api.screenshotone.com/take",
        "options": {},
        "sendQuery": true,
        "queryParameters": {
          "parameters": [
            {
              "name": "access_key",
              "value": "[Your ScreenshotOne Access Key]"
            },
            {
              "name": "url",
              "value": "={{ $json.body.websiteUrl }}"
            },
            {
              "name": "format",
              "value": "jpg"
            },
            {
              "name": "block_ads",
              "value": "true"
            },
            {
              "name": "block_cookie_banners",
              "value": "true"
            },
            {
              "name": "block_banners_by_heuristics",
              "value": "false"
            },
            {
              "name": "block_trackers",
              "value": "true"
            },
            {
              "name": "delay",
              "value": "0"
            },
            {
              "name": "timeout",
              "value": "60"
            },
            {
              "name": "response_type",
              "value": "=json"
            },
            {
              "name": "image_quality",
              "value": "80"
            }
          ]
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
      "name": "Fetch Website Content",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -816,
        2224
      ],
      "parameters": {
        "url": "={{ $('When Website URL Received').item.json.body.websiteUrl }}",
        "options": {}
      },
      "typeVersion": 4.2
    },
    {
      "id": "5995ca13-7f6b-4899-88fb-d85e18921143",
      "name": "Generate Logo Prompt",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        -640,
        2224
      ],
      "parameters": {
        "text": "=Write a prompt to create a logo for this website based of the content of the site and a screenshot of the front page\n\nScreenshot: {{ $('Capture Website Screenshot').item.json.screenshot_url }}\nWebsite data:{{ $json.data }}\n\nOutput the prompt in \"Prompt\"",
        "options": {
          "passthroughBinaryImages": true
        },
        "promptType": "define"
      },
      "typeVersion": 2.2
    },
    {
      "id": "5b7b8344-4acc-46df-8412-30cdaeb49273",
      "name": "Generate Logo Image",
      "type": "@n8n/n8n-nodes-langchain.googleGemini",
      "position": [
        -352,
        2224
      ],
      "parameters": {
        "prompt": "={{ $json.output }}",
        "modelId": {
          "__rl": true,
          "mode": "list",
          "value": "models/gemini-2.5-flash-image",
          "cachedResultName": "models/gemini-2.5-flash-image (Nano Banana)"
        },
        "options": {},
        "resource": "image"
      },
      "credentials": {
        "googlePalmApi": {
          "id": "7v8o9EaQkl33woxm",
          "name": "v9"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
      "name": "Respond with Logo",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        -176,
        2224
      ],
      "parameters": {
        "options": {},
        "respondWith": "binary"
      },
      "typeVersion": 1.4
    },
    {
      "id": "f1bc68c6-ccf3-4fdf-97c5-5a86928838f7",
      "name": "Note: Déclencheur Webhook Trigger",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1248,
        2000
      ],
      "parameters": {
        "color": 6,
        "width": 344,
        "height": 212,
        "content": "## 📥 When Website URL Received\n\n**Purpose:** Triggers workflow on POST request with website URL.\n\n**Note:** Body format: {\"websiteUrl\": \"https://example.com\"}"
      },
      "typeVersion": 1
    },
    {
      "id": "a1cef014-ddd9-4db2-8333-a7579608008e",
      "name": "Note: Screenshot Capture",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1168,
        2464
      ],
      "parameters": {
        "color": 3,
        "width": 312,
        "height": 212,
        "content": "## 🖼️ Capture Website Screenshot\n\n**Purpose:** Fetches site screenshot via ScreenshotOne API for visual analysis.\n\n**Note:** Replace placeholder with your API key; outputs JSON with screenshot_url."
      },
      "typeVersion": 1
    },
    {
      "id": "62e394c1-363f-4164-81f5-39cde9ca7b22",
      "name": "Note: Content Fetch",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -816,
        2000
      ],
      "parameters": {
        "color": 5,
        "width": 216,
        "height": 196,
        "content": "## 🌐 Fetch Website Content\n\n**Purpose:** Scrapes HTML from the URL for text-based site analysis.\n"
      },
      "typeVersion": 1
    },
    {
      "id": "21b9ad9a-cbb4-4ad2-94d7-6424bf906478",
      "name": "Note: Prompt Generation",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -528,
        2464
      ],
      "parameters": {
        "color": 5,
        "width": 312,
        "height": 212,
        "content": "## ✍️ Generate Logo Prompt\n\n**Purpose:** AI agent crafts logo prompt using OpenAI from content and screenshot.\n\n**Note:** Multimodal input; outputs refined prompt for image gen."
      },
      "typeVersion": 1
    },
    {
      "id": "cb688126-2285-4ff0-9beb-259c9d0f7c43",
      "name": "Note: Logo Generation",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -368,
        2000
      ],
      "parameters": {
        "color": 2,
        "width": 280,
        "height": 180,
        "content": "## 🎨 Generate Logo Image\n\n**Purpose:** Creates logo via Google Gemini using the AI-crafted prompt.\n\n**Note:** Image resource; returns binary data for response."
      },
      "typeVersion": 1
    },
    {
      "id": "d470c3e0-e75b-455c-b514-7e242fe664dc",
      "name": "Overview Note5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1888,
        1808
      ],
      "parameters": {
        "color": 4,
        "width": 600,
        "height": 1100,
        "content": "# 🤖 AI Logo Generator from Website URL\n\n## 📋 What This Template Does\nThis workflow receives a website URL via webhook, captures a screenshot and fetches page content, uses OpenAI to craft a logo prompt from visuals and text, then generates the image with Google Gemini for binary response.\n\n## 🔧 Prerequisites\n- n8n instance with webhook support\n- ScreenshotOne account\n- OpenAI account\n- Google AI Studio account\n\n## 🔑 Required Credentials\n\n### ScreenshotOne API Setup\n1. Sign up at screenshotone.com → Dashboard → API Keys\n2. Generate access key\n3. Replace placeholder in \"Capture Website Screenshot\" node\n\n### OpenAI API Setup\n1. platform.openai.com → API Keys\n2. Create secret key\n3. Add as \"OpenAI API\" credential\n\n### Google Gemini API Setup\n1. aistudio.google.com/app/apikey\n2. Create API key\n3. Add as \"Google PaLM API\" credential\n\n## ⚙️ Configuration Steps\n1. Import JSON workflow\n2. Assign credentials to nodes\n3. Replace API key placeholder\n4. Activate webhook\n5. Test with POST {\"websiteUrl\": \"https://example.com\"}\n\n## 🎯 Use Cases\n- Marketing: Generate client logo prototypes\n- Developers: Auto-match logos for sites\n- Designers: Inspire from competitors\n- Education: Demo AI design\n\n## ⚠️ Troubleshooting\n- Screenshot timeout: Increase to 120s, check URL\n- Empty prompt: Verify OpenAI quota\n- Blank logo: Add style to prompt, check limits\n- No trigger: Confirm POST JSON body"
      },
      "typeVersion": 1
    },
    {
      "id": "ae9beb67-4ce8-43be-a73c-37fb446517fd",
      "name": "GPT-5 mini",
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
      "position": [
        -640,
        2400
      ],
      "parameters": {
        "model": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-5-mini",
          "cachedResultName": "gpt-5-mini"
        },
        "options": {}
      },
      "credentials": {
        "openAiApi": {
          "id": "ymMvgDroJHalwvRf",
          "name": "OpenAI"
        }
      },
      "typeVersion": 1.2
    }
  ],
  "pinData": {},
  "connections": {
    "ae9beb67-4ce8-43be-a73c-37fb446517fd": {
      "ai_languageModel": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "5b7b8344-4acc-46df-8412-30cdaeb49273": {
      "main": [
        [
          {
            "node": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "5995ca13-7f6b-4899-88fb-d85e18921143": {
      "main": [
        [
          {
            "node": "5b7b8344-4acc-46df-8412-30cdaeb49273",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17": {
      "main": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "4c829734-83d0-43ef-8111-2b8222bff6ee": {
      "main": [
        [
          {
            "node": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb": {
      "main": [
        [
          {
            "node": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
Foire aux questions

Comment utiliser ce workflow ?

Copiez le code de configuration JSON ci-dessus, créez un nouveau workflow dans votre instance n8n et sélectionnez "Importer depuis le JSON", collez la configuration et modifiez les paramètres d'authentification selon vos besoins.

Dans quelles scénarios ce workflow est-il adapté ?

Intermédiaire

Est-ce payant ?

Ce workflow est entièrement gratuit et peut être utilisé directement. Veuillez noter que les services tiers utilisés dans le workflow (comme l'API OpenAI) peuvent nécessiter un paiement de votre part.

Informations sur le workflow
Niveau de difficulté
Intermédiaire
Nombre de nœuds13
Catégorie-
Types de nœuds7
Description de la difficulté

Adapté aux utilisateurs expérimentés, avec des workflows de complexité moyenne contenant 6-15 nœuds

Auteur
Daniel Nkencho

Daniel Nkencho

@daniel-automates

AI Automation Consultant | Helping Business Owners Implement AI Systems for Growth and Lead Gen

Liens externes
Voir sur n8n.io

Partager ce workflow

Catégories

Catégories: 34