/ai-kintone-gallery

Save the results from trendy AI generators into a Kintone Database

Primary LanguageJavaScript

Build an OpenAI Art Generator & Gallery - JavaScript Workshop

banner.png

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

Outline

Completed Project

Kintone_OpenAI_ImageGenerator_Demo.gif

Get Started

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 .

Get Your Free Kintone Database

kintone.dev/new/

  • ⚡ Only use lowercase, numbers, & hyphens in your subdomain
  • ⚠ Do not use uppercase or special characters
Step 1: Fill out the Kintone Developer license sign-up form Step 2: Email address will be the login name & the subdomain will be your unique link
Step 3: Check for a "Welcome to Kintone! One More Step To..." email Step 4: Log into Kintone

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

Workshop Steps

Quick Dive into OpenAI's API

What is DALL-E?

OpenAI's AI system that generates images from textual descriptions

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

What is DALL-E?

Image generation APIs are currently released as a public beta

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

Debugging

Let's Fix Those Problems 💪

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

Errors related to .env

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

Errors related to kintone-customize-uploader

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

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...

Solution:

npm install -g kintone-customize-uploader

npm install command is not working

  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

npm run upload failed?

@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

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

Not seeing a highlighted TODO:?

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

  • vscode-setting-extension.png

Completed Code

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

Overview of the Repo

↯ Overview of the Repo ↯
File Purpose Need to Modify?
package.json Project's metadata & scripts for building and uploading the customization
.env.example The template for the .env file
.env Holds the Kintone login credential and View ID Yes! - Create it
customize-manifest.json Kintone Customize Uploader's configuration file Yes! - Add your App ID
src/main.js Heart of the project handling the API request body & adding a button Yes! Complete the code
src/style.css Styling for the project can go here
src/requests/aiPOSTRequest.js Function to call the OpenAI's DALL·E to generate an image
src/requests/kintonePUTRequest.js Function to upload the image file to Kintone.
vite.config.js Various settings for how and where our JavaScript compiles to
dist/KintoneCustomization.js Bundled JS generated by npm run build that will be uploaded to Kintone
docs/Workshop_Steps.md Step-by-step guide that we do during the workshop
docs/Slides.pdf Slides used during the workshop