diff --git a/examples/ai-image-generator/components/PromptInput.jsx b/examples/ai-image-generator/components/PromptInput.jsx index 9931a2660..e134d1225 100644 --- a/examples/ai-image-generator/components/PromptInput.jsx +++ b/examples/ai-image-generator/components/PromptInput.jsx @@ -1,7 +1,3 @@ -// components/TextInput.js - -import React, { useState } from "react"; - const TextInput = ({ label, placeholder, value, onChange }) => { return (
diff --git a/examples/ai-image-generator/package.json b/examples/ai-image-generator/package.json index 28af6f65c..0ee259b3e 100644 --- a/examples/ai-image-generator/package.json +++ b/examples/ai-image-generator/package.json @@ -2,6 +2,7 @@ "name": "ai-image-generator", "version": "0.1.0", "license": "MIT", + "author": "horea@miro.com", "scripts": { "build": "next build", "start": "next dev", @@ -13,7 +14,7 @@ "dotenv": "^16.0.3", "mirotone": "5", "next": "^13.0.0", - "openai": "^4.7.1", + "openai": "^4.8.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/ai-image-generator/pages/api/openai.js b/examples/ai-image-generator/pages/api/openai.js index 300597677..9330a522d 100644 --- a/examples/ai-image-generator/pages/api/openai.js +++ b/examples/ai-image-generator/pages/api/openai.js @@ -7,15 +7,11 @@ const openai = new OpenAI({ export default async (req, res) => { // grab prompt from the front end let prompt = await req.body.prompt; - console.log("hello"); - console.log(prompt); try { const response = await openai.images.generate({ prompt: prompt, }); - console.log("response after open.img.generate"); - console.log(response); let image_url = response.data[0].url; // send url to front end to display the image res.status(200).json({ diff --git a/examples/ai-image-generator/pages/index.jsx b/examples/ai-image-generator/pages/index.jsx index 71869dc00..2044e1c09 100644 --- a/examples/ai-image-generator/pages/index.jsx +++ b/examples/ai-image-generator/pages/index.jsx @@ -5,7 +5,6 @@ import Button from "../components/Button"; export const getServerSideProps = async function getServerSideProps({ req }) { const { miro } = initMiro(req); - // redirect to auth url if user has not authorized the app if (!(await miro.isAuthorized(""))) { return { @@ -15,26 +14,15 @@ export const getServerSideProps = async function getServerSideProps({ req }) { }, }; } - - const api = miro.as(""); - - const boards = []; - - for await (const board of api.getAllBoards()) { - boards.push(board.name || ""); - } - return { - props: { - boards, - }, + props: {}, }; }; export default function Main({ boards, authUrl }) { useEffect(() => { + removeSpinner(); if (new URLSearchParams(window.location.search).has("panel")) return; - window.miro.board.ui.on("icon:click", async () => { window.miro.board.ui.openPanel({ url: `/?panel=1`, @@ -45,15 +33,24 @@ export default function Main({ boards, authUrl }) { // Register the drop event handler once. useEffect(() => { window.miro.board.ui.on("drop", drop); - console.log("drop event is running"); }, []); //drag and drop logic const drop = async (e) => { - const { x, y, target } = e; + showSpinner(); + const { initialX, initialY, target } = e; if (target instanceof HTMLImageElement) { - console.log("about to create image"); + let position = await window.miro.board.experimental.findEmptySpace({ + x: 0, + y: 0, + width: 200, + height: 200, + }); + console.log(position); + let x = position.x; + let y = position.y; + const image = await window.miro.board.createImage({ x, y, @@ -61,53 +58,53 @@ export default function Main({ boards, authUrl }) { }); await window.miro.board.viewport.zoomTo(image); } + removeSpinner(); }; const [inputValue, setInputValue] = useState(""); - //handles the response being returned from backend (URL of image) - const [response, setResponse] = useState(""); - //handles the prompt input being typed in const handleInputChange = (newValue) => { setInputValue(newValue); }; // Shows spinner while API calls are in progress - function showSpinner() { - document.querySelector(".spinner").classList.add("show"); + async function showSpinner() { + let spinner = await document.getElementById("spinner"); + spinner.style.visibility = "visible"; } // Removes spinner when API calls are finished and data is returned - function removeSpinner() { - document.querySelector(".spinner").classList.remove("show"); + async function removeSpinner() { + let spinner = await document.getElementById("spinner"); + spinner.style.visibility = "hidden"; } const handleButtonClick = async () => { - //spinner should start once the API call is made + //setting the image source to be a transparent color, otherwise we have a border which looks bad + document.querySelector("#image").src = + "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA"; showSpinner(); - setResponse(""); // post our prompt to our backend -try { - const response = await fetch("/api/openai", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ prompt: inputValue }), - }); + try { + const response = await fetch("/api/openai", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ prompt: inputValue }), + }); - const data = await response.json(); - let imageUrl = data.data; + //get the response back from backend, which has the URL which we are looking for + const data = await response.json(); + let imageUrl = data.data; - console.log(imageUrl); - setResponse(imageUrl); - document.querySelector("#image").src = imageUrl; -} finally { - removeSpinner(); -} - removeSpinner(); + document.querySelector("#image").src = imageUrl; + removeSpinner(); + } catch (err) { + console.log(err); + } }; if (authUrl) { @@ -124,6 +121,7 @@ try { return (
+ {/* Text input which defines the prompt to the API call to OpenAI */}
+ {/* Button which starts the API call to OpenAI */}