{"id":55581,"date":"2026-10-08T16:06:26","date_gmt":"2026-10-08T23:06:26","guid":{"rendered":"https:\/\/www.griddb.net\/?p=55581"},"modified":"2026-10-08T16:26:44","modified_gmt":"2026-10-08T23:26:44","slug":"create-stunning-infographics-using-nano-banana-pro-in-agentic-way","status":"publish","type":"post","link":"https:\/\/www.griddb.net\/en\/blog\/create-stunning-infographics-using-nano-banana-pro-in-agentic-way\/","title":{"rendered":"Create Stunning Infographics using Nano Banana Pro in Agentic Way"},"content":{"rendered":"

Introduction<\/h2>\n

\nForget the old times when you had to manually create infographics. With Nano Banana Pro, you can now create stunning infographics in minutes.\n<\/p>\n

Nano Banana Pro<\/a> is an advanced AI image generation and editing model developed by Google DeepMind as part of the Gemini AI family. It\u2019s essentially a professional grade tool for creating high-quality visuals\u2014like illustrations, infographics, mockups, and edited photos using natural language text prompts or reference images.<\/p>\n

\nIn this blog post, we will build a web application that leverages Nano Banana Pro to generate stunning infographics from any accessible content such as articles, and store the generated infographics data using GridDB as the high-performance database backend.\n<\/p>\n

Running the Application<\/h2>\n

\nTo run this application, you need to:\n<\/p>\n

    \n
  1. Clone this repository<\/a> and run the following commands:<\/li>\n<\/ol>\n
    \n
    $     git clone https:\/\/github.com\/junwatu\/infographic-nbp-griddb.git\r\n$     cd infographic-nbp-griddb\/apps\r\n$     npm install\r\n    <\/code><\/pre>\n<\/div>\n
      \n
    1. Set up the environment variables. Copy the .env.example<\/code> file to .env<\/code> and fill in the values:<\/li>\n<\/ol>\n
      \n
      $     WEB_URL=http:\/\/localhost:3000\r\n\r\n$     # GridDB Web API Configuration (Primary)\r\n$     GRIDDB_WEBAPI_URL=""\r\n$     GRIDDB_USERNAME=""\r\n$     GRIDDB_PASSWORD=""\r\n\r\n$     # DeepSeek API key through Anthropic-compatible endpoint\r\n$     NEBIUS_API_KEY=""\r\n\r\n$     # Nano Banana Pro through Fal API\r\n$     FAL_KEY=""\r\n    <\/code><\/pre>\n<\/div>\n
        \n
      1. Start the application:<\/li>\n<\/ol>\n
        \n
        $     npm run dev\r\n    <\/code><\/pre>\n<\/div>\n
          \n
        1. Open http:\/\/localhost:3000<\/code><\/a> in your browser and paste an article URL to generate an infographic. Please note that the article should be publicly accessible from the internet and not behind a paywall.<\/li>\n<\/ol>\n
          \"\"<\/a><\/p>\n
          System Architecture<\/h2>\n
          \"\"<\/a><\/p>\n
          \nA user submits an input through the browser, which is sent to a Node.js backend that contains two core components: a Content Retriever<\/strong> and a Prompt AI Agent<\/strong> (DeepSeek-V3.2). The Content Retriever enriches or contextualizes the user request (e.g., fetching references, templates, or prior data), after which the Prompt AI Agent constructs a structured prompt. The prompt, along with image metadata, is persisted to a GridDB database<\/strong>  for future retrieval. The finalized prompt is then forwarded to an external image generation AI model, Nano Banana Pro<\/strong>, which produces the image artifact and stores it in a file system. The generated image is subsequently served back to the browser, closing the loop.\n<\/p>\n
          Technologies Used<\/h2>\n
          Node.js<\/h3>\n
          \nThis project is built using React + Vite, which requires Node.js version 16 or higher. You can download and install Node.js from nodejs.org<\/a>.\n<\/p>\n
          Nano Banana Pro API Key<\/h3>\n
          \nYou need to create a Google API key to use the Nano Banana Pro. In this project we use FAL<\/a> inference provider to access the Nano Banana Pro API.\n<\/p>\n
          \"\"<\/a><\/p>\n
          \nPlease note that using the Nano Banana Pro API requires a paid subscription plan.\n<\/p>\n
          DeepSeek-V3.2 API Key<\/h3>\n
          \nThe latest version of DeepSeek model is V3.2, which is a recently released large language model (LLM) developed by the Chinese AI company DeepSeek, specifically optimized for coding, agentic workflows, and tool-use tasks rather than just general text chat.\n<\/p>\n
          \nTo use the DeepSeek-V3.2 API, you must obtain an API key from the Nebius Platform<\/a>. Simply create an account and generate your key from the dashboard. Please note that an active subscription plan is required to access the API features.\n<\/p>\n
          \n> The application uses the OpenAI Agents SDK which connects to DeepSeek-V3.2 via an OpenAI-compatible base URL. This is why the environment variable is named NEBIUS_API_KEY<\/code>.\n<\/p>\n
          GridDB<\/h3>\n
          Sign Up for GridDB Cloud Free Plan<\/h4>\n
          \nIf you would like to sign up for a GridDB Cloud Free instance, you can do so at the following link: https:\/\/form.ict-toshiba.jp\/download_form_griddb_cloud_freeplan_e<\/a>.\n<\/p>\n
          \nAfter successfully signing up, you will receive a free instance along with the necessary details to access the GridDB Cloud Management GUI, including the GridDB Cloud Portal URL<\/strong>, Contract ID<\/strong>, Login<\/strong>, and Password<\/strong>.\n<\/p>\n
          GridDB WebAPI URL<\/h4>\n
          \nGo to the GridDB Cloud Portal and copy the WebAPI URL from the Clusters<\/strong> section. It should look like this:\n<\/p>\n
          \"\"<\/a><\/p>\n
          GridDB Username and Password<\/h4>\n
          \nGo to the GridDB Users<\/strong> section of the GridDB Cloud portal and create or copy the username for GRIDDB_USERNAME<\/code>. The password is set when the user is created for the first time. Use this as the GRIDDB_PASSWORD<\/code>.\n<\/p>\n
          \"\"<\/a><\/p>\n
          \nFor more details, to get started with GridDB Cloud, please follow this quick start guide<\/a>.\n<\/p>\n
          IP Whitelist<\/h4>\n
          \nWhen running this project, please ensure that the IP address where the project is running is whitelisted. Failure to do so will result in a 403 status code or forbidden access.\n<\/p>\n
          \nYou can use a website like What Is My IP Address<\/a> to find your public IP address.\n<\/p>\n
          \nTo whitelist the IP, go to the GridDB Cloud Admin and navigate to the Network Access<\/strong> menu.\n<\/p>\n
          \"\"<\/a><\/p>\n
          AI Agents<\/h2>\n
          \nThis application uses a multi-agent architecture<\/strong> powered by the OpenAI Agents SDK<\/a> with DeepSeek-V3.2 as the underlying language model. The system consists of two specialized agents that work together in a coordinated pipeline.\n<\/p>\n
          Agent Architecture<\/h3>\n
          \"\"<\/a><\/p>\n
          Content Fetcher Agent<\/h3>\n
          \nThe Content Fetcher<\/strong> is a specialized agent responsible for retrieving and cleaning article content from URLs. It’s extract the main content from web pages, removing ads, navigation, and other clutter.\n<\/p>\n
          \n
          const createContentAgent = (model: any) => {\r\n    return new Agent({\r\n        name: "Content Fetcher",\r\n        instructions: "You are an expert at fetching and cleaning article content from URLs.",\r\n        model,\r\n        tools: [fetchArticleTool],\r\n    });\r\n};<\/code><\/pre>\n<\/div>\n
          \nThe fetchArticleTool<\/code> internally calls the fetchAndSanitize<\/code> function which:\n<\/p>\n
            \n
          1. Fetches the HTML from the provided URL<\/li>\n
          2. Parses it using JSDOM<\/li>\n
          3. Extracts the main content using Readability<\/li>\n
          4. Returns a simplified object containing the title<\/code> and textContent<\/code> to the agent.<\/li>\n<\/ol>\n
            Infographic Orchestrator Agent<\/h3>\n
            \nThe Orchestrator<\/strong> is the manager agent that coordinates the entire infographic generation pipeline. It has access to two tools:\n<\/p>\n
              \n
            1. fetch_article<\/strong> – The Content Fetcher agent exposed as a tool<\/li>\n
            2. image_generator<\/strong> – Generates images using Nano Banana Pro via Fal<\/li>\n<\/ol>\n
              \n
              const createOrchestratorAgent = (model: any, contentAgent: Agent) => {\r\n    return new Agent({\r\n        name: "Infographic Orchestrator",\r\n        instructions: `\r\n            You are the manager of an infographic generation pipeline.\r\n            Your goal is to take a URL, fetch the content, create a prompt, \r\n            and finally generate an image.\r\n            \r\n            Follow these steps strictly:\r\n            1. Use 'fetch_article' to get the article content.\r\n            2. Generate a detailed infographic prompt based on that content.\r\n            3. Call 'image_generator' with the prompt to create the final image.\r\n        `,\r\n        model,\r\n        tools: [\r\n            contentAgent.asTool({\r\n                toolName: "fetch_article",\r\n                toolDescription: "Fetches article content from a URL.",\r\n            }),\r\n            imageGeneratorTool,\r\n        ],\r\n    });\r\n};<\/code><\/pre>\n<\/div>\n
              The Pipeline Flow<\/h3>\n
              \nWhen generateInfographicForUrl(url)<\/code> is called, the orchestrator executes the following pipeline:\n<\/p>\n
              \n
              const result = await run(\r\n    orchestratorAgent,\r\n    `Follow the infographic pipeline for this article: ${url}\r\n    \r\n    Step 1: Fetch the article content.\r\n    Step 2: Generate a detailed prompt for an infographic.\r\n    Step 3: CALL the 'image_generator' tool with that prompt. (MANDATORY)\r\n    \r\n    Finally, return ONLY a breakdown as JSON in this format:\r\n    {\r\n      "title": "Article Title",\r\n      "image": "The generated image URL",\r\n      "article_url": "${url}",\r\n      "description": "Short summary",\r\n      "prompt": "The full detailed prompt you used for 'image_generator'"\r\n    }`,\r\n    { maxTurns: 10 }\r\n);<\/code><\/pre>\n<\/div>\n
              \nThe result is a structured JSON object containing:\n<\/p>\n\n\n\n\n\n\n\n\n\n
              Field<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
              title<\/code><\/td>\nArticle title<\/td>\n<\/tr>\n
              image<\/code><\/td>\nGenerated infographic URL<\/td>\n<\/tr>\n
              article_url<\/code><\/td>\nOriginal article URL<\/td>\n<\/tr>\n
              description<\/code><\/td>\nShort summary<\/td>\n<\/tr>\n
              prompt<\/code><\/td>\nThe full prompt used for image generation<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
              Prompt Engineering<\/h3>\n
              \nThe key to generating high-quality infographics lies in the prompt engineering. The orchestrator agent is instructed to create a detailed infographic prompt<\/strong> based on the article content. This prompt should include:\n<\/p>\n