American Roulette gun.Claim Your Free 999 Pesos Bonus Today

(@budirk)

I want to create an AI Form that can create a book. I use 2 code, that is front end in elementor HTML element and in code snippet (php) for authorize API.
This is the code for in code snippet :

function openai_generate_text() {
    // Get the topic and language from the AJAX request
    $prompt = $_POST['prompt'];
    $language = $_POST['language'];

    // Adjust the prompt based on the selected language
    if ($language === 'id') {
        $prompt = "Gunakan Bahasa Indonesia tentang " . $prompt;
    } else {
        $prompt = "Use English about " . $prompt;
    }

    // OpenAI API URL and key
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $api_key = 'API_KEY';  // Replace with your actual OpenAI API key

    // Headers for the OpenAI API
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    ];

    // Body for the OpenAI API
    $body = [
        'model' => 'gpt-3.5-turbo',
        'messages' => [['role' => 'user', 'content' => $prompt]],
        'temperature' => 0.7
    ];

    // Args for the WordPress HTTP API
    $args = [
        'method' => 'POST',
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120
    ];

    // Send the request
    $response = wp_remote_request($api_url, $args);

    // Handle the response
    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        wp_send_json_error("Something went wrong: $error_message");
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON in API response');
        } elseif (!isset($data['choices'])) {
            wp_send_json_error('API request failed. Response: ' . $body);
        } else {
            wp_send_json_success($data);
        }
    }

    // Always die in functions echoing AJAX content
    wp_die();
}

add_action('wp_ajax_openai_generate_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');


function enqueue_custom_scripts() {
    // Enqueue jsPDF library
    wp_enqueue_script('jspdf', 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js', array(), null, true);

    // Enqueue docx library
    wp_enqueue_script('docx', 'https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.27.0/docxtemplater-latest.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

This is the code in HTML elementor :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AI Book Generator</title>
        <link rel="stylesheet" >
        <link rel="stylesheet" href="styles.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div class="container" id="main-container">
            <h1 class="text-center">AI Book Generator</h1>
            <form id="input-form" class="my-4">
                <div class="form-group">
                    <label for="book-length">Book Length</label>
                    <input type="text" id="book-length" class="form-control" placeholder="Enter book length" required>
                </div>
                <div class="form-group">
                    <label for="gpt-role">Role of GPT-3.5</label>
                    <input type="text" id="gpt-role" class="form-control" placeholder="Enter role of GPT-3.5 (a name of an author you like or a profession GPT should simulate)" required>
                </div>
                <div class="form-group">
                    <label for="genre">Genre</label>
                    <input type="text" id="genre" class="form-control" placeholder="Enter genre (Science-Fiction, Science Book, Advisory Book, Mystery, ...)" value="" required>
                </div>
                <div class="form-group">
                    <label for="keywords">Keywords</label>
                    <input type="text" id="keywords" class="form-control" placeholder="Enter keywords (e.g. Math, Science, Computer Science, Philosophy, ...)" required>
                </div>
                <div class="form-group">
                    <input type="checkbox" id="auto-gen">
                    <label for="auto-gen">Auto Generate Chapters</label>
                </div>
                <button type="button" id="conceptButton" class="btn btn-primary">Generate Concept</button>
                <button type="button" id="contentButton" class="btn btn-primary">Generate Table of Contents</button>
                <button type="button" id="chaptersButton" class="btn btn-primary">Generate Chapters</button>
            </form>
            <div class="form-group">
                <label for="concept">Book Concept</label>
                <textarea id="concept" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="contents">Table of Contents</label>
                <textarea id="contents" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="chapters">Chapters</label>
                <div id="chapters" class="border p-2"></div>
            </div>
            <button type="button" id="exportButton" class="btn btn-primary">Export to TXT</button>
        </div>
<script>
// Define DOM elements
const conceptInput = document.getElementById('concept');
const conceptButton = document.getElementById('conceptButton');
const contentsInput = document.getElementById('contents');
const contentButton = document.getElementById('contentButton');
const chaptersDiv = document.getElementById('chapters');
const chaptersButton = document.getElementById('chaptersButton');
const autoGenCheckbox = document.getElementById('auto-gen');

// Define global variables
let tableOfContents = [];
let currentLine = 0;

// Generate content using WordPress AJAX
async function generateContent(role, prompt) {
    const formData = new FormData();
    formData.append('action', 'openai_generate_text');
    formData.append('prompt', prompt);
    formData.append('language', 'id');  // Add the language parameter if needed

    const response = await fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: formData
    });

    const data = await response.json();
    return data.data.choices[0].message.content;
}

// Disable inputs and buttons
function disableInputsAndButtons(inputs, buttons) {
    inputs.forEach(input => input.disabled = true);
    buttons.forEach(button => button.disabled = true);
}

// Get input values
function getInputValues() {
    const gptRole = document.getElementById('gpt-role').value;
    const bookLength = document.getElementById('book-length').value;
    const genre = document.getElementById('genre').value;
    const keywords = document.getElementById('keywords').value.split(',');
    return { gptRole, bookLength, genre, keywords };
}

// Event listeners for buttons
// conceptButton generates a concept
conceptButton.addEventListener('click', async () => {
    const { gptRole, bookLength, genre, keywords } = getInputValues();
    const prompt = Generate a ${bookLength}-word ${genre} concept with keywords: ${keywords.join(', ')}.;
    const concept = await generateContent(gptRole, prompt);
    conceptInput.value = concept;
});

// contentButton generates a table of contents
contentButton.addEventListener('click', async () => {
    const { gptRole, genre, keywords } = getInputValues();
    disableInputsAndButtons([conceptInput], [conceptButton]);

    const concept = conceptInput.value;
    const prompt = Based on the ${genre} concept: "${concept}" with keywords: ${keywords.join(', ')}, generate a table of contents. The table of contents should be only a list of chapters, no introductory or concluding text, no formatting, no empty lines, just a list of chapter names with a short description.;

    const contents = await generateContent(gptRole, prompt);
    contentsInput.value = contents;
});

// chaptersButton generates chapters
// if auto-gen is checked, it will generate chapters until the end of the table of contents
chaptersButton.addEventListener('click', async () => {
    const { gptRole, genre, keywords } = getInputValues();
    disableInputsAndButtons([conceptInput, contentsInput], [conceptButton, contentButton]);

    tableOfContents = contentsInput.value.split('\n').filter(line => line.trim() !== '');

    if (currentLine < tableOfContents.length) {
        const prompt = Based on the ${genre} chapter title: "${tableOfContents[currentLine]}" with keywords: ${keywords.join(', ')}, generate the chapter content.;
        let chapter = await generateContent(gptRole, prompt);

        // Replace newlines with <br> tags
        chapter = chapter.replace(/\n/g, '<br/>\n');

        chaptersDiv.innerHTML += <h2>${tableOfContents[currentLine]}</h2><p>${chapter}</p>;
        currentLine++;
        if (autoGenCheckbox.checked) {
            chaptersButton.click();
        }
    }
});

// exportButton exports the chapters to a text file
document.getElementById('exportButton').addEventListener('click', () => {
    const element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(chaptersDiv.innerHTML));
    element.setAttribute('download', 'chapters.txt');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
});



</script>
    </body>

It’s worked.
But, today I want to use openAI in Azure. So I should change, but stuck in authorize.
Please help me to change the code so I can use credit in Azure OpenAI. Maybe it can use AI Power plugin server side API?

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author senols
(@senols)

1 year, 1 month ago

Hi @budirk

Sorry for my late reply on this.

Were you able to solve this?

Thread Starter budirk
(@budirk)

1 year, 1 month ago

Now, I can use API from Azure OpenAI with these 2 file. But, I can’t integrate with AI Form token. Can you help me?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom AI Form’ is closed to new replies.