I’m a novice trying to make an open-source plugin as a hobby. The plugin will use generated images from openAi/Dalle2 api, etc.
I am able to get the url of the generated png, but I can’t seem to figure out how to place it in the document. Any help would be much appreciated. Here’s what I have so far.
// Basic Setup
var batchPlay = require("photoshop").action.batchPlay;
var core = require("photoshop").core;
var exeModal = require("photoshop").core.executeAsModal;
var psAlert = require("photoshop").core.showAlert;
var app = require("photoshop").app;
const uxp = require('uxp');
const storage = require('uxp').storage;
const fs = uxp.storage.localFileSystem;
const formats = uxp.storage.formats;
// Set up constants for the API endpoint and your access key
const API_ENDPOINT = "https://api.openai.com/v1/images/generations";
//see ACCESS_KEY in key.js
// Get a reference to the button element
const button = document.getElementById("generateButton");
// Add an event listener to the button
button.addEventListener("click", () => generateImage());
// Function to generate an image when the button is clicked
async function generateImage() {
console.log("Generating image...");
// Get the input prompt from the user
const inputPrompt = document.getElementById("inputPrompt").value;
const imageSize = document.getElementById("image-size").value;
console.log("prompt: " + inputPrompt);
console.log("image size: " + imageSize);
// Show the loading indicator
document.getElementById("generated-image").innerHTML = "Generating image...";
try {
// Make a POST request to the OpenAI API endpoint
const response = await fetch(API_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${ACCESS_KEY}`,
},
body: JSON.stringify({
prompt: inputPrompt,
model: "image-alpha-001",
num_images: 1,
size: imageSize,
response_format: "url",
}),
});
// Get the response data as a JSON object
const data = await response.json();
// Get the URL of the generated image from the API response
const imageUrl = data.data[0].url;
console.log(imageUrl);
// Fetch the image data from the URL
const imageResponse = await fetch(imageUrl);
console.log(imageResponse);
// Get the image data as a blob
const imageBlob = await imageResponse.blob();
console.log(imageBlob);
////////////////// NEED HELP WITH BELOW /////////////////////////////////
// Get a reference to the root folder of the plugin
var myFolder = await require("uxp").storage.localFileSystem.getFolder();
console.log("myFolder: " + myFolder);
var myFile = await myFolder.createFile("myFile.png", {overwrite: true});
console.log("myFile: " + myFile);
const saveFileToken = await require("uxp").storage.localFileSystem.createSessionToken(saveFile);
console.log("saveFileToken: " + saveFileToken);
//Place Image
//???
} catch (error) {
console.error(error);
}
}
// //SAVE FUNCTION
// async function savePNG(saveFileToken){
// const batchPlay = require("photoshop").action.batchPlay;
// await exeModal(async function () {
// await require('photoshop').action.batchPlay([
// {
// _obj: "placeEvent",
// ID: 2,
// null: {
// _path: saveFileToken,
// _kind: "local"
// },
// freeTransformCenterState: {
// _enum: "quadCenterState",
// _value: "QCSAverage"
// },
// offset: {
// _obj: "offset",
// horizontal: {
// _unit: "distanceUnit",
// _value: 0
// },
// vertical: {
// _unit: "distanceUnit",
// _value: 0
// }
// },
// replaceLayer: {
// _obj: "placeEvent",
// to: {
// _ref: "layer",
// _id: 2
// }
// },
// _options: {
// dialogOptions: "dontDisplay"
// }
// }
// ], {});
// })
// }```