{"id":46815,"date":"2024-10-30T00:00:00","date_gmt":"2024-10-30T07:00:00","guid":{"rendered":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/blog\/automate-slide-creation-using-openai-and-node-js\/"},"modified":"2026-03-30T11:48:19","modified_gmt":"2026-03-30T18:48:19","slug":"automate-slide-creation-using-openai-and-node-js","status":"publish","type":"post","link":"https:\/\/griddb-linux-hte8hndjf8cka8ht.westus-01.azurewebsites.net\/en\/blog\/automate-slide-creation-using-openai-and-node-js\/","title":{"rendered":"Automate Slide Creation Using OpenAI and Node.js"},"content":{"rendered":"

With the rise of AI tools, we can automate many manual workloads, including creating presentation slides. Developers can generate slide content programmatically by leveraging OpenAI’s language models and Node.js. This automation surely will save time. By using OpenAI for content generation and Node.js for orchestration, you can effortlessly streamline the process of creating compelling and informative presentations.<\/p>\n

In this post, we will use the Assistant API model from OpenAI to automate slide content creation, Node.js to create the slide document, and GridDB to save the slide information.<\/p>\n

Running the Project<\/h2>\n

Clone the source code from this GitHub repository<\/a>.<\/p>\n

\n
git clone https:\/\/github.com\/griddbnet\/Blogs.git --branch slides<\/code><\/pre>\n<\/div>\n
You also need to install Node.js<\/a> and GridDB<\/a> for this project to run. If the software requirements are installed, change the directory to the apps<\/code> project directory and then install all the dependencies:<\/p>\n
\n
cd apps\nnpm install <\/code><\/pre>\n<\/div>\n
Create a .env<\/code> file and copy all environment variables from the .env.example<\/code> file. You need an OpenAI key for this project, please look in this section<\/a> on how to get the key.<\/p>\n
\n
OPENAI_API_KEY=sk-proj-secret\nVITE_APP_URL=http:\/\/localhost:3000<\/code><\/pre>\n<\/div>\n
You can change the VITE_APP_URL<\/code> to your needs and then run the project by running this command:<\/p>\n
\n
npm run start:build<\/code><\/pre>\n<\/div>\n
Then open the browser and go to the app URL. Select the data sample and then click the Create Slide<\/strong> button.<\/p>\n
\"\"<\/a><\/p>\n
If the slide presentation is created successfully, a download link will be provided.<\/p>\n
Getting Started<\/h2>\n
1. Installing Node.js<\/h3>\n
This project will run on the Node.js platform. You need to install it from here<\/a>. For this project, we will use the nvm<\/code> package manager and Node.js v16.20.2
\nLTS version.<\/p>\n
\n
# installs nvm (Node Version Manager)\ncurl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.7\/install.sh | bash\n\n# download and install Node.js\nnvm install 16\n\n# verifies the right Node.js version is in the environment\nnode -v # should print `v16.20.2`\n\n# verifies the right NPM version is in the environment\nnpm -v # should print `8.19.4``<\/code><\/pre>\n<\/div>\n
To connect Node.js and GridDB database, you need the gridb-node-api<\/a> npm package which is a Node.js binding developed using GridDB C Client and Node addon API.<\/p>\n
2. Setting Up GridDB<\/h3>\n
We will use the GridDB database to save recipes and it’s nutrition analysis. Please look at the guide<\/a> for detailed installation. We will use Ubuntu 20.04 LTS here.<\/p>\n
Run GridDB and check if the service is running. Use this command:<\/p>\n
\n
sudo systemctl status gridstore<\/code><\/pre>\n<\/div>\n
If not running try to run the database with this command:<\/p>\n
\n
sudo systemctl start gridstore<\/code><\/pre>\n<\/div>\n
3. Setup OpenAI Keys<\/h3>\n
The OpenAI key is on a project basis, so we need to create a project first in the OpenAI platform.<\/p>\n
\"\"<\/a><\/p>\n
To access any OpenAI services, you need a valid key. Go to this link<\/a> and create a new OpenAI key, make sure to select the right project.<\/p>\n
\"\"<\/a><\/p>\n
You need also to enable any models that you use on a project. For this project, we will need the gpt-4o<\/code> model. Go to the project settings and then select which models to be enabled.<\/p>\n
\"\"<\/a><\/p>\n
You should save the OpenAI key on the .env<\/code> file and make sure not to include it in version control by adding it to the .gitignore<\/code>.<\/p>\n
4. Setup AI Assistant<\/h3>\n
This project needs an AI assistant. You need to set it first, go to the project dashboard, and create a new assistant.<\/p>\n
\"\"<\/a><\/p>\n
You need to pay attention to the Instruction<\/strong> field because it will dictate the behavior of the AI assistant. This is the instruction used for this assistant:<\/p>\n
\n
You are a data scientist assistant. When given data and a query, write the proper code and create the proper visualization.<\/code><\/pre>\n<\/div>\n
Another setup is you need to enable Code Interpreter<\/strong>, which means the assistant will be able to execute code in a sandbox environment, enabling your prompt to execute code. For more information on this feature, please click here<\/a>.<\/p>\n
After the AI assistant creation, you need to copy the assistant ID. This ID will be used as a reference in the code where you can send messages to the assistant.<\/p>\n
\n
const dataScienceAssistantId = \"asst_FOqRnMVXw0WShTSGw70NZJAX\"<\/code><\/pre>\n<\/div>\n
Data Examples<\/h2>\n
This project will use JSON data samples from car spare parts sales. The data reside in the data<\/code> directory. This is the spare part sales data for the year 2020 to the year 2024<\/a>:<\/p>\n
\n
[\n {\n  \"Year\": 2020,\n  \"Quarter\": \"Q1\",\n  \"Distribution channel\": \"Online Sales\",\n  \"Revenue ($M)\": 2.10,\n  \"Costs ($M)\": 1.905643,\n  \"Customer count\": 190,\n  \"Time\": \"2020 Q1\",\n  \"Product Category\": \"Engine Parts\",\n  \"Region\": \"North America\",\n  \"Units Sold\": 900,\n  \"Average Sale Price ($)\": 2333,\n  \"Discounts Given ($)\": 14000,\n  \"Returns ($)\": 4500,\n  \"Customer Satisfaction Rating\": 8.2,\n  \"Salesperson\": \"SP120\",\n  \"Marketing Spend ($)\": 18000\n },\n {\n  \"Year\": 2020,\n  \"Quarter\": \"Q1\",\n  \"Distribution channel\": \"Direct Sales\",\n  \"Revenue ($M)\": 2.15,\n  \"Costs ($M)\": 2.004112,\n  \"Customer count\": 200,\n  \"Time\": \"2020 Q1\",\n  \"Product Category\": \"Brakes\",\n  \"Region\": \"Europe\",\n  \"Units Sold\": 1000,\n  \"Average Sale Price ($)\": 2150,\n  \"Discounts Given ($)\": 12000,\n  \"Returns ($)\": 5000,\n  \"Customer Satisfaction Rating\": 8.0,\n  \"Salesperson\": \"SP121\",\n  \"Marketing Spend ($)\": 19000\n },\n ...\n {\n  \"Year\": 2024,\n  \"Quarter\": \"Q2\",\n  \"Distribution channel\": \"Direct Sales\",\n  \"Revenue ($M)\": 3.15,\n  \"Costs ($M)\": 2.525112,\n  \"Customer count\": 390,\n  \"Time\": \"2024 Q2\",\n  \"Product Category\": \"Brakes\",\n  \"Region\": \"Europe\",\n  \"Units Sold\": 1500,\n  \"Average Sale Price ($)\": 2095,\n  \"Discounts Given ($)\": 22000,\n  \"Returns ($)\": 17000,\n  \"Customer Satisfaction Rating\": 9.1,\n  \"Salesperson\": \"SP144\",\n  \"Marketing Spend ($)\": 38000\n }\n]<\/code><\/pre>\n<\/div>\n
Ideally, the data should be uploaded via the user interface. However, for simplicity in this project, the data will be directly processed when you choose the data samples from the data samples dropdown.<\/p>\n
How can OpenAI process the file directly?<\/strong><\/p>\n
The answer is, that you need to upload manually the data sample files first. Go to the project dashboard and upload the files.<\/p>\n
\"\"<\/a><\/p>\n
You need to pay attention to the purpose of the uploaded files. In this project, the data sample files are used as assistants<\/strong> files.<\/p>\n
Later these file IDs will be used to identify which file is used when the user selects the data sample from the dropdown.<\/p>\n
Generating Content<\/h2>\n
When the user selects the data sample and clicks the Create Slide<\/strong> button. The Assistant API will generate the image and text for the content slide. These are a few important steps in the code to generate the slide content:<\/p>\n
1. Analyze Data Samples<\/h3>\n
OpenAI will analyze the selected data sample then it will calculate the profit by quarter and year then visualize the plot.<\/p>\n
The prompt for this process is:<\/p>\n
\n
const analyzeDataPrompt = \"Calculate the profit (revenue minus cost) by quarter and year, and visualize as a line plot across the distribution channels, where the colors of the lines are green, light red, and light blue\"<\/code><\/pre>\n<\/div>\n
And this code will process the prompt and the selected file (see fileId<\/code>)<\/p>\n
\n
 const thread = await openai.beta.threads.create({\n  messages: [\n   {\n    \"role\": \"user\",\n    \"content\": analyzeDataPrompt,\n    \"attachments\": [\n     {\n      file_id: fileId,\n      tools: [{ type: \"code_interpreter\" }]\n     }\n    ]\n   }\n  ]\n });<\/code><\/pre>\n<\/div>\n
From this code, you can get the plot image. It will be saved in the public directory and will be used in the slide content.<\/p>\n
2. Generate Bullet Points<\/h3>\n
The AI Assistant will give an insight into the data and will generate bullet points. This is the prompt to instruct AI to give two insights about the data:<\/p>\n
\n
const insightPrompt = `Give me two medium-length sentences (~20-30 words per sentence) of the most important insights from the plot you just created, and save each sentence as an item in one array. Give me a raw array, no formatting, no commentary. These will be used for a slide deck, and they should be about the 'so what' behind the data.`<\/code><\/pre>\n<\/div>\n
3. Generate Insight Title<\/h3>\n
The last step is generating a title for the insight. This is the prompt that is responsible for that:<\/p>\n
\n
const titlePrompt = \"Given the plot and bullet point you created, come up with a very brief title only for a slide. It should reflect just the main insights you came up with.\"<\/code><\/pre>\n<\/div>\n
The full code for generating slide content is in the libs\/ai.js<\/code><\/a> file.<\/p>\n
Generate Slides<\/h2>\n
This project uses the PptxGenJS<\/a> package to generate the slides. You can look at the full code in the libs\/pptx.js<\/code> file.<\/p>\n
This is the code that calls the createPresentation()<\/code> function when all the AI-generated slide information is ready.<\/p>\n
\n
\/\/...\nif (bulletPointsSummary.status === \"completed\") {\n                    const message = await openai.beta.threads.messages.list(thread.id)\n                    const dataVisTitle = message.data[0].content[0].text.value\n\n                    presentationOptions = {\n                        title: slideTitle,\n                        subtitle: slideSubtitle,\n                        dataVisTitle: dataVisTitle,\n                        chartImagePath: path.join(__dirname, \"public\", `${filename}`),\n                        keyInsights: \"Key Insights:\",\n                        bulletPoints: bulletPoints,\n                        outputFilename: path.join(__dirname, 'public', pptxFilename)\n                    };\n\n                    try {\n                        createPresentation(presentationOptions)\n                    } catch (error) {\n                        console.log(error)\n                    }\n}\n\/\/...<\/code><\/pre>\n<\/div>\n
Just note that the generated presentation file will be saved in the public<\/code> directory with each a unique name.<\/p>\n
Slides Information<\/h2>\n
To save the slide information, we will use the GridDB database. These are the database field’s documentation:<\/p>\n\n\n\n\n\n\n\n\n\n\n
Field Name<\/th>\nType<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
id<\/td>\nINTEGER<\/td>\nA unique identifier for each record. This is the primary key for the container and must be unique for each entry.<\/td>\n<\/tr>\n
title<\/td>\nSTRING<\/td>\nThe main title of the slide. It is a short descriptive title summarizing the content of the slide.<\/td>\n<\/tr>\n
subtitle<\/td>\nSTRING<\/td>\nA secondary title or subheading providing additional context or a brief description related to the main title.<\/td>\n<\/tr>\n
chartImage<\/td>\nSTRING<\/td>\nThe URL or path to an image of a chart associated with the slide, used to link visual data representations.<\/td>\n<\/tr>\n
bulletPoints<\/td>\nSTRING<\/td>\nA string containing bullet points that summarize key information or highlights of the slide. Each bullet point is typically separated by a special character or newline.<\/td>\n<\/tr>\n
pptx<\/td>\nSTRING<\/td>\nThe URL or path to the PowerPoint file (.pptx) that contains the slide, used to link the presentation file including the slide.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
The griddbservices.js<\/code> and libs\/griddb.js<\/code> files are responsible for saving all the slide information to the database.<\/p>\n
Server Routes<\/h2>\n
The Node.js server provides a few routes for the client. This is the full documentation for the routes:<\/p>\n\n\n\n\n\n\n\n\n\n\n
Method<\/th>\nRoute<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
GET<\/td>\n\/<\/code><\/td>\nServes the index.html<\/code> file from the ‘dist’ folder<\/td>\n<\/tr>\n
GET<\/td>\n\/create\/:fileId<\/code><\/td>\nTriggers the AI assistant to process a file and create a presentation. Returns the save status and PPTX file name<\/td>\n<\/tr>\n
GET<\/td>\n\/metadata<\/code><\/td>\nServes the metadata.json<\/code> file from the data<\/code> directory<\/td>\n<\/tr>\n
GET<\/td>\n\/data\/files<\/code><\/td>\nLists all JSON filenames in the data<\/code> directory<\/td>\n<\/tr>\n
GET<\/td>\n\/data\/files\/:filename<\/code><\/td>\nServes a specific JSON file from the data<\/code> directory<\/td>\n<\/tr>\n
GET<\/td>\n\/slides<\/code><\/td>\nRetrieves all slides data from the database<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
The most important route is \/create\/:fileId<\/code> which triggers the AI assistant to analyze data samples, create a presentation, and then save all slide information to the database.<\/p>\n
\n
app.get('\/create\/:fileId', async (req, res) => {\n const fileId = req.params.fileId\n\n try {\n  const result = await aiAssistant(fileId)\n\n  if (result.status === \"completed\") {\n   const {\n    title: titlePptx,\n    subtitle: subtitlePptx,\n    dataVisTitle: dataVisTitlePptx,\n    chartImage: chartImagePptx,\n    bulletPoints: bulletPointsPptx,\n    outputFilename: pptxFile\n   } = result.data\n\n   const saveDataStatus = await saveData({ titlePptx, subtitlePptx, dataVisTitlePptx, chartImagePptx, bulletPointsPptx, pptxFile })\n\n   res.json({\n    save: saveDataStatus,\n    data: result.data,\n    pptx: result.pptx\n   })\n  } else {\n   res.status(500).json({\n    error: 'Task not completed', status: result.status\n   })\n  }\n\n } catch (error) {\n  console.error('Error in AI Assistant:', error)\n  res.status(500).json({ error: 'Error in AI Assistant', details: error.message })\n }\n})<\/code><\/pre>\n<\/div>\n
The aiAssistant()<\/code> function will analyze the data sample, create a presentation return all information about the slide, and then save those slide information to the GridDB database using the saveData()<\/code> function.<\/p>\n
To get all the slide data just go to the \/slides<\/code> route and it will respond with all slide data saved in the database.<\/p>\n
\"\"<\/a><\/p>\n
User Interface<\/h2>\n
\"\"<\/a><\/p>\n
The main user interface consists of two components:<\/p>\n