Рет қаралды 1,421
This app implements image generation using AI (OpenAI) and shows how to drag and drop those images to a Miro Board. You can change out the api/openai.js route to use the AI model of your choice, just make sure to return the image URL!
Code for the app: github.com/miroapp/app-exampl...
OpenAI Library may have changed since the publishing of this video. For the latest syntax to use the official OpenAI Node.js Library: platform.openai.com/docs/libr...
For more details about mirotone: www.mirotone.xyz/css
For more info on how to deploy an app to AWS Amplify, check this video: • Deploy Next.js (Miro) ...
00:00 - Intro
00:18 - App Demo
01:48 - GitHub code README walkthrough
03:12 - Code walkthrough - .env.sample (How to get OpenAI API Key)
04:05 - Code walkthrough - Next.js app pages overview
04:40 - Code walkthrough - index.jsx (imports & useState)
05:20 - Code walkthrough - index.jsx (openPanel & drag and drop logic)
06:45 - Code walkthrough - index.jsx (handle generate button click and /api/openai route)
08:00 - Code walkthrough - pages/api/openai.js (use openai to generate image)
10:00 - Code walkthrough - index.jsx (HTML + basic input and button components)
10:35 - Code walkthrough - Mirotone Layout explanation
10:00 - Code walkthrough - index.jsx (HTML + basic input and button components)
11:17 - Code walkthrough - React components (components/PromptInput.jsx)
11:32 - Code walkthrough - React components (components/Button.jsx)
11:43 - Code walkthrough - index.jsx (HTML + basic input and button components)
12:03 - Code walkthrough - index.jsx (Image container and loader)
12:55 - App configuration (clone app-examples folder locally)
12:55 - App configuration (clone app-examples folder locally)
13:30 - App configuration - npm install / start
13:53 - App configuration - Create Miro app on developers.miro.com
13:53 - App configuration - Create Miro app on developers.miro.com
14:48 - App configuration - Install the app and get OAuth token
15:16 - App configuration - Run the App
15:50 - Outro