{
  "id": "DUXwnWSTOorqQkd8",
  "name": "Simple Profile Picture Generator (No API Keys Needed)",
  "tags": [],
  "nodes": [
    {
      "id": "2aeaa8fe-f9c0-4a1d-8434-4b08618ec739",
      "name": "When clicking \u2018Execute workflow\u2019",
      "type": "n8n-nodes-base.manualTrigger",
      "position": [
        -64,
        400
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "c32da5e3-ebf0-4e07-b244-ddd49752a386",
      "name": "Call the Profile APIs",
      "type": "n8n-nodes-base.code",
      "position": [
        160,
        400
      ],
      "parameters": {
        "jsCode": "const userInput = '';\nconst randomNum = Math.floor(Math.random() * 10000);\nconst seed = userInput ? userInput.toLowerCase().replace(/\\s+/g, '-') : `random${randomNum}`;\nconst gender = Math.random() > 0.5 ? 'male' : 'female';\n\nconst apis = [\n  { name: 'RandomUser', url: `https://randomuser.me/api/portraits/${gender === 'female' ? 'women' : 'men'}/${Math.floor(Math.random() * 99)}.jpg` },\n  { name: 'DiceBear Avataaars', url: `https://api.dicebear.com/7.x/avataaars/png?seed=${seed}&size=200` },\n  { name: 'DiceBear Bottts', url: `https://api.dicebear.com/7.x/bottts/png?seed=${seed}&size=200` },\n  { name: 'DiceBear Pixel Art', url: `https://api.dicebear.com/7.x/pixel-art/png?seed=${seed}&size=200` },\n  { name: 'DiceBear Lorelei', url: `https://api.dicebear.com/7.x/lorelei/png?seed=${seed}&size=200` },\n  { name: 'DiceBear Initials', url: `https://api.dicebear.com/7.x/initials/png?seed=${seed}&size=200` },\n  { name: 'RoboHash Robot', url: `https://robohash.org/${seed}.png?size=200x200&set=set1` },\n  { name: 'RoboHash Monster', url: `https://robohash.org/${seed}.png?size=200x200&set=set2` },\n  { name: 'UI Avatars Blue', url: `https://ui-avatars.com/api/?name=${seed}&size=200&background=4299e1&color=fff` },\n  { name: 'UI Avatars Purple', url: `https://ui-avatars.com/api/?name=${seed}&size=200&background=9f7aea&color=fff` },\n  { name: 'UI Avatars Green', url: `https://ui-avatars.com/api/?name=${seed}&size=200&background=48bb78&color=fff` },\n  { name: 'UI Avatars Orange', url: `https://ui-avatars.com/api/?name=${seed}&size=200&background=ed8936&color=fff` }\n];\n\nreturn { json: { apis, gender, seed } };"
      },
      "typeVersion": 2
    },
    {
      "id": "facbcb9a-b72a-466d-8632-f99d7669c07f",
      "name": "Generate HTML Format",
      "type": "n8n-nodes-base.code",
      "position": [
        544,
        400
      ],
      "parameters": {
        "jsCode": "const apis = $input.item.json.apis;\nconst gender = $input.item.json.gender;\nconst seed = $input.item.json.seed;\n\nconst html = `\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Profile Picture Gallery</title>\n  <style>\n    * { \n      box-sizing: border-box; \n      margin: 0;\n      padding: 0;\n    }\n    body { \n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n      padding: 40px 20px; \n      background: #f5f7fa;\n      color: #333;\n      line-height: 1.6;\n    }\n    .container { \n      max-width: 1400px; \n      margin: 0 auto; \n    }\n    header {\n      margin-bottom: 40px;\n      text-align: center;\n    }\n    h1 { \n      font-size: 2em;\n      font-weight: 600;\n      color: #2d3748;\n      margin-bottom: 12px;\n    }\n    .metadata {\n      display: inline-block;\n      background: white;\n      padding: 8px 16px;\n      border-radius: 6px;\n      font-size: 14px;\n      color: #718096;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    }\n    .metadata span {\n      margin: 0 8px;\n    }\n    .gallery { \n      display: grid; \n      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); \n      gap: 24px;\n    }\n    .card { \n      background: white; \n      padding: 24px; \n      border-radius: 8px; \n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n      text-align: center;\n      border: 1px solid #e2e8f0;\n    }\n    .card:hover { \n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n    .image-wrapper {\n      margin-bottom: 16px;\n    }\n    img { \n      width: 180px; \n      height: 180px; \n      border-radius: 50%; \n      object-fit: cover;\n      border: 3px solid #e2e8f0;\n      background: #f7fafc;\n    }\n    .api-name { \n      font-weight: 500; \n      color: #2d3748; \n      font-size: 15px;\n      margin-bottom: 12px;\n    }\n    .download-link { \n      display: inline-block; \n      padding: 8px 20px; \n      background: #4a5568;\n      color: white; \n      text-decoration: none; \n      border-radius: 4px; \n      font-size: 13px;\n      font-weight: 500;\n    }\n    .download-link:hover { \n      background: #2d3748;\n    }\n    @media (max-width: 768px) {\n      body { padding: 20px 12px; }\n      h1 { font-size: 1.5em; }\n      .gallery { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }\n      img { width: 150px; height: 150px; }\n    }\n  </style>\n</head>\n<body>\n  <div class=\"container\">\n    <header>\n      <h1>Profile Picture Gallery</h1>\n      <div class=\"metadata\">\n        <span>Gender: <strong>${gender}</strong></span>\n        <span>|</span>\n        <span>Seed: <strong>${seed}</strong></span>\n      </div>\n    </header>\n    <div class=\"gallery\">\n${apis.map(api => `\n      <div class=\"card\">\n        <div class=\"image-wrapper\">\n          <img src=\"${api.url}\" alt=\"${api.name}\" loading=\"lazy\">\n        </div>\n        <div class=\"api-name\">${api.name}</div>\n        <a href=\"${api.url}\" class=\"download-link\" download=\"${api.name.toLowerCase().replace(/\\s+/g, '-')}-${seed}.png\" target=\"_blank\">Download</a>\n      </div>\n`).join('')}\n    </div>\n  </div>\n</body>\n</html>\n`;\n\nreturn { json: { html } };"
      },
      "typeVersion": 2
    },
    {
      "id": "4764fe70-9bf2-48f3-883f-57c2e48032fa",
      "name": "Show the Profile Pictures",
      "type": "n8n-nodes-base.html",
      "position": [
        992,
        400
      ],
      "parameters": {
        "html": "{{ $json.html }}"
      },
      "typeVersion": 1.2
    },
    {
      "id": "32706552-05aa-4f8a-97e3-49c70196bf63",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -720,
        -304
      ],
      "parameters": {
        "width": 512,
        "height": 864,
        "content": "## Simple Profile Picture Generator (No API Keys Needed)\n\n### How it works\n1. Trigger the workflow manually.\n2. The workflow generates a unique seed (random number or custom keyword) and randomly selects a gender.\n3. The simple JavaScript code generates 12 different avatar URLs from multiple free APIs using the same seed for consistency.\n4. All avatar URLs are passed to an HTML generator that creates a responsive gallery.\n5. The final HTML displays all 12 avatar styles in a grid with metadata (seed and gender).\n6. Each avatar includes a download button for easy saving.\n\n### How to Set Up\n1. No API keys required! All avatar services used are completely free and public.\n2. Simply import the workflow and click \"Execute Workflow\" to generate your avatar gallery.\n3. The workflow works immediately without any configuration needed.\n4. I tried to make the JavaScript is simple to the beginner, that's mean you can understand it just by looking at the code.\n\n### Customize\n1. **Use custom seed instead of random**: In the \"Generate APIs\" node (line 1), change `const userInput = '';` to `const userInput = 'your-name';` to generate consistent avatars based on your chosen keyword.\n2. **Set fixed gender**: In the \"Generate APIs\" node (line 4), change `const gender = Math.random() > 0.5 ? 'male' : 'female';` to `const gender = 'female';` or `const gender = 'male';` for consistent gender across compatible APIs.\n3. **Add or remove avatar APIs**: Edit the `apis` array in the \"Generate APIs\" node to include your preferred avatar services or remove unwanted styles.\n4. **Change avatar size**: Replace `size=200` or `&size=200` with your desired dimensions (e.g., `size=300`) in the API URLs within the \"Generate APIs\" node.\n"
      },
      "typeVersion": 1
    },
    {
      "id": "17e3acc6-1927-4536-972c-d1c669b26c73",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -128,
        304
      ],
      "parameters": {
        "color": 7,
        "width": 432,
        "height": 256,
        "content": "## 1. Call the APIs to get random profile images"
      },
      "typeVersion": 1
    },
    {
      "id": "a2b96150-302a-4ec4-af8d-ae8c9010b1c9",
      "name": "Sticky Note2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        368,
        304
      ],
      "parameters": {
        "color": 7,
        "width": 432,
        "height": 256,
        "content": "## 2. Generate HTML format to show the profile images"
      },
      "typeVersion": 1
    },
    {
      "id": "48e9bfa0-b859-4c46-9ab0-c569ba8de65c",
      "name": "Sticky Note3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        848,
        304
      ],
      "parameters": {
        "color": 7,
        "width": 432,
        "height": 256,
        "content": "## 3. Show the results and download the profile picture"
      },
      "typeVersion": 1
    },
    {
      "id": "c0d3abdd-2859-4a14-9cb4-27b6ce734ad6",
      "name": "Sticky Note4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -720,
        624
      ],
      "parameters": {
        "color": 7,
        "width": 512,
        "height": 384,
        "content": "## Here's How\n\n@[youtube](bspOMa5LwM0)"
      },
      "typeVersion": 1
    }
  ],
  "active": false,
  "settings": {
    "executionOrder": "v1"
  },
  "versionId": "15cc46a2-0e3e-491f-9779-1e546740456e",
  "connections": {
    "Generate HTML Format": {
      "main": [
        [
          {
            "node": "Show the Profile Pictures",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Call the Profile APIs": {
      "main": [
        [
          {
            "node": "Generate HTML Format",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "When clicking \u2018Execute workflow\u2019": {
      "main": [
        [
          {
            "node": "Call the Profile APIs",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}