{"id":3404,"date":"2023-08-06T22:37:35","date_gmt":"2023-08-06T19:37:35","guid":{"rendered":"https:\/\/potentsky.com\/fse-staging\/?page_id=3404"},"modified":"2023-08-06T22:42:27","modified_gmt":"2023-08-06T19:42:27","slug":"openai-story-generator","status":"publish","type":"page","link":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/","title":{"rendered":"OpenAI Story generator"},"content":{"rendered":"\n<div id=\"text-generation-tool\">\n    <input type=\"text\" id=\"topic\" placeholder=\"Your Topic...\">\n    <button id=\"generate-button\">Generate Story!<\/button>\n    <div id=\"result-container\" style=\"display: none;\">\n        <div class=\"result-wrapper\">\n            <div class=\"result-content\">\n                <textarea id=\"result\" readonly><\/textarea>\n            <\/div>\n            <div class=\"copy-button-container\">\n                <button id=\"copy-button\">Copy<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div id=\"loading\" class=\"loader\" style=\"display: none;\"><\/div>\n<\/div>\n\n<style>\n    \/* Basic styles for the text generation tool *\/\n    #text-generation-tool {\n        width: 100%;\n        max-width: 600px;\n        margin: 0 auto;\n        font-family: Arial, sans-serif;\n    }\n\n    #topic {\n        width: 100%;\n        padding: 15px;\n        margin-bottom: 20px;\n        font-size: 16px;\n        border-radius: 5px;\n        border: 1px solid #ddd;\n    }\n\n    #generate-button {\n        display: block;\n        width: 100%;\n        padding: 15px;\n        margin-bottom: 20px;\n        font-size: 16px;\n        border: none;\n        border-radius: 5px;\n        color: #fff;\n        background-color: #3498db;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n    }\n\n    #generate-button:hover {\n        background-color: #2980b9;\n    }\n\n    #result-container {\n        display: none;\n        margin-bottom: 20px;\n    }\n\n    .result-wrapper {\n        position: relative;\n        overflow: hidden;\n    }\n\n    .result-content {\n        display: flex;\n    }\n\n    #result {\n        flex: 1;\n        height: 400px;\n        padding: 15px;\n        font-size: 16px;\n        border-radius: 5px;\n        border: 1px solid #ddd;\n        background-color: #f9f9f9;\n    }\n\n    .copy-button-container {\n        margin-top: 10px;\n        text-align: right;\n    }\n\n    #copy-button {\n        padding: 8px 12px;\n        font-size: 14px;\n        border: none;\n        border-radius: 5px;\n        color: #fff;\n        background-color: #3498db;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n    }\n\n    #copy-button:hover {\n        background-color: #2980b9;\n    }\n\n    \/* CSS for the loader *\/\n    .loader {\n        display: block;\n        margin: 50px auto;\n        border: 16px solid #f3f3f3; \/* Light grey *\/\n        border-top: 16px solid #3498db; \/* Blue *\/\n        border-radius: 50%;\n        width: 50px;\n        height: 50px;\n        animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n<\/style>\n<script>\n    document.getElementById(\"generate-button\").addEventListener(\"click\", function(e){\n        e.preventDefault();\n        \n        \n        var generateButton = document.getElementById(\"generate-button\");\n        \n        if (generateButton.disabled) {\n            return; \/\/ Prevent multiple clicks while content is being generated\n        }\n        \n        generateButton.disabled = true;\n        \n        \n        \n        var topic = document.getElementById('topic').value;\n        var prompt = \"Generate a 3 sentence story about \" + topic;\n        var loading = document.getElementById('loading');\n        var result = document.getElementById('result');\n        var resultC = document.getElementById('result-container');\n\n        \n\n\n        \n\n        loading.style.display = 'block';\n        result.style.display = 'none'; \/\/ hide result textarea\n        resultC.style.display = 'none';\n        \n\n        var formData = new FormData();\n        formData.append('action', 'openai_generate_text');\n        formData.append('prompt', prompt);\n\n        fetch('\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(response => response.json())\n        .then(data => {\n            loading.style.display = 'none';\n            if(data.success) {\n                result.value = data.data.choices[0].message.content; \n                result.style.display = 'block'; \/\/ show result textarea\n                resultC.style.display = 'block';\n                generateButton.disabled = false;\n            } else {\n                result.value = 'An error occurred: ' + data.data;\n                result.style.display = 'block'; \/\/ show result textarea\n                resultC.style.display = 'block';\n                generateButton.disabled = false;\n            }\n        })\n        .catch(error => {\n            loading.style.display = 'none';\n            result.value = 'An error occurred: ' + error.message;\n            result.style.display = 'block'; \/\/ show result textarea\n            resultC.style.display = 'block';\n            generateButton.disabled = false;\n            \n        });\n    });\n    \n    var copyButton = document.getElementById('copy-button');\n    copyButton.addEventListener('click', function() {\n        var result = document.getElementById('result');\n        result.select();\n        document.execCommand('copy');\n        alert('Copied to clipboard!');\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Generate Story! Copy<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3404","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>OpenAI Story generator - fse-staging<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OpenAI Story generator - fse-staging\" \/>\n<meta property=\"og:description\" content=\"Generate Story! Copy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"fse-staging\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-06T19:42:27+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/openai-story-generator\\\/\",\"url\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/openai-story-generator\\\/\",\"name\":\"OpenAI Story generator - fse-staging\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/#website\"},\"datePublished\":\"2023-08-06T19:37:35+00:00\",\"dateModified\":\"2023-08-06T19:42:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/openai-story-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/openai-story-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/openai-story-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OpenAI Story generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/#website\",\"url\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/\",\"name\":\"PotentSky\",\"description\":\"Everything You Need To Know\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/potentsky.com\\\/fse-staging\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"OpenAI Story generator - fse-staging","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/","og_locale":"en_US","og_type":"article","og_title":"OpenAI Story generator - fse-staging","og_description":"Generate Story! Copy","og_url":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/","og_site_name":"fse-staging","article_modified_time":"2023-08-06T19:42:27+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/","url":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/","name":"OpenAI Story generator - fse-staging","isPartOf":{"@id":"https:\/\/potentsky.com\/fse-staging\/#website"},"datePublished":"2023-08-06T19:37:35+00:00","dateModified":"2023-08-06T19:42:27+00:00","breadcrumb":{"@id":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/potentsky.com\/fse-staging\/openai-story-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/potentsky.com\/fse-staging\/"},{"@type":"ListItem","position":2,"name":"OpenAI Story generator"}]},{"@type":"WebSite","@id":"https:\/\/potentsky.com\/fse-staging\/#website","url":"https:\/\/potentsky.com\/fse-staging\/","name":"PotentSky","description":"Everything You Need To Know","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/potentsky.com\/fse-staging\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/pages\/3404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/comments?post=3404"}],"version-history":[{"count":2,"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/pages\/3404\/revisions"}],"predecessor-version":[{"id":3407,"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/pages\/3404\/revisions\/3407"}],"wp:attachment":[{"href":"https:\/\/potentsky.com\/fse-staging\/wp-json\/wp\/v2\/media?parent=3404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}