Let's create an AI Art Generator using OpenAI's DALL·E 2 and a gallery using the Kintone web database together!

• Completed Project
• Get Started
• Get Your Free Kintone Database
• Workshop Steps
• Quick Dive into OpenAI's API
  • What is DALL-E?
• Debugging
  • When buttons are not showing up on Kintone Record
  • Errors related to OpenAI API Keys
  • Errors related to .env
  • Errors related to kintone-customize-uploader
    • kintone-customize-uploader Error 1
    • kintone-customize-uploader Error 2
  • Error when trying to install kintone-customize-uploader
  • Errors related to Node.js & npm
  • npm install command is not working
  • npm run upload failed?
  • ChatGPT API Key vs. DALL-E API Key
  • Not seeing a highlighted TODO:?
• Completed Code
• Overview of the Repo

Clone the Repo & Install Dependencies 💪

First, clone the kintone-workshops/ai-kintone-gallery repo! 🚀
Then go inside the folder & install the dependencies!

cd Downloads

git clone https://github.com/kintone-workshops/ai-kintone-gallery

cd ai-kintone-gallery

npm install

npm install -g @kintone/customize-uploader

Open the ai-kintone-gallery folder in VS Code as well:

code .

kintone.dev/new/

• ⚡ Only use lowercase, numbers, & hyphens in your subdomain
• ⚠ Do not use uppercase or special characters

For more information, check out the Workshop_Steps.md > B. Get Your Free Kintone Database section!

• A. Get Started - Clone the Repo & Install Dependencies
• B. Get Your Free Kintone Database
• C. Create a .env file
• D. Create a Kintone Web Database App
• E. Generate an API Token for Kintone App
• F. Edit Your customize-manifest.json
• G. Create an OpenAI API Key
• H. Edit main.js
• I. Compile and upload the code to Kintone
• J. Add a record to the Kintone App to generate an image

OpenAI's AI system that generates images from textual descriptions.
The Image generation APIs are currently released as a public beta.

Based on a Generative Pre-trained Transformer 3 (GPT-3) neural network architecture

• Trained on massive amount of text data (i.e., the Internet)
• Goal is to "comprehend" natural language

DALL-E can generate a wide range of images

• Everything from abstract art to photo-like scenes

3 methods for interacting with images:

• Generating new images based on a text prompt
• Editing an existing image based on a text prompt
• Generating variations based on an existing image

Pricing is per image and varies by resolution:

• 1024×1024 = $0.020
• 512×512 = $0.018
• 256×256 = $0.016

Let's Fix Those Problems 💪

Here is a rundown of common problems that may occur & their solutions!

1. Verify the code was uploaded to Kintone
2. Verify the filed codes are set correctly
   • Check the D. Create a Kintone Web Database App section for the correct field codes

Are you not getting any images even though you have a .env file with your OpenAI API Key?

Open console and check for the following error message: openai.error.RateLimitError: you exceeded your current quota, please check your plan and billing details

If you get this error message, then you have exceeded your free trial credits.
You will need to upgrade to a paid plan to continue using the API.

Check your OpenAI API usage here:
https://platform.openai.com/account/usage

⚠️ Note: OpenAI only gives you free credits for the first account associated with your phone number.
Subsequent accounts are not granted free credits.

If you get one of the following error messages:

• [webpack-cli] Error: Missing environment variable: KINTONE_BASE_URL
• [webpack-cli] Error: Missing environment variable: KINTONE_PASSWORD
• [webpack-cli] Error: Missing environment variable: KINTONE_USERNAME
• [webpack-cli] Error: Missing environment variable: VIEW_ID
• [webpack-cli] TypeError: Cannot convert undefined or null to object
• Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
• Failed to find .env file at default paths: [./.env,./.env.js,./.env.json]
• Failed to upload JavaScript/CSS files
• KintoneRestAPIError: [520] [CB_WA01] Password authentication failed...

Then please verify that

• your .env file has been correctly configured
• your username and password for your Kintone account are correct
• you have not modified the .env.example

Error Message:

Options: {"command":"kintone-customize-uploader","commandArgs":["customize-manifest.json"],"options":{"expandEnvs":false,"noOverride":false,"silent":false,"useShell":false,"verbose":true}}
Found .env file at default path: ./.env
spawn kintone-customize-uploader ENOENT
Parent process exited with signal: 1. Terminating child process...

If you get the above error message, please verify that you have installed the kintone-customize-uploader package.

Solution:

npm install -g kintone-customize-uploader

Error Message:
KintoneRestAPIError: [403] [CB_NO02] No privilege to proceed. (YvIvLH6UrE8kqnRjT7Va)

If you get the above error, the Kintone account you are using to upload the code is not a Kintone Administrator.

Solution:
Use a Kintone account that has Kintone Administrator privileges. Only Kintone Administrators can upload code to Kintone, regardless of the permissions set for the App.

For detailed steps, checkout this Developer Forum post: https://forum.kintone.dev/t/766

Error:

• npm ERR! code EACCES
• npm ERR! syscall mkdir
• npm ERR! path /usr/local/lib/node_modules/@kintone
• npm ERR! errno -13
• npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@kintone'

Solution:

sudo npm install -g kintone-customize-uploader

Error Message:

vite build --emptyOutDir

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'node:'
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:782:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Solution:

cd ai-kintone-gallery
npm install

1. Verify the Node.js & npm versions inside the ai-kintone-gallery folder
2. Just installed Node.js? Verify you configured Node.js versions inside the ai-kintone-gallery folder

• Mac: nodenv local 14.5.0
• Windows: nvm use 14.5.0

Not the correct versions, or confused? 🤔 → Check out the Guide on Installing Node.js & npm Doc

@kintone/customize-uploader not working? Let's try the following:

(1) Verify that customize uploader was installed globally

• npm install -g @kintone/customize-uploader

(2) Verify that the .env login info is correct (including the password)

• ⚠️ Make sure your login info is inside the .env file & NOT the .env.example file!
• ⚠️ Verify that KINTONE_BASE_URL input is correctly formatted:
  • ✅ Correct Format: https://example.kintone.com
  • ❌ Incorrect Format: https://example.kintone.com/ or example.kintone.com
• ⚠️ Re-run the npm commands after saving the .env file
• ⚙️ Details: Step 4 - Create a .env File

(3) Verify your customize-manifest.json was updated with the correct App ID

• ⚙️ Details: Step 5 - Update customize-manifest.json with the App ID

(4) Verify that the npm run build command was run before the npm run upload

The API keys are the same for both ChatGPT and DALL-E.
If you already have an API key for ChatGPT, you can use the same one for DALL-E.

If you do not have an API key, generate one by going to OpenAI API's API keys setting page.

Click the Install button on the VS Code pop-up message to install TODO Highlight extension.

If you want the completed code for the index.js file, you can find it here:
Solution