it could not connect to api on submit button -
const response = await axios.post("http://localhost:3000/api/completions"
it gives me error : Refused to connect to '
http://localhost:3000/api/completions' because it violates the following Content Security Policy directive: "default-src
https://app.powerbi.com data: blob: 'unsafe-inline' 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
i have attached code and running another server side node js api and i have created
handleButtonClick function and try to call but still it gives same error.
"use strict";
import powerbi from "powerbi-visuals-api";
import "./../style/visual.less";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import axios from "axios";
import { VisualFormattingSettingsModel } from "./settings";
export class Visual implements IVisual {
private target: HTMLElement;
private updateCount: number;
private newObject: object;
private newPrompt: string;
constructor(options: VisualConstructorOptions) {
// console.log('Visual constructor', options);
this.target = options.element;
this.updateCount = 0;
const containerDiv = document.createElement("div");
const inputField = document.createElement("input");
inputField.type = "text";
inputField.id = "inputField";
inputField.placeholder = "Enter your input";
inputField.addEventListener("focus", function () {
this.value = "";
});
const submitButton = document.createElement("button");
submitButton.id = "submitBtn";
submitButton.type = "submit";
submitButton.textContent = "Submit";
submitButton.addEventListener("click",async function () {
const inputValue = inputField.value;
const answerDiv = document.getElementById("answer");
answerDiv.textContent = `You entered: ${inputValue}`;
const apiKey = "apikey";
const examplesObject = this.newObject;
try {
prompt: `User: ${inputValue}\nOpenAI:`,
examples: examplesObject,
maxTokens: 50,
temperature: 0.7,
apiKey: apiKey,
});
const generatedAnswer = response.data.choices[0].text;
answerDiv.textContent = `Answer: ${generatedAnswer}`;
}
catch (error) {
console.error("Error calling ChatGPT API:", error);
}
}.bind(this));
const answerDiv = document.createElement("div");
answerDiv.id = "answer";
containerDiv.appendChild(inputField);
containerDiv.appendChild(submitButton);
containerDiv.appendChild(answerDiv);
// Assuming this.target refers to the container where you want to append the elements
this.target.appendChild(containerDiv);
}
public update(options: VisualUpdateOptions) {
let dataViews = options.dataViews;
// console.log("dataviews", dataViews);
let categorical = dataViews[0].categorical;
let category = categorical.categories;
let dataValue = categorical.values
console.log("category", category);
console.log("dataValue", dataValue);
// console.log(categorical.categories[0].source.displayName)
function createVariable(name, value) {
const obj = {};
obj[name] = value;
return obj;
}
const categoryObjects = category.map((category, index) => {
const createdVariable = createVariable(category.source.displayName, category.values);
return createdVariable
})
const dataObjects = dataValue.map((dataValue, index) => {
const dataVariable = createVariable(dataValue.source.displayName, dataValue.values)
return dataVariable
})
// const categoryObjects = category.map((category, index) => {
// return {
// category: category.source.displayName,
// categoryData :category.values,
// dataValue: dataValue[index].values,
// };
// });
console.log("Category Objects:", categoryObjects);
console.log("data Objects:", dataObjects);
const inputValue = (document.getElementById("inputField") as HTMLInputElement).value;
this.newObject=categoryObjects.concat(dataObjects);
// console.log("Generated Answer:", generatedAnswer);
// // Display the generated answer in the visual
// const answerDiv = document.getElementById("answer");
// answerDiv.textContent = `Answer: ${generatedAnswer}`;
}
public async handleButtonClick(inputValue: string,apiKeyNew:string,examplesObject:object) : Promise<string>{
const apiKey = apiKeyNew;
const prompt = `User: ${inputValue}\nOpenAI:`;
const examples = examplesObject;
// Add more examples as needed
const maxTokens = 50;
const response = await axios.post(
{
prompt,
"model":"text-davinci-002",
examples,
max_tokens: maxTokens,
temperature: 0.7,
},
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${apiKey}`,
},
}
);
return response.data.choices[0].text;
}
}